1

pages/index/index.vue

@@ -425,14 +425,14 @@
 										@touchend.stop="endSwipeOrder(item,index)"
 										@touchcancel.stop="resetSwipeOrder">
 										<view class="qiangdan-progress"
-											:style="{'width': getSwipeProgress(item,index) + '%'}"></view>
+											:style="swipeOrder.id === item.id && swipeOrder.index === index ? swipeOrder.progressStyle : swipeOrderDefaultStyle.progress"></view>
 										<view class="qiangdan-text">
-											<text v-if="!isSwipeOrderActive(item,index)">向右滑动抢单</text>
+											<text v-if="swipeOrder.id !== item.id || swipeOrder.index !== index || swipeOrder.progress <= 0">向右滑动抢单</text>
-											<text v-else-if="getSwipeProgress(item,index) < 92">继续滑动确认</text>
+											<text v-else-if="swipeOrder.progress < 92">继续滑动确认</text>
 											<text v-else>松手接单</text>
 										</view>
 										<view class="qiangdan-thumb"
-											:style="{'left': getSwipeProgress(item,index) + '%','transform':'translateX(-' + getSwipeProgress(item,index) + '%)'}">
+											:style="swipeOrder.id === item.id && swipeOrder.index === index ? swipeOrder.thumbStyle : swipeOrderDefaultStyle.thumb">
 											<text>接</text>
 										</view>
 									</view>
@@ -693,12 +693,18 @@
 				checkYongjin: false,
 				getshopArea: [],
 				putshopArea: [],
+				swipeOrderDefaultStyle: {
+					progress: 'width: 0%;',
+					thumb: 'left: 0%; transform: translateX(-0%);'
+				},
 				swipeOrder: {
 					id: '',
 					index: -1,
 					startX: 0,
 					startProgress: 0,
 					progress: 0,
+					progressStyle: 'width: 0%;',
+					thumbStyle: 'left: 0%; transform: translateX(-0%);',
 					trackWidth: 0,
 					confirmed: false
 				}
@@ -842,6 +848,7 @@
 				// 计算导航栏高度用于sticky offset：statusBarHeight + 40px内容区
 				const info = uni.getSystemInfoSync();
 				this.navBarHeight = info.statusBarHeight;
+				this.swipeOrderBaseWidth = info.windowWidth * 0.86;
 			},
 			clearCheck() {
 				this.checkYongjin = false
@@ -885,7 +892,9 @@
 					startX: touch.clientX,
 					startProgress: 0,
 					progress: 0,
-					trackWidth: 0,
+					progressStyle: 'width: 0%;',
+					thumbStyle: 'left: 0%; transform: translateX(-0%);',
+					trackWidth: this.swipeOrderBaseWidth || 0,
 					confirmed: false
 				}
 				this.$nextTick(() => {
@@ -899,16 +908,16 @@
 			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 trackWidth = this.swipeOrder.trackWidth || this.swipeOrderBaseWidth || 1
 				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
+				this.setSwipeOrderProgress(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.setSwipeOrderProgress(100)
 					this.getOrder(item, index)
 					return
 				}
@@ -921,10 +930,19 @@
 					startX: 0,
 					startProgress: 0,
 					progress: 0,
+					progressStyle: 'width: 0%;',
+					thumbStyle: 'left: 0%; transform: translateX(-0%);',
 					trackWidth: 0,
 					confirmed: false
 				}
 			},
+			setSwipeOrderProgress(progress) {
+				if (this.swipeOrder.progress === progress) return
+				const progressValue = progress + '%'
+				this.swipeOrder.progress = progress
+				this.swipeOrder.progressStyle = 'width: ' + progressValue + ';'
+				this.swipeOrder.thumbStyle = 'left: ' + progressValue + '; transform: translateX(-' + progressValue + ');'
+			},
 			noop() {},
 			getOrder(item, index) {
 				let that = this