开启盲票中奖显示

packagePrize/rolling/index.vue

@@ -1,7 +1,7 @@
 <template>
 	<view>
-		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启"></u-navbar>
-		<view class="rolling">
+		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启" v-if="rollingShow"></u-navbar>
+		<view class="rolling" v-if="rollingShow">
 			<!-- 奖品滚动 -->
 			<view class="rolling-prize">
 				<view ref="rolling" class="rolling-prize-list" :animation="animationData">
@@ -9,7 +9,7 @@
 						<view class="rolling-prize-list-item__items flex">
 							<view class="content flex" v-for="(items, indexs) in item" :key="indexs">
 								<image :src="items.url" mode="aspectFit"></image>
-								<view class="content-title ells">{{ items.title }}</view>
+								<view class="content-title ells-one">{{ items.title }}</view>
 								<view class="content-price">￥{{ $numberFormat(items.price) }}</view>
 							</view>
 						</view>
@@ -20,7 +20,7 @@
 						<view class="rolling-prize-list-item__items flex">
 							<view class="content flex" v-for="(items, indexs) in item" :key="indexs">
 								<image :src="items.url" mode="aspectFit"></image>
-								<view class="content-title ells">{{ items.title }}</view>
+								<view class="content-title ells-one">{{ items.title }}</view>
 								<view class="content-price">￥{{ $numberFormat(items.price) }}</view>
 							</view>
 						</view>
@@ -41,6 +41,35 @@
 				<view class="num">{{ num }}</view>
 			</view>
 		</view>
+		<!-- 奖品显示 -->
+		<view class="prize" v-else>
+			<view class="prize-navLeft flex" :style="{ top: statusHeight + 'px' }" @click="back">
+				<u-icon size="19" color="#fff" name="arrow-left"></u-icon>
+			</view>
+			<view class="prize-title flex">
+				<image src="../../packagePrize/static/rolling_title.png" mode="scaleToFill"></image>
+			</view>
+			<view class="prize-box flex">
+				<view class="prize-box-popup flex">
+					<view class="prize-box-popup__image flex">
+						<image :src="prizeInfo.url" mode="aspectFit"></image>
+					</view>
+					<view class="prize-box-popup__tip">哇，去瞅瞅我的宝贝</view>
+				</view>
+			</view>
+			<view class="prize-info flex">
+				<view class="prize-info-content">
+					<view class="prize-info-content-price"><text>¥</text>{{ $numberFormat(prizeInfo.price) }}</view>
+					<view class="prize-info-content-title">{{ prizeInfo.title }}</view>
+				</view>
+			</view>
+			<view class="prize-btn flex">
+				<view class="prize-btn-content flex">
+					<image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
+					<view class="prize-btn-content-txt">再来一张</view>
+				</view>
+			</view>
+		</view>
 	</view>
 </template>
 
@@ -138,13 +167,24 @@
 					],
 				],
 				
+				prizeInfo: { 
+					url: 'https://cdn.uviewui.com/uview/album/4.jpg', 
+					title: '中奖了！！！', 
+					price: 9999 ,
+				},
 				btnIng: false,
+				rollingShow: true,
+				statusHeight: 30,
 			}
 		},
 		
 		onLoad() {
 			// 创建动画实例
 			this.animation = uni.createAnimation()
+			// #ifdef MP-WEIXIN
+			const res = uni.getMenuButtonBoundingClientRect()
+			this.statusHeight = res.top //胶囊距离顶部
+			// #endif
 		},
 		
 		onUnload() {
@@ -242,32 +282,27 @@
 				clearTimeout(this.stopTime)
 				this.animationData = {}
 				if (this.num2 == 0) {
-					this.list[3][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					this.list[3][1] = this.prizeInfo
 				} else if (this.num2 == 1) {
-					this.list[5][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					this.list[5][1] = this.prizeInfo
 				} else if (this.num2 == 2) {
-					this.list[7][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					this.list[7][1] = this.prizeInfo
 				} else if (this.num2 == 3) {
-					this.list[9][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					this.list[9][1] = this.prizeInfo
 				} else if (this.num2 == 4) {
-					this.list[11][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					this.list[11][1] = this.prizeInfo
 				} else if (this.num2 == 5) {
-					this.list[13][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					this.list[13][1] = this.prizeInfo
 				} else if (this.num2 == 6) {
-					this.list[15][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					this.list[15][1] = this.prizeInfo
 				} else if (this.num2 == 7) {
-					// this.list[1][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
-					this.$set(this.list[1][1], 'url', 'https://cdn.uviewui.com/uview/album/4.jpg')
-					console.log(this.list[1][1]);
+					this.list[1][1] = this.prizeInfo
 				} else if (this.num2 == 8) {
 					// #ifdef MP-WEIXIN
-					// this.list[1][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
-					this.$set(this.list[1][1], 'url', 'https://cdn.uviewui.com/uview/album/4.jpg')
+					this.list[1][1] = this.prizeInfo
 					// #endif
 					// #ifdef H5
-					this.$set(this.list[3][1], 'url', 'https://cdn.uviewui.com/uview/album/4.jpg')
-					console.log(this.list[3][1]);
-					// this.list[3][1].url = 'https://cdn.uviewui.com/uview/album/4.jpg'
+					this.list[3][1] = this.prizeInfo
 					// #endif
 				}
 				// #ifdef H5
@@ -282,6 +317,10 @@
 					timingFunction: 'ease'
 				})
 				this.animationData = this.animation.export()
+				
+				setTimeout(() => {
+					this.rollingShow = false
+				},4500)
 				// #endif
 			
 				// #ifdef MP-WEIXIN
@@ -293,8 +332,18 @@
 					})
 					this.animationData = this.animation.export()
 				}).exec();
+				
+				setTimeout(() => {
+					this.rollingShow = false
+				},4500)
 				// #endif
-			}
+			},
+			
+			back() {
+				uni.navigateBack({
+					delta: 1
+				})
+			},
 		},
 	}
 </script>
@@ -432,4 +481,118 @@
 			}
 		}
 	}
+	
+	// 奖品显示
+	.prize {
+		position: relative;
+		width: 100%;
+		height: 100vh;
+		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;
+			width: 66rpx;
+			height: 66rpx;
+			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 {
+				flex-direction: column;
+				width: 75vw;
+				height: 38vh;
+				background-color: #FFFFFF;
+				border-radius: 22rpx;
+				
+				&__image {
+					width: 65%;
+					height: 65%;
+					margin-bottom: 30rpx;
+					
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+				
+				&__tip {
+					padding: 4rpx 0;
+					width: 75%;
+					text-align: center;
+					background: rgba(255, 211, 157, .44);
+					border-radius: 24rpx;
+					font-size: 30rpx;
+					font-weight: 500;
+					color: #FB900B;
+				}
+			}
+		}
+		
+		&-info {
+			margin-bottom: 34rpx;
+			
+			&-content {
+				width: 70vw;
+				
+				&-price {
+					text-align: center;
+					font-size: 40rpx;
+					line-height: 40rpx;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #FFFFFF;
+					margin-bottom: 20rpx;
+					
+					text {
+						font-size: 28rpx;
+					}
+				}
+				
+				&-title {
+					text-align: center;
+					font-size: 36rpx;
+					line-height: 36rpx;
+					color: #FFFFFF;
+				}
+			}
+		}
+		
+		&-btn {
+			&-content {
+				position: relative;
+				width: 70vw;
+				
+				image {
+					width: 70vw;
+					height: 112rpx;
+				}
+				
+				&-txt {
+					position: absolute;
+					top: 0;
+					height: 112rpx;
+					line-height: 112rpx;
+					font-size: 30rpx;
+					text-align: center;
+					color: #FFFFFF;
+				}
+			}
+		}
+	}
 </style>

pages.json

@@ -82,7 +82,10 @@
 					"path": "ticket/index"
 				},
 				{
-					"path": "rolling/index"
+					"path": "rolling/index",
+					"style": {
+						"navigationBarTextStyle": "white"
+					}
 				}
 			]
 		},