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 data.orderPersonList" :key="item.id">
        <view class="info">
          <view class="flex info-top">
            <view>{{ item.name }}</view>
            <view>{{ item.period || '' }}</view>
            <view class="light">{{ item.periodDesc || '' }}</view>
          </view>
          <view class="info-bottom">{{ item.cerNo }}</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">{{ data.payAmount }}</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.id }}</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: '已完成',
  }

  export default {
    props: {
      data: {
        type: Object,
        default() {
          return {}
        }
      },
    },
    computed: {
      statusDesc() {
        const { status } = this.data
        return ORDER_STATUS_AND_DESC_MAPPING[status]
      },
    },
    methods: {
    },
  }
</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>