czg_team/cashier_weapp
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

订单分页

Browse Source
This commit is contained in:
魏啾
2024-05-09 15:48:49 +08:00
parent 75610b685f
commit 678c8fa053
1 changed files with 158 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
pages/order/order.vue
View File

@@ -5,7 +5,7 @@
<view :class="navtabindex == 0 ? 'navtabone':'navtabtow'" @click="navtabclick(0)"> <view :class="navtabindex == 0 ? 'navtabone':'navtabtow'" @click="navtabclick(0)">
团购订单 团购订单
</view> </view>
<view :class="navtabindex == 1 ? 'navtabone':'navtabtow'" @click="navtabclick(1)"> <view :class="navtabindex == 1 ? 'navtabone':'navtabtow'" @click="navtabclick(1)">
到店订单 到店订单
</view> </view>
</view> </view>
@@ -25,78 +25,80 @@
</view> </view>
</view> </view>
</u-sticky> </u-sticky>
<view class="list-wrap" v-if="navtabindex == 1"> <view class="list-wrap" v-if="navtabindex == 1">
<view class="item" v-for="(item,index) in list" :key="index" @click="orderinfo(item)"> <view class="item" v-for="(item,index) in list" :key="index" @click="orderinfo(item)">
<view class="header-wrap"> <view class="header-wrap">
<text v-if="item.sendType == 'post'">快递</text> <text v-if="item.sendType == 'post'">快递</text>
<text v-if="item.sendType == 'takeaway'">外卖</text> <text v-if="item.sendType == 'takeaway'">外卖</text>
<text v-if="item.sendType == 'takeself'">自提</text> <text v-if="item.sendType == 'takeself'">自提</text>
<text v-if="item.sendType == 'table'">堂食</text> <text v-if="item.sendType == 'table'">堂食</text>
<text class="status" v-if="item.status == 'unpaid' || item.status == 'paying'"> <text class="status" v-if="item.status == 'unpaid' || item.status == 'paying'">
<text>待支付</text> <text>待支付</text>
</text> </text>
<text class="status" v-if="item.status == 'unsend'"> <text class="status" v-if="item.status == 'unsend'">
<text>待发货</text> <text>待发货</text>
</text> </text>
<text class="status" v-if="item.status == 'closed'"> <text class="status" v-if="item.status == 'closed'">
<text>订单完成</text> <text>订单完成</text>
</text> </text>
<text class="status" v-if="item.status == 'send'"> <text class="status" v-if="item.status == 'send'">
<text> 已发</text> <text> 已发</text>
</text> </text>
<text class="status" v-if="item.status == 'refunding'"> <text class="status" v-if="item.status == 'refunding'">
<text>申请退单</text> <text>申请退单</text>
</text> </text>
<text class="status" v-if="item.status == 'refund'"> <text class="status" v-if="item.status == 'refund'">
<text>退单</text> <text>退单</text>
</text> </text>
<text class="status" v-if="item.status == 'cancelled'"> <text class="status" v-if="item.status == 'cancelled'">
<text>取消订单</text> <text>取消订单</text>
</text> </text>
<text class="status" v-if="item.status == 'merge'"> <text class="status" v-if="item.status == 'merge'">
<text>合台</text> <text>合台</text>
</text> </text>
</view> </view>
<view class="content"> <view class="content">
<view class="shop-info"> <view class="shop-info">
<view class="shop-item"> <view class="shop-item">
<view class="cover flex-start" v-for="(item1,index1) in item.detailList" :key="index1"> <view class="cover flex-start" v-for="(item1,index1) in item.detailList" :key="index1">
<!-- <image :src="item1.productImg" style="width: 200rpx;height: 200rpx; border-radius: 20rpx;" mode="widthFix"></image> --> <!-- <image :src="item1.productImg" style="width: 200rpx;height: 200rpx; border-radius: 20rpx;" mode="widthFix"></image> -->
<c-image width="200" height="200" radius="20" :src="item1.productImg"></c-image> <c-image width="200" height="200" radius="20" :src="item1.productImg"></c-image>
</view> </view>
<!-- <view class="info"> <!-- <view class="info">
<text class="name">美味大宅蟹</text> <text class="name">美味大宅蟹</text>
<text class="num">数量：1</text> <text class="num">数量：1</text>
</view> --> </view> -->
</view>
</view>
<view class="total">
<text class="t">需付款</text>
<text class="i">￥</text>
<text class="num">{{item.orderAmount}}</text>
</view>
<view class="intro-wrap">
<text class="time">下单日期：{{$u.timeFormat(item.createdAt, 'yyyy-mm-dd hh:MM')}}</text>
<text class="intro num">共{{item.totalNumber}}件商品 合计：￥{{item.orderAmount}}</text>
</view> </view>
</view> </view>
<view class="footer-wrap"> <view class="total">
<view class="btn"> <text class="t">需付款</text>
<text>查看详情</text> <text class="i">￥</text>
</view> <text class="num">{{item.orderAmount}}</text>
</view>
<view class="intro-wrap">
<text class="time">下单日期：{{$u.timeFormat(item.createdAt, 'yyyy-mm-dd hh:MM')}}</text>
<text class="intro num">共{{item.totalNumber}}件商品 合计：￥{{item.orderAmount}}</text>
</view>
</view>
<view class="footer-wrap">
<view class="btn">
<text>查看详情</text>
</view> </view>
</view> </view>
</view> </view>
<!-- 新订单 --> </view>
<view class="orderList" v-if="navtabindex == 0"> <!-- 新订单 -->
<view class="listBox" v-for="(item,i) in groupList" :key="i" @click="orderinfoTo(item)" > <view class="orderList" v-if="navtabindex == 0">
<view class="df"> <view class="listBox" v-for="(item,i) in groupList" :key="i" @click="orderinfoTo(item)">
<view style="display: flex;"> <view class="df">
<text >{{item.proName.length>10?item.proName.substring(0,10)+'...':item.proName}}</text><u-icon name="arrow-right" color="#000" size="28"></u-icon> <view style="display: flex;">
</view> <text>{{item.proName.length>10?item.proName.substring(0,10)+'...':item.proName}}</text><u-icon
<text :class="[item.status=='unpaid'||item.status=='unused'?'state':'state2']">{{item.status|statusFirter}}</text> name="arrow-right" color="#000" size="28"></u-icon>
</view> </view>
<view class="df" style="justify-content: flex-start;margin-top: 32rpx;"> <text
:class="[item.status=='unpaid'||item.status=='unused'?'state':'state2']">{{item.status|statusFirter}}</text>
</view>
<view class="df" style="justify-content: flex-start;margin-top: 32rpx;">
<image style="width:120rpx; height: 120rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;" <image style="width:120rpx; height: 120rpx;border-radius: 12rpx 12rpx 12rpx 12rpx;"
:src="item.proImg" mode="aspectFill"> :src="item.proImg" mode="aspectFill">
</image> </image>
@@ -104,13 +106,14 @@
<view>数量：{{item.number}}份</view> <view>数量：{{item.number}}份</view>
<view>实付：<text style="color: #FF4C11;">￥{{item.payAmount}}</text></view> <view>实付：<text style="color: #FF4C11;">￥{{item.payAmount}}</text></view>
</view> </view>
</view>
<u-button v-if="item.status=='unused'" type="primary" shape="circle" class="buttonStyle" text="查看券码"></u-button>
</view> </view>
<u-button v-if="item.status=='unused'" type="primary" shape="circle" class="buttonStyle"
text="查看券码"></u-button>
</view> </view>
<image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png" </view>
v-if="is_end" mode="aspectFill"></image> <image style="margin:32rpx auto;" src="https://czg-qr-order.oss-cn-beijing.aliyuncs.com/nomore.png"
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" /> v-if="is_end" mode="aspectFill"></image>
<u-loadmore :status="form.status" fontSize="28" color="#999" iconSize="28" />
</view> </view>
</template> </template>
@@ -120,7 +123,7 @@
data() { data() {
return { return {
active: 0, active: 0,
navtabindex:0, navtabindex: 0,
tabs: [{ tabs: [{
name: '全部', name: '全部',
type: 1, type: 1,
@@ -148,7 +151,7 @@
} }
], ],
list: [], list: [],
groupList:[ ], groupList: [],
is_end: false, is_end: false,
swiperCurrent: '', swiperCurrent: '',
form: { form: {
@@ -170,26 +173,30 @@
this.init_fn() this.init_fn()
}, },
onReachBottom() { onReachBottom() {
this.orderorderList() if (this.navtabindex == 0) {
// 获取团购订单 // 获取团购订单
this.getorderList() this.getorderList()
} else {
this.orderorderList()
}
}, },
filters:{ filters: {
statusFirter(e){ statusFirter(e) {
// 状态: unpaid-待付款;unused-待使用;closed-已完成;refunding-退款中;refund-已退款;cancelled-已取消; // 状态: unpaid-待付款;unused-待使用;closed-已完成;refunding-退款中;refund-已退款;cancelled-已取消;
if(e=='closed') return'已完成' if (e == 'closed') return '已完成'
else if(e=='unpaid') return'待付款' else if (e == 'unpaid') return '待付款'
else if(e=='unused') return'待使用' else if (e == 'unused') return '待使用'
else if(e=='refunding') return'退款中' else if (e == 'refunding') return '退款中'
else if(e=='refund') return'已退款' else if (e == 'refund') return '已退款'
else if(e=='cancelled') return'已取消' else if (e == 'cancelled') return '已取消'
else return "1" else return "1"
} }
}, },
methods: { methods: {
// 切换导航栏 // 切换导航栏
navtabclick(i){ navtabclick(i) {
this.navtabindex = i this.navtabindex = i
this.init_fn()
}, },
async loginwxuserInfo() { async loginwxuserInfo() {
let res = await this.api.loginwxuserInfo({ let res = await this.api.loginwxuserInfo({
@@ -205,7 +212,7 @@
orderId: e.id orderId: e.id
}) })
}, },
orderinfoTo(e){ orderinfoTo(e) {
uni.pro.navigateTo('order/order_groupdetail', { uni.pro.navigateTo('order/order_groupdetail', {
orderId: e.id orderId: e.id
}) })
@@ -215,10 +222,14 @@
this.groupList = [] this.groupList = []
this.is_end = false this.is_end = false
this.form.page = 1 this.form.page = 1
this.form.size = 10
this.form.status = 'loadmore' this.form.status = 'loadmore'
this.orderorderList() if (this.navtabindex == 0) {
// 获取团购订单 // 获取团购订单
this.getorderList() this.getorderList()
} else {
this.orderorderList()
}
}, },
orderswitch(e, a) { orderswitch(e, a) {
this.active = a this.active = a
@@ -236,48 +247,51 @@
userId: uni.cache.get('userInfo').id, //userId userId: uni.cache.get('userInfo').id, //userId
status: this.swiperCurrent status: this.swiperCurrent
}) })
if (res.data.length == 0) { if (res.data.pages < this.form.page) {
this.is_end = true
this.form.status = 'nomore' this.form.status = 'nomore'
if (this.form.page == 1 && res.data.list.length == 0) {
this.is_end = true
}
return false; return false;
} else { } else {
this.form.status = 'loading'; this.form.status = 'loading';
this.form.page = ++this.form.page; this.form.page = ++this.form.page;
setTimeout(() => { setTimeout(() => {
this.list = [...this.list, ...res.data]; this.list = [...this.list, ...res.data];
if (res.data.length == 10) { this.form.status = 'loading';
this.form.status = 'loading'; if (res.data.pageNum == res.data.pages) {
} else {
this.is_end = true;
this.form.status = 'nomore'; this.form.status = 'nomore';
} else {
this.form.status = 'loading';
} }
}, 500) }, 500)
} }
}, },
async getorderList(){ async getorderList() {
let res = await this.api.groupOrderInfo({ let res = await this.api.groupOrderInfo({
page: this.form.page, page: this.form.page,
size: this.form.size, size: this.form.size,
userId: uni.cache.get('userInfo').id, //userId userId: uni.cache.get('userInfo').id, //userId
status: this.swiperCurrent status: this.swiperCurrent
}) })
if(res.data.list.length ==0){ if (res.data.pages < this.form.page) {
this.is_end = true
this.form.status = 'nomore' this.form.status = 'nomore'
return false; if (this.form.page == 1 && res.data.list == 0) {
}else{ this.is_end = true
this.form.status = 'loading';
this.form.page = ++this.form.page;
setTimeout(() => {
this.groupList = [...this.groupList, ...res.data.list];
if (res.data.list.length == 10) {
this.form.status = 'loading';
} else {
this.is_end = true;
this.form.status = 'nomore';
} }
}, 500) return false;
// console.log(res,'返回的数据') } else {
this.form.status = 'loading';
this.form.page = ++this.form.page;
setTimeout(() => {
this.groupList = [...this.groupList, ...res.data.list];
this.form.status = 'loading';
if (res.data.pageNum == res.data.pages) {
this.form.status = 'nomore';
} else {
this.form.status = 'loading';
}
}, 500)
} }
} }
} }
@@ -296,10 +310,12 @@
width: 100%; width: 100%;
height: 56rpx; height: 56rpx;
background: #ffd158; background: #ffd158;
.navtabpost{
.navtabpost {
position: relative; position: relative;
.navtabone { .navtabone {
margin-left:-10rpx; margin-left: -10rpx;
width: 162rpx; width: 162rpx;
height: 56rpx; height: 56rpx;
background: #FFEAB1; background: #FFEAB1;
@@ -312,8 +328,9 @@
text-align: center; text-align: center;
z-index: 10; z-index: 10;
} }
.navtabtow { .navtabtow {
margin-left:-10rpx; margin-left: -10rpx;
z-index: 9; z-index: 9;
width: 166rpx; width: 166rpx;
height: 56rpx; height: 56rpx;
@@ -476,20 +493,24 @@
} }
} }
} }
.orderList{
.orderList {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
flex-direction: column; flex-direction: column;
.listBox{
.listBox {
padding: 16rpx 18rpx; padding: 16rpx 18rpx;
margin-top: 48rpx;font-size: 32rpx; margin-top: 48rpx;
font-size: 32rpx;
width: 694rpx; width: 694rpx;
height: 248rpx; height: 248rpx;
background: #FFFFFF; background: #FFFFFF;
border-radius: 24rpx 24rpx 24rpx 24rpx; border-radius: 24rpx 24rpx 24rpx 24rpx;
position: relative; position: relative;
.buttonStyle{
.buttonStyle {
position: absolute; position: absolute;
right: 20rpx; right: 20rpx;
bottom: 50rpx; bottom: 50rpx;
@@ -499,21 +520,31 @@
border-radius: 32rpx 32rpx 32rpx 32rpx; border-radius: 32rpx 32rpx 32rpx 32rpx;
border: none; border: none;
} }
.state{
.state {
color: #FF4C11; color: #FF4C11;
} }
.state2{
.state2 {
color: #999; color: #999;
} }
.fontStyle{
font-size: 28rpx;font-weight: 400;color: #666666; .fontStyle {
font-size: 28rpx;
font-weight: 400;
color: #666666;
} }
} }
}
.df{ display: flex; align-items: center; justify-content: space-between; }
.ml-20{ }
margin-left: 20rpx;
} .df {
display: flex;
align-items: center;
justify-content: space-between;
}
.ml-20 {
margin-left: 20rpx;
}
</style> </style>