hlm_pl_mall_store/pages/seller/goods/GoodsForm3.vue

<template><page-meta :root-font-size="fontSize+'px'"></page-meta>
<seller-base :show="false">
<view class="div container">
    <view class="div common-header-wrap">
        <view :style="'height:'+navHeight+'px'"></view>
        <view class="common-header-holder"></view>
        <view class="common-header-fixed">
        <title-header />
        <uni-nav-bar title="商品发布" class="common-header" left-icon="back" @clickLeft="goBack()">
        </uni-nav-bar>
    </view>
    </view>
    <step :options="options" :active="2"></step>
    <view class="div" v-if="value_array.length">
        <view class="div image-wrapper" v-for="(item,index) in value_array" :key="index">
            <view class="div label">{{(spec_value && spec_value[1] && spec_value[1][item.spvalue_id])?spec_value[1][item.spvalue_id]:item.spvalue_name}}</view>
            <view class="div user-avatar-wrapper">
                <view class="div user-avatar">
                  <uni-file-picker v-model="imageValue[item.spvalue_id]" fileMediatype="image" mode="grid" :limit="5" :auto-upload="false"
                    @select="uploadInformPic(item.spvalue_id,$event)" @delete="dropImage(item.spvalue_id,$event)"></uni-file-picker>
                </view>
            </view>
        </view>
        <view class="div pt-10 pb-10"><view class="div common-btn ds-button-large" @click="nextStep">保存</view></view>
    </view>

    <uni-popup background-color="#fff" ref="isshow" class="popup" >
        <image mode="aspectFit" class="img" :src="showimage" :style="getBannerStyle" @click="hidePopup('isshow')">
    </uni-popup>
    <tui-picture-cropper v-if="cropperOption.imgUrl" :width="cropperOption.autoCropWidth" :height="cropperOption.autoCropHeight" :imageUrl="cropperOption.img" @ready="cropReady" @cropper="useCrop" @back="cropBack"></tui-picture-cropper>

</view>
</seller-base>
</template>

<script>
import {getFontSize} from '@/util/common'
import TitleHeader from '../../TitleHeader'
import SellerBase from '../SellerBase'
import tuiPictureCropper from "@/components/thorui/tui-picture-cropper/tui-picture-cropper"

import { mapState, mapActions } from 'vuex'
import Step from '../../Step'
import { imageEdit, imageSave, uploadInfoFile } from '../../../api/sellerGoods'
export default {
  data(){
    return {
    navHeight: 0,
    imageValue:{},
      screenWidth:0,
      cropType: '',
      cropperOption: {
        img: '',
        canMove: false,
        autoCrop: true,
        autoCropWidth: 100,
        autoCropHeight: 100,
        maxImgSize: 500,
        outputType: 'png'
      },
      crop: {},
      controller: 'Sellergoodsonline',
      options: [{ title: '选择商品分类' }, { title: '填写商品详情' }, { title: '上传商品图片' }],
      commonid: 0,
      showimage: '',
      value_array: false,
      spec_value: false,
    }
  },
  computed:{
    fontSize(){
      return getFontSize()
    },
    getBannerStyle: function () {
      const res = uni.getSystemInfoSync()
      var width = res.windowWidth
      var height = res.windowHeight
      let itemWidth = width
      let itemHeight = height
      return "max-width:"+itemWidth +"px;max-height:"+itemHeight +"px"
    }
  },
  onLoad: function (option) {
	this.commonid = option.commonid
    var action = option.action
    if (action == 'add') {
      this.controller = 'Sellergoodsadd'
    }
    imageEdit(this.controller, this.commonid).then(res => {
      this.value_array = res.result.value_array
      this.spec_value = res.result.spec_value
      let img = res.result.img
      for (var i in this.value_array) {
        this.imageValue[this.value_array[i].spvalue_id] = []
        if(img[this.value_array[i].spvalue_id]){
        for(var j in img[this.value_array[i].spvalue_id]){
          if(img[this.value_array[i].spvalue_id][j].goodsimage_url){
            this.imageValue[this.value_array[i].spvalue_id].push(Object.assign({
              name:i+'_'+j,
              extname:'jpg',
              url:img[this.value_array[i].spvalue_id][j].goodsimage_full_url
            },img[this.value_array[i].spvalue_id][j]))
          }
          
        }
        }

        
      }
    }).catch(error => {
      uni.showToast({icon:'none',title: error.message})
    })
  },
  components:{
    TitleHeader,
    SellerBase,
    tuiPictureCropper,
    Step
  },
  mounted(){
    // #ifdef  MP-WEIXIN
    this.navHeight = uni.getMenuButtonBoundingClientRect().height
    // #endif
    this.screenWidth=uni.getSystemInfoSync().screenWidth
  },
  methods:{
    showPopup(id){
      this.$refs[id].open()
    },
    hidePopup(id){
      this.$refs[id].close()
    },
    goBack(){uni.navigateBack({delta:1})},
    openImage (src) {
      this.showimage = src
	  this.showPopup('isshow')
    },
    dropImage (index, event) {
      for(var i in this.imageValue[index]){
        if(this.imageValue[index][i].name==event.tempFile.name){
          this.imageValue[index].splice(i,1)
          break
        }
      }
      this.$forceUpdate()
    },
    useCrop (res) {
      let index = this.cropType
        var formdata={
          filePath:res.url,
          name:'file',
        }
        uni.showLoading({ title: '加载中' })
        uploadInfoFile(this.controller, formdata).then(res => {
          this.imageValue[index].push({
            name:index,
            extname:'jpg',
            url:res.result.url,
            goodsimage_full_url:res.result.url,
            goodsimage_isdefault: 0,
            goodsimage_url:res.result.path
          })
          this.cropperOption.imgUrl=''
          this.$forceUpdate()
          uni.hideLoading()
        }).catch(error => {
          uni.showToast({icon:'none',title: error.message})
          uni.hideLoading()
          this.cropperOption.imgUrl=''
          this.$forceUpdate()
        })
      
    },
      cropReady(){
        this.cropperOption.img = this.cropperOption.imgUrl
      },
	  cropBack(){
	    this.cropperOption.imgUrl=''
	    this.$forceUpdate()
	  },
    uploadInformPic (index, event) {
      let that = this
      this.cropType = index
      let file = event.tempFiles[0]
          that.cropperOption.imgUrl = file.path
          that.cropperOption.autoCropWidth = uni.getSystemInfoSync().windowWidth
          that.cropperOption.autoCropHeight = uni.getSystemInfoSync().windowWidth
          that.cropperOption.maxImgSize = uni.getSystemInfoSync().windowHeight - 40
          that.$forceUpdate()
    },
    nextStep () {
      imageSave(this.controller, this.commonid, this.imageValue).then(res => {
        uni.showToast({icon:'none',title: res.message})
        uni.redirectTo({url:'/pages/seller/goods/Goodsonline'})
      }).catch(error => {
        uni.showToast({icon:'none',title: error.message})
      })
    }
  }
}
</script>

<style scoped lang="scss">
.common-header{
        .btn{background: #000;color: #fff;box-shadow: 0px 2px 4px #d2d2d2;}
    }
    .user-avatar-wrapper{padding:0 $pageSpace}
    .ds-button-large{margin:0 $pageSpace}
    .container{background: #fff}
    .image-wrapper{width: 100%;position: relative;}

    .label{
        padding:.5rem $pageSpace;
        font-size:$subFontSize;
        background: #eee;
        margin-bottom: .5rem;
    }
</style>