settle_down_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">{{ detail.companyName }}</span>
        </li>
        <li class="detailLi">
          <span class="liName">
            <span style="color: red; margin-right: 10rpx">*</span>
            您是想
          </span>
          <span class="liInfo">
            <van-radio-group :value="detail.type" disabled>
              <van-radio name="1">报事</van-radio>
              <van-radio name="2">咨询</van-radio>
            </van-radio-group>
          </span>
        </li>
        <li class="detailLi2">
          <span class="liName"> 快捷选择 </span>
          <div class="detailLi2Box">
            <div class="detailLi2BoxTop">
              <div
                class="checkItem"
                :class="detail.serviceType === item.label ? 'checked' : ''"
                v-for="item in checkList"
              >
                {{ item.label }}
              </div>
            </div>
            <van-field
              :value="detail.description"
              autosize
              type="textarea"
              placeholder="请输入文字进行报事报修描述"
              class="myField"
              maxlength="800"
              show-word-limit
              readonly
            />
          </div>
        </li>
        <li class="detailLi">
          <span class="liName">
            <span style="color: red; margin-right: 10rpx">*</span>
            位置
          </span>
          <span class="liInfo">
            <van-radio-group :value="detail.position" disabled>
              <van-radio name="1">室内</van-radio>
              <van-radio name="2">公区</van-radio>
            </van-radio-group>
          </span>
        </li>
        <li class="detailLi2">
          <span class="liName">
            补充说明
            <span style="color: #b3b3b3; font-size: 28rpx"
              >（支持图片/视频上传限20M内，最多6张）</span
            >
          </span>
          <div style="display: flex; flex-wrap: wrap; gap: 24rpx">
            <div
              class="detailLi2Box annex-item"
              style="margin: 24rpx 0 0 0"
              v-for="(item, index) in explainAnnexList"
              :key="index"
            >
              <img
                :src="item.url"
                alt=""
                v-if="item.type === 'image'"
                class="anImg"
                @tap="clickImg(item.url)"
              />
            </div>
          </div>
          <div
            class="detailLi2Box annex-item"
            style="margin: 24rpx 0 0 0"
            v-for="(item, index) in explainAnnexList"
            :key="index"
          >
            <video
              :src="item.url"
              v-if="item.type === 'video'"
              style="width: 686rpx"
              height="100%"
              autoplay
            ></video>
          </div>
        </li>
        <li class="detailLi">
          <span class="liName"> 报事人 </span>
          <span class="liInfo">
            {{ detail.userName }}
            <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">
            {{ detail.createdAt }}
          </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="
              stepActive === '已受理' || stepActive === '已处理'
                ? 'https://www.idea-co-sf.com/gardenProduct/image/acceptance.svg'
                : 'https://www.idea-co-sf.com/gardenProduct/image/unAcceptance.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="
              stepActive === '已处理'
                ? 'https://www.idea-co-sf.com/gardenProduct/image/handle.svg'
                : 'https://www.idea-co-sf.com/gardenProduct/image/unHandle.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="
              detail.evaluateStatus === 2
                ? 'https://www.idea-co-sf.com/gardenProduct/image/unEvaluate.svg'
                : 'https://www.idea-co-sf.com/gardenProduct/image/evaluate.svg'
            "
            class="handleImg"
          />
          <span>评价</span>
        </div>
      </div>
    </div>
    <div
      class="reportBody"
      v-if="stepActive === '已处理' || stepActive === '已受理'"
    >
      <div class="handleTitle">派单信息</div>
      <ul class="detailUl">
        <li class="detailLi">
          <span class="liName"> 派单给 </span>
          <span class="liInfo">
            {{ detail.handleUserName }}
          </span>
        </li>
        <li class="detailLi2">
          <span class="liName" style="margin-bottom: 16rpx"> 备注 </span>
          <van-field
            :value="detail.remark"
            autosize
            type="textarea"
            placeholder=" "
            class="myField2"
            readonly
          />
        </li>
        <li class="detailLi">
          <span class="liName"> 派单人 </span>
          <span class="liInfo">
            {{ detail.dispatchUserName }}
          </span>
        </li>
        <li class="detailLi" style="border-bottom: none">
          <span class="liName"> 派单时间 </span>
          <span class="liInfo">
            {{ detail.dispatchTime }}
          </span>
        </li>
      </ul>
    </div>
    <div class="reportBody" v-if="stepActive === '已处理'">
      <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 style="display: flex; flex-wrap: wrap; gap: 24rpx">
            <div
              class="detailLi2Box annex-item"
              style="margin: 24rpx 0 0 0"
              v-for="(item, index) in handleUrlList"
              :key="index"
            >
              <img
                :src="item.url"
                alt=""
                class="anImg"
                @tap="clickImg(item.url)"
              />
            </div>
          </div>
        </li>
        <li class="detailLi">
          <span class="liName"> 处理人 </span>
          <span class="liInfo">
            {{ detail.handleUserName }}
          </span>
        </li>
        <li class="detailLi" style="border-bottom: none">
          <span class="liName"> 处理时间 </span>
          <span class="liInfo">
            {{ detail.handleTime }}
          </span>
        </li>
      </ul>
    </div>
    <div class="reportBody" v-if="stepActive === '已处理'">
      <div class="evaluationBox">
        <span class="evaName">您对本次服务的评价</span>
        <van-rate
          :value="detail.evaluateNum"
          :size="24"
          gutter="32rpx"
          void-color="#eee"
          @change="changeStar"
          color="#fd9a63"
          :disabled="detail.evaluateStatus === 2"
          disabled-color="#fd9a63"
        />
      </div>
    </div>
    <div class="buttonBox">
      <button
        class="zcBtn"
        @tap="closePage"
        :class="
          stepActive === '已处理' && detail.evaluateStatus === 1
            ? 'btn2'
            : 'btn '
        "
      >
        关闭
      </button>
      <button
        class="btn tjBtn"
        v-if="stepActive === '已处理' && detail.evaluateStatus === 1"
        @tap="submit"
      >
        提交
      </button>
    </div>
  </div>
</template>
<script>
import {
  getRepairDispatchById,
  getUserLocalStorageInfo,
  getByCodes,
  editRepair,
} from "@/js_sdk/http";
export default {
  data() {
    return {
      dc_key: ["QUICK_SELECTION"],
      isCheck: false,
      isCheck2: false,
      detail: {},
      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",
      id: "",
      dic_SelectList: [],
      explainAnnexList: [],
      stepActive: "0",
      pingParams: {
        id: "",
        evaluateNum: "5",
        score: "",
        evaluateStatus: 2,
      },
      handleUrlList: [],
    };
  },
  onLoad(options) {
    const item = JSON.parse(options.item);
    this.id = item.id;
    this.optionsType = item.type;
    if (options.type === "待处理") {
      uni.setNavigationBarTitle({
        title: "报修处理",
      });
    } else if (options.type === "已处理") {
      uni.setNavigationBarTitle({
        title: "报修详情",
      });
    } else {
      uni.setNavigationBarTitle({
        title: "报修派单",
      });
    }
    this.getByCodes();
  },
  mounted() {
    this.getTime();
  },
  methods: {
    changeStar(e) {
      console.log(e);
      this.pingParams.evaluateNum = e.detail;
    },
    submit() {
      this.pingParams.id = this.id;
      this.pingParams.evaluateStatus = "2";
      console.log(this.pingParams);
      editRepair(this.pingParams).then((res) => {
        if (res.code == 200) {
          uni.showToast({
            title: "提交成功",
            icon: "none",
            mask: true,
            duration: 1000,
          });
          uni.navigateBack();
        }
      });
    },
    // toRecord() {
    //   uni.navigateTo({
    //     url:'/pages/subPackages/reportRepair/repairRecord'
    //   })
    // },
    // 放大图片
    clickImg(url) {
      wx.previewImage({
        urls: [url], //接受的是一个数组，默认展示第一张
        current: "",
        success: function (res) {},
        fail: function (res) {},
        complete: function (res) {},
      });
    },
    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;
      this.getById();
    },
    getById() {
      const _this = this;
      getRepairDispatchById(this.id).then((res) => {
        if (res.data) {
          const det = _this.getItemJson(res.data);
          this.detail = det;
          console.log("this.detail", this.detail);
          this.explainAnnexList = det.fileUrlList;
          this.handleUrlList = det.handleUrlList;
          this.detailStatus = det.status;
          this.params = {
            id: det.id,
            evaluateNum: det.evaluateNum,
            score: det.score,
          };
          this.evaluateVal =
            (det.score == null ? 0 : det.score) /
            (det.evaluateNum == null ? 1 : det.evaluateNum);
        }
      });
    },
    getTime() {
      let timestamp = new Date().getTime();
      let dateStr = new Date().toLocaleDateString();

      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;
    },

    getItemJson: function (item) {
      item.releaseTime = this.$common.transDate(item.releaseTime);
      item.createdAt = this.$common.transDate(item.createdAt);

      let transformedObject = this.dic_SelectList.QUICK_SELECTION.reduce(
        (acc, obj) => {
          acc[obj.value] = obj.label;
          return acc;
        },
        {}
      );

      item.serviceType = transformedObject[item.serviceType];
      if (item.userId) {
        const user = item.userId.split("-");
        item.userPhone = user[1] + "-" + user[2];
        item.phone = user[2];
      }
      if (item.handleUserId) {
        const test = item.handleUserId.split("-");
        item.handleUserId = test[1] + "-" + test[2];
        item.hanleUserPhone = test[2];
      }
      item.handleTime = this.$common.transDate(item.handleTime);
      switch (item.status) {
        case "unAcceptance":
          this.stepActive = "待受理";
          break;
        case "acceptance":
          this.stepActive = "已受理";
          break;
        case "processed":
          this.stepActive = "已处理";
          break;
        case "unSubmit":
          this.stepActive = "暂存";
          break;
      }
      if (item.fileUrl) {
        console.log("item.fileUrl", JSON.parse(item.fileUrl));
        const fileUrl = JSON.parse(item.fileUrl);
        const newFile = [];
        fileUrl.forEach((e) => {
          newFile.push({
            imgUrl: e.imgUrl,
            id: e.id,
            url: e.url,
            type: e.type,
          });
        });
        console.log("newFile", newFile);
        item.fileUrlList = newFile;
      }
      if (item.handleUrl) {
        // console.log('item.fileUrl' ,JSON.parse(item.fileUrl))
        const fileUrl = JSON.parse(item.handleUrl);
        const newFile = [];
        fileUrl.forEach((e) => {
          newFile.push({
            imgUrl: e.imgUrl,
            id: e.id,
            url: e.url,
            type: e.type,
          });
        });
        // console.log('newFile',newFile)
        item.handleUrlList = newFile;
      }
      const handleUrls = JSON.parse(item.handleUrl);
      const handleUrl = [];
      if (handleUrls !== null && handleUrls.length > 0) {
        handleUrls.forEach((item) => {
          if (item.url) {
            const ul = {
              type: "image",
              url: item.url.replace("/server", "/smartParkH5Server"),
            };
            handleUrl.push(ul);
          }
        });
      }
      item.handleUrlList = handleUrl;
      console.log("item", item);
      return item;
    },
    closePage() {
      uni.navigateBack({});
    },
    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;
          .phoneIcon {
            width: 64rpx;
            height: 64rpx;
            margin-left: 24rpx;
          }
        }
        .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;
          }
        }
      }
    }
  }
  .anImg {
    width: 200rpx;
    height: 200rpx;
  }
  .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: 240rpx;
      height: 80rpx;
      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;
      width: 654rpx;
    }
  }
  .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: 28rpx;
      color: rgba(51, 51, 51, 1);
    }
  }
}
</style>