153 lines
3.7 KiB
Vue
153 lines
3.7 KiB
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 ModalDialog from "@/components/ModalDialog.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 autoRenewDialogVisible = ref(false);
|
||
const selectedRenewOrder = ref(null);
|
||
|
||
const toDetailPage = (detail) => {
|
||
uni.setStorageSync("order", detail);
|
||
uni.navigateTo({
|
||
url: "/pages/member/order-detail",
|
||
});
|
||
};
|
||
|
||
const openAutoRenewDialog = (detail) => {
|
||
selectedRenewOrder.value = detail;
|
||
autoRenewDialogVisible.value = true;
|
||
};
|
||
|
||
const closeAutoRenewDialog = () => {
|
||
autoRenewDialogVisible.value = false;
|
||
selectedRenewOrder.value = null;
|
||
};
|
||
|
||
const confirmAutoRenewDialog = () => {
|
||
autoRenewDialogVisible.value = false;
|
||
uni.showToast({
|
||
title: "功能实现中",
|
||
icon: "none",
|
||
});
|
||
}
|
||
|
||
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.orderCreateAt }}</text>
|
||
<!-- <text
|
||
>支付时间：{{
|
||
item.orderStatus === 4 ? item.paymentTime : ""
|
||
}}</text
|
||
> -->
|
||
<text>金额：{{ item.total }} 元</text>
|
||
<!-- <text>支付方式：微信</text> -->
|
||
<!-- <text class="renew-action" @click.stop="openAutoRenewDialog(item)">
|
||
自动续费
|
||
</text> -->
|
||
</view>
|
||
</ScrollList>
|
||
</view>
|
||
|
||
<ModalDialog
|
||
:show="autoRenewDialogVisible"
|
||
title=""
|
||
:content="'确定关闭自动续费吗?\n会员到期后你将失去7项特权哦!'"
|
||
cancel-text="一意孤行"
|
||
confirm-text="继续享受"
|
||
:on-cancel="closeAutoRenewDialog"
|
||
:on-confirm="confirmAutoRenewDialog"
|
||
/>
|
||
</Container>
|
||
</template>
|
||
|
||
<style scoped>
|
||
.container {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #f5f5f5;
|
||
padding-top: 16rpx;
|
||
}
|
||
.order-item {
|
||
position: relative;
|
||
background-color: #fff;
|
||
margin-bottom: 16rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 28rpx 30rpx 18rpx 30rpx;
|
||
}
|
||
.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: #333333;
|
||
font-size: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
.order-item > text {
|
||
color: #666666;
|
||
font-size: 26rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
.order-item > .renew-action {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
bottom: 18rpx;
|
||
color: #1f6ed4;
|
||
margin-bottom: 0;
|
||
}
|
||
</style>
|