health-front/pages_order/checkup/checkupBook/detail.vue

<template>
  <view class="page__view">

		<navbar title="我的预约" leftClick @leftClick="$utils.navigateBack" color="#191919" bgColor="#F3F2F7" />

    <template v-if="detail">

      <view class="main">

        <view class="flex flex-column status">
          <template v-if="orderSuccess">
            <image class="icon" src="@/pages_order/static/checkup/icon-success.png" mode="widthFix"></image>
          </template>
          <template v-else>
            <image class="icon" src="@/pages_order/static/checkup/icon-error.png" mode="widthFix"></image>
          </template>
          <view>{{ statusDesc }}</view>
        </view>

        <!-- 自采 -->
        <template v-if="detail.type == 1">
          <view class="card">
            <view class="card-header">自采检测预约信息</view>
            <view class="flex row">
              <view class="row-label">姓名</view>
              <view class="row-content">{{ detail.userName }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">寄送地址</view>
              <view class="row-content">{{ detail.addressDesc }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">电话</view>
              <view class="row-content">{{ detail.phone }}</view>
            </view>
          </view>
        </template>
        <!-- 上门 -->
        <template v-else-if="detail.type == 2">
          <view class="card">
            <view class="card-header">上门检测预约信息</view>
            <view class="flex row">
              <view class="row-label">姓名</view>
              <view class="row-content">{{ detail.userName }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">体检地址</view>
              <view class="row-content">{{ detail.addressDesc }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">时间</view>
              <view class="row-content highlight">{{ detail.timeDesc }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">电话</view>
              <view class="row-content">{{ detail.phone }}</view>
            </view>
          </view>
        </template>
        <!-- 到店 -->
        <template v-else-if="detail.type == 3">
          <view class="card">
            <view class="card-header">到店检测预约信息</view>
            <view class="flex row">
              <view class="row-label">姓名</view>
              <view class="row-content">{{ detail.userName }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">时间</view>
              <view class="row-content highlight">{{ detail.timeDesc }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">电话</view>
              <view class="row-content">{{ detail.phone }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">医院</view>
              <view class="row-content">{{ detail.hospitalDesc }}</view>
            </view>
          </view>
        </template>

      </view>
  
      <view class="flex bottom">
        <!-- 自采 -->
        <template v-if="detail.status == 1">
          <button class="btn btn-plain" open-type="contact">客服</button>
          <button class="btn" @click="openTrackingNoPopup">已回寄</button>
        </template>
        <!-- 上门, 到店, 预约失败 -->
        <template v-else-if="[2, 3, 6].includes(detail.status)">
          <button class="btn btn-plain" @click="onCancel">取消</button>
          <button class="btn" @click="onEdit">修改</button>
        </template>
        <!-- 已完成 -->
        <template v-else-if="detail.status == 4">
          <button class="btn" @click="jumpToReportDetail">报告查看</button>
        </template>
      </view>
    </template>

    <checkupServicePopup ref="checkupServicePopup"></checkupServicePopup>
    <checkupTrackingNoPopup ref="checkupTrackingNoPopup" @submitted="getData"></checkupTrackingNoPopup>
  </view>
</template>

<script>
  import checkupServicePopup from '@/pages_order/checkup/checkupServicePopup.vue'
  import checkupTrackingNoPopup from '@/pages_order/checkup/checkupTrackingNoPopup.vue'

  export default {
    components: {
      checkupServicePopup,
      checkupTrackingNoPopup,
    },
    data() {
      return {
        id: null,
        detail: null,
        hospitalOptions: [
          { id: '001', label: '湖南省长沙市湘雅第一医院' },
          { id: '002', label: '湖南省长沙市湘雅第二医院' },
          { id: '003', label: '湖南省长沙市湘雅第三医院' },
          { id: '004', label: '湖南省长沙市湘雅第四医院' },
        ]
      }
    },
    onLoad(arg) {
      this.id = arg.id

      this.getData()
    },
    computed: {
      orderSuccess() {
        // todo: check status
        return this.detail?.status < 5
      },
      statusDesc() {
        const status = this.detail?.status

        if (status < 4) {
          return '预约成功'
        }

        if (status == 4) {
          return '已完成'
        }

        if (status == 6) {
          return '预约失败'
        }

        return ''
      },
    },
    methods: {
      getData() {
        // todo: fetch by id

        let detail = {
          id: '003',
          url: '',
          title: '孕产妇体检套餐',
          userName: '周小艺',
          phone: '15558661691',
          amount: 688,
          area: ['海南省', '海口市', '秀英区'],
          address: '秀英街道5单元183室',
          hospital: '001',
          createTime: '2025-04-28 08:14',
          appointmentDate: '2025-04-28',
          appointmentTime: ['08:00', '09:00'],
          type: 2,
          status: 4,
        }

        detail.addressDesc = this.getAddressDesc(detail)
        detail.timeDesc = this.getTimeDesc(detail)
        detail.hospitalDesc = this.getHospitalDesc(detail)

        this.detail = detail

        if ([2, 3].includes(this.detail.status)) {
          this.$refs.checkupServicePopup.open()
        }
      },
      getAddressDesc(data) {
        if (!data) {
          return ''
        }
        console.log('detail', data)
        const { area, address } = data
        console.log('area', area, 'address', address)

        return `${(area || []).join('')}${address}`
      },
      getTimeDesc(data) {
        if (!data) {
          return ''
        }
        const { appointmentDate, appointmentTime } = data

        return `${appointmentDate} ${(appointmentTime || []).join('～')}`
      },
      getHospitalDesc(data) {
        const { hospital } = data

        return this.hospitalOptions.find(item => item.id == hospital)?.label
      },
      openTrackingNoPopup() {
        this.$refs.checkupTrackingNoPopup.open(this.id)
      },
      onEdit() {
        this.$utils.navigateTo(`/pages_order/checkup/checkupBook/apply?id=${this.detail.id}&type=${this.detail.type}`)
      },
      onCancel() {
        // todo: fetch

        uni.showToast({
          title: '取消成功',
        });

        setTimeout(() => {
          this.$utils.navigateBack()
        }, 800)
      },
      jumpToReportDetail() {
        this.$utils.navigateTo(`/pages_order/checkup/checkupReport/index?id=${this.detail.id}`)
      },
    },
  }
</script>

<style scoped lang="scss">
  @import './style.scss';

  .status {
    margin-bottom: 40rpx;
    row-gap: 4rpx;
    width: 100%;
    padding: 24rpx 0;
    box-sizing: border-box;
    font-family: PingFang SC;
    font-weight: 400;
    font-size: 28rpx;
    line-height: 1.4;
    color: #252545;
    background: #FFFFFF;
    border-radius: 24rpx;

    .icon {
      width: 84rpx;
      height: auto;
    }
  }

  .row {
    &-content {
      text-align: right;
      font-size: 28rpx;
      color: #393939;

      &.highlight {
        font-weight: 500;
        color: #7451DE;
      }
    }
  }

  .bottom {
    align-items: flex-start;
    column-gap: 32rpx;

    .btn {
      flex: 1;

      &-plain {
        padding: 14rpx 0;
        color: #252545;
        background: transparent;
        border: 2rpx solid #252545;
      }
    }
  }
</style>