aftermarket-h5/src/views/detail/index.vue

// 评价页面
<template>
  <div class="page">
    <div class="stepList item_content" :key="stepShow+'123'">
      <div class="item_content_top">
        <div class="stepList_title">维修单号 {{id}}</div>
        <van-button v-if="detailData.repairerVo?.status == 30" size="small" @click="goRoute(`/repair/${id}`)" color="#00B3EC" type="primary" >待确认</van-button>
        <van-button v-if="detailData.repairerVo?.status == 80 || detailData.repairerVo?.status == 40" size="small" @click="goRoute(`/payment/${id}`)" color="#00B3EC" type="primary" >支付</van-button>
        <van-button v-if="detailData.repairerVo?.status  > 80 && detailData.repairerVo?.commentStatus == 0" size="small" @click="goRoute(`/evaluate/${id}`)" color="#00B3EC" type="primary" >评价</van-button>
        <van-button v-if="detailData.repairerVo?.status  > 80 && detailData.applyInvoice == 0 && detailData.repairerVo.warrantyType != 0" size="small" @click="goRoute(`/invoice/${id}`)" color="#00B3EC" type="primary" >申请开票</van-button>
      </div>
      <transition-group name="van-fade">
        <!-- <div v-show="stepShow">Slide Right</div> -->
        <div class="border stepItem" v-for="(item, index) in processList" :key="index" v-show="stepShow ? true : index < 1">
          <div class="step">
            <div class="step_title">{{item.title || item.remark}}</div>
            <!-- <div v-if="item.customerAddress">{{item.customerAddress.sendType == 0?' 前台送修':`快递寄送 ${item.customerAddress?.sendTrackingNum}`}}</div> -->
            <div class="htmlText" v-if="item.customerAddress">{{item.customerAddress.getType == 0?' 前台取回':`快递寄回 ${item.customerAddress?.getTrackingNum}`}}</div>
            <div class="htmlText" v-if="item.repairRegisterVo?.checkResult">检测结果： {{item.repairRegisterVo?.checkResult}}</div>
            <div class="htmlText" v-if="item.repairRegisterVo?.partNamesStr">所需备件： {{item.repairRegisterVo?.partNamesStr}}</div>
            <div class="htmlText" v-if="item.orderReceiving?.orderFaultMsg">机器外观： {{item.orderReceiving?.orderFaultMsg}}</div>
            <div class="htmlText" v-if="item.repairTest?.resultInfo">测试描述： {{item.repairTest?.resultInfo}}</div>
            <div class="imgList" v-if="item.imagesInfo?.length">
              <img :src="imgItem" v-for="(imgItem,imgID) in item.imagesInfo" @click="imgPreview(item.imagesInfo, imgID)" :key="imgItem + index" alt="" />
            </div>
            <div v-if="item.repairLogId">{{ namePrivate(item.sysUserName) }}完成{{ item.remark }}</div>
            <div class="status htmlText" v-else>
                {{ replacName(item.sysUserName,item.subTitle) }}
            </div>
            <div class="step_time" v-if="item.createTime">{{dayjs(item.createTime).format('MM-DD HH:mm')}}</div>
            <div class="doct" :class="index == 0 ? 'oneSpot' : 'Spot'"></div>
          </div>
        </div>
      </transition-group>
      <van-divider v-if="processList?.length >1">
        <div @click="handleShow">
          <van-icon :name="!stepShow ? 'arrow-down' : 'arrow-up'" />
          {{ !stepShow ? '展开' : '收起' }}
        </div>
      </van-divider>
    </div>
    <div class="page_top item_content" v-if="detailData.customer">
      <div class="title">客户信息</div>
      <div class="content">
        <div class="cost_list" style="border-bottom: none">
          <div class="item">
            <span>公司名称</span>
            <span>{{detailData.customer?.companyName}}</span>
          </div>
          <div class="item">
            <span>联系人</span>
            <span>{{detailData.customer?.customerName}}</span>
          </div>
          <div class="item">
            <span>联系电话</span>
            <span>{{detailData.customer?.phone}}</span>
          </div>
        </div>
      </div>
    </div>
    <div class="page_top item_content" v-if="detailData.repairerVo">
      <div class="title">故障信息</div>
      <div class="content">
        <div class="text">{{cameraType[detailData.repairerVo?.cameraType]}} {{detailData.repairerVo?.cameraSnCode}}</div>
        <div class="text" v-html="detailData.repairerVo?.faultMsg"></div>
        
        <div class="imgList" v-if="detailData.repairerVo">
          <img :src="imgItem" v-for="(imgItem, imgID) in detailData.repairerVo.faultImg" @click="imgPreview(detailData.repairerVo.faultImg, imgID)" :key="imgItem" alt="" />
        </div>
      </div>
    </div>
    <div class="page_custinfo item_content" v-if="detailData.priceList.length && detailData.repairerVo?.status  > 30">
      <div class="title">费用明细</div>
      <div class="content">
        <div class="cost_list">
          <!-- v-show="!(item.type == 0 && item.status == 0) && item.laborId != 2" -->
          <div class="item" v-for="item in detailData.priceList" :key="item.name">
            <span>{{ item.name }}</span>
            <span>¥{{ item.discount ==0 ?item.price:item.priceDiscount }} x{{ item.count }}</span>
          </div>
          <div class="item" v-if="detailData.repairerVo.warrantyType == 0">
            <span>保内维修</span>
            <span>¥ -{{ priceCount(detailData?.priceList || []) }}</span>
          </div>
        </div>
        <div class="cell" style="border: none">
          <span>维修费用</span>
          <span>¥{{ detailData.repairerVo.warrantyType == 0?'0.00':priceCount(detailData?.priceList || []) }}</span>
        </div>
      </div>
    </div>
    <div class="page_top item_content" v-if="detailData.customerAddress">
      <div class="title">运输信息</div>
      <div class="content">
        <div class="cost_list">
          <div class="item">
            <span>送修方式</span>
            <span>{{detailData.customerAddress.sendType == 0 ?'前台送修':'快递寄送'}}</span>
          </div>
          <div class="item" v-if="detailData.customerAddress.sendType != 0">
            <span>快递单号</span>
            <span>{{detailData.customerAddress.sendTrackingNum}}</span>
          </div>
          <div class="item">
            <span>取回方式</span>
            <span>{{detailData.customerAddress.getType == 0 ?'前台取回':'快递寄回'}}</span>
          </div>
          <div class="item" v-if="detailData.customerAddress.getType != 0">
            <span>快递单号</span>
            <span>{{detailData.customerAddress.getTrackingNum}}</span>
          </div>
          <div class="item" v-if="detailData.customerAddress.getType != 0 && detailData.customerAddress.getAddrName" >
            <span>收件人</span>
            <span>{{detailData.customerAddress.getAddrName}}</span>
          </div>
          <div class="item" v-if="detailData.customerAddress.getType != 0 && detailData.customerAddress.getAddrPhone">
            <span>收件人电话</span>
            <span>{{detailData.customerAddress.getAddrPhone}}</span>
          </div>
          <div class="item" v-if="detailData.customerAddress.getType != 0 && detailData.customerAddress.getAddress">
            <span>收件地址</span>
            <span>{{detailData.customerAddress.getAddress}}</span>
          </div>
        </div>
      </div>
    </div>

    <div class="page_top item_content" v-if="detailData.repairComment">
      <div class="title">评价信息</div>
      <div class="content">
        <div class="cost_list" style="border-bottom: none">
          <div class="item">
            <span>内容</span>
            <span>{{detailData.repairComment?.comment}}</span>
          </div>
          <div class="item">
            <span>评分</span>
            <span>{{detailData.repairComment?.starRank}}分</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
<script lang="ts" setup name="detailPage">
import { useRouter } from 'vue-router';
import { ref, onMounted, unref, onActivated } from 'vue';
import { showImagePreview } from 'vant';
import { repairProcess, repairDetails } from '/@/api';
import dayjs from 'dayjs'
const { currentRoute } = useRouter();
const router = useRouter();
const { id } = unref(currentRoute)?.params
const stepShow = ref<boolean>(false);
const cameraType = {
    0:'四维看看',
    1:'四维看见',
    2:'四维深时',
  }
let detailData = ref({
  customer:<any>{},
  customerAddress:<any>{},
  repairerVo:<any>{},
  RepairTestVo:<any>{},
  repairRegisterVo:<any>{},
  orderReceivingVo:<any>{},
  repairPay:<any>{},
  repairComment:<any>{},
  priceList:<any>[],
  applyInvoice:0,
});
let processList = ref<any>([])
onMounted(() => {
  console.log('onMounted',id)
  getDetaile();
});
onActivated(()=>{
  console.log('onActivated')
  getDetaile();

})
function priceCount(list){
  let priceCount = 0
  list.map(ele => {
    // if(!(ele.type == 0 && ele.status == 0) && ele.laborId != 2){
      let price = ele.discount == 0 ? ele.price : ele.priceDiscount
      priceCount = (price * ele.count) + priceCount
    // }
  })
  return priceCount.toFixed(2)
}
const getDetaile = async () => {
  const { data } = await repairDetails(id);
  detailData.value = data
  const resProcess = await repairProcess(id);
  console.log('resProcess',resProcess)
  let process = unref(resProcess?.response)?.data;
  processList.value = process
};
const handleShow = () => {
  stepShow.value = !stepShow.value;
};
const goRoute = (path) => {
  console.log('goRoute',path)
  if (!path) return;
  router.push(path);
};
function replacName(name,subTitle){
  return subTitle.replace(name, namePrivate(name));
}
// 姓名脱敏
function namePrivate(name) {
  if(null != name && name != undefined) {
    if(name.length == 2) {
      return name.substring(0,1) + '*' // 截取name的第一个字符，第二个字符变成*
    } else if(name.length == 3) {
      return name.substring(0,1) + '*' + name.substring(2,3) // 截取name的第一个和第三个字符，第二个字符变成*
    } else if(name.length > 3) {
      return name.substring(0,1) + '*' + '*' + name.substring(3,name.length) //截取第一个和大于第4个字符
    }
  } else {
    return ''
  }
}
function imgPreview(list,startPosition=1){
  let images = list.map(ele =>{
    if(typeof ele == 'string' ){
      return ele
    }else{
      return
    }
  })
  showImagePreview({
  images: images||[],
  startPosition,
});
}

</script>
 <style lang="scss" >
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
  overflow: hidden;
  .item_content {
    background-color: #fff;
    border-radius: 4px 4px 4px 4px;
    margin: 12px;
    .title {
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 600;
      color: #000000;
      padding: 15px 0;
      margin: 0 15px;
      border-bottom: 1px solid #e7e7e7;
    }
    .content {
      padding: 24px 15px;
    }
    .item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      line-height: 30px;
      font-size: 14px;
      span{
        max-width: 70%;
        overflow:hidden;        //超出的文本隐藏
        text-overflow:ellipsis; //用省略号显示
        white-space:nowrap; 
      }
      // margin-bottom: 8px;
    }

    .imgList {
      margin-top: 8px;
      img {
        height: 64px;
        width: 64px;
        padding: 0 8px 0 0;
        object-fit: cover;
      }
    }
  }
  .stepList {
    padding: 24px 16px;
    .item_content_top{
      padding-bottom: 15px;
      margin-bottom: 16px;
      border-bottom: 1px solid #f5f5f5;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    &_title {
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
    }
    .stepItem {
      transition: all 3s 2s linear;
    }
    .step {
      &:last-child {
        // border: none;
      }
      padding: 8px 15px 16px 15px;
      border-left: 1px solid #f5f5f5;
      div{
        margin-top: 8px;
      }
      &_title {
        font-size: 14px;
        line-height: 22px;
        margin-top: 0px !important;
      }
      &_time {
        font-size: 10px;
        font-family: PingFang SC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 14px;
        // padding-bottom: 24px;
      }
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      line-height: 18px;
      position: relative;
      .doct {
        display: inline-block;
        position: absolute;
        left: 0;
        top: 0;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        transform: translat(-50%, -50%);
      }
      .oneSpot {
        border: 4px solid #00b3ec;
        left: -8px;
        top: 4px;
        background: #fff;
      }
      .Spot {
        background: #cccccc;
        left: -4px;
        top: 8px;
      }
    }
  }
  .colortext {
    color: #e34d59;
  }
  .cell {
    border-top: 1px solid #e7e7e7;
    &:first-child {
      border-top: none;
    }
    // height: 48px;
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
    line-height: 22px;
  }
  .page_custinfo {
    .cost_list {
      padding-bottom: 8px;
      // margin: 0 15px;
      // padding-top: 24px;
      border: {
        // top: 1px solid #e7e7e7;
        bottom: 1px solid #e7e7e7;
      }
    }
  }
  .page_top {
    .cost_list {
      border: {
        // bottom: 1px solid #e7e7e7;
      }
    }
    .text {
      line-height: 30px;
    }
  }
  .repairInfo {
    background-color: #fff;
    margin-bottom: 12px;
    border-radius: 4px 4px 4px 4px;
  }
  .but {
    padding: 25px 15px;
    .tips {
      font-size: 12px;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #999999;
      margin-bottom: 10px;
    }
    button {
      margin-top: 16px;
    }
  }
}
</style>