shoot-miniprograms/src/pages/orders.vue

<script setup>
import { ref } from "vue";
import Container from "@/components/Container.vue";
import ScrollList from "@/components/ScrollList.vue";
import { getOrderListAPI } from "@/apis";
import useStore from "@/store";
import { orderStatusNames } from "@/constants";
import { storeToRefs } from "pinia";
const store = useStore();
const { user, config } = storeToRefs(store);

const getStatusColor = (status) => {
  switch (status) {
    case 1:
      return "#EF4848";
    case 4:
      return "#35CD67";
    default:
      return "#999999";
  }
};

const toDetailPage = (detail) => {
  uni.setStorageSync("order", detail);
  uni.navigateTo({
    url: `/pages/order-detail`,
  });
};

const list = ref([]);

const onLoading = async (page) => {
  const result = await getOrderListAPI(page);
  if (page === 1) {
    list.value = result;
  } else {
    list.value = list.value.concat(result);
  }
  return result.length;
};
</script>

<template>
  <Container title="订单">
    <view class="container">
      <ScrollList :onLoading="onLoading">
        <view
          v-for="(item, index) in list"
          :key="index"
          class="order-item"
          @click="() => toDetailPage(item)"
        >
          <view
            :style="{ backgroundColor: getStatusColor(item.orderStatus) }"
            >{{ orderStatusNames[item.orderStatus] }}</view
          >
          <text>{{ item.vipName }}</text>
          <!-- <text>订单号：{{ item.orderId }}</text> -->
          <!-- <text>创建时间：{{ item.vipCreateAt }}</text> -->
          <text>支付时间：2025-01-31 09:27:34</text>
          <text>金额：{{ item.vipPrice }} 元</text>
          <text>支付方式：微信</text>
        </view>
      </ScrollList>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #e4e4e4;
  padding-top: 10px;
}
.order-item {
  position: relative;
  background-color: #fff;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  padding: 15px;
}
.order-item > view:first-child {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  color: #fff;
  text-align: center;
  font-size: 11px;
}
.order-item > text:nth-child(2) {
  color: #000;
  font-size: 16px;
}
.order-item > text {
  color: #666666;
  font-size: 13px;
  margin-top: 5px;
}
</style>