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

订单分页

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