新增首页兑奖点击盲票跳转详情、点击奖品跳转详情

pages/index/index.vue

@@ -20,15 +20,18 @@
 						<text>所有盲票</text>
 					</view>
 				</view>
+				<!-- 弹幕 -->
 				<view class="box-top-news">
 					<prize-news :list="prizeNewsListOne" duration="20" v-if="prizeNewsListOne.length" />
 					<prize-news :list="prizeNewsListTwo" duration="15" v-if="prizeNewsListTwo.length" />
 				</view>
 			</view>
 			<view class="box-ticket">
+				<!-- 盲票 -->
 				<swiper class="image-container" circular :vertical="true" :current="currentIndex" :autoplay="false"
-					@change="swiperChange" v-if="imgList.length">
-					<swiper-item class="swiper-item" v-for="(item, index) in imgList" :key="item.picUrl">
+					@change="changeTicket" v-if="ticketList.length">
+					<swiper-item class="swiper-item" v-for="(item, index) in ticketList" :key="item.picUrl"
+						@click="toTicketBox">
 						<view class="flex image-wrap">
 							<image class="img" :src="item.picUrl" lazy-load mode=""></image>
 						</view>
@@ -41,22 +44,27 @@
 						</view>
 					</swiper-item>
 				</swiper>
-
+				<!-- 奖品 -->
 				<swiper class="prize-container" previous-margin="270rpx" next-margin="270rpx" circular :duration="15000"
 					:interval="1500" easing-function="easeOutCubic" :current="currentPrizeIndex" :disable-touch="true"
 					:autoplay="true">
-					<swiper-item class="swiper-item" v-for="(item, index) in prizeList" :key="index">
+					<swiper-item class="swiper-item" v-for="(item, index) in prizeList" :key="index"
+						@click="toPrizeGoods(item)">
 						<view class="flex image-wrap">
 							<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
 						</view>
 					</swiper-item>
 				</swiper>
-				<image class="box-img" src="../../static/icon/index_box.png" mode=""></image>
+				<!-- 盲票背景 -->
+				<image class="box-img" src="../../static/icon/index_box.png" mode="" @click="toTicketBox"></image>
+				<!-- 向左箭头 -->
 				<image class="index-left" src="../../static/icon/index_left.png" mode="" @click="ticketLeft"></image>
+				<!-- 向右箭头 -->
 				<image class="index-right" src="../../static/icon/index_right.png" mode="" @click="ticketRight"></image>
 			</view>
+			<!-- 立即开刮 -->
 			<view class="flex box-ticket-btn">
-				<view class="box-ticket-btn-content" @click="exchange">
+				<view class="box-ticket-btn-content" @click="payment">
 					<image src="../../static/icon/index_btn.png" mode=""></image>
 					<view class="flex title">
 						<text>{{ payInfo.salePrice / 100 }}元立即开刮</text>
@@ -64,8 +72,9 @@
 				</view>
 			</view>
 		</view>
+		<!-- tabbar组件 -->
 		<custom-tab-bar :activeValue="'index'" />
-
+		<!-- 支付弹框组件 -->
 		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" />
 	</view>
 </template>
@@ -86,25 +95,23 @@
 		},
 		data() {
 			return {
-				imgList: [],
-				value: 1,
-				payShow: false,
-				checked: false,
-
-				pageNum: 1,
-				total: 100,
-				list: [],
-
-				currentIndex: 0,
-				currentPrizeIndex: 2,
-
-				payInfo: {},
-				prizeList: [],
-				prizeNewsListOne: [],
-				prizeNewsListTwo: [],
+				loginState: false, // 登录状态
+				ticketList: [], // 盲票列表
+				prizeList: [], // 奖品列表
+				prizeNewsListOne: [], // 弹幕列表
+				prizeNewsListTwo: [], // 弹幕列表
+				payShow: false, // 支付弹框显示
+				payInfo: {}, // 支付详情
+				currentIndex: 0, // 盲票选中下标
+				currentPrizeIndex: 0, // 奖品选中下标
 			};
 		},
 		onLoad(opthios) {
+			/**
+			 * 票赢天下小程序分享盲票跳转接受的参数
+			 * shareUid: 用户ID
+			 * shareType: 分享类型
+			 * */
 			if (opthios.scene) {
 				let sceneStr = decodeURIComponent(opthios.scene)
 				this.sceneArr = sceneStr.split('&')
@@ -118,70 +125,7 @@
 			this.getPrizeNews()
 		},
 		methods: {
-			swiperChange(e) {
-				this.dontFirstAnimation = false
-				this.currentIndex = e.detail.current
-				this.getPrize(this.imgList[this.currentIndex].boxId)
-			},
-
-			prizeChange(e) {
-				let ticketNum = this.imgList.length - 1
-				let num = this.prizeList.length - 1
-				let index = this.currentPrizeIndex = e.detail.current
-
-				let acIndex = this.currentIndex
-				if (num == index) {
-					acIndex++
-					if (acIndex < ticketNum) {
-						this.currentIndex++
-					} else if (acIndex == ticketNum) {
-						this.currentIndex = ticketNum
-					} else {
-						this.currentIndex = 0
-					}
-					this.currentPrizeIndex = 2
-					this.getPrize(this.imgList[this.currentIndex].boxId)
-				}
-			},
-			
-			getPrizeNews() {
-				$http.post('/api/v1/mp/user/ticket/hitPrizeBarrage', { noToken: true }).then(res => {
-					const { listOne, listTwo } = res && res.data
-					listOne.forEach(item => {
-						item.avatar = env.filePublic + item.avatar
-						item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo.substring(0, 15) + '...' : item.prizeInfo
-					})
-					
-					listTwo.forEach(item => {
-						item.avatar = env.filePublic + item.avatar
-						item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo.substring(0, 15) + '...' : item.prizeInfo
-					})
-					this.prizeNewsListOne = listOne
-					this.prizeNewsListTwo = listTwo
-				})
-			},
-
-			clickImg(item) {
-				console.log(item);
-			},
-
-			ticketLeft() {
-				if ((this.currentIndex >= 0) && (this.currentIndex < (this.imgList.length - 1))) {
-					this.currentIndex++
-				} else if (this.currentIndex == (this.imgList.length - 1)) {
-					this.currentIndex = 0
-				}
-			},
-
-			ticketRight() {
-				if (this.currentIndex > 0) {
-					this.currentIndex--
-				} else if (this.currentIndex == 0) {
-					this.currentIndex = this.imgList.length - 1
-				}
-			},
-
-
+			// 获取盲票列表
 			getList() {
 				uni.showLoading({
 					title: '加载中'
@@ -197,18 +141,44 @@
 						uni.hideLoading();
 						if (res.code == 0) {
 							res.rows.forEach(item => item.picUrl = env.filePublic + item.picUrl.split(',')[0])
-							this.total = res.total
-							this.imgList = res.rows
-							this.getPrize(this.imgList[0].boxId)
+							this.ticketList = res.rows
+							this.getPrize(this.ticketList[0].boxId)
 						}
 					}).catch(() => {
 					uni.hideLoading();
 				})
 			},
 
+			// 获取弹幕列表
+			getPrizeNews() {
+				$http.post('/api/v1/mp/user/ticket/hitPrizeBarrage', {
+					noToken: true
+				}).then(res => {
+					const {
+						listOne,
+						listTwo
+					} = res && res.data
+					listOne.forEach(item => {
+						item.avatar = item.avatar ? env.filePublic + item.avatar : env.filePublic +
+							'70/EJ305PQR2IBE45O9AFAI'
+						item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo
+							.substring(0, 15) + '...' : item.prizeInfo
+					})
+
+					listTwo.forEach(item => {
+						item.avatar = item.avatar ? env.filePublic + item.avatar : env.filePublic +
+							'70/EJ305PQR2IBE45O9AFAI'
+						item.prizeInfo = item.prizeInfo && (item.prizeInfo.length > 14) ? item.prizeInfo
+							.substring(0, 15) + '...' : item.prizeInfo
+					})
+					this.prizeNewsListOne = listOne
+					this.prizeNewsListTwo = listTwo
+				})
+			},
+
+			// 获取当前盲票的奖品列表
 			getPrize(id) {
 				this.prizeList = []
-
 				$http.post('/api/v1/mp/user/mall/ticket/detail', {
 					boxId: id,
 					noToken: true
@@ -222,36 +192,16 @@
 						})
 						this.prizeList = prizeList
 						this.currentPrizeIndex = 2
-						this.payInfo = this.imgList[this.currentIndex]
+						this.payInfo = this.ticketList[this.currentIndex]
 					}
 				}).catch(() => {
 					uni.hideLoading();
 				})
 			},
 
-			selectedBanner(item, index) {
-				uni.navigateTo({
-					url: `/pages/ticketBox/detail?boxId=${ item.boxId }`
-				})
-			},
-
-			getTicket(index) {
-				this.currentIndex = index
-			},
-
-			close() {
-				this.payShow = false
-			},
-
-			toProcess(id) {
-				this.payShow = false
-				uni.navigateTo({
-					url: `/pages/process/index?id=${ id }`
-				})
-			},
-
-			exchange() {
-				this.payInfo = this.imgList[this.currentIndex]
+			// 立即开刮
+			payment() {
+				this.payInfo = this.ticketList[this.currentIndex]
 				let data = {
 					couponIds: [],
 					autoCoupon: 1,
@@ -272,12 +222,69 @@
 				})
 			},
 
+			// 关闭支付弹框
+			close() {
+				this.payShow = false
+			},
+
+			// 盲票选中改变
+			changeTicket(e) {
+				this.dontFirstAnimation = false
+				this.currentIndex = e.detail.current
+				this.getPrize(this.ticketList[this.currentIndex].boxId)
+			},
+
+			// 盲票向左箭头
+			ticketLeft() {
+				if ((this.currentIndex >= 0) && (this.currentIndex < (this.ticketList.length - 1))) {
+					this.currentIndex++
+				} else if (this.currentIndex == (this.ticketList.length - 1)) {
+					this.currentIndex = 0
+				}
+			},
+
+			// 盲票向右箭头
+			ticketRight() {
+				if (this.currentIndex > 0) {
+					this.currentIndex--
+				} else if (this.currentIndex == 0) {
+					this.currentIndex = this.ticketList.length - 1
+				}
+			},
+
+			// 线上立即刮票成功，跳转到刮奖过程
+			toProcess(id) {
+				this.payShow = false
+				uni.navigateTo({
+					url: `/pages/process/index?id=${ id }`
+				})
+			},
+
+			// 点击盲票，跳转盲票详情
+			toTicketBox() {
+				let item = this.ticketList[this.currentIndex]
+				uni.navigateTo({
+					url: `/pages/ticketBox/detail?boxId=${ item.boxId }`
+				})
+			},
+
+			// 点击奖品，跳转到奖品详情
+			toPrizeGoods(item) {
+				if (item.prizeType == "goods") {
+					uni.navigateTo({
+						url: `/pages/prizeGoods/detail?id=${ item.refId }`
+					})
+				}
+			},
+
+			// 点击所有盲票
 			toTicket() {
 				uni.navigateTo({
 					url: '/pages/ticketBox/index'
 				})
 			},
 
+			// 点击奖品库
 			toPrize() {
 				if (!this.loginState) {
 					uni.navigateTo({
@@ -290,6 +297,7 @@
 				})
 			},
 
+			// 点击规则说明
 			toRule() {
 				uni.navigateTo({
 					url: '/pages/about/rule'
@@ -311,58 +319,6 @@
 </style>
 
 <style lang="scss" scoped>
-	.image-container {
-		width: 750rpx;
-		height: 40vh;
-
-		.swiper-item {
-			position: relative;
-			width: 61vw;
-			height: 40vh;
-			display: flex;
-			justify-content: center;
-			align-items: center;
-		}
-
-		.image-wrap {
-			position: relative;
-			width: 61vw;
-			height: 40vh;
-
-			.img {
-				width: 61vw;
-				height: 40vh;
-			}
-		}
-	}
-
-	.prize-container {
-		width: 750rpx;
-		height: 13vh;
-		margin-top: 2vh;
-
-		.swiper-item {
-			width: 100rpx;
-			height: 13vh;
-			display: flex;
-			justify-content: flex-start;
-			align-items: center;
-
-			.image-wrap {
-				width: 160rpx;
-				height: 13vh;
-				border-radius: 20rpx;
-				background: linear-gradient(0deg, #BBBBBB, #FFFFFF);
-
-				.img {
-					width: 100%;
-					height: 76%;
-				}
-			}
-		}
-
-	}
-
 	.box {
 		width: 100%;
 		height: calc(100vh - 50px);
@@ -422,7 +378,7 @@
 					background-color: #FFFFCC;
 				}
 			}
-			
+
 			&-news {
 				position: absolute;
 				left: 0;
@@ -436,6 +392,58 @@
 			position: relative;
 			margin: 40rpx 0 0;
 
+			.image-container {
+				width: 750rpx;
+				height: 40vh;
+
+				.swiper-item {
+					position: relative;
+					width: 61vw;
+					height: 40vh;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+				}
+
+				.image-wrap {
+					position: relative;
+					width: 61vw;
+					height: 40vh;
+
+					.img {
+						width: 61vw;
+						height: 40vh;
+					}
+				}
+			}
+
+			.prize-container {
+				width: 750rpx;
+				height: 13vh;
+				margin-top: 2vh;
+
+				.swiper-item {
+					width: 100rpx;
+					height: 13vh;
+					display: flex;
+					justify-content: flex-start;
+					align-items: center;
+
+					.image-wrap {
+						width: 160rpx;
+						height: 13vh;
+						border-radius: 20rpx;
+						background: linear-gradient(0deg, #BBBBBB, #FFFFFF);
+
+						.img {
+							width: 100%;
+							height: 76%;
+						}
+					}
+				}
+
+			}
+
 			.index-left {
 				position: absolute;
 				width: 100rpx;