pet_uni/pages/FeedLog/index.vue

<template>
  <HeaderNav title="喂养档案" :is-back="true"></HeaderNav>
	<view class="app-wallpaper" :style="{
		backgroundImage:'url('+staticImage.wallpaperBgImage+')'
		}">
    <view class="feed-top">
      <view class="feed-container">
        <view class="feed-content">
          <view class="top-img">
            <u-image class="img" mode="aspectFill" width="100%" height="600" :src="detail.avatar || staticImage.banner">

            </u-image>
          </view>
          <view class="top-content row">
            <view class="content-item col-6 row">
              <view class="item-title">爱称：</view>
              <view class="item-content">{{detail.name}}</view>
            </view>
            <view class="content-item  col-6 row">
              <view class="item-title">性别：</view>
              <view class="item-content">{{detail.sex}}</view>
            </view>
            <view class="content-item  col-6 row">
              <view class="item-title">体重：</view>
              <view class="item-content">{{detail.weight}}kg</view>
            </view>
            <view class="content-item  col-6 row">
              <view class="item-title">种类：</view>
              <view class="item-content">{{detail.type_name}}</view>
            </view>
          </view>
        </view>
        <view class="feed-background">
          <view class="feed-background-content"></view>
        </view>
      </view>
    </view>
    <view class="feed-bottom">
      <view class="feed-container">
        <view class="feed-gun">
          <image class="img" mode="heightFix" :src="staticImage.feedGun" />
        </view>
        <view class="feed-content">
          <u-collapse>
            <u-collapse-item
                title="水碗饭碗"
            >
              <u-textarea :disabled="(type !== 'create')" v-model="detail.feedlist.meal" placeholder="请输入内容" ></u-textarea>
              <u-upload
                  :fileList="images.meal_imgs"
                  name="1"
                  multiple
                  :maxCount="(type === 'create')?10:images.meal_imgs"
                  :disabled="(type !== 'create')"
                  :deletable="(type === 'create')"
                  @delete="(res) => {uploadDel(res,'meal_imgs')}"
                  @afterRead="(res) => {uploadPut(res,'meal_imgs')}"
              >
                <u-image :src="staticImage.feedUpload"
                       mode="widthFix" width="130rpx" height="130rpx"></u-image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="主食情况"
            >
              <u-textarea :disabled="(type !== 'create')" v-model="detail.feedlist.food" placeholder="请输入内容" ></u-textarea>
              <u-upload
                  :fileList="images.food_imgs"
                  name="1"
                  multiple
                  :maxCount="(type === 'create')?10:images.food_imgs"
                  :disabled="(type !== 'create')"
                  :deletable="(type === 'create')"
                  @delete="(res) => {uploadDel(res,'food_imgs')}"
                  @afterRead="(res) => {uploadPut(res,'food_imgs')}"
              >
                <u-image :src="staticImage.feedUpload"
                       mode="widthFix" width="130rpx" height="130rpx"></u-image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="零食小吃"
            >
              <u-textarea :disabled="(type !== 'create')" v-model="detail.feedlist.snack" placeholder="请输入内容" ></u-textarea>
              <u-upload
                  :fileList="images.snack_imgs"
                  name="1"
                  multiple
                  :maxCount="(type === 'create')?10:images.snack_imgs"
                  :disabled="(type !== 'create')"
                  :deletable="(type === 'create')"
                  @delete="(res) => {uploadDel(res,'snack_imgs')}"
                  @afterRead="(res) => {uploadPut(res,'snack_imgs')}"
              >
                <u-image :src="staticImage.feedUpload"
                       mode="widthFix" width="130rpx" height="130rpx"></u-image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="喂药擦药"
            >
              <u-textarea :disabled="(type !== 'create')" v-model="detail.feedlist.drug" placeholder="请输入内容" ></u-textarea>
              <u-upload
                  :fileList="images.drug_imgs"
                  name="1"
                  multiple
                  :maxCount="(type === 'create')?10:images.drug_imgs"
                  :disabled="(type !== 'create')"
                  :deletable="(type === 'create')"
                  @delete="(res) => {uploadDel(res,'drug_imgs')}"
                  @afterRead="(res) => {uploadPut(res,'drug_imgs')}"
              >
                <u-image :src="staticImage.feedUpload"
                       mode="widthFix" width="130rpx" height="130rpx"></u-image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="需要注意"
            >
              <u-textarea :disabled="(type !== 'create')" v-model="detail.feedlist.note" placeholder="请输入内容" ></u-textarea>
              <u-upload
                  :fileList="images.note_imgs"
                  name="1"
                  multiple
                  :maxCount="(type === 'create')?10:images.note_imgs"
                  :disabled="(type !== 'create')"
                  :deletable="(type === 'create')"
                  @delete="(res) => {uploadDel(res,'note_imgs')}"
                  @afterRead="(res) => {uploadPut(res,'note_imgs')}"
              >
                <u-image :src="staticImage.feedUpload"
                       mode="widthFix" width="130rpx" height="130rpx"></u-image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="用品位置"
            >
              <u-textarea :disabled="(type !== 'create')" v-model="detail.feedlist.goods" placeholder="请输入内容" ></u-textarea>
              <u-upload
                  :fileList="images.goods_imgs"
                  name="1"
                  multiple
                  :maxCount="(type === 'create')?10:images.goods_imgs"
                  :disabled="(type !== 'create')"
                  :deletable="(type === 'create')"
                  @delete="(res) => {uploadDel(res,'goods_imgs')}"
                  @afterRead="(res) => {uploadPut(res,'goods_imgs')}"
              >
                <u-image :src="staticImage.feedUpload"
                       mode="widthFix" width="130rpx" height="130rpx"></u-image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="外出路线"
            >
              <u-textarea :disabled="(type !== 'create')" v-model="detail.feedlist.line" placeholder="请输入内容" ></u-textarea>
              <u-upload
                  :fileList="images.line_imgs"
                  name="1"
                  multiple
                  :maxCount="(type === 'create')?10:images.line_imgs"
                  :disabled="(type !== 'create')"
                  :deletable="(type === 'create')"
                  @delete="(res) => {uploadDel(res,'line_imgs')}"
                  @afterRead="(res) => {uploadPut(res,'line_imgs')}"
              >
                <u-image :src="staticImage.feedUpload"
                       mode="widthFix" width="130rpx" height="130rpx"></u-image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
          <u-collapse>
            <u-collapse-item
                title="其它事项"
            >
              <u-textarea :disabled="(type !== 'create')" v-model="detail.feedlist.other" placeholder="请输入内容" ></u-textarea>
              <u-upload
                  :fileList="images.other_imgs"
                  name="1"
                  multiple
                  :maxCount="(type === 'create')?10:images.other_imgs"
                  :disabled="(type !== 'create')"
                  :deletable="(type === 'create')"
                  @delete="(res) => {uploadDel(res,'other_imgs')}"
                  @afterRead="(res) => {uploadPut(res,'other_imgs')}"
              >
                <u-image :src="staticImage.feedUpload"
                       mode="widthFix" width="130rpx" height="130rpx"></u-image>
              </u-upload>
            </u-collapse-item>

          </u-collapse>
        </view>
        <view class="feed-background">
          <view class="feed-background-content"></view>
        </view>
      </view>
    </view>
	</view>

  <view class="footer-menu row" v-if="(type === 'detail')">
<!--    <view class="footer-button col-6">-->
<!--      <MzButton-->
<!--          title="删除"-->
<!--          button-color="#ffffff"-->
<!--          font-color="##262626"-->
<!--          button-width="250rpx"-->
<!--          @click=""-->
<!--      >-->
<!--      </MzButton>-->
<!--    </view>-->
    <view class="footer-button col-12">
      <MzButton
          title="修改"
          button-color="#4DC3B8"
          font-color="#FFFFFF"
          button-width="250rpx"
          @click="redirtTo('/pages/FeedLog/index?type=create&pet_id='+pet_id)"
      >
      </MzButton>
    </view>
  </view>
  <view class="footer-menu row" v-if="(type === 'create')">
    <view class="footer-button col-6">
      <MzButton
          title="取消"
          button-color="#ffffff"
          font-color="##262626"
          button-width="250rpx"
          @click="redirtTo('/pages/FeedLog/index?type=detail&pet_id='+pet_id)"
      >
      </MzButton>
    </view>
    <view class="footer-button col-6">
      <MzButton
          title="保存"
          button-color="#4DC3B8"
          font-color="#FFFFFF"
          button-width="250rpx"
          @click="submit"
      >
      </MzButton>
    </view>
  </view>
</template>

<script>
	import {
		imghost
	} from '@/config/host.js'
	import HeaderNav from '@/components/HeaderNav/Index.vue';
	import FooterNav from '@/components/FooterNav/Index.vue';
	import RightNav from '@/components/RightNav/Index.vue';
	import MzButton from '@/components/MzButton/Index.vue';
	import api from '@/utils/functions.js';
  import {editFeed, feedLog} from "@/api/pet";
	export default {
		components: {
			HeaderNav,
			FooterNav,
			RightNav,
			MzButton
		},
		data() {
			return {
				title: 'Hello',
				loading: true,
        type:'detail',
				staticImage: {
					screenActiveImg: imghost + '/static/image/order-screen-active.png',
					orderCardBackground: imghost + '/static/image/order-card-background.png',
					wallpaperBgImage:imghost +'/static/image/background.png',
          petGun:imghost +'/static/image/pet_gun.png',
          feedGun:imghost +'/static/image/feed-gun.png',
          addPet:imghost +'/static/image/add-pet.png',
          banner:imghost +'/static/image/banner.png',
          feedUpload:imghost +'/static/image/feed-upload.png',
				},
        pet_id:0,
        detail:{
          name:'',
          sex:'',
          weight:'',
          type_name:'',
          avatar:'',
          feedlist:{
            meal:'',
            meal_imgs:[],
            food:'',
            food_imgs:[],
            snack:'',
            snack_imgs:[],
            drug:'',
            drug_imgs:[],
            goods:'',
            goods_imgs:[],
            line:'',
            line_imgs:[],
            note:'',
            note_imgs:[],
            other:'',
            other_imgs:[],
          },
        },
        images:{
          meal_imgs:[],
          food_imgs:[],
          snack_imgs:[],
          drug_imgs:[],
          goods_imgs:[],
          line_imgs:[],
          note_imgs:[],
          other_imgs:[],
        },
			}
		},
		onLoad(options) {
      this.pet_id = options.pet_id;
      this.type = options.type || 'detail';
      this.feedLog(options.pet_id)
		},
		methods: {
      redirtTo(url){
        uni.redirectTo({
          url:url
        })
      },
      uploadSubmit(data,fileName = ''){
        this.detail.feedlist[fileName] = data.map(item => {
          return item.url;
        })
      },
      uploadShow(data,fileName = ''){
        console.log(data.map(item => {
          return {url:item.url};
        }))
        this.images[fileName] = data.map(item => {
          return {url:item.url};
        })
        console.log(this.images[fileName])
      },
      uploadPut(event,fileName = ''){
        let lists = [].concat(event.file);
        let fileListLen = this.images[fileName].length;
        lists.map((item) => {
          this.images[fileName].push({
            ...item,
            status: 'uploading',
            message: '上传中',
          });
        });
        for (let i = 0; i < lists.length; i++) {

          api.uploadOssFile(lists[i].url).then(res => {
            let item = this.images[fileName][fileListLen];
            this.images[fileName].splice(fileListLen, 1, {
              ...item,
              status: 'success',
              message: '',
              url: res.show_path,
              thumb: res.show_path,
            });
            fileListLen++;
          })
        }
      },
      uploadDel(fileIndex,fileName = ''){
        this.images[fileName].splice(fileIndex.index,1);
      },
      navTo(url){
        uni.navigateTo({
          url:url
        })
      },
      feedLog(pet_id) {
        let that = this;
        feedLog(pet_id).then(data => {
          this.detail = data.data;
          let images = [
            'meal_imgs',
            'food_imgs',
            'snack_imgs',
            'drug_imgs',
            'goods_imgs',
            'line_imgs',
            'note_imgs',
            'other_imgs'
          ];
          images.forEach((item,index) => {
            that.uploadShow(data.data.feedlist[item],item);
          });
        })
      },

      submit(){
        let that = this;
        let data =  [
          'meal_imgs',
          'food_imgs',
          'snack_imgs',
          'drug_imgs',
          'goods_imgs',
          'line_imgs',
          'note_imgs',
          'other_imgs'
        ];
        new Promise((resolve,reject)=>{
          data.forEach((item,index) => {
            that.uploadSubmit(this.images[item],item);
            if(index === data.length-1){
              resolve()
            }
          });
        }).then(res => {
          console.log('this.detail.feedlist',this.detail.feedlist)
          this.detail.feedlist.pet_id = this.pet_id
          editFeed(this.detail.feedlist).then(res => {
            console.log(res)
          })
        });
      },
		},
		onPageScroll(res) {
			if(res.scrollTop <= 20){
				uni.$emit('isTop', true);
			}else{
				uni.$emit('isTop', false);
			}
		},
		created() {
			this.pagePadding = (api.navHeight().navPaddingTop +
				api.navHeight().navHeight + (api.navHeight().headerPadding * 2))
		}
	}
</script>

<style lang="scss">
	@import './components/index.scss';
</style>