studytour-front/pages_order/order/components/productCard.vue

<template>
  <view class="card info">
    <view class="card-header">{{ product.name }}</view>
    <view class="card-content">
      <view class="row desc">{{ product.desc }}</view>
      <view class="flex row tags" v-if="product.tags && product.tags.length">
        <view class="tag" v-for="(tag, tIdx) in product.tags" :key="tIdx">
          {{ tag }}
        </view>
      </view>
      <view class="flex row time">
        <view class="time-item">
          <view class="time-item-value">{{ $dayjs(productPackage.startDate).format('MM月DD日') }}</view>
          <view class="time-item-label">出发日期</view>
        </view>
        <view class="flex time-total">
          <view class="time-total-line"></view>
          <view class="time-total-value">{{ `${days}天` }}</view>
          <view class="time-total-line"></view>
        </view>
        <view class="time-item">
          <view class="time-item-value">{{ $dayjs(productPackage.endDate).format('MM月DD日') }}</view>
          <view class="time-item-label">结束日期</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
      style: {
        type: String,
        default: ''
      }
    },
    computed: {
      product() {
        return this.data?.product || {}
      },
      productPackage() {
        const { time, product } = this.data
        const { timeOptions } = product || {}

        return timeOptions?.find?.(item => item.id === time) || {}
      },
      days() {
        console.log('productPackage', this.productPackage)
        const { startDate, endDate } = this.productPackage

        return this.$dayjs(endDate).diff(this.$dayjs(startDate), 'day')
      },
    },
  }
</script>

<style scoped lang="scss">

  .card {
    width: 100%;
    padding: 32rpx;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 1.4;
    box-sizing: border-box;
    background: #FFFFFF;
    border-radius: 24rpx;

    &-header {
      font-family: PingFang SC;
      font-weight: 500;
      font-size: 32rpx;
      line-height: 1.4;
      color: #181818;
    }

    &-content {
    }
  }

  .row {
    margin-top: 16rpx;
  }


  .desc {
    font-size: 26rpx;
    color: #8B8B8B;
  }

  .tags {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 16rpx;

    .tag {
      padding: 2rpx 14rpx;
      font-family: PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      line-height: 1.4;
      color: #00A9FF;
      background: #E9F8FF;
      border: 2rpx solid #00A9FF;
      border-radius: 8rpx;
    }
  }

  .time {
    justify-content: space-between;

    &-item {
      &-value {
        font-size: 32rpx;
        font-weight: 500;
        color: #000000;
      }

      &-label {
        margin-top: 4rpx;
        font-size: 26rpx;
        color: #8B8B8B;
      }
    }

    &-total {
      &-line {
        width: 64rpx;
        height: 2rpx;
        background: #8B8B8B;
      }

      &-value {
        padding: 6rpx 22rpx;
        font-size: 26rpx;
        color: #8B8B8B;
        border: 2rpx solid #8B8B8B;
        border-radius: 26rpx;
      }
    }
  }
</style>