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">
          <!-- status 状态 0待预约 1待检测 2已完成 3已取消 -->
          <template v-if="['1', '2'].includes(detail.status)">
            <image class="icon" src="@/pages_order/static/checkup/icon-success.png" mode="widthFix"></image>
          </template>
          <template v-else-if="detail.status == '3'">
            <image class="icon" src="@/pages_order/static/checkup/icon-error.png" mode="widthFix"></image>
          </template>
          <view>{{ statusDesc }}</view>
        </view>

        <!-- 自采 -->
        <template v-if="detail.subscribeType == '0'">
          <view class="card">
            <view class="card-header">自采检测预约信息</view>
            <view class="flex row">
              <view class="row-label">姓名</view>
              <view class="row-content">{{ detail.name }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">寄送地址</view>
              <view class="row-content">{{ 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.subscribeType == '1'">
          <view class="card">
            <view class="card-header">上门检测预约信息</view>
            <view class="flex row">
              <view class="row-label">姓名</view>
              <view class="row-content">{{ detail.name }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">体检地址</view>
              <view class="row-content">{{ addressDesc }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">时间</view>
              <view class="row-content highlight">{{ 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.subscribeType == '2'">
          <view class="card">
            <view class="card-header">到店检测预约信息</view>
            <view class="flex row">
              <view class="row-label">姓名</view>
              <view class="row-content">{{ detail.name }}</view>
            </view>
            <view class="flex row">
              <view class="row-label">时间</view>
              <view class="row-content highlight">{{ 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">{{ hospitalDesc }}</view>
            </view>
          </view>
        </template>

      </view>
  
      <view class="flex bottom" v-if="['0', '1', '2'].includes(detail.status)">
        <!-- status 状态 0待预约 1待检测 2已完成 3已取消 -->
        <!-- 待预约 -->
        <template v-if="detail.status == '0'">
          <button class="btn" @click="onBook">检测预约</button>
        </template>
        <!-- 待检测 -->
        <template v-else-if="detail.status == '1'">
          <!-- 自采 -->
          <template v-if="detail.subscribeType == '0'">
            <!-- <button class="btn btn-plain" open-type="contact">客服</button> -->
            <button plain class="flex flex-column btn btn-service" open-type="contact">
              <image class="btn-service-icon" src="@/pages_order/static/order/icon-service.png" mode="widthFix"></image>
              <view>联系客服</view>
            </button>
            <button class="btn" @click="openTrackingNoPopup">已回寄</button>
          </template>
          <!-- 上门, 到店 -->
          <template v-else-if="['1', '2'].includes(detail.subscribeType)">
            <button class="btn btn-plain" @click="onCancel">取消</button>
            <button class="btn" @click="onEdit">修改</button>
          </template>
        </template>
        <!-- 已完成 -->
        <template v-else-if="detail.status == '2'">
          <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: []
      }
    },
    async onLoad(arg) {
      const { id } = arg
      this.id = id

      await this.getData()

      if (this.detail?.subscribeType == '2') { // 到店
        this.fetchHospitalOptions()
      }
    },
    // 下拉刷新
    onPullDownRefresh() {
      this.getData()
    },
    computed: {
      statusDesc() {
        // status 状态 0待预约 1待检测 2已完成 3已取消
        const { status } = this.detail || {}

        if (status == '0') {
          return '待预约'
        }

        if (status == '1') {
          return '预约成功'
        }

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

        if (status == '3') {
          return '已取消'
        }

        return ''
      },
      addressDesc() {
        const { sendAddress, sendAddressDetail } = this.detail || {}

        return [sendAddress, sendAddressDetail].filter(val => val).join('')
      },
      timeDesc() {
        const { subscribeDate, subscribeTime } = this.detail || {}

        if (!subscribeTime) {
          return '--'
        }

        const timeRange = JSON.parse(subscribeTime).join('～')
        
        return `${subscribeDate} ${timeRange}`
      },
      hospitalDesc() {
        const { hospitalId } = this.detail || {}

        if (!hospitalId) {
          return '--'
        }

        return this.hospitalOptions?.find?.(item => item.id == hospitalId)?.name || '--'
      },
    },
    methods: {
      async getData() {
        try {
          this.detail = await this.$fetch('getSubscribeDetail', { id: this.id })
          
          const { status, subscribeType } = this.detail

          // status: 1待检测 & subscribeType: 1上门，2到店
          if (status == '1' && ['1', '2'].includes(subscribeType)) {
            this.$refs.checkupServicePopup.open()
          }
        } catch (err) {

        }

        uni.stopPullDownRefresh()

      },
      async fetchHospitalOptions() {
        try {
          this.hospitalOptions = await this.$fetch('getSubscribeHospital', { productId: this.detail.productId })
        } catch (err) {

        }
      },
      openTrackingNoPopup() {
        this.$refs.checkupTrackingNoPopup.open(this.id)
      },
      onBook() {
        this.$utils.redirectTo(`/pages_order/checkup/checkupBook/apply?id=${this.detail.id}&type=${this.detail.type}`)
      },
      onEdit() {
        this.$utils.redirectTo(`/pages_order/checkup/checkupBook/apply?id=${this.detail.id}&type=${this.detail.type}`)
      },
      async onCancel() {

        try {
          await this.$fetch('cancelSubscribe', { id: this.detail.id })

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

          // setTimeout(() => {
          //   this.$utils.navigateBack()
          // }, 800)

          this.getData()
        } catch (err) {

        }
      },
      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 {
      width: auto;
      flex: 1;

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

      &-service {
        flex: none;
        row-gap: 4rpx;
        font-family: PingFang SC;
        font-weight: 400;
        font-size: 22rpx;
        line-height: 1.1;
        color: #999999;
        background: transparent;
        border: none;

        &-icon {
          width: 52rpx;
          height: auto;
        }
      }
    }
  }
</style>