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-${data.status}`]">{{ statusDesc }}</view>
    </view>
    <view class="flex main">
      <image class="img" :src="data.url" mode="scaleToFill"></image>
      <view class="info">
        <view class="flex row">
          <view class="row-label">客户姓名：</view>
          <view class="row-content">{{ data.userName }}</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">{{ data.typeDesc }}</view>
          </view>
          <view class="flex row">
            <view class="row-label">预约时间：</view>
            <view class="row-content">{{ data.appointmentTime || '-' }}</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.amount.toFixed(2) }}</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">
          <button class="btn" @click.stop="onSendBackOnline">线上回寄试剂盒</button>
        </template>
      </view>
    </view>
  </view>
</template>

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

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      statusDesc() {
        return STATUS_AND_DESC_MAPPING[this.data.status]
      },
    },
    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')
        if ([0, 5].includes(this.data.status) == 5) { // 0-待预约 5-已取消
          this.$utils.navigateTo(`/pages_order/order/orderDetail/index?id=${this.data.id}`)
          // todo: check product id
          // this.$utils.navigateTo(`/pages_order/product/productDetail?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 {
      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>