driverSchool/newPages/appointmentDetail/index.vue

<template>
  <view class="page flex-col">
    <view style="width: 100%;background: #f4f5f6;box-sizing: border-box;padding-top: 88px;">
      <headers titles="预约">
        <uni-icons type="left" color="#000000" size="22px"></uni-icons>
      </headers>
    </view>
    <view class="section_3 flex-col">
      <view :class="appointmentInfo.status === false ? 'jj' : 'section_4'" class="flex-row">
        <view class="text-group_1 flex-col justify-between" v-if="isTrain">
          <text class="text_2">已训练</text>
          <text class="text_3">{{ appointmentInfo.trainDay }}</text>
        </view>
        <view class="text-group_1 flex-col justify-between" v-else>
          <text class="text_2">{{ appointmentInfo.statusStr }}</text>
          <text class="text_3">{{ appointmentInfo.reservDay }}</text>
        </view>
      </view>

      <view class="text-wrapper_1 flex-row justify-between">
        <text class="text_4">课程名称</text>
        <text class="text_5">{{ appointmentInfo.courseName }}</text>
      </view>
      <view class="text-wrapper_2 flex-row justify-between">
        <text class="text_6">训练类型</text>
        <text class="text_7">{{ appointmentInfo.courseType }}</text>
      </view>
      <view class="text-wrapper_3 flex-row justify-between">
        <text class="text_8">训练科目</text>
        <text class="text_9">{{ subjectArr[appointmentInfo.subject - 1] }}</text>
      </view>
      <view class="text-wrapper_4 flex-row justify-between">
        <text class="text_10">教练名称</text>
        <text class="text_11">{{ appointmentInfo.coachName }}</text>
      </view>
      <!-- 添加一条宽度占 80% 的线 -->
      <view style="width: 90%; height: 1px; background-color: #e0e0e0; margin: 20px 10rpx auto;"></view>
      <view class="text-wrapper_5 flex-row justify-between" v-if="!isTrain">
        <text class="text_12">累计训练时长</text>
        <text class="text_13">{{ appointmentInfo.trainTime }}分钟</text>
      </view>
      <view class="text-wrapper_6 flex-row justify-between" v-if="isTrain">
        <text class="text_14">训练地址</text>
        <text class="text_15">{{ appointmentInfo.addr }}</text>
      </view>
      <view class="text-wrapper_7 flex-row justify-between" :class="isTrain ? 'text-wrapper_8' : 'text-wrapper_7'"
            v-if="isTrain">
        <text class="text_16">交通方式</text>
        <text class="text_17">{{ appointmentInfo.reservationWay }}</text>
      </view>
      <view class="text-wrapper_8 flex-row justify-between" v-else>
        <text class="text_18">时间范围</text>
        <text class="text_19">{{ appointmentInfo.reservTime }}</text>
      </view>
    </view>
    <view class="text-wrapper_9 flex-col" v-if="!isTrain">
      <text class="text_20">审核意见</text>
      <text class="text_21">
        {{ appointmentInfo.refuseReason == null ? '暂无' : appointmentInfo.refuseReason }}
      </text>
    </view>
  </view>
</template>
<script>
import headers from "@/components/header/headers.vue";
import request from "@/utils/request";

export default {
  components: {headers},
  data() {
    return {
      constants: {},
      appointmentInfo: {},
      isTrain: false,
      subjectArr: ['科目一', '科目二', '科目三', '科目四'],
    };
  },
  onLoad(options) {
    this.appointmentInfo = JSON.parse(options.data)
    this.getAllTrainTime()
    if (options.type === 'train') {
      this.isTrain = true
    } else {
      this.isTrain = false
    }
  },
  methods: {
    async getAllTrainTime() {
      try {
        const res = await request({
          url: "/app-api/process/getAllByCourseId",
          method: "GET",
          params: {
            courseId: this.appointmentInfo.courseId,
          },
          tenantIdFlag: false,
        });

        // 确保 appointmentInfo.subject 已有值
        if (!this.appointmentInfo.subject) {
          console.warn("appointmentInfo.subject 为空，等待赋值...");
          await new Promise((resolve) => setTimeout(resolve, 100));
        }
        const data = res.data.find(
            (item) => item.subject == this.appointmentInfo.subject
        );

        this.appointmentInfo.trainTime = data ? data.trainTime || "0" : "0";

      } catch (error) {
        console.error("获取训练时间失败:", error);
      }
    }

  }
};
</script>
<style lang='scss'>
@import '../common/common.scss';
@import './assets/style/index.rpx.scss';

.jj {
  background-image: linear-gradient(180deg, rgba(245, 44, 44, 0.2) 0%, rgba(245, 44, 44, 0) 100%);
  border-radius: 8px;
  width: 686rpx;
  height: 140rpx;
  border: 1px solid rgba(255, 255, 255, 1);

  .text-group_1 {
    width: 248rpx;
    height: 80rpx;
    margin: 30rpx 0 0 20rpx;

    .text_2 {
      width: 96rpx;
      height: 32rpx;
      overflow-wrap: break-word;
      color: rgba(242, 39, 39, 1);
      font-size: 32rpx;
      font-family: PingFang SC-Regular;
      font-weight: NaN;
      text-align: left;
      white-space: nowrap;
      line-height: 32rpx;
    }

    .text_3 {
      width: 248rpx;
      height: 28rpx;
      overflow-wrap: break-word;
      color: rgba(115, 124, 144, 1);
      font-size: 28rpx;
      font-family: PingFang SC-Regular;
      font-weight: NaN;
      text-align: left;
      white-space: nowrap;
      line-height: 28rpx;
      margin-top: 20rpx;
    }
  }
}
</style>