盲票详情样式

pages/index/index.vue

@@ -92,7 +92,10 @@
 						<view class="ticket-btn-left__title">试玩</view>
 					</view>
 					<view class="ticket-btn-center flex">
-						<image src="../../static/index/index_btn.png" mode="scaleToFill"></image>
+						<view class="image-wrap flex">
+							<image class="btn" src="../../static/index/index_btn.png" mode="scaleToFill"></image>
+							<image class="shadow" src="../../static/index/index_btn_shadow.png" mode="scaleToFill"></image>
+						</view>
 						<view class="ticket-btn-center-wrap flex">
 							<view class="ticket-btn-center-wrap__title">刮开<br />盲票</view>
 						</view>
@@ -732,16 +735,36 @@
 			flex-direction: column;
 			height: 100%;
 			
-			image {
-				width: 360rpx;
-				height: 100%;
+			.image-wrap {
+				position: absolute;
+				width: 310rpx;
+				height: 90%;
+				border-radius: 50%;
+				border: 5px solid #FFFED1;
+				overflow: hidden;
+				
+				.btn {
+					width: 310rpx;
+					height: 100%;
+				}
+				
+				.shadow {
+					position: absolute;
+					width: 310rpx;
+					height: 130%;
+					left: 0;
+					animation: shadowMove 1.5s linear infinite;
+				}
 			}
-			
+		
 			&-wrap {
+				width: 300rpx;
 				position: absolute;
 				animation: scaleBtn 1.5s linear infinite;
 				
 				&__title {
+					width: 300rpx;
+					text-align: center;
 					font-size: 84rpx;
 					font-family: YouSheBiaoTiHei;
 					font-weight: 400;
@@ -948,4 +971,15 @@
 			text-shadow: 2px -2px 3px #fff;
 		}
 	}
+	
+	// 刮开盲票光影移动动画
+	@keyframes shadowMove {
+		0% {
+			left: -100%;
+		}
+	
+		100% {
+			left: 110%;
+		}
+	}
 </style>

pages/ticketBox/detail.vue

@@ -1,5 +1,5 @@
 <template>
-	<view>
+	<view class="ticket-wrap">
 		<view v-if="pagesNum > 1">
 			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票详情"></u-navbar>
 		</view>
@@ -14,7 +14,7 @@
 		<!-- 奖品轮播 -->
 		<view class="prize">
 			<!-- 查看规则 -->
-			<view class="prize-rule">
+			<view class="prize-rule" @click="toRule">
 				<view class="prize-rule-content flex">
 					<image src="../../static/index/index_tip.png" mode=""></image>
 					<text>查看规则</text>
@@ -29,26 +29,81 @@
 					</view>
 				</swiper-item>
 			</swiper>
-		</view>
-		
-		<!-- 开启盲票 -->
-		<view class="ticket-btn">
 			
+			<!-- 奖品价格 -->
+			<view class="prize-price flex">
+				<view class="prize-price-present">{{ $numberFormat(2999) }}</view>
+				<view class="prize-price-txt ells-one">微软（Miceosoft)日版Xbox Seies S</view>
+				<view class="prize-price__ticket-price flex">
+					<image src="../../static/ticketBox/ticket_block.png" mode="scaleToFill"></image>
+					<view class="txt">￥{{ 56 }} /个</view>
+				</view>
+				<view class="prize-price-past">原价：￥{{ $numberFormat(4000) }}/个</view>
+			</view>
+			
+			<!-- 开启盲票 -->
+			<view class="ticket-btn flex">
+				<image class="ticket-btn-game" src="../../static/ticketBox/ticket_game.png" mode="scaleToFill"></image>
+				<view class="ticket-btn-center flex" @click="exchange">
+					<image src="../../static/ticketBox/ticket_btn_center.png" mode="scaleToFill"></image>
+					<view class="ticket-btn-center-txt">开启盲票</view>
+				</view>
+				<image class="ticket-btn-share" src="../../static/ticketBox/ticket_share.png" mode="scaleToFill"></image>
+			</view>
 		</view>
 		
 		<!-- 盲票奖品说明 -->
-		<view class="explain">
-			
+		<view class="explain flex">
+			<image class="image-left" src="../../static/ticketBox/ticket_explain_left.png" mode="aspectFit"></image>
+			<view class="explain-title">开票必出以下宝贝之一</view>
+			<image class="image-right" src="../../static/ticketBox/ticket_explain_right.png" mode="aspectFit"></image>
 		</view>
 		
 		<!-- 盲票奖品数量、概率 -->
 		<view class="prize-total">
-			
+			<view class="prize-total-num">共90款</view>
+			<!-- 中奖概率 -->
+			<view class="prize-total-chance flex">
+				<view class="prize-total-chance-content flex">
+					<image src="../../static/index/index_chance_1.png" mode="scaleToFill"></image>
+					<text>0.1%</text>
+				</view>
+				<view class="prize-total-chance-content flex">
+					<image src="../../static/index/index_chance_2.png" mode="scaleToFill"></image>
+					<text>10.0%</text>
+				</view>
+				<view class="prize-total-chance-content flex">
+					<image src="../../static/index/index_chance_3.png" mode="scaleToFill"></image>
+					<text>10.0%</text>
+				</view>
+				<view class="prize-total-chance-content flex">
+					<image src="../../static/index/index_chance_4.png" mode="scaleToFill"></image>
+					<text>10.0%</text>
+				</view>
+			</view>
+			<!-- 文字说明 -->
+			<view class="prize-total-txt">因概率对小数点后三位进行四舍五入处理，故存在总值不为100%的可能。商品抽奖存在概率性，付费请谨慎!未成年人请在家长监督下使用回收率约70%(支付余额不支持提现)全国包邮（偏远地区除外)</view>
 		</view>
 		
 		<!-- 盲票奖品列表 -->
 		<view class="prize-list">
-			
+			<view class="prize-list-item flex" v-for="(item, index) in prizeList" :key="index" @click="toPrizeGoods(item)">
+				<image :src="item.picUrl" mode="aspectFit"></image>
+				<view class="prize-list-item-info flex">
+					<view class="title ells">{{ item.title }}</view>
+					<view class="price" v-if="item.prizeType != 'coin'">￥{{ $numberFormat(item.value) }}</view>
+					<view class="price" v-else>{{ item.value }}颗</view>
+				</view>
+			</view>
+		</view>
+		
+		<view class="footer-fixed" v-if="btnFixed">
+			<view class="footer-fixed-btn flex">
+				<view class="footer-fixed-btn-center flex" @click="exchange">
+					<image src="../../static/ticketBox/ticket_btn_center.png" mode="scaleToFill"></image>
+					<view class="footer-fixed-btn-center-txt">开启盲票</view>
+				</view>
+			</view>
 		</view>
 		
 		<!-- 支付弹层 -->
@@ -76,7 +131,9 @@
 				pagesNum: null,
 				sceneArr: null,
 				
-				prizeIndex: 0
+				prizeIndex: 0,
+				contnetHeight: 0,
+				btnFixed: false,
 			};
 		},
 
@@ -101,7 +158,20 @@
 				uni.setStorageSync('shareType', opthios.type)
 			}
 		},
-
+		
+		mounted() {
+			let _this = this;
+			let info = uni.createSelectorQuery().select(".prize");
+			info.boundingClientRect(function(data) { //data - 各种参数
+				_this.contnetHeight = data.height
+			}).exec()
+		},
+		
+		onPageScroll: function(e) {
+			let _this = this;
+			_this.btnFixed = _this.contnetHeight <= e.scrollTop;
+		},
+		
 		onShow() {
 			this.pagesNum = getCurrentPages().length
 			if (this.boxId) {
@@ -111,7 +181,7 @@
 
 		methods: {
 			changePrizeSwiper({ detail }) {
-				console.log(detail);
+				// console.log(detail);
 				this.prizeIndex = detail.current
 			},
 			
@@ -198,6 +268,13 @@
 					url: '/pages/index/index'
 				})
 			},
+			
+			// 点击规则说明
+			toRule() {
+				uni.navigateTo({
+					url: '/packageOther/rule/index'
+				})
+			},
 
 			toPrizeGoods(item) {
 				if (item.prizeType == "goods") {
@@ -233,6 +310,11 @@
 </script>
 
 <style lang="scss" scoped>
+	.ticket-wrap {
+		background: #FFF3EB;
+		padding-bottom: 100rpx;
+	}
+	
 	.nav-left {
 		&__code {
 			margin-left: 10rpx;
@@ -241,9 +323,10 @@
 	
 	// 奖品轮播
 	.prize {
-		height: 63vh;
-		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/detail_2.png) center center no-repeat;
-		background-size: 100vw 63vh;
+		height: 71vh;
+		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/detail_3.png) center center no-repeat;
+		background-size: 100vw 71vh;
+		margin-bottom: 14rpx;
 		
 		// 查看规则
 		&-rule {
@@ -269,9 +352,8 @@
 			}
 		}
 		
-		// 奖品
+		// 奖品轮播
 		&-swiper {
-			border: 1px solid #fff;
 			height: 33vh;
 			
 			.swiper-item {
@@ -282,6 +364,7 @@
 			.swiper-item-side {
 				width: 60%;
 				height: 60%;
+				margin: 0;
 			}
 			
 			&-item {
@@ -289,14 +372,13 @@
 				
 				.img {
 					position: absolute;
-					border: 1px solid #fff;
-					width: 60vw;
+	
+					width: 58vw;
 					height: 80%;
 					animation: prizeBig .3s;
 				}
 				
 				.img-side {
-					border: 1px solid #fff;
 					width: 60%;
 					height: 60%;
 					animation: prizeMini .3s;
@@ -304,28 +386,234 @@
 				}
 			}
 		}
-	}
-	
-	// 开启盲票
-	.ticket-btn {
-		height: 14vh;
-		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/detail_1.png) center center no-repeat;
-		background-size: 100vw 14vh;
+		
+		// 奖品价格
+		&-price {
+			flex-direction: column;
+			justify-content: space-between;
+			height: 14vh;
+			margin-bottom: 30rpx;
+			
+			&-present {
+				font-size: 26rpx;
+				font-weight: bold;
+			}
+			
+			&-txt {
+				font-size: 30rpx;
+				font-weight: bold;
+			}
+			
+			&__ticket-price {
+				position: relative;
+				height: 66rpx;
+				
+				image {
+					width: 276rpx;
+					height: 66rpx;
+				}
+				
+				.txt {
+					position: absolute;
+					font-size: 40rpx;
+					line-height: 66rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #FFFFFF;
+				}
+			}
+			
+			&-past {
+				font-size: 26rpx;
+				font-weight: bold;
+				text-decoration: line-through;
+				color: #5E3909;
+			}
+		}
+		
+		// 开启盲票
+		.ticket-btn {
+			justify-content: space-between;
+			height: 10vh;
+			padding: 0 34rpx;
+			
+			&-game {
+				width: 110rpx;
+				height: 110rpx;
+			}
+			
+			&-center {
+				position: relative;
+				height: 100%;
+				
+				image {
+					height: 100%;
+					width: 55vw;
+				}
+				
+				&-txt {
+					position: absolute;
+					top: 30rpx;
+					font-size: 72rpx;
+					line-height: 72rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #FFFFFF;
+				}
+			}
+			
+			&-share {
+				width: 110rpx;
+				height: 110rpx;
+			}
+		}
 	}
 	
 	// 盲票奖品说明
 	.explain {
+		width: 100vw;
+		position: relative;
+		height: 40rpx;
+		margin-bottom: 32rpx;
+		
+		.image-left {
+			width: 18vw;
+			height: 40rpx;
+		}
 		
+		.image-right {
+			width: 18vw;
+			height: 40rpx;
+		}
+		
+		&-title {
+			font-size: 46rpx;
+			line-height: 46rpx;
+			font-family: YouSheBiaoTiHei;
+			font-weight: 400;
+			color: #5E3909;
+			padding: 0 8rpx;
+		}
 	}
 	
 	// 盲票奖品数量、概率
 	.prize-total {
+		margin-bottom: 34rpx;
+		
+		&-num {
+			font-size: 26rpx;
+			text-align: center;
+			font-weight: bold;
+			color: #744111;
+			margin-bottom: 24rpx;
+		}
 		
+		&-chance {
+			margin-bottom: 32rpx;
+			
+			&-content {
+				margin-right: 40rpx;
+				
+				image {
+					width: 44rpx;
+					height: 44rpx;
+				}
+				
+				text {
+					font-size: 28rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #622C06;
+				}
+			}
+			
+			&-content:last-child {
+				margin: 0;
+			}
+		}
+		
+		&-txt {
+			padding: 0 100rpx;
+			font-size: 26rpx;
+			font-weight: 500;
+			color: #956B33;
+			line-height: 42rpx;
+			text-align: center;
+		}
 	}
 	
 	// 盲票奖品列表
 	.prize-list {
+		border: 1px solid #FFFFFF;
+		padding: 0 34rpx;
 		
+		&-item {
+			padding: 0 110rpx 0 84rpx;
+			justify-content: flex-start;
+			height: 264rpx;
+			background: #FFFFFF;
+			border-radius: 22rpx;
+			margin-bottom: 26rpx;
+			
+			image {
+				width: 166rpx;
+				height: 166rpx;
+				margin-right: 34rpx;
+			}
+			
+			&-info {
+				height: 166rpx;
+				flex: 1;
+				flex-direction: column;
+				align-items: flex-start;
+				justify-content: space-between;
+				
+				.title {
+					font-size: 30rpx;
+					font-weight: bold;
+					line-height: 42rpx;
+				}
+				
+				.price {
+					font-size: 36rpx;
+					font-weight: bold;
+					color: #FF4208;
+					line-height: 42rpx;
+				}
+			}
+		}
+	}
+	
+	// 滚动固定按钮
+	.footer-fixed {
+		position: fixed;
+		bottom: var(--window-bottom);
+		left: 0;
+		right: 0; 
+		
+		&-btn {
+			height: 10vh;
+			
+			&-center {
+				position: relative;
+				height: 100%;
+				
+				image {
+					height: 100%;
+					width: 55vw;
+				}
+				
+				&-txt {
+					position: absolute;
+					top: 30rpx;
+					font-size: 72rpx;
+					line-height: 72rpx;
+					font-family: YouSheBiaoTiHei;
+					font-weight: 400;
+					color: #FFFFFF;
+				}
+			}
+		}
 	}
 	
 	// 奖品缩小动画