107 lines
2.4 KiB
Vue
107 lines
2.4 KiB
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
|
||
>支付时间：{{
|
||
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: #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>
|