product_wx/pages/subPackages/reportRepair/index.vue

<template>
  <div class="reportRepair">
    <div class="reportBody">
      <div class="record" @click.stop="toRecord">
         报事记录 <img src="https://www.idea-co-sf.com/gardenProduct/image/rightIcon.png" class="recordImg">
      </div>
      <ul class="detailUl">
        <li class="detailLi">
          <span class="liName">当前企业</span>
          <span class="liInfo">{{getUserLocalStorageInfo.username}}</span>
        </li>
        <li class="detailLi">
          <span class="liName">
            <span style="color: red;margin-right: 10rpx;">*</span>
            您是想
          </span>
          <van-radio-group :value="form.type" @change="onChange">
            <van-radio name="1">报事</van-radio>
            <van-radio name="2">咨询</van-radio>
          </van-radio-group>
        </li>
        <li class="detailLi2">
          <span class="liName">
            快捷选择
          </span>
          <div class="detailLi2Box">
            <div class="detailLi2BoxTop">
              <div class="checkItem" :class="{
                  checked: quickSleced.value && item.value === quickSleced.value,
                }" v-for="item in checkList" @click="clickCheck(item)">{{item.label}}</div>
            </div>
            <van-field
                :value="form.description"
                autosize
                type="textarea"
                placeholder="请输入文字进行报事报修描述"
                class="myField"
                maxlength="800"
                show-word-limit
                @input="changeIpt"
            />
          </div>
        </li>
        <li class="detailLi">
          <span class="liName">
            <span style="color: red;margin-right: 10rpx;">*</span>
            位置
          </span>
          <van-radio-group :value="form.position" @change="onChange2">
            <van-radio name="1">室内</van-radio>
            <van-radio name="2">公区</van-radio>
          </van-radio-group>
        </li>
        <li class="detailLi2">
          <span class="liName">
            补充说明
            <span style="color: #B3B3B3;font-size: 28rpx">（支持图片/视频上传限20M内，最多6张）</span>
          </span>
          <div class="detailLi2Box" style="margin: 24rpx 0 0 0">
            <van-uploader
                accept="media"
                :max-count="6"
                @delete="deleteRYXXZP"
                :file-list="fileList"
                @after-read="uploadRYXXZP"
                :show-upload="true"
                @click-preview="showClick"
            />
          </div>
        </li>
        <li class="detailLi" style="border-bottom: none">
          <span class="liName">
            报事人
          </span>
          <span class="liInfo">
            {{submitUser}}
          </span>
        </li>
      </ul>
    </div>
    <div class="buttonBox">
      <button class="btn zcBtn">暂存</button>
      <button class="btn tjBtn" @tap="submit">提交</button>
    </div>
  </div>
</template>
<script>
import { repairAdd,getUserLocalStorageInfo,getByCodes } from "@/js_sdk/http";
import dayjs from "dayjs";
export default {
  data(){
    return{
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
      dc_key: ['QUICK_SELECTION'],
      isCheck:false,
      isCheck2:false,
      form: {
        groupId: '',
        companyId: getUserLocalStorageInfo().userId,
        companyName: getUserLocalStorageInfo().username,
        type: '1',
        serviceType: '',
        description: '',
        position: '1',
        userId:getUserLocalStorageInfo().userId + '-' + getUserLocalStorageInfo().username + '-' + getUserLocalStorageInfo().phone,
        fileUrl: '',
        status: 'unAcceptance'
      },
      submitUser:getUserLocalStorageInfo().username + '-' + getUserLocalStorageInfo().phone,
      checkList:[
        // {name:'挂件安装'},
        // {name:'我要投诉'},
        // {name:'疏通管道'},
        // {name:'维修线路'},
        // {name:'更换灯泡'},
        // {name:'网络维修'},
        // {name:'保洁服务'},
        // {name:'其他维修'},
      ],
      quickSleced: {},
      fileList:[],
      dic_SelectList:[]
    }
  },
  created(){
    this.getByCodes()
  },
  methods:{
    showClick(e){
      console.log(e)
    },
    changeIpt(e){
      this.form.description = e.detail
    },
    onChange(e){
      // console.log(e)
      this.form.type = e.detail
    },
    onChange2(e){
      // console.log(e)
      this.form.position = e.detail
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dc_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.checkList = this.dic_SelectList.QUICK_SELECTION
    },
    toRecord() {
      uni.navigateTo({
        url:'/pages/subPackages/reportRepair/repairRecord'
      })
    },
    clickCheck(item){
      if (this.quickSleced.value && this.quickSleced.value === item.value) {
        this.quickSleced = {}
      } else {
        this.quickSleced = item
        // this.form.description = item.lable
        this.$set(this.form, 'description', item.label)
      }
    },
    submit(){
      if (this.quickSleced.value == null || this.quickSleced.value === '') {
        uni.showToast({
          title: '请选择服务类型',
          icon: 'none',
          mask: true,
          duration: 1000
        });
        return
      }
      if (this.fileList.length <= 0 || !this.fileList){
        uni.showToast({
          title: '请上传补充说明图片',
          icon: 'none',
          mask: true,
          duration: 1000
        });
        return
      }
      let picArr = []
      this.fileList.forEach(item=>{
        // console.log(item)
        picArr.push(item)
      })
      this.form.fileUrl = JSON.stringify(picArr)
      this.form.serviceType = this.quickSleced.value
      this.form.createdBy = this.getUserLocalStorageInfo.userId
      repairAdd(this.form).then((res) => {
        uni.showToast({
          title: '填报成功',
          icon: 'success',
          mask: true,
          duration: 1000
        });
        uni.navigateTo({
          url:'/pages/subPackages/reportRepair/repairRecord'
        })
      })
    },
    deleteRYXXZP(event) {
      this.fileList.splice(event.detail.index, 1);
      this.$forceUpdate();
    },
    uploadRYXXZP(event) {
      // console.log(event)
      let that = this;
      const { file } = event.detail;
      console.log(event.detail)
      uni.uploadFile({
        url: that.$constant.BASE_URI + "/wx/fileController/upload",
        filePath: file.url,
        name: "file",
        formData: { user: "test" },
        success(res) {
          // 上传完成需要更新 fileList
          let data = JSON.parse(res.data);
          if (event.detail.file.type==='image'){
            that.fileList.push({
              imgUrl: "/FileController/download/" + data.data[0],
              id: data.data[0],
              url:
                  that.$constant.BASE_URI +
                  "/FileController/download/" +
                  data.data[0],
                  type:event.detail.file.type,
                  isImage:true,
            });
          }else{
            that.fileList.push({
              imgUrl: "/FileController/download/" + data.data[0],
              id: data.data[0],
              url:
                  that.$constant.BASE_URI +
                  "/FileController/download/" +
                  data.data[0],
                  type:event.detail.file.type,
                  isVideo:true
            });
          }
        },
        fail(res) {},
      });
    },
  }
}
</script>
<style lang="scss">
    .reportRepair{
      .reportBody{
        margin-top: 24rpx;
        padding: 38rpx 36rpx;
        background: white;
        //height: 1416rpx;
        box-sizing: border-box;
        .record {
          display: flex;
          align-items: center;
          justify-content: flex-end;
          color: #0365F9;
          font-size: 32rpx;
          .recordImg{
            width: 36rpx;
            height: 36rpx;
            padding: 5rpx 0 0 10rpx;
          }
        }
        .detailUl{
          margin-top: 20rpx;
          .liName{
            font-size: 32rpx;
            color: rgba(51, 51, 51, 1);
            white-space: nowrap;
          }
          .detailLi{
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 32rpx 0;
            border-bottom: 2rpx solid #E6E6E6;
            .liInfo{
              display: flex;
              justify-content: flex-end;
              gap: 0 64prx;
              max-width: 428rpx;
              color: rgba(102, 102, 102, 1);
              font-size: 32rpx;
              line-height: 38rpx;
            }
            .van-radio-group{
              display: flex;
              align-items: center;
              gap: 0 32rpx;
            }
          }
          .detailLi2{
            display: flex;
            flex-direction: column;
            padding: 32rpx 0;
            border-bottom: 2rpx solid #E6E6E6;
            .detailLi2BoxTop{
              display: flex;
              flex-wrap: wrap;
              justify-content: space-between;
              margin: 12rpx 0;
              .checkItem{
                width: 160rpx;
                height: 64rpx;
                font-size: 28rpx;
                color: #666666;
                display: flex;
                align-items: center;
                justify-content: center;
                background: #F5F7FA;
                border-radius: 8rpx;
                margin: 12rpx 0;
              }
              .checked{
                background: #0365F9;
                color: white;
              }
            }
          }
        }
      }
      .van-cell {
        background: #F5F7FA !important;
        border-radius: 8rpx;
        font-size: 28rpx;
      }
      .buttonBox{
        display: flex;
        justify-content: center;
        .btn{
          width: 240rpx;
          height: 80rpx;
          display: flex;
          border-radius: 8rpx;
          align-items: center;
          justify-content: center;
          margin: 48rpx 16rpx 150rpx 16rpx;
          color: white;
          letter-spacing: 2rpx;
          text-indent: 2rpx;
        }
        .zcBtn{
          background: #FE8643;
        }
        .tjBtn{
          background: #0365F9;
        }
      }
    }
</style>