exam_mp/pages/order/index.vue

<script setup name="order">
import Container from "@/components/Container/Container.vue";
import { request } from "@/utils/request";
import { ref, onMounted } from "vue";
import utils from "@/utils/common";

const orderList = ref([]);

onMounted(async () => {
  const res = await request("api/question_bank/question_reception/orders/list");
  orderList.value = res.data;
});
</script>

<template>
  <Container
    title="订单记录"
    bgColor="#f8f8f8"
    :empty="!orderList.length"
    headerColor="#fff"
    text="暂无订单记录"
  >
    <view class="Container">
      <view class="card" v-for="item in orderList" :key="item.id">
        <view class="left">
          <view class="name">{{ item.name }}</view>
          <view
            >有效期: {{ utils.timestampToString(item.start_time_validity) }}至{{
              utils.timestampToString(item.end_time_validity)
            }}</view
          >
          <view>订单号: {{ item.order_sn }}</view>
          <view
            >创建订单时间: {{ utils.timestampToString(item.insert_time) }}</view
          >
        </view>
        <view class="right">
          <view class="price"
            >￥{{ item.order_preferential_price?.toFixed?.(1) }}</view
          >
          <view class="line">{{ item.order_original_price?.toFixed?.(1) }}</view>
        </view>
      </view>
    </view>
  </Container>
</template>

<style scoped lang="scss">
@import "@/uni.scss";
.Container {
  display: flex;
  flex-direction: column;
  gap: 16rpx;

  .card {
    background-color: #fff;
    padding: 24rpx 16rpx;
    border-radius: 16rpx;
    display: flex;
    justify-content: space-between;
    border-radius: 16rpx;
    font-family: PingFang SC, PingFang SC;
    font-weight: 500;
    font-size: 28rpx;

    .left {
      display: flex;
      flex-direction: column;
      gap: 8rpx;
      color: #666666;

      .name {
        color: $primary;
      }
    }

    .right {
      .price {
        color: $error;
      }
      .line {
        color: #999;
        text-decoration: line-through;
      }
    }
  }
}
</style>