health-front/pages_order/checkup/checkupCard.vue

<template>
  <view class="card" @click="jumpToProductDetail">
    <view class="flex top">
      <view class="title">{{ data.title }}</view>
      <view :class="['flex', 'status', `status-${flag}`]">{{ flagDesc }}</view>
    </view>
    <view class="flex main">
      <image class="img" :src="coverImg" mode="scaleToFill"></image>
      <view class="info">
        <view class="flex row">
          <view class="row-label">客户姓名：</view>
          <view class="row-content">{{ data.name }}</view>
        </view>
        <template v-if="data.status == 0">
          <view class="flex row">
            <view class="row-label">下单时间：</view>
            <view class="row-content">{{ data.createTime }}</view>
          </view>
        </template>
        <template v-else>
          <view class="flex row">
            <view class="row-label">检测类型：</view>
            <view class="row-content">{{ subscribeTypeDesc }}</view>
          </view>
          <view class="flex row">
            <view class="row-label">预约时间：</view>
            <view class="row-content">{{ timeDesc }}</view>
          </view>
        </template>
        <view class="flex row">
          <view class="row-label">联系电话：</view>
          <view class="row-content">{{ data.phone }}</view>
        </view>
      </view>
    </view>
    <view class="flex bottom">
      <view class="flex price">
        <text class="price-label">总价格：</text>
        <text class="price-unit">¥</text><text class="price-value">{{ data.price }}</text>
      </view>
      <view class="flex btns">
        <!-- 待预约 -->
        <template v-if="data.status == '0'">
          <button class="btn" @click.stop="onBook">检测预约</button>
        </template>
        <!-- 待检测 -->
        <template v-else-if="data.status == '1'">
          <!-- 自采 -->
          <template v-if="data.subscribeType == '0'">
            <button class="btn" @click.stop="onSendBackOnline">线上回寄试剂盒</button>
          </template>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
  // 状态 0待预约 1待检测 2已完成 3已取消
  const STATUS_AND_DESC_MAPPING = {
    0: '待预约',
    1: '待检测',
    2: '已完成',
    3: '已取消',
    // todo: check 预约失败

    // 0: '待预约',
    // 1: '自采',
    // 2: '上门',
    // 3: '到店',
    // 4: '已完成',
    // 5: '已取消',
    // 6: '预约失败',
  }

  const FLAG_AND_DESC_MAPPING = {
    0: '待预约',
    1: '自采',
    2: '上门',
    3: '到店',
    4: '已完成',
    5: '已取消',
    6: '预约失败',
  }

  // 可选预约类型 0自采，1上门，2到店，3已取消
  const SUBSCRIBE_TYPE_AND_DESC_MAPPING = {
    0: '自采',
    1: '上门',
    2: '到店',
    3: '已取消',
  }

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      coverImg() {
        const { orderProduct } = this.data || {}
        const { image } = orderProduct || {}

        return image?.split?.(',')?.[0]
      },
      subscribeTypeDesc() {
        const { subscribeType } = this.data

        return SUBSCRIBE_TYPE_AND_DESC_MAPPING[subscribeType]
      },
      flag() {
        const { status, subscribeType } = this.data
        
        // 0: '待预约',
        // 1: '自采',
        // 2: '上门',
        // 3: '到店',
        // 4: '已完成',
        // 5: '已取消',
        // todo: check 预约失败
        // 6: '预约失败',

        // status 状态 0待预约 1待检测 2已完成 3已取消
        if (status == '0') { // 待预约
          return 0 // 待预约
        }
        if (status == '1') { // 待检测
          // subscribeType 可选预约类型 0自采，1上门，2到店，3已取消
          if (subscribeType == '0') {
            return 1 // 自采
          } else if (subscribeType == '1') {
            return 2 // 上门
          } else if (subscribeType == '2') {
            return 3 // 到店
          }
          return
        }
        if (status == '2') { // 已完成
          return 4 // 已完成
        }
        if (status == '3') { // 已取消
          return 5 // 已取消
        }
      },
      flagDesc() {
        return FLAG_AND_DESC_MAPPING[this.flag]
      },
      timeDesc() {
        const { subscribeDate, subscribeTime } = this.data || {}

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

        const timeRange = JSON.parse(subscribeTime).join('～')
        
        return `${subscribeDate} ${timeRange}`
      },
    },
    methods: {
      onBook() {
        this.$utils.navigateTo(`/pages_order/checkup/checkupBook/apply?id=${this.data.id}&type=${this.data.type}`)
      },
      onSendBackOnline() {
        this.$emit('sendBack')
      },
      jumpToProductDetail() {
        console.log(this.data.id, 'jumpToProductDetail')
        // this.$utils.navigateTo(`/pages_order/checkup/checkupBook/detail?id=${this.data.id}`)

          // todo: check
        if (this.data.status == '0') { // 0-待预约
          // this.$utils.navigateTo(`/pages_order/order/orderDetail/index?id=${this.data.id}`)
        } else {
          this.$utils.navigateTo(`/pages_order/checkup/checkupBook/detail?id=${this.data.id}`)
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .card {
    width: 100%;
    padding: 32rpx;
    box-sizing: border-box;
    background: #FAFAFF;
    border: 2rpx solid #FFFFFF;
    border-radius: 32rpx;
  }

  .top {
    justify-content: space-between;
    
    .title {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      line-height: 1.4;
      color: #252545;
    }

    .status {
      display: inline-flex;
      min-width: 120rpx;
      padding: 6rpx 0;
      box-sizing: border-box;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 1.4;
      color: #252545;
      background: #F3F3F3;
      border-radius: 12rpx;

      &-0 {
        color: #7D27E0;
        background: #F5EEFD;
      }

      &-1 {
        color: #2799E0;
        background: #EEF7FD;
      }

      &-2 {
        color: #E53C29;
        background: #FDE7E5;
      }

      &-3 {
        color: #10A934;
        background: #E2FDE9;
      }
    }
  }

  .main {
    margin: 24rpx 0;
    column-gap: 24rpx;

    .img {
      flex: none;
      width: 120rpx;
      height: 120rpx;
    }

    .info {
      flex: 1;
      padding: 24rpx;
      background: #FFFFFF;
      border-radius: 32rpx;
    }

    .row {
      align-items: flex-start;
      justify-content: flex-start;
      column-gap: 4rpx;

      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.4;

      &-label {
        flex: none;
        color: #8B8B8B;
      }

      &-content {
        color: #393939;
      }
    }

    .row + .row {
      margin-top: 16rpx;
    }
  }

  .bottom {
    justify-content: space-between;

    .price {
      column-gap: 8rpx;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 1.4;

      &-label {
        font-weight: 400;
        font-size: 26rpx;
        color: #8B8B8B;
      }

      &-unit {
        font-size: 24rpx;
        color: #7451DE;
      }

      &-value {
        font-size: 32rpx;
        color: #7451DE;
      }
    }

    .btns {
      flex: 1;
      justify-content: flex-end;
      column-gap: 16rpx;
    }

    .btn {
      padding: 10rpx 22rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      line-height: 1.4;
      color: #393939;
      border: 2rpx solid #252545;
      border-radius: 32rpx;
    }
  }
</style>