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

<template>
  <view>
    <view class="card">
      <view class="flex card-header" style="justify-content: space-between;">
        <view>订单详情</view>
        <view :class="['tag', `tag-${data.status}`]">
          {{ statusDesc }}
        </view>
      </view>
      <view class="flex member" v-for="item in members" :key="item.id">
        <view class="info">
          <view class="flex info-top">
            <view>{{ item.name }}</view>
            <view>{{ getTypeDesc(item.type) }}</view>
            <view class="light">{{ getTypeTips(item.type) }}</view>
          </view>
          <view class="info-bottom">{{ item.idNo }}</view>
        </view>
        <view class="flex price">¥<view class="highlight">{{ item.price }}</view></view>
      </view>
      <view class="row">
        <view class="row-label">总价格</view>
        <view class="row-content">
          <view class="flex total-price">
            <view>¥</view>
            <view class="highlight">{{ totalPrice }}</view>
            <view class="light" v-if="data.discount">
              {{ `优惠（${data.discount}）` }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="card">
      <view class="card-header">联系人信息</view>
      <view class="row">
        <view class="row-label">真实姓名</view>
        <view class="row-content">{{ data.name }}</view>
      </view>
      <view class="row">
        <view class="row-label">手机号码</view>
        <view class="row-content">{{ data.phone }}</view>
      </view>
    </view>
    <view class="card order">
      <view class="card-header">订单信息</view>
      <view class="row">
        <view class="row-label">订单编号</view>
        <view class="row-content">{{ data.orderNo }}</view>
      </view>
      <view class="row">
        <view class="row-label">下单时间</view>
        <view class="row-content">{{ data.createTime }}</view>
      </view>
    </view>
  </view>
</template>

<script>

  const ORDER_STATUS_AND_DESC_MAPPING = {
    0: '待支付',
    1: '已支付',
    2: '已完成',
  }
  const MEMBER_TYPE_AND_DESC_MAPPING = {
    0: '成人',
    1: '青少年',
    2: '儿童',
  }
  const MEMBER_TYPE_AND_TIPS_MAPPING = {
    0: '(18周岁以上)',
    1: '(14周岁以上)',
    2: '(14周岁以下)',
  }

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    computed: {
      statusDesc() {
        const { status } = this.data
        return ORDER_STATUS_AND_DESC_MAPPING[status]
      },
      productPackage() {
        const { time, product } = this.data
        const { timeOptions } = product || {}

        return timeOptions?.find?.(item => item.id === time) || {}
      },
			totalPrice() {
        const { adults, teenager, child } = this.data

        const { adultsPrice, teenagerPrice, childPrice } = this.productPackage

        let total = 0
        
        adults && (total += adults * (adultsPrice || 0))
        teenager && (total += teenager * (teenagerPrice || 0))
        child && (total += child * (childPrice || 0))

				return total
			},
      members() {
        const { members } = this.data
        const { adultsPrice, teenagerPrice, childPrice } = this.productPackage

        return members?.map?.(item => {
          const { type } = item

          let price = 0
          
          switch(type) {
            case 0: // 成年
              price =  adultsPrice
              break
            case 1: // 青少年
              price =  teenagerPrice
              break
            case 2: // 儿童
              price =  childPrice
              break
          }

          return { ...item, price }
        })
      },
    },
    methods: {
      getTypeDesc(type) {
        return MEMBER_TYPE_AND_DESC_MAPPING[type]
      },
      getTypeTips(type) {
        return MEMBER_TYPE_AND_TIPS_MAPPING[type]
      },
    },
  }
</script>

<style scoped lang="scss">

  @import '../styles/style.scss';
  
  @import '../styles/tag.scss';

  .member {
    margin-top: 16rpx;
    justify-content: space-between;
    padding: 24rpx;
    background: #F9F9F9;
    border-radius: 24rpx;

    .info {
      &-top {
        justify-content: space-between;
        column-gap: 24rpx;
        font-size: 32rpx;
        color: #181818;

        .light {
          font-size: 24rpx;
          color: #8B8B8B;
        }
      }

      &-bottom {
        font-size: 28rpx;
        color: #9B9B9B;
      }
    }

    .price {
      column-gap: 4rpx;
      font-size: 24rpx;
      font-weight: 500;
      color: #FF4800;

      .highlight {
        font-size: 32rpx;
      }
    }

  }

  .row {
    margin-top: 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;

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

    &-content {
      font-size: 28rpx;
      color: #393939;
    }
  }

  .order {
    .row {
      margin-top: 32rpx;
    }
  }

  .total-price {
    column-gap: 8rpx;
    font-size: 24rpx;
    font-weight: 500;
    color: #FF4800;

    .highlight {
      font-size: 32rpx;
    }

    .light {
      font-size: 22rpx;
      font-weight: 400;
    }
  }

</style>