nsgk_mobile/src/views/agriculturalTrusteeship/shop/shopEdit.vue

<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <van-nav-bar
      title="修改商品"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <!--  头部结束  -->


    <!--  内容开始  -->
    <div class="main">
      <van-field label="产品名称" required :rules="[{ required: true }]" v-model="product.productName" input-align="right" placeholder="请输入产品名称" />

      <van-field label="产品类型" required :rules="[{ required: true }]" v-model="product.productType" input-align="right" placeholder="请输入产品类型" />

      <van-field label="产品描述" required :rules="[{ required: true }]" type="textarea" autosize v-model="product.productLink" input-align="right" placeholder="请输入产品描述" />

      <van-field label="图片" :border="false" input-align="right" readonly />
      <div style="padding: 0 4% 2vh;">
        <van-uploader v-model="product.mainImgList" :after-read="afterReadEvidenceForm" :before-delete="deleteFileEvidenceForm" />
      </div>
    </div>

    <div class="main_btn">
      <p @click="submitForm">发布</p>
    </div>
    <!--  内容结束  -->
  </div>
</template>
<script>
  import Cookies from "js-cookie";
  import {productGet,financialProductEdit,commonUpload} from "@/api/agriculturalTrusteeship";
  export default {
    name: "agriculturalTrusteeshipShopDetail",
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
        zoom: 15, //地图展示级别
        showDialog:false,
        product:{},
        mainImgArr:[],
        productTypeOptions:[],
        productTypeOptions2:[],
        productType:'',
        showProductType:false
      };
    },
    created() {
      this.getDicts("product_type").then(response => {
        for (var i = 0; i < response.data.length; i++) {
          this.productTypeOptions.push({text: response.data[i].dictLabel, value: response.data[i].dictValue});
        }
        this.productTypeOptions2 = response.data;
      });
      this.getDetail();
    },
    methods: {
      getDetail(){
        productGet(this.$route.query.id).then(response => {
          this.productType = response.data.productType;
          if (response.data.mainImg){
            response.data.mainImgList = [];
            var attachement = response.data.mainImg.split( "," );
            this.mainImgArr = response.data.mainImg.split( "," );
            attachement.forEach(responseAttach=>{
              response.data.mainImgList.push({
                url:'/api' + responseAttach,
                isImage: true
              });
            })
          }
          var that = this ;
          that.product = response.data;
        });
      },
      afterReadEvidenceForm(file){
        let params1 = new FormData();
        params1.append("file", file.file);
        commonUpload(params1).then((r1) => {
          // this.tEnforceSamplingGoodsList[index].attachement.push(r1.fileName);
          console.log(r1)
          this.mainImgArr.push(r1.fileName)
        })
      },
      deleteFileEvidenceForm(file,detail) {
        this.mainImgArr.splice(detail.index,1);
        this.product.mainImgList.splice(detail.index,1);
      },
      submitForm(){
        console.log(this.mainImgArr)
        this.product.mainImg = this.mainImgArr.join(',')
        financialProductEdit(this.product).then((res) => {
          if(res.code=="200"){
            this.$notify({ type: 'success', message: '发布成功' });
            setTimeout(function(){
              history.back(-1);
            },2000)
          }
        })
      },
      onConfirmProductType(data){
        this.product.productType = data.value;
        this.productType = data.text;
        this.showProductType = false;
      }
    },
  }
</script>
<style scoped lang="scss">
.home_wrapper{
  background: #F6F6F6;
  min-height: 100vh;
}
.main{
  width: 92%;
  margin: 0 auto;
  margin-top: 2vh;
  border-radius: 10PX;
  overflow: hidden;
  background-color: #FFF;
}
  .main_btn{
    display: flex;
    justify-content: space-around;
    padding: 4vh 0;
    p{
      font-size: .4rem;
      width: 35%;
      text-align: center;
      padding: 10PX 0;
      border-radius: 5rem;
      box-shadow: 0px 3PX 6PX 0px rgba(0,0,0,0.16);
      &:nth-child(1){
        background: #334281;
        color: #ffffff;
      }
      &:nth-child(2){
        background: #D1D5E4;
        color: #334281;
      }
    }
  }
</style>