nsgk_mobile/src/views/sunVillage_info/suishoupai.vue

<template>
  <div class="home_wrapper">

    <img src="../../assets/images/sunVillage_info/complaint_add_icon_01.jpg" width="100%" alt="">

    <van-form @submit="onSubmit">

      <div class="list_main">


        <van-field readonly required label="上报内容" :border="false" />
        <div class="input_field">
          <van-field
            v-model="form.adviceContent"
            :rules="[{ required: true , message:'具体说明上报内容' }]"
            rows="4"
            autosize
            type="textarea"
            maxlength="1000"
            placeholder="具体说明上报内容"
            show-word-limit
            :border="false"
            style="padding: 5PX 0;"
          />
        </div>


        <van-field readonly required label="图片线索" :border="false" />
        <van-uploader
          v-model="fileList"
          style="margin-top: 10PX;"
          :upload-icon="uploadIcon1"
          :after-read="afterRead"
          @delete="deleteFile1"
        />

        <van-field readonly label="视频线索" :border="false" />
        <van-uploader
          v-model="videoList"
          style="margin-top: 10PX;"
          :upload-icon="uploadIcon2"
          accept="video/*"
          :after-read="afterReadVideo"
          @delete="deleteFileVideo"
          @click-preview="handleclicksc"
        />
        <van-popup v-model="showvideoplay" style="background: transparent;width: 70%;">
          <video
            controls
            preload="auto"
            style="width:100%;object-fit: contain;"
            :src="videourl"
            v-if="videourl"
          ></video>
        </van-popup>

        <van-field readonly required label="所在区域" :border="false" />
        <div class="input_field">
          <van-field
            readonly
            clickable
            placeholder="请选择所在区域"
            v-model="form.deptName"
            label-width="auto"
            :border="false"
            :rules="[{ required: true , message:'请选择所在区域' }]"
            right-icon="arrow-down"
            @click="showDept = true"
          />
          <van-popup v-model="showDept" position="bottom">
            <van-cascader
              v-model="villageValue"
              title="请选择"
              :options="deptOptions"
              @close="showDept = false"
              @change="onConfirmDept"
              active-color="#1989fa"
              :field-names="hcAreaInfoFieldName"
            />
          </van-popup>
        </div>

        <van-field readonly required label="线索地址（具体）" :border="false" />
        <div class="input_field">
          <van-field placeholder="请输入地址" v-model="form.adviceAddress" :border="false" />
        </div>

        <van-field readonly label="上报人（非必填）" :border="false" />
        <div class="input_field">
          <van-field placeholder="请输入姓名" v-model="form.adviceName" :border="false" />
        </div>

        <van-field readonly label="联系电话（非必填，我们将对号码保密）" :border="false" />
        <div class="input_field">
          <van-field placeholder="请输入电话" v-model="form.advicePhone" :border="false" />
        </div>

        <van-button size="small" round block type="primary" native-type="submit">
          保存
        </van-button>

      </div>
    </van-form>
    <div style="height: 50px;"></div>
  </div>
</template>

<script>
  import {publicUpload, addAdvice, treeselect} from "@/api/sunVillage_info/fixedAssets";
  import Cookies from "js-cookie";
  import uploadIcon1 from '@/assets/images/sunVillage_info/complaint_add_icon_03.png'
  import uploadIcon2 from '@/assets/images/sunVillage_info/complaint_add_icon_04.png'
  import request from '@/utils/request'
  export default {
    name: "certificateList",
    data() {
      return {
        showvideoplay:false,
        videourl:'',
        form:{},
        //选中的值
        villageValue: "",
        hcAreaInfoFieldName: {
          text: "label",
          value: "value",
          children: "children",
        },
        uploadIcon1:uploadIcon1,
        uploadIcon2:uploadIcon2,
        openPic:[],
        queryParams:{
          bookId:'',
          deptId:'',
        },
        openPic2:[],
        deptOptions:[],
        fileList:[],
        videoList:[],
        videoUrl:[],
        adviceTypeOptions:[],
        showDept:false,
        showAdviceType:false,
        adviceType:''
      };
    },
    created() {
      this.queryParams.bookId = Cookies.get('bookId');
      this.queryParams.deptId = Cookies.get('deptId');

      this.houseGetDicts("communicate_type").then((response) => {
        this.adviceTypeOptions = response.data;
        // this.form.otherTypeText = this.selectDictLabel(response.data, this.$route.query.type);
        // this.form.otherName = Cookies.get('deptName')+this.selectDictLabel(response.data, this.$route.query.type);
      });

      treeselect().then((res) => {
        if (res.code == 200) {
          this.deptOptions = res.data;
        }
      });
    },
    methods: {
      handleclicksc(file) {
        console.log(file)
        this.videourl = file.content
        this.showvideoplay = true;
      },
      onConfirmDept({ selectedOptions }){
        this.form.deptId = selectedOptions[selectedOptions.length-1].id;
        this.form.deptName = selectedOptions.map((option) => option.label).join('/');
      },
      onConfirmAdviceType(e){
        this.form.adviceType = e.dictValue;
        this.adviceType = e.dictLabel;
        this.showAdviceType = false;

        console.log(e)
      },
      onSubmit(){
        var that = this;
        console.log(that.openPic2)
        if (that.openPic2.length<1){
          that.$notify({ type: 'warning', message: '图片线索不能为空' });
          return;
        }
        that.form.fileUrl = that.openPic2.join(',')
        that.form.videoUrl = that.videoUrl.join(',')
        that.form.adviceTime = that.format(new Date(),'yyyy-MM-dd HH:mm:ss')
        this.form.title="投诉建议"
        this.form.adviceType="1"
        addAdvice(that.form).then((r1) => {
          if (r1.code == 200){
            that.$notify({ type: 'success', message: '提交成功' });
              if(this.$route.query.type != 'code'){
                location.reload();
              }else{
                setTimeout(function(){
                  history.back(-1);
                },2000)
              }
          }
        })
      },
      afterRead(file) {
        console.log(file instanceof Array)
        if (file instanceof Array){//判断是否为数组，单张图片为array，多张为数组，数组返回true否则为false
          file.map(res=>{
            this.openPic.push(res.file);
            let params1 = new FormData();
            params1.append("file", res.file);
            publicUpload(params1).then((r1) => {
              this.openPic2.push(r1.fileName);
            })
          })
        }else{
          this.openPic.push(file);
          let params1 = new FormData();
          params1.append("file", file.file);
          publicUpload(params1).then((r1) => {
            this.openPic2.push(r1.fileName);
          })
        }
      },
      deleteFile1(detail){
        this.openPic2.splice(detail.index,1)
        // this.form.openPic.splice(index,1);
      },
      deleteFileVideo(detail){
        this.videoUrl.splice(detail.index,1)
        // this.form.openPic.splice(index,1);
      },
      afterReadVideo(file){
        const that = this;
        let formData = new FormData(); // 为上传文件定义一个formData对象
        formData.append("file", file.file);
        publicUpload(formData).then((r1) => {
          this.videoUrl.push(r1.fileName);
        })

      },

    },
  }
</script>

<style scoped lang="scss">
  /deep/ .van-button--primary{
    background: #2ec6a9;
    border: none;
    width: 40%;
    margin:5vh auto 2vh;
  }
  .van-radio:last-child{
    margin-right: 0;
  }
  .input_field{
    border: 1px solid #d8d8d8;
    padding: 8PX 15PX;
    border-radius: 8PX;
    margin: 10PX 0;
  }
  .home_wrapper{
    background: #f1f2f2;
    min-height: 100vh;
    width: 100vw;
    .header_main {
      height: 116px;
      background: url('../../assets/images/sunVillage_info/list_head_green.png') no-repeat;
      background-size: 100% 100%;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      font-size: 36px;
      line-height: 116px;
      text-align: center;
      color: #fff;
      position: relative;

      .return_btn {
        width: 24px;
        height: 43.2px;
        background: url('../../assets/images/sunVillage_info/list_icon_5.png') center center no-repeat;
        background-size: 20px 36px;
        position: absolute;
        left: 38px;
        top: 36px;
      }
    }
    .release_head{
      height: 90px;
      padding:0 23px;
      display: flex;
      align-items: center;
      font-size: 26px;
      color: #929292;
      .people{
        flex: 1;
        display: flex;
        align-items: center;
        .icon{
          width: 24px;
          height: 21px;
          background: url('../../assets/images/sunVillage_info/details_icon_1.png') no-repeat;
          background-size: 100% 100%;
          display: block;
          margin-right: 8px;
        }
      }
      .time{
        flex: 1;
        display: flex;
        align-items: center;
        justify-content:flex-end;
        .icon{
          width: 25px;
          height: 25px;
          background: url('../../assets/images/sunVillage_info/details_icon_2.png') no-repeat;
          background-size: 100% 100%;
          display: block;
          margin-right: 8px;
        }
      }
    }
    .release_conetnt{
      padding:0 22px;
      font-size: 32px;
      color: #252525;
      line-height: 44px;
      img{
        max-width: 100%;
        margin-bottom: 16px;
      }
      p{
        margin-bottom: 16px;
      }
    }
    .list_main{
      padding: 75px 25px 25px;
      background: #ffffff url("../../assets/images/sunVillage_info/complaint_add_icon_02.jpg") no-repeat center top;
      background-size: auto 60px;
      width: 94%;
      margin: 25px auto 0;
      border-radius: 15PX;
      box-shadow: 4px 6px 5px rgba(63, 68, 75, 0.1);
    }
    .tit{
      font-size: 16PX;
      padding: 15PX 10PX;
    }
    /deep/ .van-cell{
      padding-left: 0!important;
      padding-right: 0!important;
      padding-bottom: 0!important;
      line-height: 1;
      &:nth-child(1){
        padding-top: 0;
      }
    }
    /deep/ .van-field__label{
      padding-left: 10PX;
      width: auto;
      display: flex;
      align-items: center;
      border-left: 4PX solid #2ec6a9;
    }
    /deep/ .van-cell--required::before{
      left: 22%;
    }
    /deep/ .van-field__error-message{
      display: none;
    }
  }
</style>