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

// 评价页面
<template>
  <div class="page">
    <div class="repairInfo">
      <div class="cell border">
        <span>维修单号</span>
        <span>{{ id }}</span>
      </div>
      <div class="cell border">
        <span>设备信息</span>
        <span>{{ detail.repairerVo?.cameraSnCode }}</span>
      </div>
      <div class="cell border remarkDiv">
        <span>检测结果</span>
        <div class="remark">{{ detail.repairerVo?.remark }}</div>
      </div>
    </div>
    <div class="page_top">
      <div class="title">费用明细</div>
      <div class="cost_list">
        <div class="item" v-for="item in detail.priceList" :key="item.name">
          <span>{{ item.name }}</span>
          <span>¥{{ item.discount ==0 ?item.price:item.priceDiscount }} x{{ item.count }}</span>
        </div>
      </div>
      <div class="cell" style="border: none">
        <span>合计</span>
        <span class="colortext">¥{{ detail.amount?.toFixed(2) || '0.00' }}</span>
      </div>
    </div>
    <div class="but">
      <span class="tips">确认维修后，将直接开始维修。维修费用待维修完成后支付</span>
      <p class="tips">取消维修，原机退回，需要收取检测费。</p>
      <van-button type="primary" color="#00B3EC" @click="hanldConfirm(0)" block>确认维修</van-button>
      <van-button type="primary" style="background: none;" color="#00B3EC" @click="hanldConfirm(1)" plain block>取消维修</van-button>
    </div>
  </div>
</template>
  
  <script lang="ts" setup name="detailPage">
import { ref, onMounted, unref } from 'vue';
import { useRouter } from 'vue-router';
import { showToast } from 'vant';
import { repairDetails, confirmRepair } from '/@/api';
const router = useRouter();
const { id } = unref(router.currentRoute)?.params;
const detail = ref({
  amount: 0,
  priceList: <any>[],
  repairerVo: <any>{},
  repairRegisterVo: <any>{},
});
onMounted(async () => {
  const { data } = await repairDetails(id);
  let detaile = data,
    amount = 0;
  detail.value.repairerVo = <any>detaile.repairerVo;
  detail.value.repairRegisterVo = <any>detaile.repairRegisterVo;
  detail.value.priceList = <any>detaile.priceList.map((ele) => {
    let price = ele.discount == 0 ? ele.price : ele.priceDiscount
    amount = amount +  price * ele.count;
    return ele;
  });
  detail.value.amount = amount;
});
const hanldConfirm = async (confirm) => {
  const {code} = await confirmRepair({ repairId: id, confirm });
  if (code == 200 || !code) {
    showToast('操作成功');
    setTimeout(() => {
      router.go(-1);
    }, 500);
  }
};
</script>
 <style lang="scss" scoped>
.page {
  min-height: 100vh;
  background-color: #f5f5f5;

  .title {
    font-size: 14px;
    font-family: PingFang SC-Medium, PingFang SC;
    font-weight: 500;
    color: #000000;
    padding: 15px;
  }
  .colortext {
    color: #e34d59;
  }
  .cell {
    border-top: 1px solid #e7e7e7;
    &:first-child {
      border-top: none;
    }
    height: 48px;
    padding: 0 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    color: #333333;
  }
  .remarkDiv{
    height: auto;
    padding: 15px;
    align-items: start;
    .remark{
      max-width: calc(100% - 65px);
      // overflow: hidden;
      // text-overflow: ellipsis;
      // width: 100%;
      // display: -webkit-box;
      // -webkit-box-orient: vertical;
      // -webkit-line-clamp: 3;
      // word-break: break-all;
    }
  }
  .page_top {
    background-color: #fff;
    border-radius: 4px 4px 4px 4px;
    .cost_list {
      margin: 0 15px;
      padding-top: 24px;
      border: {
        top: 1px solid #e7e7e7;
        bottom: 1px solid #e7e7e7;
      }
      .item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 8px;
        span{
          max-width: 50%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .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>