1

pages/index/index.vue

@@ -459,12 +459,29 @@
 								<view class="beizhu" v-if="item.remark != null && item.remark != ''">
 									备注：{{item.remark}}
 								</view>
-								<view class="qiangdan-btn" @tap="getOrder(item,index)">
+								<view class="dispatch-action-box" :class="{'dispatch-action-box--single': checked != 'zhipai'}">
-									<img src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/1b8b815302a34902ac79a76a469e4ee6.png"
+									<view class="qiangdan-btn" :id="'swipe-order-' + item.id"
-										alt="">
+										@tap.stop="noop"
-								</view>
+										@touchstart.stop="startSwipeOrder($event,item,index)"
-								<view class="yongjin" v-if="checked == 'zhipai'">
+										@touchmove.stop.prevent="moveSwipeOrder"
-									<text @tap="rejectOrder(item,index)">拒绝接单</text>
+										@touchend.stop="endSwipeOrder(item,index)"
+										@touchcancel.stop="resetSwipeOrder">
+										<view class="qiangdan-progress"
+											:style="{'width': getSwipeProgress(item,index) + '%'}"></view>
+										<view class="qiangdan-text">
+											<text v-if="!isSwipeOrderActive(item,index)">向右滑动抢单</text>
+											<text v-else-if="getSwipeProgress(item,index) < 92">继续滑动确认</text>
+											<text v-else>松手接单</text>
+										</view>
+										<view class="qiangdan-thumb"
+											:style="{'left': getSwipeProgress(item,index) + '%','transform':'translateX(-' + getSwipeProgress(item,index) + '%)'}">
+											<text>接</text>
+										</view>
+									</view>
+									<view class="reject-order-btn" v-if="checked == 'zhipai'"
+										@tap.stop="rejectOrder(item,index)">
+										<text>拒绝接单</text>
+									</view>
 								</view>
 							</view>
 						</view>
@@ -707,7 +724,16 @@
 				isputArea: false,
 				checkYongjin: false,
 				getshopArea: [],
-				putshopArea: []
+				putshopArea: [],
+				swipeOrder: {
+					id: '',
+					index: -1,
+					startX: 0,
+					startProgress: 0,
+					progress: 0,
+					trackWidth: 0,
+					confirmed: false
+				}
 			}
 		},
 		components: {
@@ -873,6 +899,65 @@
 				this.productData = item;
 				this.$refs.productPopup.open()
 			},
+			getSwipeProgress(item, index) {
+				if (this.swipeOrder.id === item.id && this.swipeOrder.index === index) {
+					return this.swipeOrder.progress
+				}
+				return 0
+			},
+			isSwipeOrderActive(item, index) {
+				return this.swipeOrder.id === item.id && this.swipeOrder.index === index && this.swipeOrder.progress > 0
+			},
+			startSwipeOrder(event, item, index) {
+				const touch = event.touches && event.touches[0]
+				if (!touch) return
+				this.swipeOrder = {
+					id: item.id,
+					index,
+					startX: touch.clientX,
+					startProgress: 0,
+					progress: 0,
+					trackWidth: 0,
+					confirmed: false
+				}
+				this.$nextTick(() => {
+					uni.createSelectorQuery().in(this).select('#swipe-order-' + item.id).boundingClientRect((rect) => {
+						if (rect && this.swipeOrder.id === item.id && this.swipeOrder.index === index) {
+							this.swipeOrder.trackWidth = rect.width
+						}
+					}).exec()
+				})
+			},
+			moveSwipeOrder(event) {
+				const touch = event.touches && event.touches[0]
+				if (!touch || this.swipeOrder.id === '') return
+				const trackWidth = this.swipeOrder.trackWidth || uni.getSystemInfoSync().windowWidth * 0.86
+				const deltaX = Math.max(0, touch.clientX - this.swipeOrder.startX)
+				const progress = Math.min(100, Math.round(deltaX / (trackWidth * 0.72) * 100))
+				this.swipeOrder.progress = progress
+			},
+			endSwipeOrder(item, index) {
+				if (this.swipeOrder.id !== item.id || this.swipeOrder.index !== index) return
+				if (this.swipeOrder.progress >= 92 && !this.swipeOrder.confirmed) {
+					this.swipeOrder.confirmed = true
+					this.swipeOrder.progress = 100
+					this.getOrder(item, index)
+					return
+				}
+				this.resetSwipeOrder()
+			},
+			resetSwipeOrder() {
+				this.swipeOrder = {
+					id: '',
+					index: -1,
+					startX: 0,
+					startProgress: 0,
+					progress: 0,
+					trackWidth: 0,
+					confirmed: false
+				}
+			},
+			noop() {},
 			getOrder(item, index) {
 				let that = this
 				
@@ -889,6 +974,7 @@
 				that.tui.request("/mall/delivery/accept", "POST", data, false, true).then((res) => {
 					that.loadStatus = 'nomore';
 					if (res.code == 200) {
+						that.resetSwipeOrder();
 						if (!uni.getStorageSync('worker') && res.result != null) {
 							uni.setStorageSync('worker', res.result)
 						}
@@ -910,6 +996,7 @@
 						}, 2000)
 						that.$forceUpdate();
 					} else {
+						that.resetSwipeOrder();
 						that.tui.toast(res.message);
 						return;
 					}
@@ -1947,7 +2034,6 @@
 
 	.list-1 {
 		width: 98%;
-		max-height: 640rpx;
 		background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(253, 255, 250, 0.96) 100%);
 		border: 1px solid rgba(255, 255, 255, 0.86);
 		border-radius: 34rpx;
@@ -2150,19 +2236,89 @@
 	}
 
 	.qiangdan-btn {
-		width: 95%;
+		width: 100%;
 		height: 100rpx;
-		margin: 20rpx auto;
+		border-radius: 999rpx;
-		transition: transform 0.18s ease;
+		background: linear-gradient(135deg, rgba(246, 255, 252, 0.98) 0%, rgba(235, 255, 249, 0.96) 100%);
+		border: 1px solid rgba(166, 255, 234, 0.72);
+		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72), 0 12rpx 26rpx rgba(0, 35, 28, 0.06);
+		position: relative;
+		overflow: hidden;
+	}
 
-		&:active {
+	.qiangdan-progress {
-			transform: scale(0.97);
+		height: 100%;
-		}
+		border-radius: 999rpx;
+		background: linear-gradient(90deg, rgba(166, 255, 234, 0.42) 0%, rgba(108, 226, 202, 0.78) 100%);
+		transition: width 0.16s ease-out;
+	}
 
-		img {
+	.qiangdan-text {
-			width: 100%;
+		width: 100%;
-			height: 100%;
+		height: 100%;
-			background-size: 100%;
+		position: absolute;
+		top: 0;
+		left: 0;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		color: #2a665b;
+		font-size: 28rpx;
+		font-weight: 900;
+		letter-spacing: 2rpx;
+	}
+
+	.qiangdan-thumb {
+		width: 82rpx;
+		height: 82rpx;
+		border-radius: 50%;
+		position: absolute;
+		left: 0;
+		top: 9rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background: rgba(255, 255, 255, 0.96);
+		border: 1px solid rgba(166, 255, 234, 0.9);
+		box-shadow: 0 10rpx 22rpx rgba(0, 35, 28, 0.12);
+		color: #1b7a69;
+		font-size: 28rpx;
+		font-weight: 900;
+		transition: left 0.16s ease-out, transform 0.16s ease-out;
+	}
+
+	.dispatch-action-box {
+		width: 95%;
+		margin: 20rpx auto 24rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.dispatch-action-box--single {
+		margin-bottom: 20rpx;
+	}
+
+	.reject-order-btn {
+		min-width: 220rpx;
+		height: 58rpx;
+		margin-top: 14rpx;
+		padding: 0 34rpx;
+		border-radius: 999rpx;
+		border: 1px solid rgba(255, 108, 96, 0.5);
+		background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 244, 241, 0.96) 100%);
+		box-shadow: 0 8rpx 18rpx rgba(255, 108, 96, 0.12);
+		box-sizing: border-box;
+		color: #e45c50;
+		font-size: 24rpx;
+		font-weight: 800;
+		line-height: 58rpx;
+		text-align: center;
+		transition: transform 0.18s ease, box-shadow 0.18s ease;
+
+		&:active {
+			transform: scale(0.96);
+			box-shadow: 0 4rpx 10rpx rgba(255, 108, 96, 0.1);
 		}
 	}