a

pages_shop/order.vue

@@ -1,62 +1,57 @@
 <template>
 	<view>
-		<view class=""></view>
 		<view class="content">
-			<!-- <up-modal :show="show" title="555" ></up-modal>
-			 -->
-
+			<!-- 使用mescroll-body包裹订单列表 -->
+			<mescroll-body  bottom="0" ref="mescrollRef" @init="mescrollInit" 
+				@down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
 			<u-tabs class="tabs" itemStyle="width:33%;height:100rpx;" :list="tabList" @click="tabsClick"
 				lineColor="#FF5C03"></u-tabs>
-			<view class="order-list">
-				<view class="order-item" v-for="(item,index) in orderList" :key="index">
-					<view class="order-num">
-						<text>订单号：{{item.orderCode}}</text>
-						<text v-if="item.status==-1">申请退款</text>
-						<text v-else-if="item.status==-2">退货成功</text>
-						<text v-else-if="item.status==1">待支付</text>
-						<text v-else-if="item.status==2">待发货</text>
-						<text v-else-if="item.status==3">待收货</text>
-						<!-- <text v-else-if="item.status==4">待评价</text> -->
-						<text v-else-if="item.status==5">已完成</text>
-						<text v-else-if="item.status==-3">已取消</text>
-					</view>
-					<view class="order-main" v-for="(itm,idx) in item.orderItemList" :key="idx">
-						<view class="img-box">
-							<image :src="itm.imgUrl"></image>
+			
+		
+				<view class="order-list">
+					<view class="order-item" v-for="(item,index) in orderList" :key="index">
+						<view class="order-num">
+							<text>订单号：{{item.orderCode}}</text>
+							<text v-if="item.status==-1">申请退款</text>
+							<text v-else-if="item.status==-2">退货成功</text>
+							<text v-else-if="item.status==1">待支付</text>
+							<text v-else-if="item.status==2">待发货</text>
+							<text v-else-if="item.status==3">待收货</text>
+							<text v-else-if="item.status==5">已完成</text>
+							<text v-else-if="item.status==-3">已取消</text>
 						</view>
-						<view class="order-text">
-							<view class="title">{{itm.productName}}</view>
-							<view class="txt">适用于乏力、头晕等人群，通过问诊可明确诊断给予专业性指导意见。</view>
-							<view class="num">
-								<text>{{itm.sales}} 人已购</text>
-								<text class="grey">x{{itm.num}}</text>
+						<view class="order-main" v-for="(itm,idx) in item.orderItemList" :key="idx">
+							<view class="img-box">
+								<image :src="itm.imgUrl"></image>
+							</view>
+							<view class="order-text">
+								<view class="title">{{itm.productName}}</view>
+								<view class="txt">适用于乏力、头晕等人群，通过问诊可明确诊断给予专业性指导意见。</view>
+								<view class="num">
+									<text>{{itm.sales}} 人已购</text>
+									<text class="grey">x{{itm.num}}</text>
+								</view>
 							</view>
 						</view>
-					</view>
-					<view class="order-bottom">
-						<view class="order-money">
-							<text class="title">订单金额：</text>
-							<text class="num">￥<text class="bold">{{item.totalPrice}}</text>.00</text>
-						</view>
-						<view class="button-group">
-							<view v-if="item.status == 1" @click="cancel(item)" class="button cancel ">取消订单</view>
-							<view v-if="item.status !== -1 && item.status !== -3" @click="refund(item)"
-								class="button cancel">申请售后</view>
-							<view v-if="item.status ==3 ||item.status ==5 " class="button cancel"
-								@click.stop="showDelivery(item)">查看物流</view>
-							<view v-if="item.status == 1" @click="pay(item)" class="button pay">去支付</view>
-							<!-- <view v-if="item.status == 2" @click="urgeShipment(item)" class="button cancel">催发货</view> -->
-							<view v-if="item.status == 3" @click="confirmReceipt(item)" class="button pay">确认收货</view>
-							<view v-if="item.status == 4" @click="evaluate(item)" class="button pay">评价</view>
-							<!-- <view class="button">查看物流</view> -->
-							<!-- <view v-if="item.status == 1" class="button pay">去支付</view>
-							<view v-if="item.status == 1" class="button pay">去支付</view> -->
+						<view class="order-bottom">
+							<view class="order-money">
+								<text class="title">订单金额：</text>
+								<text class="num">￥<text class="bold">{{item.totalPrice}}</text>.00</text>
+							</view>
+							<view class="button-group">
+								<view v-if="item.status == 1" @click="cancel(item)" class="button cancel ">取消订单</view>
+								<view v-if="item.status !== -1 && item.status !== -3" @click="refund(item)"
+									class="button cancel">申请售后</view>
+								<view v-if="item.status ==3 ||item.status ==5 " class="button cancel"
+									@click.stop="showDelivery(item)">查看物流</view>
+								<view v-if="item.status == 1" @click="pay(item)" class="button pay">去支付</view>
+								<view v-if="item.status == 3" @click="confirmReceipt(item)" class="button pay">确认收货</view>
+								<view v-if="item.status == 4" @click="evaluate(item)" class="button pay">评价</view>
+							</view>
 						</view>
-						<!-- <view class="button">申请售后</view>
-						<view class="button">查看物流</view> -->
 					</view>
 				</view>
-			</view>
+			</mescroll-body>
 		</view>
 	</view>
 </template>
@@ -67,7 +62,10 @@
 		liveOrderList, // 订单列表
 		finishOrder //确认收货
 	} from '@/api/order.js'
+	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
+	
 	export default {
+		mixins: [MescrollMixin], // 使用mixin
 		data() {
 			return {
 				status: '',
@@ -88,21 +86,86 @@
 						name: "待收货",
 						status: "3"
 					},
-					// {
-					// 	name: "待评价",
-					// 	status: "4"
-					// },
 					{
 						name: "已完成",
 						status: "5"
 					}
-				]
+				],
+				// mescroll配置
+				downOption: {
+					use: true,
+					auto: false // 是否在初始化后自动执行下拉回调
+				},
+				upOption: {
+					use: true,
+					auto: true, // 是否在初始化时自动执行上拉回调
+					page: {
+						num: 0, // 当前页码
+						size: 10 // 每页数据条数
+					},
+					noMoreSize: 5, // 如果列表已无数据，可设置列表的总数量要大于等于5条才显示无更多数据
+					empty: {
+						icon: '/static/images/empty.png', // 可配置空状态图片
+						tip: '暂无订单数据' // 空状态提示文字
+					}
+				},
+				mescroll: null // mescroll实例
 			}
 		},
-		mounted() {
-			this.getliveOrderList(this.status)
-		},
 		methods: {
+			// mescroll初始化
+			mescrollInit(mescroll) {
+				this.mescroll = mescroll;
+			},
+			// 下拉刷新回调
+			downCallback(mescroll) {
+				// 重置列表数据
+				this.orderList = [];
+				mescroll.resetUpScroll();
+			},
+			// 上拉加载回调
+			upCallback(mescroll) {
+				const pageNum = mescroll.num;
+				const pageSize = mescroll.size;
+				
+				let data = {
+					pageSize: pageSize,
+					page: pageNum,
+					status: this.status
+				}
+				
+				liveOrderList(data).then(res => {
+					if (res.code == 200) {
+						// 请求成功，处理数据
+						let curPageData = res.rows || [];
+						let curPageLen = curPageData.length;
+						let totalSize = res.total || 0;
+						
+						// 如果是第一页，直接赋值
+						if (pageNum === 1) {
+							this.orderList = [];
+						}
+						
+						// 追加新数据
+						this.orderList = this.orderList.concat(curPageData);
+						
+						// 方法一(推荐): 后台返回有总数据量
+						mescroll.endBySize(curPageLen, totalSize);
+						
+					} else {
+						// 请求失败
+						mescroll.endErr();
+						uni.showToast({
+							title: res.msg,
+							icon: 'none'
+						});
+					}
+				}).catch(err => {
+					// 请求异常
+					mescroll.endErr();
+					console.log("请求异常:" + JSON.stringify(err));
+				});
+			},
 			// 确认收货
 			confirmReceipt(item) {
 				var that = this;
@@ -120,7 +183,8 @@
 										icon: 'success',
 										title: "操作成功",
 									});
-									that.getliveOrderList(that.status)
+									// 刷新列表
+									that.mescroll.resetUpScroll();
 								} else {
 									uni.showToast({
 										icon: 'none',
@@ -128,8 +192,6 @@
 									});
 								}
 							});
-						} else if (res.cancel) {
-
 						}
 					}
 				});
@@ -151,7 +213,8 @@
 										icon: 'success',
 										title: "操作成功",
 									});
-									that.getliveOrderList(that.status)
+									// 刷新列表
+									that.mescroll.resetUpScroll();
 								} else {
 									uni.showToast({
 										icon: 'none',
@@ -159,13 +222,10 @@
 									});
 								}
 							});
-						} else if (res.cancel) {
-
 						}
 					}
 				});
 			},
-
 			// 申请售后
 			refund(item) {
 				uni.navigateTo({
@@ -174,37 +234,23 @@
 			},
 			// tab切换
 			tabsClick(item) {
-				this.getliveOrderList(item.status) // 切换时重新获取数据
-				this.status = item.status
+				this.status = item.status;
+				// 切换tab时刷新列表
+				this.mescroll.resetUpScroll();
 			},
-
-			// 订单列表
-			getliveOrderList(status) {
-				let data = {
-					pageSize: 10,
-					page: 1,
-					status: status // 添加状态参数
-				}
-				liveOrderList(data).then(res => {
-						if (res.code == 200) {
-							console.log("订单列表数据>>>>", res)
-							this.orderList = res.rows
-						} else {
-							uni.showToast({
-								title: res.msg,
-								icon: 'none'
-							});
-						}
-					},
-					rej => {
-						console.log("rej:" + JSON.stringify(rej));
-					}
-				);
-			},// 查看物流
+			// 查看物流
 			showDelivery(item) {
 				uni.navigateTo({
 					url: './storeOrderDelivery?orderId='+item.orderId
 				})
+			},
+			// 支付
+			pay(item) {
+				// 支付逻辑
+			},
+			// 评价
+			evaluate(item) {
+				// 评价逻辑
 			}
 		}
 	}
@@ -220,7 +266,6 @@
 	}
 
 	.content {
-
 		.order-list {
 			background: #F5F7FA;
 			padding: 0 24rpx;
@@ -270,7 +315,6 @@
 						}
 
 						.num {
-
 							display: flex;
 							justify-content: space-between;
 							font-size: 22rpx;
@@ -280,11 +324,9 @@
 								margin-top: 12rpx;
 								font-size: 24rpx;
 								color: #999999;
-
 							}
 						}
 					}
-
 				}
 
 				.order-bottom {
@@ -322,7 +364,6 @@
 							font-size: 24rpx;
 						}
 
-
 						.cancel {
 							background-color: #ececec;
 							color: #2c2c2c;
@@ -333,7 +374,6 @@
 							background: linear-gradient(270deg, #FF5C03 0%, #FFAC64 100%);
 						}
 					}
-
 				}
 			}
 		}

pages_shop/paymentOrder.vue

@@ -3,7 +3,8 @@
 		<view class="inner">
 			<!-- 时间、价格 -->
 			<view class="time-price">
-				<text class="time">请在{{payLimitTime}}前完成支付</text>
+				<!-- <text class="time">请在{{payLimitTime}}前完成支付</text> -->
+				<text class="time">待支付</text>
 				<view class="price-box">
 					<text class="unit">¥</text>
 					<text class="num">{{order ? (Number(order.totalPrice) || 0).toFixed(2) : "0.00"}}</text>
@@ -204,7 +205,10 @@
 			    return this.order?.createTime? dayjs(this.order.createTime).format('YYYY-MM-DD HH:mm:ss'): '';
 			  },
 			  payLimitTime() {
-			    return this.order?.updateTime? dayjs(this.order.updateTime).format('YYYY-MM-DD HH:mm:ss'): '';
+				   return this.order?.updateTime 
+				      ? dayjs(this.order.updateTime).add(2, 'day').format('YYYY-MM-DD HH:mm:ss')
+				      : '';
+			    // return this.order?.updateTime? dayjs(this.order.updateTime).format('YYYY-MM-DD HH:mm:ss'): '';
 			  }
 		},
 		onLoad(options) {