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

<template>
  <div class="home_wrapper">
    <!--  头部开始  -->
    <van-nav-bar
      title="编辑机构信息"
      fixed
      placeholder
      left-arrow
      @click-left="onClickLeft"
    />
    <!--  头部结束  -->


    <!--  内容开始  -->
    <div class="main">
      <van-field label="*机构名称" v-model="serviceForm.financialName" input-align="right" placeholder="请输入机构名称" />

      <van-field label="*联系人" v-model="serviceForm.linker" input-align="right" placeholder="请输入联系人" />

      <van-field label="*电话" v-model="serviceForm.phone" input-align="right" placeholder="请输入电话" />

      <van-field label="地址" v-model="serviceForm.address" input-align="right" placeholder="请输入地址" />

      <van-field label="传真" v-model="serviceForm.fax" input-align="right" placeholder="请输入传真" />

      <van-field label="简要描述" v-model="serviceForm.description" input-align="right" placeholder="请输入简要描述" />

      <van-field label="场所图片：" :border="false" input-align="right" readonly />
      <div style="padding: 0 4% 2vh;">
        <van-uploader v-model="serviceForm.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 {commonUpload, serviceEdit, serviceGet} from "@/api/agriculturalTrusteeship";
  export default {
    name: "agriculturalTrusteeshipShopAdd",
    data() {
      return {
        activeKey: 0,
        active: 0,
        loading: false,
        finished: false,
        center: { lng: 122.089726, lat: 37.540728 }, //经纬度
        zoom: 15, //地图展示级别
        showDialog:false,
        product:{
          releaseDate:this.format(new Date(),'yyyy-MM-dd')
        },
        mainImgArr:[],
        productTypeOptions:[],
        showProductType:false,
        productType:'',
        serviceForm:{}
      };
    },
    created() {
      this.getDetail();
    },
    methods: {
      getDetail(){
        serviceGet(Cookies.get('ACCESS-SESSION-ID')).then(response => {
          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
              });
            })
          }
          this.serviceForm = response.data;
        });
      },
      submitForm(){
        console.log(this.mainImgArr)
        this.serviceForm.mainImg = this.mainImgArr.join(',')
        serviceEdit(this.serviceForm).then((res) => {
          if(res.code=="200"){
            this.$notify({ type: 'success', message: '提交成功' });
            setTimeout(function(){
              history.back(-1);
            },2000)
          }
        })
      },
      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.serviceForm.mainImgList.splice(detail.index,1);
      },
      onConfirmProductType(data){
        this.product.productType = data.text;
        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>