158 lines
3.4 KiB
Vue
158 lines
3.4 KiB
Vue
<template>
|
|
<page-container title="订单列表" :showBack="true">
|
|
<scroll-view scroll-y="true"
|
|
:refresher-enabled="true"
|
|
:refresher-triggered="refreshing"
|
|
@refresherrefresh="onRefresh"
|
|
@scrolltolower="onLoadMore"
|
|
class="order-list">
|
|
<view class="order-item" v-for="(item, index) in orderList" :key="index" @click="goOrderDetail(item)">
|
|
<view class="corner-tag">已发放到盒柜中</view>
|
|
<view class="order-title">{{item.goods_title}}</view>
|
|
<view class="order-info">
|
|
<view class="order-time">{{item.pay_time}}</view>
|
|
<view class="order-price">¥{{item.order_zhe_total}}</view>
|
|
</view>
|
|
</view>
|
|
<view class="loading" v-if="loading">加载中...</view>
|
|
<view class="no-more" v-if="!hasMore && orderList.length > 0">没有更多数据了</view>
|
|
<view class="empty" v-if="!loading && orderList.length === 0">暂无订单数据</view>
|
|
</scroll-view>
|
|
</page-container>
|
|
</template>
|
|
|
|
<script>
|
|
import PageContainer from '@/components/page-container/page-container.vue'
|
|
|
|
|
|
export default {
|
|
components: {
|
|
PageContainer
|
|
},
|
|
data() {
|
|
return {
|
|
orderList: [],
|
|
page: 1,
|
|
pageSize: 20,
|
|
totalPages: 1,
|
|
loading: false,
|
|
refreshing: false,
|
|
hasMore: true
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.load();
|
|
},
|
|
methods: {
|
|
async load() {
|
|
this.loading = true;
|
|
try {
|
|
const { status, data, msg } = await this.$request.post('order_list', {
|
|
page: this.page,
|
|
page_size: this.pageSize
|
|
});
|
|
|
|
if (status !== 1) {
|
|
this.$c.msg(msg);
|
|
return;
|
|
}
|
|
|
|
if (this.page === 1) {
|
|
this.orderList = data.list;
|
|
} else {
|
|
this.orderList = [...this.orderList, ...data.list];
|
|
}
|
|
|
|
this.totalPages = data.total_pages;
|
|
this.hasMore = this.page < this.totalPages;
|
|
} catch (error) {
|
|
console.error('加载订单列表失败', error);
|
|
this.$c.msg('加载失败，请重试');
|
|
} finally {
|
|
this.loading = false;
|
|
this.refreshing = false;
|
|
}
|
|
},
|
|
|
|
async onRefresh() {
|
|
this.refreshing = true;
|
|
this.page = 1;
|
|
this.hasMore = true;
|
|
await this.load();
|
|
},
|
|
|
|
async onLoadMore() {
|
|
if (!this.hasMore || this.loading) return;
|
|
|
|
this.page++;
|
|
await this.load();
|
|
},
|
|
|
|
goOrderDetail(item) {
|
|
this.$customRouter.navigateTo('/pages/other/order_info', { order_num: item.order_num });
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.order-list {
|
|
height: calc(100vh - 160rpx);
|
|
box-sizing: border-box;
|
|
padding: 20rpx;
|
|
|
|
.order-item {
|
|
background-color: #f5f5f5;
|
|
border-radius: 12rpx;
|
|
padding: 24rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.corner-tag {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: #67c23a;
|
|
color: #fff;
|
|
font-size: 20rpx;
|
|
padding: 2rpx 8rpx;
|
|
// transform: rotate(45deg) translate(20%, -50%);
|
|
transform-origin: center;
|
|
width: 160rpx;
|
|
text-align: center;
|
|
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.order-title {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.order-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
|
|
.order-time {
|
|
color: #909399;
|
|
}
|
|
|
|
.order-price {
|
|
color: #f56c6c;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.loading, .no-more, .empty {
|
|
text-align: center;
|
|
padding: 30rpx;
|
|
color: #999;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
</style> |