product_wx/pages/subPackages/reportRepair/repairDetail.vue

<template>
  <div class="addRepair">
    <div class="reportBody">
      <ul class="detailUl">
        <li class="detailLi">
          <span class="liName">当前企业</span>
          <span class="liInfo">无锡XXXXX有限公司</span>
        </li>
        <li class="detailLi">
          <span class="liName">
            <span style="color: red;margin-right: 10rpx;">*</span>
            您是想
          </span>
          <span class="liInfo">
              <label class="radio"  @click.stop="isCheck=true" >
                  <radio value="报事" :checked="isCheck" color="#0365F9"/>报事
              </label>
              <label class="radio" @click.stop="isCheck=false" >
                  <radio value="咨询" :checked="!isCheck" color="#0365F9"/>咨询
               </label>
          </span>
        </li>
        <li class="detailLi2">
          <span class="liName">
            快捷选择
          </span>
          <div class="detailLi2Box">
            <div class="detailLi2BoxTop">
              <div class="checkItem" :class="item.isCheck?'checked':''" v-for="item in checkList" @click="clickCheck(item)">{{item.name}}</div>
            </div>
            <van-field
                :value="form.contant"
                autosize
                type="textarea"
                placeholder="请输入文字进行报事报修描述"
                class="myField"
                maxlength="800"
                show-word-limit
            />
          </div>
        </li>
        <li class="detailLi">
          <span class="liName">
            <span style="color: red;margin-right: 10rpx;">*</span>
            位置
          </span>
          <span class="liInfo">
              <label class="radio"  @click.stop="isCheck2=true" >
                  <radio value="报事" :checked="isCheck2" color="#0365F9"/>室内
              </label>
              <label class="radio" @click.stop="isCheck2=false" >
                  <radio value="咨询" :checked="!isCheck2" color="#0365F9"/>公区
               </label>
          </span>
        </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
                :max-count="6"
                @delete="deleteRYXXZP"
                :file-list="fileList"
                @after-read="uploadRYXXZP"
                :show-upload="true"
            />
          </div>
        </li>
        <li class="detailLi">
          <span class="liName">
            报事人
          </span>
          <span class="liInfo">
            章敏-18915281562 <img src="https://www.idea-co-sf.com/gardenProduct/image/phoneIcon.png" class="phoneIcon">
          </span>
        </li>
        <li class="detailLi" style="border-bottom: none">
          <span class="liName">
            报事时间
          </span>
          <span class="liInfo">
            2024-05-16  15：30
          </span>
        </li>
      </ul>
    </div>
    <div class="handleBox">
      <div class="handleTitle">处理情况</div>
      <div class="imageBox">
        <div class="imageItem">
          <img src="https://www.idea-co-sf.com/gardenProduct/image/upImage.svg" class="handleImg">
          <span>上报</span>
        </div>
        <img src="https://www.idea-co-sf.com/gardenProduct/image/arrow.png" class="handleArrow">
        <div class="imageItem">
          <img src="https://www.idea-co-sf.com/gardenProduct/image/acceptance.svg" class="handleImg">
          <span>受理</span>
        </div>
        <img src="https://www.idea-co-sf.com/gardenProduct/image/arrow.png" class="handleArrow">
        <div class="imageItem">
          <img :src="optionsType==='待受理'?'https://www.idea-co-sf.com/gardenProduct/image/unHandle.svg':'https://www.idea-co-sf.com/gardenProduct/image/handle.svg'" class="handleImg">
          <span>处理</span>
        </div>
        <img src="https://www.idea-co-sf.com/gardenProduct/image/arrow.png" class="handleArrow">
        <div class="imageItem">
          <img src="https://www.idea-co-sf.com/gardenProduct/image/evaluate.svg" class="handleImg">
          <span>评价</span>
        </div>
      </div>
    </div>
    <div class="reportBody" v-if="optionsType!=='已处理'">
      <ul class="detailUl">
        <li class="detailLi">
           <span class="liInfo">
              <label>
                  <radio value="报事" :checked="optionsType==='待受理'" color="#0365F9" :disabled="optionsType==='待处理'"/>派单
              </label>
              <label style="margin-left: 64rpx">
                  <radio value="咨询" :checked="optionsType==='待处理'" color="#0365F9" :disabled="optionsType==='待受理'"/>处理
               </label>
          </span>
        </li>
        <li class="detailLi" v-if="optionsType==='待受理'">
          <span class="liName">
            派单给
          </span>
          <span class="liInfo">
            李开心
          </span>
        </li>
        <li class="detailLi2" v-if="optionsType==='待受理'">
           <span class="liName" style="margin-bottom: 16rpx">
            备注
          </span>
          <van-field
              :value="form.contant"
              autosize
              type="textarea"
              placeholder="请输入文字进行报事报修描述"
              class="myField2"
              maxlength="800"
              show-word-limit
          />
        </li>
        <li class="detailLi2" v-if="optionsType==='待处理'">
          <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
                :max-count="6"
                @delete="deleteRYXXZP"
                :file-list="fileList"
                @after-read="uploadRYXXZP"
                :show-upload="true"
            />
          </div>
        </li>
        <li class="detailLi" v-if="optionsType==='待处理'">
          <span class="liName">
            处理人
          </span>
          <span class="liInfo">
            李开心
          </span>
        </li>
        <li class="detailLi" v-if="optionsType==='待处理'" style="border-bottom: none">
          <span class="liName">
            处理时间
          </span>
          <span class="liInfo">
            {{timeNow}}
          </span>
        </li>
      </ul>
    </div>
    <div class="reportBody" v-if="optionsType==='已处理'">
      <div class="handleTitle">派单信息</div>
      <ul class="detailUl">
        <li class="detailLi">
          <span class="liName">
            派单给
          </span>
          <span class="liInfo">
            李开心
          </span>
        </li>
        <li class="detailLi2">
           <span class="liName" style="margin-bottom: 16rpx">
            备注
          </span>
          <van-field
              :value="form.contant"
              autosize
              type="textarea"
              placeholder="请输入文字进行报事报修描述"
              class="myField2"
              maxlength="800"
              show-word-limit
          />
        </li>
        <li class="detailLi">
          <span class="liName">
            派单人
          </span>
          <span class="liInfo">
            李欣怡
          </span>
        </li>
        <li class="detailLi" style="border-bottom: none">
          <span class="liName">
            派单时间
          </span>
          <span class="liInfo">
            2024-05-18  15：30
          </span>
        </li>
      </ul>
    </div>
    <div class="reportBody" v-if="optionsType==='已处理'">
      <div class="handleTitle">处理信息</div>
      <ul class="detailUl">
        <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
                :max-count="6"
                @delete="deleteRYXXZP"
                :file-list="fileList"
                @after-read="uploadRYXXZP"
                :show-upload="true"
            />
          </div>
        </li>
        <li class="detailLi">
          <span class="liName">
            处理人
          </span>
          <span class="liInfo">
            李开心
          </span>
        </li>
        <li class="detailLi" style="border-bottom: none">
          <span class="liName">
            处理时间
          </span>
          <span class="liInfo">
            2024-05-18  15：30
          </span>
        </li>
      </ul>
    </div>
    <div class="reportBody" v-if="optionsType==='已处理'">
      <div class="evaluationBox" >
        <span class="evaName">您对本次服务的评价</span>
        <van-rate
            :value="value"
            :size="24"
            gutter="32rpx"
            void-color="#eee"
            bind:change="onChange"
            color="#fd9a63"
        />
      </div>
    </div>
    <div class="buttonBox">
      <button class="zcBtn" @tap="closePage" :class="optionsType==='已处理'?'btn2':'btn '">关闭</button>
      <button class="btn tjBtn" v-if="optionsType==='待受理'">提交派单</button>
      <button class="btn tjBtn" v-if="optionsType==='待处理'">处理完成</button>
    </div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      isCheck:false,
      isCheck2:false,
      form:{
        contant:''
      },
      checkList:[
        {name:'挂件安装',isCheck:true},
        {name:'我要投诉',isCheck:false},
        {name:'疏通管道',isCheck:false},
        {name:'维修线路',isCheck:false},
        {name:'更换灯泡',isCheck:false},
        {name:'网络维修',isCheck:false},
        {name:'保洁服务',isCheck:false},
        {name:'其他维修',isCheck:false},
      ],
      fileList:[],
      optionsType:'',
      timeNow:'',
      value: "5"
    }
  },
  onLoad(options) {
    console.log(options);
    this.optionsType = options.type
    if (options.type==='待处理'){
      uni.setNavigationBarTitle({
        title: '报修处理',
      });
    }else if(options.type==='已处理'){
      uni.setNavigationBarTitle({
        title: '报修详情',
      });
    }else {
      uni.setNavigationBarTitle({
        title: '报修派单',
      });
    }
  },
  mounted(){
    this.getTime()
  },
  methods:{
    // toRecord() {
    //   uni.navigateTo({
    //     url:'/pages/subPackages/reportRepair/repairRecord'
    //   })
    // },
    getTime(){

      let timestamp = new Date().getTime();
      let dateStr = new Date().toLocaleDateString();
      console.log(dateStr);

      let date = new Date();
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      let hours = date.getHours();
      let minutes = date.getMinutes();
      let fullDateStr = `${year}-${month}-${day} ${hours}:${minutes}`;
      console.log(fullDateStr);
      this.timeNow = fullDateStr
    },
    closePage() {
      uni.navigateTo({
        url:'/pages/subPackages/todo/repairAcceptance'
      })
    },
    clickCheck(item){
      item.isCheck = !item.isCheck
    },
    deleteRYXXZP(event) {
      this.fileList.splice(event.detail.index, 1);
      this.$forceUpdate();
    },
    uploadRYXXZP(event) {
      console.log(event)
      let that = this;
      const { file } = 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);
          that.fileList.push({
            imgUrl: "/FileController/download/" + data.data[0],
            id: data.data[0],
            url:
                that.$constant.BASE_URI +
                "/FileController/download/" +
                data.data[0],
            isImage: true,
          });
        },
        fail(res) {},
      });
    },
  }
}
</script>
<style lang="scss">
.addRepair{
  .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: inline-block;
          text-align: right;
          max-width: 428rpx;
          color: rgba(102, 102, 102, 1);
          font-size: 32rpx;
          line-height: 38rpx;
          display: flex;
          align-items: center;
          .radio{
            margin-left: 64rpx;
          }
          .phoneIcon{
            width: 64rpx;
            height: 64rpx;
            margin-left: 24rpx;
          }
        }
      }
      .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;
    }
    .btn2{
      width: 654rpx;
      height: 96rpx;
      display: flex;
      border-radius: 8rpx;
      align-items: center;
      justify-content: center;
      margin: 48rpx 48rpx 150rpx 48rpx;
      color: white;
      letter-spacing: 2rpx;
      text-indent: 2rpx;
    }
    .zcBtn{
      background: rgba(0, 0, 0, 0.05);
      color: rgba(3, 101, 249, 1);
      &::after{
        border: none;
      }
    }
    .tjBtn{
      background: #0365F9;
    }
  }
  .handleBox{
    background: white;
    padding: 32rpx;
    margin: 24rpx 0;
    .imageBox{
      display: flex;
      justify-content: space-evenly;
      align-items: center;
      margin-top: 48rpx;
      .handleImg{
        width: 72rpx;
        height: 72rpx;
        margin-bottom: 8rpx;
      }
      .handleArrow{
        width: 64rpx;
        height: 20rpx;
      }
    }
    .imageItem{
      display: flex;
      flex-direction: column;
      align-items: center;
      color: rgba(34, 34, 34, 1);
      font-size: 28rpx;
    }
  }
  .handleTitle{
    color: rgba(34, 34, 34, 1);
    font-size: 36rpx;
    font-weight: 600;
  }
  .evaluationBox {
    width: 686rpx;
    height: 100rpx;
    padding: 0 24rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f5f7fa;
    border-radius: 8rpx;
    box-sizing: border-box;
    margin-top: 24rpx;
    .evaName{
      font-size: 32rpx;
      color: rgba(51, 51, 51, 1);
    }
  }
}
</style>