nsgk_mobile/src/views/user/supply/supplyAdd.vue

<template>
  <div class="app-container" :style="{height:height+'px'}">
    <navBar :title="pageTit" background="0" positionType="fixed"></navBar>
    <van-form @submit="submitInteraction">
      <div class="block_box">
        <div class="block_tt"><i></i>发布信息</div>
        <van-field
          readonly
          clickable
          name="picker"
          :value="value"
          label="供求类型"
          placeholder="点击选择供求类型"
          @click="showPicker = true"
          required
          :rules="[{ required:true }]"
        />
        <van-popup v-model="showPicker" position="bottom">
          <van-picker
            show-toolbar
            :columns="columns"
            @confirm="onConfirm"
            @cancel="showPicker = false"
          />
        </van-popup>
        <van-field v-model="form.projectName" label="项目名称" placeholder="请输入项目名称" required :rules="[{ required:true }]"/>
        <van-field v-model="form.location" label="项目地址" placeholder="请输入项目地址" required :rules="[{ required:true }]"/>
        <van-field v-model="form.realname" label="姓名" placeholder="请输入姓名" required :rules="[{ required:true }]"/>
        <van-field v-model="form.phone" label="联系电话" placeholder="请输入联系电话" required :rules="[{ required:true }]"/>
        <van-field v-model="form.projectContent" label="项目详情" type="textarea" autosize placeholder="请输入项目详情" required :rules="[{ required:true }]"/>
      </div>
      <div class="block_box">
        <div class="block_tt"><i></i>上传相关附件</div>
        <div style="padding: 0 16px;">
          <van-uploader :after-read="afterRead" :before-delete="deleteFile" v-model="fileList" :max-count="5" />
        </div>
        <p style="color: #FE1313;margin-top: 20PX;padding-left: 15px;">*请上传jpg/png文件，文件大小不超过5MB</p>
      </div>
      <div class="submit">
        <van-button round block type="info" color="#0DBCAA" native-type="submit">发布</van-button>
      </div>
    </van-form>
  </div>
</template>

<script>
import { getMember , userDemand , updateDemand , selectDemand , base64Attach , showImg , deleteUserImg ,supplyDetail} from "@/api/user/index";
import { getInfo } from "@/api/login/index";
import {Dialog} from "vant";
import navBar from "@/components/common/nav_bar.vue";
import {base64Upload} from "@/api/register";
export default {
  name: "supplyAdd",
  components: { navBar },
  data() {
    return {
      height:0,
      pageTit:'',
      value: '',
      showPicker: false,
      columns:['供应','需求'],
      fileList:[],
      form:{
        projectName:'',
        location:'',
        realname:'',
        phone:'',
        projectContent:'',
        logintime:'',
        deptId:100,
        supplyDemandType:''
      },
      file:{
        tableName:'t_transaction_supply_demand',
        tableId:'',
        files:[],
        fileType:'',
        bizPath:'transaction'
      },
      upLoadList:[]
    };
  },
  created() {
    this.height = document.body.clientHeight;
    console.log(this.$route.query.type)
    if (this.$route.query.type == 'update'){
      this.getInteraction();
      this.pageTit = '修改供求';
    }else{
      this.getInfo();
      this.pageTit = '发布供求';
    }
  },
  methods: {
    afterRead(file) {
      // 此时可以自行将文件上传至服务器
      let params1 = {
        file:file.content
      }
      base64Upload(params1).then((r1) => {
        this.upLoadList.push(r1.fileName);
      })

      // for ( var i = 0 ; i < this.fileList.length ; i++){
      //   if(this.fileList[i].url == undefined&&this.fileList!='') {
      //     this.fileList[i] = {url:this.fileList[i].content, id: '', isImage: true};
      //   }
      // }
    },
    deleteFile(elIndex){
      // deleteUserImg(elIndex.id).then(response => {});
      // if(elIndex.id != ''){
      //   deleteUserImg(elIndex.id).then(response => {});
      // }
      return (file, name) => {
        let fileIndex = name.index
        this.fileList[elIndex].splice(fileIndex, 1)
        this.upLoadList[elIndex].splice(fileIndex, 1)
      }
    },
    onConfirm(value, index) {
      this.value = value;
      this.showPicker = false;
      this.form.supplyDemandType = index + 1 ;
    },
    getInfo(){
      getInfo().then(response => {
        getMember(response.user.userId).then(response => {
          this.form.realname = response.data.realname;
          this.form.phone = response.data.phone;
          this.form.memberId = response.data.id;
        });
      });
    },
    getInteraction(){
      supplyDetail(this.$route.query.id).then(response => {
        this.form.projectName = response.data.projectName;
        this.form.location = response.data.location;
        this.form.projectContent = response.data.projectContent;
        this.form.realname = response.data.realname;
        this.form.phone = response.data.phone;
        this.form.id = this.$route.query.id;
        this.form.supplyDemandType = response.data.supplyDemandType;
        this.getDicts("supply_demand_type").then(res => {
          this.value = this.selectDictLabel(res.data,response.data.supplyDemandType);
        });
        showImg(response.data.id).then(responseSecond => {
          for (var i = 0 ; i < responseSecond.data.length ; i++){
            this.fileList.push({url:'/api'+responseSecond.data[i].fileUrl,id:responseSecond.data[i].id})
          }
        });
      });
    },
    submitInteraction(){
      this.form.logintime = this.getNowFormatDate();
      this.form.fileUrl = this.upLoadList.join(',');
      if(this.$route.query.type == 'update'){
        this.file.tableId = this.$route.query.id ;
        updateDemand(this.form).then(response => {
          // this.$toast.loading({
          //   message: "上传中...",
          //   forbidClick: true,
          //   duration: 0,
          // });
          // for (var i = 0 ; i < this.fileList.length ; i++){
          //   if(this.fileList[i].url.indexOf('http://') == -1&&this.fileList!=''){
          //     this.file.files.push(this.fileList[i].url);
          //   }
          // }
          Dialog.confirm({
            title: '系统提示',
            message: '修改成功',
            confirmButtonText: '确定',
            showCancelButton:false
          }).then(() => {
            self.location=document.referrer;
          })
          // base64Attach(this.file).then(response => {
          //   if (response.code == 200){
          //     Dialog.confirm({
          //       title: '系统提示',
          //       message: '修改成功',
          //       confirmButtonText: '确定',
          //       showCancelButton:false
          //     }).then(() => {
          //       self.location=document.referrer;
          //     })
          //   }
          // });
        });
      }else{
        userDemand(this.form).then(response => {
          this.file.tableId = response.data;
          this.$toast.loading({
            message: "上传中...",
            forbidClick: true,
            duration: 0,
          });
          // for(var i = 0 ; i < this.fileList.length ; i++){
          //   this.file.files.push(this.fileList[i].url);
          // }
          Dialog.confirm({
            title: '系统提示',
            message: '发布成功',
            confirmButtonText: '确定',
            showCancelButton:false
          }).then(() => {
            self.location=document.referrer;
          })
          // base64Attach(this.file).then(response => {
          //   if (response.code == 200){
          //     Dialog.confirm({
          //       title: '系统提示',
          //       message: '发布成功',
          //       confirmButtonText: '确定',
          //       showCancelButton:false
          //     }).then(() => {
          //       self.location=document.referrer;
          //     })
          //   }
          // });
        });
      }
    },
  },
};
</script>

<style scoped lang="scss">
  .app-container {
    background-color: #F4F8FB;
    height: calc(100vh - 0Px);
    overflow-y: scroll;
  }
  .block_box{
    width: 94%;
    margin: 3vw auto;
    background: #ffffff;
    padding: 3vw 0;
    border-radius: 15Px;
    overflow: hidden;
    .block_tt{
      font-size: 20Px;
      display: flex;
      align-items: center;
      padding: 1.6vh 3vw;
      line-height: 1;
      font-weight: bold;
      i{
        display: block;
        width: 4Px;
        height: 16Px;
        background: #0CBEA6;
        margin-right: 5PX;
        border-radius: 5PX;
      }
      /*border-left: 3Px solid #0CBEA6;*/
    }
  }
  .submit{
    position: absolute;
    bottom: 5%;
    width: 90%;
    left: 5%;
    p{
      text-align: center;
      margin-bottom: 0.2rem;
      span{
        color: #007E72;
      }
    }
  }
</style>