盲票详情页奖品轮播效果

pages/index/index.vue

@@ -481,7 +481,7 @@
 		position: relative;
 		width: 100%;
 		height: calc(100vh - 50px);
-		background: url(https://mp-public-test-1307117429.cos.ap-shanghai.myqcloud.com/front_bk.png) center center no-repeat;
+		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/front_bk.png) center center no-repeat;
 		background-size: 100vw calc(100vh - 50px);
 		
 		.index {

pages/ticketBox/detail.vue

@@ -11,61 +11,47 @@
 				</view>
 			</u-navbar>
 		</view>
-
-		<view class="detail">
-			<view class="detail-top">
-				<u-swiper :list="picUrlArr" height="375" imgMode="aspectFit" bgColor="#fff" radius="0" :indicator="true"
-					:circular="true"></u-swiper>
-			</view>
-			<view class="flex detail-info">
-				<view class="detail-info__left">
-					<text class="title">{{ info.title }}</text>
-					<view class="flex num">
-						<u-icon name="gift" size="25" color="#EB7009"></u-icon>
-						<text>100%抽中，奖品多多</text>
-					</view>
-					<view class="tip">图片仅供参考，请以实物为准</view>
-				</view>
-				<view class="detail-info__right">
-					<text class="money">￥{{ $numberFormat(info.salePrice) }}</text>
-					<text>销量 {{ info.saleQty }}</text>
+		<!-- 奖品轮播 -->
+		<view class="prize">
+			<!-- 查看规则 -->
+			<view class="prize-rule">
+				<view class="prize-rule-content flex">
+					<image src="../../static/index/index_tip.png" mode=""></image>
+					<text>查看规则</text>
 				</view>
 			</view>
-			<view class="detail-goods">
-				<view class="detail-goods-title">可获得奖品</view>
-				<view class="detail-goods-list">
-					<!-- <navigator :url="`/packagePrize/goods/detail?id=${ item.prizeId }`" class="detail-goods-list-item"
-						hover-class="navigator-hover" v-for="(item, index) in prizeList" :key="index"> -->
-					<view class="detail-goods-list-item" v-for="(item, index) in prizeList" :key="index"
-						@click="toPrizeGoods(item)">
-						<view class="detail-goods-list-item__value">
-							<view class="flex image-wrap">
-								<image :src="item.picUrl" mode="scaleToFill"></image>
-							</view>
-							<view class="info">
-								<text class="title">{{ item.title }}</text>
-								<text class="num"
-									v-if="item.prizeType != 'coin'">价值：￥{{ $numberFormat(item.value) }}</text>
-								<text class="num" v-else>数量：{{ item.value }}颗</text>
-								<text class="num">概率：{{ item.hitRate }}%</text>
-							</view>
-							<view class="name">{{ item.name }}</view>
-						</view>
+			
+			<!-- 奖品 -->
+			<swiper class="prize-swiper" previous-margin="100px" next-margin="100px" :interval="4000" :autoplay="true" :circular="true" @change="changePrizeSwiper">
+				<swiper-item :class="prizeIndex == index ? 'swiper-item' : 'swiper-item-side'" v-for="(item, index) in prizeList" :key="index">
+					<view class="prize-swiper-item flex">
+						<image :class="prizeIndex == index ? 'img' : 'img-side'" :src="item.picUrl" mode="aspectFit"></image>
 					</view>
-					<!-- </navigator> -->
-				</view>
-			</view>
+				</swiper-item>
+			</swiper>
 		</view>
-		<view class="footer-fixed">
-			<view class="flex btn">
-				<button type="default" @click="exchange">{{ info.salePrice / 100 }}元 立即开刮</button>
-				<view class="share " @click="toShare">
-					<u-icon name="share-square" color="#E96737" size="30"></u-icon>
-					<view style="color: #E96737;text-align: center;">分享</view>
-				</view>
-			</view>
+		
+		<!-- 开启盲票 -->
+		<view class="ticket-btn">
+			
 		</view>
-
+		
+		<!-- 盲票奖品说明 -->
+		<view class="explain">
+			
+		</view>
+		
+		<!-- 盲票奖品数量、概率 -->
+		<view class="prize-total">
+			
+		</view>
+		
+		<!-- 盲票奖品列表 -->
+		<view class="prize-list">
+			
+		</view>
+		
+		<!-- 支付弹层 -->
 		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" />
 	</view>
 </template>
@@ -88,7 +74,9 @@
 				payShow: false,
 				payInfo: {},
 				pagesNum: null,
-				sceneArr: null
+				sceneArr: null,
+				
+				prizeIndex: 0
 			};
 		},
 
@@ -122,6 +110,11 @@
 		},
 
 		methods: {
+			changePrizeSwiper({ detail }) {
+				console.log(detail);
+				this.prizeIndex = detail.current
+			},
+			
 			getDetail() {
 				uni.showLoading({
 					title: '加载中'
@@ -245,186 +238,119 @@
 			margin-left: 10rpx;
 		}
 	}
-
-	.detail {
-		padding-bottom: 100rpx;
-
-		&-top {
-			margin-bottom: 20rpx;
-		}
-
-		&-info {
-			justify-content: space-between;
-			box-sizing: border-box;
-			padding: 24rpx 16rpx;
-			background-color: #fff;
-			margin: 10rpx 10rpx 20rpx;
-			border-radius: 10rpx;
-
-			&__left {
-				display: flex;
-				flex-direction: column;
-				justify-content: space-between;
-
-				text {
-					line-height: 24rpx;
-					display: inline-block;
+	
+	// 奖品轮播
+	.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;
+		
+		// 查看规则
+		&-rule {
+			display: flex;
+			align-items: center;
+			height: 34rpx;
+			padding: 44rpx 0 0 34rpx;
+			margin-bottom: 60rpx;
+			
+			&-content {
+				image {
+					width: 34rpx;
+					height: 34rpx;
+					margin-right: 14rpx;
 				}
-
-				.title {
-					color: rgba(16, 16, 16, 100);
-					font-size: 32rpx;
-					line-height: 32rpx;
-					font-weight: bold;
-				}
-
-				.num {
-					color: $uni-text-color;
-					font-size: 28rpx;
-					justify-content: flex-start;
-					margin: 20rpx 0;
-				}
-
-				.tip {
-					font-size: 24rpx;
-				}
-			}
-
-			&__right {
-				display: flex;
-				flex-direction: column;
-				align-items: flex-end;
-				justify-content: space-between;
-				height: 162rpx;
-
+				
 				text {
-					color: rgba(157, 157, 157, 100);
-					font-size: 14px;
-				}
-
-				.money {
 					font-size: 40rpx;
-					font-weight: bold;
-					line-height: 40rpx;
-					font-weight: bold;
-					color: $uni-text-color;
-					margin-bottom: 40rpx;
+					font-family: 'YouSheBiaoTiHei';
+					font-weight: 400;
+					color: #FFFFFF;
 				}
 			}
 		}
-
-		&-sku {
-			background-color: #fff;
-			border-radius: 10rpx;
-			margin: 10rpx 10rpx 20rpx;
-
-			&-title {
-				padding: 24rpx 16rpx 12rpx;
+		
+		// 奖品
+		&-swiper {
+			border: 1px solid #fff;
+			height: 33vh;
+			
+			.swiper-item {
+				width: 60vw;
+				height: 80%;
 			}
-
-			&-item {
-				padding-bottom: 10rpx;
-
-				view {
-					padding-left: 50rpx;
-					line-height: 50rpx;
-				}
-			}
-		}
-
-		&-goods {
-			margin: 10rpx 10rpx 20rpx;
-
-			&-title {
-				margin-bottom: 20rpx;
+			
+			.swiper-item-side {
+				width: 60%;
+				height: 60%;
 			}
-
-			&-list {
-				padding-bottom: 100rpx;
-
-				&-item {
-					position: relative;
-					background-color: #FFFFFF;
-					margin-bottom: 30rpx;
-					border-radius: 10rpx;
-					padding: 30rpx 20rpx;
-
-					&__value {
-						display: flex;
-					}
-
-					image {
-						width: 200rpx;
-						height: 200rpx;
-					}
-
-					.name {
-						position: absolute;
-						left: 0rpx;
-						top: 0rpx;
-						line-height: 28rpx;
-						padding: 10rpx 40rpx;
-						color: #FFFFFF;
-						border-top-left-radius: 10rpx;
-						border-bottom-right-radius: 40rpx;
-						background-color: $uni-bg-color;
-					}
-
-					.info {
-						display: flex;
-						flex-direction: column;
-						justify-content: space-between;
-						font-size: 30rpx;
-						padding-left: 50rpx;
-
-						.title {
-							font-weight: bold;
-						}
-
-						.num {
-							color: #848484;
-						}
-					}
+			
+			&-item {
+				height: 100%;
+				
+				.img {
+					position: absolute;
+					border: 1px solid #fff;
+					width: 60vw;
+					height: 80%;
+					animation: prizeBig .3s;
 				}
-
-				&-item:last-child {
-					border: none;
+				
+				.img-side {
+					border: 1px solid #fff;
+					width: 60%;
+					height: 60%;
+					animation: prizeMini .3s;
+					opacity: .5;
 				}
 			}
 		}
 	}
-
-	.footer-fixed {
-		position: fixed;
-		bottom: var(--window-bottom);
-		left: 0;
-		right: 0;
-		z-index: 11;
-		box-shadow: 0 -4rpx 40rpx 0 rgba(151, 151, 151, 0.24);
-		background: #fff;
-		// 设置ios刘海屏底部横线安全区域
-		padding-bottom: constant(safe-area-inset-bottom);
-		padding-bottom: env(safe-area-inset-bottom);
-
-		.btn {
-			position: relative;
-			padding: 20rpx 20rpx;
-
-			/deep/ button {
-				width: 440rpx;
-				height: 90rpx;
-				line-height: 90rpx;
-				font-size: 36rpx;
-				color: #fff;
-				background-color: $uni-bg-color;
-				border: none;
-				border-radius: 20rpx;
-			}
-
-			.share {
-				position: absolute;
-				left: 40rpx;
-			}
+	
+	// 开启盲票
+	.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;
+	}
+	
+	// 盲票奖品说明
+	.explain {
+		
+	}
+	
+	// 盲票奖品数量、概率
+	.prize-total {
+		
+	}
+	
+	// 盲票奖品列表
+	.prize-list {
+		
+	}
+	
+	// 奖品缩小动画
+	@keyframes prizeMini
+	{
+		from {
+			width: 60vw;
+			height: 80%;
+		}
+		to {
+			width: 50%;
+			height: 60%;
+		}
+	}
+	
+	// 奖品放大动画
+	@keyframes prizeBig
+	{
+		from {
+			width: 50%;
+			height: 60%;
+		}
+		to {
+			width: 60vw;
+			height: 80%;
 		}
 	}
 </style>