product_wx/pages/subPackages/reportRepair/repairDetail.vue

<template>
  <div class="repair-detail-box">
    <div
      :class="[
        'repair-content',
        detailStatus === 'processed' ? '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}}
            </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
                class="annex-item"
                v-for="(item, index) in explainAnnexList"
                :key="index"
              >
                <img :src="item.url" alt="" v-if="item.type === 'image'" />
                <video
                  :src="item.url"
                  v-if="item.type === 'video'"
                  width="100%"
                  height="100%"
                ></video>
              </li>
            </ul>
          </div>
        </div>
        <div class="cell-item flex-item">
          <p class="label">报事人</p>
          <p class="tit tel-box">
            <span>{{ detail.userPhone }}</span>
            <TelNum :num="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">
        <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'">
              <van-step v-for="(item, index) in processSteps" :key="index">{{
                item.label
              }}</van-step>
            </van-steps>
          </div>
        </div>
        <div class="block-cell-item">
          <p class="label">
            处理后拍照<span class="tips">（支持图片上传限20M内，最多6张）</span>
          </p>
          <div class="tit">
            <ul class="annex-list-box">
              <li
                class="annex-item"
                v-for="(item, index) in processedAnnexList"
                :key="index"
              >
                <img :src="item.url" alt="" v-if="item.type === 'image'" />
                <video
                  :src="item.url"
                  v-if="item.type === 'video'"
                  width="100%"
                  height="100%"
                ></video>
              </li>
            </ul>
          </div>
        </div>
        <div class="cell-item flex-item">
          <p class="label">结案人</p>
          <p class="tit tel-box">
            <span>{{ detail.handleUserId }}</span>
            <TelNum :num="detail.hanleUserPhone" :showTel="false" />
          </p>
        </div>
        <div class="cell-item">
          <p class="label">结案时间</p>
          <p class="tit">{{detail.handleTime}}</p>
        </div>
      </div>
      <div class="white-box page-4" v-if="detailStatus === 'processed'||detailStatus === 'evaluated'">
        <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 v-model="evaluateVal" color="#ffd21e" :readonly="detailStatus !== 'processed'"/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="repair-bottom bottom-button" v-if="detailStatus === 'processed'">
      <button class="btn" @click="onConfirm">评价提交</button>
    </div>
  </div>
</template>
<script>
import TelNum from '@/components/tel-number'
import { getById } from '../../service/api_repair'
import Base from '@/pages/base/base'
import { editRepair } from '@/service/api_repair'
import { Toast } from 'vant'
export default {
    components: {
        TelNum
    },
    data() {
        return {
            dc_key: ['QUICK_SELECTION', 'REPAIR_STATUS'],
            detailId: '', // 详情id
            detailStatus: '', // 详情状态：0、待受理 1、已受理 2、已处理  3、已评价
            explainAnnexList: [
                // {
                //     type: 'image',
                //     url: require('../../assets/image/reportRepair/shuibiao.jpeg')
                // }
            ], // 说明附件 type image、图片 video、视频
            processedAnnexList: [
                // {
                //     type: 'image',
                //     url: require('../../assets/image/reportRepair/shuibiao.jpeg')
                // }
            ], // 附件 type image、图片 video、视频
            stepActive: 0, // 当前处理到哪一步
            processSteps: [
                {
                    id: 1,
                    status: 1,
                    label: '上报'
                },
                {
                    id: 2,
                    status: 1,
                    label: '已受理'
                },
                {
                    id: 3,
                    status: 1,
                    label: '已处理'
                },
                {
                    id: 4,
                    status: 0,
                    label: '评价'
                }
            ], // 处理流程
            evaluateVal: 0, // 评分
            id: '',
            detail: {},
            fileUrlList: [],
            params: {
                id: '',
                evaluateNum: '',
                score: ''
            }
        }
    },
    mixins: [Base],
    mounted() {
        this.id = this.$route.query.id
        this.initDict(this.dc_key).then((res) => {
            this.getDetailById()
        })
    },
    methods: {
        onConfirm(value) {
            this.params.evaluateNum = this.params.evaluateNum + 1
            this.params.score = this.params.score + this.evaluateVal
            this.params.status = 'evaluated'
            editRepair(this.params).then((res) => {
                Toast.success('评价成功')
                this.$router.push({ path: 'repairRecord',
                    query: { type: this.detail.type }
                })
            })
        },
        getDetailById() {
            const _this = this
            getById({ id: _this.id }).then((res) => {
                console.log(res.data)
                if (res.data) {
                    const det = _this.getItemJson(res.data)
                    this.detail = det
                    this.explainAnnexList = det.fileUrlList
                    this.processedAnnexList = 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))
                }
                // const item = _this.getItemJson(res)
            })
        },
        getItemJson: function(item) {
            item.releaseTime = this.$common.transDate(item.releaseTime)
            item.createdAt = this.$common.transDate(item.createdAt)
            item.serviceType = this.dc_map.QUICK_SELECTION[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 = 0
                    break
                case 'acceptance':
                    this.stepActive = 1
                    break
                case 'evaluated':
                    this.stepActive = 3
                    break
                case 'processed':
                    this.stepActive = 2
                    break
            }
            const fileUrls = this.$common.castEval(item.fileUrl)
            const fileUrl = []
            if (fileUrls !== null && fileUrls.length > 0) {
                fileUrls.forEach(item => {
                    if (item.url) {
                        const ul = {
                            type: 'image',
                            url: item.url.replace('/server', '/smartParkH5Server')
                        }
                        fileUrl.push(ul)
                    }
                })
            }
            item.fileUrlList = fileUrl

            const handleUrls = this.$common.castEval(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
            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" scoped>
.repair-detail-box {
  width: 100%;
  height: 100%;
  .page-1 {
    .textarea {
      padding: 20px;
      border-radius: 10px;
      background: $page-color-base;
      box-sizing: border-box;
    }
  }
  .page-4 {
    .evaluate-box {
      padding: 20px 30px;
      background: $page-color-base;
      border: 1px solid #ebedf0;
      border-radius: 100px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
    }
  }
  .annex-list-box {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    &::after {
      display: block;
      content: "";
      width: 30%;
      height: 0px;
    }
    .annex-item {
      width: 30%;
      height: 180px;
      border: 1px solid $text4;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
      > img {
        width: 100%;
        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: 20px;
    }
  }
}
</style>