first commit
This commit is contained in:
sexygoat
176
pages/order-list/order-list.vue
Normal file
176
pages/order-list/order-list.vue
Normal file
@@ -0,0 +1,176 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view v-if="orderList.length === 0 && !loading" class="empty-state">
|
||||
<view class="empty-icon">📋</view>
|
||||
<view class="empty-title">暂无订单</view>
|
||||
<view class="empty-desc">当前账号下暂无订单信息</view>
|
||||
</view>
|
||||
|
||||
<view v-else class="card order-card" v-for="(item, index) in orderList" :key="index">
|
||||
<view class="order-header flex-row-sb">
|
||||
<view class="order-no">{{ item.order_no }}</view>
|
||||
<view class="tag-apple" :class="getStatusClass(item.payment_status)">{{ item.payment_status_name }}</view>
|
||||
</view>
|
||||
|
||||
<view class="order-info">
|
||||
<view class="info-row flex-row-sb">
|
||||
<view class="info-label">下单时间</view>
|
||||
<view class="info-value">{{ item.created_at }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="divider"></view>
|
||||
|
||||
<view class="package-list">
|
||||
<view class="package-item" v-for="(pkgName, pIndex) in item.package_names" :key="pIndex">
|
||||
<view class="package-name">{{ pkgName }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="order-footer flex-row-sb">
|
||||
<view class="total-label">合计</view>
|
||||
<view class="total-amount">¥{{ formatMoney(item.total_amount) }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="load-more" v-if="orderList.length > 0">
|
||||
<text v-if="loading">加载中...</text>
|
||||
<text v-else-if="noMore">没有更多了</text>
|
||||
<text v-else @tap="loadMore">点击加载更多</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive, onMounted } from 'vue';
|
||||
import { orderApi } from '@/api/index.js';
|
||||
import { useUserStore } from '@/store/index.js';
|
||||
|
||||
const userStore = useUserStore();
|
||||
|
||||
let orderList = reactive([]);
|
||||
let loading = ref(false);
|
||||
let noMore = ref(false);
|
||||
let page = ref(1);
|
||||
const pageSize = 10;
|
||||
|
||||
const formatMoney = (amount) => {
|
||||
if (!amount && amount !== 0) return '0.00';
|
||||
return (amount / 100).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ',');
|
||||
};
|
||||
|
||||
const getStatusClass = (status) => {
|
||||
const classMap = {
|
||||
'0': 'tag-warning',
|
||||
'1': 'tag-success',
|
||||
'2': 'tag-danger'
|
||||
};
|
||||
return classMap[status] || '';
|
||||
};
|
||||
|
||||
const loadOrderList = async (append = false) => {
|
||||
if (loading.value || noMore.value) return;
|
||||
loading.value = true;
|
||||
|
||||
try {
|
||||
const data = await orderApi.getList(
|
||||
userStore.state.identifier,
|
||||
page.value,
|
||||
pageSize
|
||||
);
|
||||
|
||||
const newData = (data.items || []).map(item => ({
|
||||
...item,
|
||||
payment_status_name: item.payment_status === 1 ? '已支付' : item.payment_status === 0 ? '待支付' : '已取消',
|
||||
created_at: item.created_at ? item.created_at.split('T').join(' ').slice(0, 19) : ''
|
||||
}));
|
||||
|
||||
if (append) {
|
||||
orderList.push(...newData);
|
||||
} else {
|
||||
orderList.splice(0, orderList.length, ...newData);
|
||||
}
|
||||
|
||||
if (newData.length < pageSize) {
|
||||
noMore.value = true;
|
||||
} else {
|
||||
page.value++;
|
||||
}
|
||||
} catch (e) {
|
||||
console.error('加载订单列表失败', e);
|
||||
}
|
||||
loading.value = false;
|
||||
};
|
||||
|
||||
const loadMore = () => {
|
||||
if (!noMore.value) {
|
||||
loadOrderList(true);
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
loadOrderList();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.container {
|
||||
.empty-state {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 120rpx 40rpx;
|
||||
min-height: 400rpx;
|
||||
.empty-icon { font-size: 120rpx; margin-bottom: 30rpx; opacity: 0.6; }
|
||||
.empty-title { font-size: 32rpx; font-weight: 600; color: var(--text-primary); margin-bottom: 16rpx; }
|
||||
.empty-desc { font-size: 26rpx; color: var(--text-tertiary); text-align: center; }
|
||||
}
|
||||
|
||||
.order-card {
|
||||
margin-bottom: var(--space-md);
|
||||
.order-header {
|
||||
margin-bottom: var(--space-md);
|
||||
.order-no { font-size: 28rpx; font-weight: 600; color: var(--text-primary); }
|
||||
}
|
||||
|
||||
.order-info {
|
||||
.info-row {
|
||||
padding: var(--space-xs) 0;
|
||||
.info-label { font-size: 24rpx; color: var(--text-tertiary); }
|
||||
.info-value { font-size: 24rpx; color: var(--text-primary); }
|
||||
}
|
||||
}
|
||||
|
||||
.divider {
|
||||
height: 1rpx;
|
||||
background: var(--gray-200);
|
||||
margin: var(--space-md) 0;
|
||||
}
|
||||
|
||||
.package-list {
|
||||
.package-item {
|
||||
padding: var(--space-sm) 0;
|
||||
border-bottom: 1rpx solid var(--gray-100);
|
||||
&:last-child { border-bottom: none; }
|
||||
.package-name { font-size: 26rpx; color: var(--text-primary); }
|
||||
}
|
||||
}
|
||||
|
||||
.order-footer {
|
||||
margin-top: var(--space-md);
|
||||
padding-top: var(--space-md);
|
||||
border-top: 1rpx solid var(--gray-200);
|
||||
.total-label { font-size: 26rpx; color: var(--text-secondary); }
|
||||
.total-amount { font-size: 32rpx; font-weight: 700; color: var(--danger); }
|
||||
}
|
||||
}
|
||||
|
||||
.load-more {
|
||||
text-align: center;
|
||||
padding: var(--space-lg);
|
||||
color: var(--text-tertiary);
|
||||
font-size: 24rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user