修复支付宝小程序试玩奖品滚动问题

src/packagePrize/rolling/index.vue

@@ -1,13 +1,15 @@
 <template>
 	<view>
 		<!-- #ifdef MP-ALIPAY -->
-		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启" v-if="rollingShow"  leftIconSize="0"></u-navbar>
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启" v-if="rollingShow"
+			leftIconSize="0"></u-navbar>
 		<!-- #endif -->
-		
+
 		<!-- #ifndef MP-ALIPAY -->
-		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启" v-if="rollingShow"></u-navbar>
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启" v-if="rollingShow">
+		</u-navbar>
 		<!-- #endif -->
-		
+
 		<view class="rolling" v-if="rollingShow">
 			<!-- 奖品滚动 -->
 			<view class="rolling-prize">
@@ -16,10 +18,13 @@
 						<view class="rolling-prize-list-item__items flex">
 							<view class="content flex" v-for="(items, indexs) in item" :key="indexs">
 								<image :src="items.picUrl" mode="aspectFit"></image>
-								<view class="content-title ells-one" v-if="items.prizeType && items.prizeType.value != 'coin'">{{ items.title }}</view>
+								<view class="content-title ells-one"
+									v-if="items.prizeType && items.prizeType.value != 'coin'">{{ items.title }}</view>
 								<view class="content-title ells-one" v-else>盲豆</view>
-								<view class="content-price" v-if="items.prizeType && items.prizeType.value != 'coin'">￥{{ $numberFormat(items.value) }}</view>
+								<view class="content-price" v-if="items.prizeType && items.prizeType.value != 'coin'">
+									￥{{ $numberFormat(items.value) }}</view>
 								<view class="content-price" v-else>{{ items.value }}个</view>
+								<view class="">{{ index }}</view>
 							</view>
 						</view>
 					</view>
@@ -29,16 +34,19 @@
 						<view class="rolling-prize-list-item__items flex">
 							<view class="content flex" v-for="(items, indexs) in item" :key="indexs">
 								<image :src="items.picUrl" mode="aspectFit"></image>
-								<view class="content-title ells-one" v-if="items.prizeType && items.prizeType.value != 'coin'">{{ items.title }}</view>
+								<view class="content-title ells-one"
+									v-if="items.prizeType && items.prizeType.value != 'coin'">{{ items.title }}</view>
 								<view class="content-title ells-one" v-else>盲豆</view>
-								<view class="content-price" v-if="items.prizeType && items.prizeType.value != 'coin'">￥{{ $numberFormat(items.value) }}</view>
+								<view class="content-price" v-if="items.prizeType && items.prizeType.value != 'coin'">
+									￥{{ $numberFormat(items.value) }}</view>
 								<view class="content-price" v-else>{{ items.value }}个</view>
+								<view class="">{{ index }}</view>
 							</view>
 						</view>
 					</view>
 				</view>
 			</view>
-			
+
 			<!-- 按钮 -->
 			<view class="rolling-btn flex">
 				<view class="rolling-btn-content flex" :class="{ 'btn-stop': btnIng }" @click="stop" v-show="btnShow">
@@ -46,7 +54,7 @@
 					<view class="rolling-btn-content-title">停止滚动</view>
 				</view>
 			</view>
-			
+
 			<!-- 倒计时 -->
 			<view class="rolling-time flex">
 				<view class="num">{{ num }}</view>
@@ -59,7 +67,7 @@
 				<u-icon size="19" color="#fff" name="arrow-left"></u-icon>
 			</view>
 			<!-- #endif -->
-			
+
 			<view class="prize-title flex">
 				<image src="../../packagePrize/static/rolling_title.png" mode="scaleToFill"></image>
 			</view>
@@ -68,28 +76,36 @@
 					<view class="prize-box-popup__image flex">
 						<image :src="prizeInfo.picUrl" mode="aspectFit"></image>
 					</view>
-					<image class="prize-box-popup__rotate" src="../static/rolling_bg1.png" mode="scaleToFill" v-if="rotateShow" />
-					<image class="prize-box-popup__circular" src="../static/rolling_bg2.png" mode="scaleToFill" v-if="circularShow" />
+					<image class="prize-box-popup__rotate" src="../static/rolling_bg1.png" mode="scaleToFill"
+						v-if="rotateShow" />
+					<image class="prize-box-popup__circular" src="../static/rolling_bg2.png" mode="scaleToFill"
+						v-if="circularShow" />
 				</view>
 			</view>
 			<view class="prize-info flex">
 				<view class="prize-info-content">
-					<view class="prize-info-content-price" v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'"><text>¥</text>{{ $numberFormat(prizeInfo.value) }}</view>
+					<view class="prize-info-content-price"
+						v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'">
+						<text>¥</text>{{ $numberFormat(prizeInfo.value) }}</view>
 					<view class="prize-info-content-price" v-else>{{ prizeInfo.value }}个</view>
 					<!-- #ifdef MP-ALIPAY -->
-					<view class="prize-info-content-titletwo" v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'">{{ prizeInfo.title }}</view>
+					<view class="prize-info-content-titletwo"
+						v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'">{{ prizeInfo.title }}</view>
 					<view class="prize-info-content-titletwo" v-else>盲豆</view>
 					<!-- #endif -->
 					<!-- #ifndef MP-ALIPAY -->
-					<view class="prize-info-content-title ells-one" v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'">{{ prizeInfo.title }}</view>
+					<view class="prize-info-content-title ells-one"
+						v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'">{{ prizeInfo.title }}</view>
 					<view class="prize-info-content-title" v-else>盲豆</view>
 					<!-- #endif -->
-					
+
 					<view class="prize-info-content-btn flex">
 						<view class="prize-info-content-btn-content flex" v-if="isTry == 0">
 							<image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
-							<view class="prize-info-content-btn-content-txt" @click="toPrize(prizeInfo.prizeType)" v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'">去查看我的奖品</view>
-							<view class="prize-info-content-btn-content-txt" @click="toPrize(prizeInfo.prizeType)" v-else>去商城兑换商品</view>
+							<view class="prize-info-content-btn-content-txt" @click="toPrize(prizeInfo.prizeType)"
+								v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'">去查看我的奖品</view>
+							<view class="prize-info-content-btn-content-txt" @click="toPrize(prizeInfo.prizeType)"
+								v-else>去商城兑换商品</view>
 						</view>
 						<view class="prize-info-content-btn-content flex" v-else @click="back">
 							<image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
@@ -122,7 +138,7 @@
 				rollingShow: true,
 				statusHeight: 30,
 				btnShow: false,
-				
+
 				boxId: null,
 				isTry: null,
 				orderId: '',
@@ -131,9 +147,9 @@
 				circularShow: true
 			}
 		},
-		
+
 		onLoad(options) {
-			if(options) {
+			if (options) {
 				this.boxId = options.boxId
 				this.isTry = Number(options.isTry)
 				this.orderId = options.orderId
@@ -141,22 +157,22 @@
 			}
 			// 创建动画实例
 			this.animation = uni.createAnimation()
-			
+
 			// #ifdef MP-WEIXIN
 			const res = uni.getMenuButtonBoundingClientRect()
 			this.statusHeight = res.top //胶囊距离顶部
 			// #endif
 		},
-		
+
 		onUnload() {
 			// 移除动画
 			this.animationData = {}
 		},
-		
+
 		mounted() {
 			this.getList()
 		},
-		
+
 		methods: {
 			getList() {
 				let _this = this
@@ -166,47 +182,49 @@
 					orderId: _this.orderId,
 					ticketId: _this.ticketId
 				}
-				
+
 				let num = 0
 				let time = setInterval(() => {
-					num ++
+					num++
 					uni.showLoading({
 						title: '加载中'
 					});
 					$http.post('/api/v1/mp/user/ticket/autoCashPrize', data).then(res => {
-						if(res.code == 0) {
+						if (res.code == 0) {
 							clearInterval(time)
 							_this.list = res.data.ticketAwardsPrizeList
 							_this.list.forEach(item => {
 								item.forEach(ele => {
-									ele.picUrl = env.filePublic + ele.picUrl.split(',')[0] + '?imageView2/2/w/170'
+									ele.picUrl = env.filePublic + ele.picUrl.split(',')[
+										0] + '?imageView2/2/w/170'
 									ele.prizeType = JSON.parse(ele.prizeType)
 								})
 							})
-							_this.prizeInfo = { 
+							_this.prizeInfo = {
 								...res.data,
-								picUrl: env.filePublic + res.data.picUrl.split(',')[0] + '?imageView2/2/w/340',
+								picUrl: env.filePublic + res.data.picUrl.split(',')[0] +
+									'?imageView2/2/w/340',
 								prizeType: JSON.parse(res.data.prizeType)
 							}
-							setTimeout(()=> {
+							setTimeout(() => {
 								uni.hideLoading();
 								_this.btnShow = true
 								_this.running()
-							},500)
-						} else if (res.code == 401 ) {
+							}, 500)
+						} else if (res.code == 401) {
 							uni.hideLoading();
 							clearInterval(time)
 							uni.navigateBack({
 								delta: 2
 							})
-						}  else if(res.code == 500) {
+						} else if (res.code == 500) {
 							uni.hideLoading();
 							clearInterval(time)
 							uni.navigateBack({
 								delta: 1
 							})
 						}
-						
+
 						if (num == 10) {
 							uni.hideLoading();
 							clearInterval(time)
@@ -220,7 +238,7 @@
 					})
 				}, 1000)
 			},
-			
+
 			// 动画开始
 			running() {
 				// #ifdef H5 
@@ -248,9 +266,9 @@
 					this.stop()
 				}, 8000);
 				// #endif
-				
+
 				// #ifdef MP-ALIPAY
-				 my.createSelectorQuery().select('.rolling-prize-list').boundingClientRect().exec(info => {
+				my.createSelectorQuery().select('.rolling-prize-list').boundingClientRect().exec(info => {
 					this.data = info[0].width
 					// 调用 step() 来表示一组动画完成
 					this.animation.translateX(-this.data).step({
@@ -269,14 +287,14 @@
 							clearInterval(this.time)
 						}
 					}, 1000)
-				 })
+				})
 				// 不手动停止动画，自动停止
 				this.stopTime = setTimeout(() => {
 					this.num = 0
 					this.stop()
 				}, 8000);
 				// #endif
-			
+
 				// #ifdef MP-WEIXIN 
 				// 元素详细信息
 				uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
@@ -299,7 +317,7 @@
 						}
 					}, 1000)
 				}).exec();
-				
+
 				// 不手动停止动画，自动停止
 				this.stopTime = setTimeout(() => {
 					this.num = 0
@@ -307,11 +325,10 @@
 				}, 8000);
 				// #endif
 			},
-			
+
 			// 停止动画
 			stop() {
-				if(this.btnIng) return
-				
+				if (this.btnIng) return
 				this.btnIng = true
 				// 获取屏幕距离，用于计算停止动画移动距离计算
 				// #ifndef MP-ALIPAY
@@ -323,7 +340,6 @@
 				});
 				// #endif
 				
-				
 				/**
 				 * 0秒：下标4
 				 * 1秒：下标6
@@ -335,10 +351,13 @@
 				 * 7秒：下标2
 				 * 8秒：下标2
 				 * */
-				
 				clearInterval(this.time)
 				clearTimeout(this.stopTime)
 				this.animationData = {}
+				// #ifdef MP-ALIPAY
+				this.list[3][1] = JSON.parse(JSON.stringify(this.prizeInfo))
+				// #endif
+				// #ifndef MP-ALIPAY
 				if (this.num2 == 0) {
 					this.list[3][1] = JSON.parse(JSON.stringify(this.prizeInfo))
 				} else if (this.num2 == 1) {
@@ -356,13 +375,15 @@
 				} else if (this.num2 == 7) {
 					this.list[1][1] = JSON.parse(JSON.stringify(this.prizeInfo))
 				} else if (this.num2 == 8) {
-					// #ifdef MP-WEIXIN || MP-ALIPAY
+					// #ifdef MP-WEIXIN 
 					this.list[1][1] = JSON.parse(JSON.stringify(this.prizeInfo))
 					// #endif
 					// #ifdef H5 
 					this.list[3][1] = JSON.parse(JSON.stringify(this.prizeInfo))
 					// #endif
 				}
+				// #endif
+
 				// #ifdef H5
 				/**
 				 * 根据动画时间移动到指定位置
@@ -375,48 +396,46 @@
 					timingFunction: 'ease'
 				})
 				this.animationData = this.animation.export()
-				
+
 				setTimeout(() => {
 					this.rollingShow = false
-				},4500)
+				}, 4500)
 				setTimeout(() => {
 					this.circularShow = false
-				},5100)
+				}, 5100)
 				setTimeout(() => {
 					this.rotateShow = false
-				},7500)
+				}, 7500)
 				// #endif
-				
+
 				// #ifdef MP-ALIPAY
-				
 				let _this = this
 				uni.getSystemInfo({
-					success: (res)=> {
+					success: (res) => {
 						let windowWidth = res.windowWidth;
-						my.createSelectorQuery().select('.rolling-prize-list').boundingClientRect().exec(info => {
-							_this.data = info[0].width//动画移动距离
-							_this.animation.translateX(-(_this.data + (_this.data / 8 * _this.num2 + windowWidth * 3))).step({
-							// _this.animation.translateX(-(_this.data / 8 * _this.num2 + windowWidth * 3)).step({
-								duration: 4000,
-								timingFunction: 'ease'
+						my.createSelectorQuery().select('.rolling-prize-list').boundingClientRect().exec(
+							info => {
+								_this.data = info[0].width //动画移动距离
+								_this.animation.translateX(-(_this.data + windowWidth * 3)).step({
+									duration: 4000,
+									timingFunction: 'ease'
+								})
+								_this.animationData = _this.animation.export()
 							})
-							_this.animationData = _this.animation.export()
-						})
-						
+
 						setTimeout(() => {
 							_this.rollingShow = false
-						},4500)
+						}, 4500)
 						setTimeout(() => {
 							_this.circularShow = false
-						},5100)
+						}, 5100)
 						setTimeout(() => {
 							_this.rotateShow = false
-						},7500)
+						}, 7500)
 					}
 				});
-				
 				// #endif
-			
+
 				// #ifdef MP-WEIXIN 
 				uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
 					this.data = info.width
@@ -426,25 +445,24 @@
 					})
 					this.animationData = this.animation.export()
 				}).exec();
-				
 				setTimeout(() => {
 					this.rollingShow = false
-				},4500)
+				}, 4500)
 				setTimeout(() => {
 					this.circularShow = false
-				},5100)
+				}, 5100)
 				setTimeout(() => {
 					this.rotateShow = false
-				},7500)
+				}, 7500)
 				// #endif
 			},
-			
+
 			back() {
 				uni.navigateBack({
 					delta: 1
 				})
 			},
-			
+
 			toPrize(data) {
 				if (data.value == 'goods') {
 					uni.redirectTo({
@@ -478,7 +496,7 @@
 		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/prize_bkg1.png) center center no-repeat;
 		background-size: 100vw calc(100vh - 44px);
 		overflow: hidden;
-		
+
 		// 奖品滚动
 		&-prize {
 			display: flex;
@@ -487,32 +505,33 @@
 			background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/prize_bkg2.png) center center no-repeat;
 			background-size: 100vw 28vh;
 			margin-bottom: 82rpx;
-			
+
 			&-list {
 				display: flex;
 				margin-top: 76rpx;
 				height: calc(100% - 76rpx);
-				
+
 				&-item {
 					width: 100vw;
 					height: 100%;
-					
+
 					&__items {
 						align-items: flex-start;
 						justify-content: space-evenly;
 						width: 100vw;
 						height: 100%;
+
 						.content {
 							flex-direction: column;
 							width: 30%;
 							height: 85%;
-							
+
 							image {
 								width: 100%;
 								height: 60%;
 								margin-bottom: 16rpx;
 							}
-							
+
 							&-title {
 								width: 100%;
 								line-height: 34rpx;
@@ -528,20 +547,20 @@
 								text-align: center;
 							}
 						}
-						
+
 						// .content:nth-child(2) {
 						// 	justify-content: flex-start;
 						// 	color: #333;
-							
+
 						// 	image {
 						// 		width: 100%;
 						// 		height: 60%;
 						// 	}
-							
+
 						// 	.content-title {
 						// 		font-weight: bold;
 						// 	}
-							
+
 						// 	.content-price {
 						// 		font-weight: bold;
 						// 	}
@@ -550,21 +569,21 @@
 				}
 			}
 		}
-		
+
 		// 按钮
 		&-btn {
 			height: 160rpx;
 			margin-bottom: 36rpx;
-			
+
 			&-content {
 				position: relative;
 				height: 100%;
-				
+
 				image {
 					width: 486rpx;
 					height: 100%;
 				}
-				
+
 				&-title {
 					position: absolute;
 					top: 30rpx;
@@ -576,23 +595,23 @@
 					opacity: 0.99;
 				}
 			}
-			
+
 			.btn-stop {
 				animation: scaleBtn 0.2s linear;
 			}
-			
+
 			// 放大缩小动画
 			@keyframes scaleBtn {
 				from {
 					transform: scale(0.9);
 				}
-				
+
 				to {
 					transform: scale(1);
 				}
 			}
 		}
-		
+
 		// 倒计时
 		&-time {
 			.num {
@@ -604,7 +623,7 @@
 			}
 		}
 	}
-	
+
 	// 奖品显示
 	.prize {
 		position: relative;
@@ -613,7 +632,7 @@
 		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/hit_bkg.png) center center no-repeat;
 		background-size: 100vw 100vh;
 		overflow: hidden;
-		
+
 		&-navLeft {
 			position: absolute;
 			left: 34rpx;
@@ -622,20 +641,20 @@
 			background-color: rgba(255, 255, 255, .36);
 			border-radius: 50%;
 		}
-		
+
 		&-title {
 			padding-top: 15vh;
 			margin-bottom: 120rpx;
-			
+
 			image {
 				width: 484rpx;
 				height: 108rpx;
 			}
 		}
-		
+
 		&-box {
 			margin-bottom: 34rpx;
-			
+
 			&-popup {
 				position: relative;
 				flex-direction: column;
@@ -643,19 +662,19 @@
 				height: 38vh;
 				background-color: #FFFFFF;
 				border-radius: 22rpx;
-				
+
 				&__image {
 					position: relative;
 					z-index: 10;
 					width: 65%;
 					height: 65%;
-					
+
 					image {
 						width: 100%;
 						height: 100%;
 					}
 				}
-				
+
 				&__rotate {
 					position: absolute;
 					width: 100%;
@@ -663,7 +682,7 @@
 					z-index: 5;
 					animation: rotateBg 3s linear;
 				}
-				
+
 				&__circular {
 					position: absolute;
 					width: 600rpx;
@@ -671,37 +690,37 @@
 					z-index: 5;
 					animation: scaleBg 0.7s linear;
 				}
-				
+
 				// 旋转动画
 				@keyframes rotateBg {
 					from {
 						transform: rotate(0);
 					}
-					
+
 					to {
 						transform: rotate(360deg);
 					}
 				}
-				
+
 				// 放大动画
 				@keyframes scaleBg {
 					from {
 						transform: scale(0.8);
 					}
-					
+
 					to {
 						transform: scale(1.8);
 					}
 				}
 			}
 		}
-		
+
 		&-info {
 			margin-bottom: 40rpx;
-			
+
 			&-content {
 				width: 70vw;
-				
+
 				&-price {
 					text-align: center;
 					font-size: 40rpx;
@@ -710,12 +729,12 @@
 					font-weight: bold;
 					color: #FFFFFF;
 					margin-bottom: 20rpx;
-					
+
 					text {
 						font-size: 28rpx;
 					}
 				}
-				
+
 				&-title {
 					height: 36rpx;
 					overflow: hidden;
@@ -725,6 +744,7 @@
 					color: #FFFFFF;
 					margin-bottom: 50rpx;
 				}
+
 				&-titletwo {
 					height: 36rpx;
 					text-align: center;
@@ -736,17 +756,17 @@
 					overflow: hidden;
 					text-overflow: ellipsis;
 				}
-				
+
 				&-btn {
 					&-content {
 						position: relative;
 						width: 70vw;
-						
+
 						image {
 							width: 70vw;
 							height: 112rpx;
 						}
-						
+
 						&-txt {
 							position: absolute;
 							top: 0;
@@ -760,7 +780,7 @@
 				}
 			}
 		}
-		
+
 		&-tip {
 			.txt {
 				width: 332rpx;
@@ -774,6 +794,6 @@
 				color: #FB930D;
 			}
 		}
-		
+
 	}
-</style>
+</style>