settle_down_wx/pages/subPackages/repairDispatch-app/detail.vue

<template>
  <div class="repair-detail-box">
    <div
      :class="[
        'repair-content',
        detailStatus === 'unAcceptance' ? 'fixed-page-content' : 'page-content',
      ]"
    >
      <div class="white-box page-1">
        <div class="cell-item">
          <p class="label">当前企业</p>
          <p class="tit">{{ detail.companyName }}</p>
        </div>
        <div class="cell-item">
          <p class="label">您是想</p>
          <div class="tit">{{ detail.type === "1" ? "报事" : "咨询" }}</div>
        </div>
        <div class="cell-item">
          <p class="label">快捷选择</p>
          <div class="tit">{{ detail.serviceType }}</div>
        </div>
        <div class="block-cell-item">
          <p class="label">报事报修描述</p>
          <div class="tit">
            <div class="textarea">
              {{ detail.description == null ? "" : detail.description }}
            </div>
          </div>
        </div>
      </div>
      <div class="white-box page-2">
        <div class="cell-item">
          <p class="label">位置</p>
          <div class="tit">{{ detail.position === "1" ? "室内" : "公区" }}</div>
        </div>
        <div class="block-cell-item">
          <p class="label">补充说明</p>
          <div class="tit">
            <ul class="annex-list-box">
              <li
                @click="lookLookpng(explainAnnexList, index)"
                class="annex-item"
                v-for="(item, index) in explainAnnexList"
                :key="index"
              >
                <img :src="item" alt="" />
              </li>
            </ul>
          </div>
        </div>
        <div class="cell-item flex-item">
          <p class="label">报事人</p>
          <p class="tit tel-box">
            <span>{{ userId2 }}</span>
            <TelNum :num="detail.phone" v-if="detail.phone" :showTel="false" />
          </p>
        </div>
        <div class="cell-item">
          <p class="label">报事时间</p>
          <p class="tit">{{ detail.createdAt }}</p>
        </div>
      </div>
      <div
        class="white-box page-3 form-part"
        style="margin-bottom: 100rpx; padding-bottom: 100rpx"
      >
        <div class="custom-item-tit">
          <p class="tit">处理情况</p>
        </div>
        <div class="block-cell-item">
          <p class="label">处理进展</p>
          <div class="tit">
            <van-steps
              :active="stepActive"
              :active-color="'#6600FF'"
              :steps="processSteps"
            >
            </van-steps>
          </div>
        </div>
        <div style="width: 100%; height: 88rpx" @click="openPicker()">
          <van-field
            readonly
            :disabled="false"
            clickable
            class="input-item picker-item"
            :value="value"
            input-align="right"
            label="处理人"
            placeholder="请选择"
          >
            <template #button>
              <i class="iconfont icon-zuo"></i>
            </template>
          </van-field>
        </div>
        <van-popup
          :show="showPicker"
          position="bottom"
          round
          :closeable="false"
          :close-on-click-overlay="false"
        >
          <van-picker
            class="picker-box"
            show-toolbar
            :columns="columns"
            @confirm="(value) => onSelect(value)"
            @cancel="showPicker = false"
          />
          <div style="height: 100rpx; width: 100%"></div>
        </van-popup>

        <div class="custom-item-tit">
          <p class="tit">备注</p>
        </div>
        <div class="custom-textarea-box">
          <uni-easyinput
            type="textarea"
            class="bgcF9F9F9 height218rpx"
            v-model="params.remark"
            autoHeight
            placeholder="请填写"
            show-word-limit
            :disabled="detail.status !== 'unAcceptance'"
          >
          </uni-easyinput>
        </div>
      </div>
      <!-- -->
      <div
        class="white-box page-4"
        v-if="detailStatus === 'processed' && detail.isUser === 'true'"
        style="padding-bottom: 120rpx"
      >
        <div class="custom-item-tit">
          <p class="tit">服务评价</p>
        </div>
        <div class="custom-white-box-content">
          <div class="evaluate-box">
            <p class="evaluate-left">企业对本次服务的评价</p>
            <div class="evaluate-right">
              <van-rate
                :vlaue="evaluateVal"
                color="#ffd21e"
                @change="getRate"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--       v-if="detailStatus === 'processed' && detail.isUser === 'true'" -->
    <div
      class="repair-bottom bottom-button"
      v-if="detailStatus === 'processed' && detail.isUser === 'true'"
    >
      <button class="btn" @click="onPinConfirm">评价提交</button>
    </div>
    <div
      class="repair-bottom bottom-button"
      v-if="detail.status === 'unAcceptance'"
    >
      <button class="btn" @click="onConfirm()">派单</button>
    </div>
  </div>
</template>
  <script>
import vanPopup from "../../../wxcomponents/weapp/dist/popup/index";
import vanRate from "../../../wxcomponents/weapp/dist/rate/index";
import TelNum from "../../subPackages/components/tel-number";
// import { getRepairDispatchById, getDispatchToPerson } from "../../service/api_repair";
import {
  getByCodes,
  getRepairDispatchById,
  getUserLocalStorageInfo,
  getDispatchToPerson,
  editRepair,
} from "@/js_sdk/http";
// import Base from "@/pages/base/base";
// import { editRepair } from "@/service/api_repair";
// import { getCompanyById } from "@/service/api_road_show";
// import { Toast, ImagePreview } from "vant";
export default {
  components: {
    TelNum,
    vanPopup,
    vanRate,
  },
  data() {
    return {
      dic_key: ["QUICK_SELECTION", "REPAIR_STATUS"],
      dic_SelectList: {},
      detailId: "", // 详情id
      value: "",
      showPicker: false,
      columns: [],
      detailStatus: "unAcceptance", // 1  待派单  2已派单
      explainAnnexList: [
        {
          type: "image",
          url: "",
        },
      ], // 说明附件 type image、图片 video、视频
      processedAnnexList: [
        {
          type: "image",
          url: "",
        },
      ], // 附件 type image、图片 video、视频
      stepActive: 0, // 当前处理到哪一步
      processSteps: [
        {
          id: 1,
          status: 1,
          text: "上报",
        },
        {
          id: 2,
          status: 1,
          text: "已受理",
        },
        {
          id: 3,
          status: 1,
          text: "已处理",
        },
        {
          id: 4,
          status: 0,
          text: "评价",
        },
      ], // 处理流程
      evaluateVal: 0, // 评分
      id: "",
      detail: {},
      fileUrlList: [],
      pingParams: {
        id: "",
        evaluateNum: "",
        score: "",
      },
      userId2: "",
      params: {
        id: "",
        status: "acceptance",
        dispatchUserId:
          getUserLocalStorageInfo().user.id +
          "-" +
          getUserLocalStorageInfo().user.truename +
          "-" +
          getUserLocalStorageInfo().user.phone, // getUserLocalStorageInfo().user.current
        dispatchTime: this.$common.transServDate(new Date()),
        handleUserId: "",
        remark: "",
      },
    };
  },

  onLoad(option) {
    console.log(option);
    this.id = option.id;

    this.getByCodes();
    getDispatchToPerson({ groupId: "" }).then((res) => {
      this.columns = res.data;
    });
  },
  methods: {
    lookLookpng(imgList, i) {
      console.log(imgList);
      uni.previewImage({
        urls: imgList,
        longPressActions: {
          itemList: ["发送给朋友", "保存图片", "收藏"],
          success: function (data) {
            console.log(data);
          },
          fail: function (err) {
            console.log(err);
          },
        },
      });
    },
    openPicker() {
      this.showPicker = true;
    },
    closePicker() {
      this.showPicker = false;
    },
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dic_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.getDetailById();
    },
    onSelect(event) {
      let val = event.detail.value;
      this.value = val.text;
      this.params.handleUserId = val.value + "-" + val.text;
      this.showPicker = false;
    },
    onPinConfirm(value) {
      this.pingParams.evaluateNum = this.pingParams.evaluateNum + 1;
      this.pingParams.score = this.pingParams.score + this.evaluateVal;
      this.pingParams.status = "evaluated";
      editRepair(this.pingParams).then((res) => {
        this.$showToast("评价成功");
        uni.navigateBack({});
      });
    },
    onConfirm() {
      let that = this;
      if (that.params.handleUserId == null || that.params.handleUserId === "") {
        this.$showToast("请选择处理人");
        return;
      }
      this.params.id = that.id;
      that.params.updatedBy = getUserLocalStorageInfo().user.id;
      editRepair(that.params).then((res) => {
        this.$showToast("派单成功");
        uni.navigateBack({});
      });
    },
    open(item, index) {
      //
      let that = this;
      let fileUrlViewList = that.detail.fileUrlViewList.map((e) => {
        return e.url;
      });
      uni.previewImage({
        urls: fileUrlViewList,
      });
    },
    getDetailById() {
      const _this = this;
      getRepairDispatchById(_this.id).then((res) => {
        if (res.data) {
          const det = _this.getItemJson(res.data);
          this.detail = det;
          this.explainAnnexList = det.fileUrlViewList;
          this.processedAnnexList = det.handleUrlList;
          this.detailStatus = det.status;
          this.params.handleUserId = det.handleUserId;
          this.value = det.dispatchUserId;
          if (det.handleUserId != null && det.handleUserId !== "") {
            const test = det.handleUserId.split("-");
            this.value = test[1] + "-" + test[2];
          }
          if (det.userId != null && det.userId !== "") {
            const test = det.userId.split("-");
            this.userId2 = test[1] + "-" + test[2];
          }
          this.params.remark = det.remark;
          this.pingParams = {
            id: det.id,
            evaluateNum: det.evaluateNum,
            score: det.score,
          };
          // this.evaluateVal = ((det.score == null ? 0 : det.score) / (det.evaluateNum == null ? 1 : det.evaluateNum))
        }
        // const item = _this.getItemJson(res)
      });
    },
    getRate(event) {
      this.evaluateVal = event;
    },
    getItemJson: function (item) {
      //   item.releaseTime = this.$common.transBaseDateTime(item.releaseTime);
      //   item.createdAt = this.$common.transBaseDateTime(item.createdAt);
      item.serviceType =
        this.dic_SelectList.QUICK_SELECTION[item.serviceType - 1].label;

      //   if (item.handleUserId) {
      //     item.handlePhone = item.handleUserId.split("-")[1];
      //   }
      //   item.handleTime = this.$common.transDate(item.handleTime);
      switch (item.status) {
        case "unAcceptance":
          this.stepActive = 0;
          break;
        case "acceptance":
          this.stepActive = 1;
          break;
        case "evaluated":
          this.stepActive = 3;
          break;
        case "processed":
          this.stepActive = 2;
          break;
      }
      const fileUrls = item.fileUrl ? item.fileUrl.split(",") : [];
      console.log("files你到底是干嘛的", fileUrls);
      const fileUrlViews = [];
      if (fileUrls !== null && fileUrls.length > 0) {
        fileUrls.forEach((item) => {
          item =
            this.$constant.BASE_URI + "/wx/fileController/download/" + item;
          fileUrlViews.push(item);
        });
      }
      item.fileUrlViewList = fileUrlViews;

      const handleUrls = item.handleUrl ? item.handleUrl.split(",") : [];
      console.log(handleUrls);
      const handleUrl = [];

      if (handleUrls !== null && handleUrls.length > 0) {
        handleUrls.forEach((item) => {
          if (item.url) {
            const ul = {
              type: "image",
              url: item.url,
            };
            handleUrl.push(ul);
          }
        });
      }
      item.handleUrlList = handleUrl;
      console.log(item);
      return item;
    },
    /**
     *
     */
    quickSelect(item) {
      if (this.quickSleced.val && this.quickSleced.val === item.val) {
        this.quickSleced = {};
      } else {
        this.quickSleced = item;
      }
    },
    /**
     * 上传文件
     */
    afterRead(file) {
      console.log(file);
    },
  },
};
</script>
  <style lang="scss" >
.bottom-button {
  position: fixed;
  z-index: 100;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 160rpx;
  padding: 35rpx 30rpx;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  .btn {
    height: 100%;
    line-height: 80rpx;
    width: 100%;
    color: #fff;
    background-color: #6600ff;
    font-size: 34rpx;
    border-radius: 10rpx;
  }
}
.repair-detail-box {
  //   width: 100%;
  //   height: 100%;
  .page-1 {
    .textarea {
      padding: 20rpx;
      border-radius: 10rpx;
      background: $page-color-base;
      box-sizing: border-box;
    }
  }

  .page-3 {
    padding-bottom: 100rpx;
    .input-item {
      padding: 0;
    }
    .custom-item-tit {
      height: 13.333vw;
      font-size: 4.267vw;
      color: #333;
      padding: 2.667vw 0;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .tit {
        &::after {
          content: "";
          width: 0.8vw;
          height: 90%;
          background-color: #976dec;
          border-radius: 0.4vw;
          position: absolute;
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
    }
    .tit {
      padding-left: 2.667vw;
      position: relative;
    }
  }
  .page-4 {
    .custom-item-tit {
      height: 13.333vw;
      font-size: 4.267vw;
      color: #333;
      padding: 2.667vw 0;
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: justify;
      -ms-flex-pack: justify;
      justify-content: space-between;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      .tit {
        &::after {
          content: "";
          width: 0.8vw;
          height: 90%;
          background-color: #976dec;
          border-radius: 0.4vw;
          position: absolute;
          left: 0;
          top: 50%;
          -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
        }
      }
    }
    .tit {
      padding-left: 2.667vw;
      position: relative;
    }
    s .evaluate-box {
      padding: 20rpx 30rpx;
      background: $page-color-base;
      border: 2rpx solid #ebedf0;
      border-radius: 100rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }
  }
  .annex-list-box {
    display: flex;
    flex-wrap: wrap;
    &::after {
      display: block;
      content: "";
      width: 30%;
      height: 0rpx;
    }
    .annex-item {
      width: 240rpx;
      height: 240rpx;
      border: 2rpx solid $text4;
      margin-bottom: 20rpx;
      position: relative;
      overflow: hidden;
      > img {
        width: 240rpx;
        height: 240rpx;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        display: block;
      }
      video {
        width: 100%;
        height: 100%;
      }
    }
  }
  .tel-box {
    display: flex;
    align-items: center;
    /deep/ .custom-tel-component {
      margin-left: 20rpx;
    }
  }
}
</style>
  <style lang="scss">
.image-repairDispatch-box {
  .van-image-preview__close-icon {
    color: #fff;
    font-size: 64rpx;
  }
}
</style>