shoot-miniprograms/src/pages/orders.vue

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

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;
};

onMounted(() => {
  uni.removeStorageSync("order");
});

onShow(() => {
  const order = uni.getStorageSync("order");
  list.value.forEach((item, index) => {
    if (item.orderId === order.orderId) {
      list.value[index] = order;
    }
  });
});
</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
            >支付时间：{{
              item.orderStatus === 4 ? item.paymentTime : ""
            }}</text
          >
          <text>金额：{{ item.total }} 元</text>
          <text>支付方式：微信</text>
        </view>
      </ScrollList>
    </view>
  </Container>
</template>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  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>