mp-ui-user/pages/index/index.vue

<template>
	<view>
		<!-- 非H5撑高元素 -->
		<!-- <view class="status_bar"></view> -->
		<view class="box">
			<view class="box-top">
				<view class="box-top-action">
					<view class="box-top-action-item" @click="toPrize">
						<view class="flex box-top-action-item-cir">
							<image src="../../static/icon/index_prize.png" mode=""></image>
						</view>
						<view class="box-top-action-item-txt">奖品库</view>
					</view>
				</view>
				<view class="box-top-tip">
					<view class="flex box-top-tip-txt" @click="toRule">
						<text>规则说明</text>
					</view>
					<view class="flex box-top-tip-txt" @click="toTicket">
						<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="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>
					</swiper-item>
				</swiper>
				<swiper class="image-container" circular :vertical="true" :autoplay="false" v-else>
					<swiper-item class="swiper-item">
						<view class="flex image-wrap">
							<image class="img" src="../../static/icon/ticket_index.png" lazy-load mode=""></image>
						</view>
					</swiper-item>
				</swiper>
				<!-- 奖品 -->
				<view class="prize-goods">
					<view class="prize-goods-item" :style="{ animation: activeAnimation }">
						<view class="flex image-wrap" v-for="(item, index) in prizeList" :key="index" @click="toPrizeGoods(item)">
							<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
						</view>
					</view>
					<view class="prize-goods-item" :style="{ animation: activeAnimation }">
						<view class="flex image-wrap" v-for="(item, index) in prizeList" :key="index" @click="toPrizeGoods(item)">
							<image class="img" :src="item.picUrl" lazy-load mode="aspectFill"></image>
						</view>
					</view>
				</view>
				<!-- 盲票背景 -->
				<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="payment">
					<image src="../../static/icon/index_btn.png" mode=""></image>
					<view class="flex title">
						<text>{{ payInfo.salePrice / 100 }}元立即开刮</text>
					</view>
				</view>
			</view>
		</view>
		<!-- tabbar组件 -->
		<custom-tab-bar :activeValue="'index'" />
		<!-- 支付弹框组件 -->
		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="toProcess" v-if="payShow" />
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import CustomTabBar from '../../components/custom-tab-bar/custom-tab-bar.vue'
	import Carousel from '../../components/vear-carousel/vear-carousel'
	import PayPopup from '../../components/pay-popup/pay-popup.vue'
	import PrizeNews from '../../components/prize-news/prize-news.vue'
	export default {
		components: {
			CustomTabBar,
			Carousel,
			PayPopup,
			PrizeNews,
		},
		data() {
			return {
				loginState: false, // 登录状态
				ticketList: [], // 盲票列表
				prizeList: [], // 奖品列表
				prizeNewsListOne: [], // 弹幕列表
				prizeNewsListTwo: [], // 弹幕列表
				payShow: false, // 支付弹框显示
				payInfo: {}, // 支付详情
				currentIndex: 0, // 盲票选中下标
				activeAnimation: 'moveLeft 10s linear infinite normal', // 奖品动画
			};
		},
		onLoad(opthios) {
			/**
			 * 票赢天下小程序分享盲票跳转接受的参数
			 * shareUid: 用户ID
			 * shareType: 分享类型
			 * */
			if (opthios.scene) {
				let sceneStr = decodeURIComponent(opthios.scene)
				this.sceneArr = sceneStr.split('&')
				uni.setStorageSync('shareUid', this.sceneArr[0])
				uni.setStorageSync('shareType', this.sceneArr[1])
			}
			this.getList()
		},
		onShow(opthios) {
			this.loginState = uni.getStorageSync('token') ? true : false
			this.getPrizeNews()

		},
		methods: {
			// 获取盲票列表
			getList() {
				uni.showLoading({
					title: '加载中'
				});
				let data = {
					categoryId: '',
					tagId: '',
					type: 'online',
					noToken: true
				}
				$http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
					res => {
						uni.hideLoading();
						if (res.code == 0) {
							res.rows.forEach(item => item.picUrl = env.filePublic + item.picUrl.split(',')[0] +
								'?imageView2/2/w/375')
							this.ticketList = res.rows
							this.getPrize(this.ticketList[0].boxId)
						}
					}).catch(() => {
					uni.hideLoading();
				})
			},

			// 获取弹幕列表
			getPrizeNews() {
				$http.post('/api/v1/mp/user/ticket/hitPrizeBarrage', {}).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
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						let prizeList = res.data.prizeList
						prizeList.forEach(item => {
							let picUrlArr = item.picUrl.split(',')
							item.picUrl = env.filePublic + picUrlArr[0] + '?imageView2/2/w/170'
						})
						this.prizeList = prizeList
						// 根据奖品数量动态设置动画时间
						let time = Math.ceil(this.prizeList.length / 5 * 10)
						this.activeAnimation = `moveLeft ${ time }s linear infinite normal`,
						this.payInfo = this.ticketList[this.currentIndex]
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			// 立即开刮
			payment() {
				this.payInfo = this.ticketList[this.currentIndex]
				let data = {
					userCouponIds: [],
					autoCoupon: 1,
					boxId: this.payInfo.boxId,
					orderNum: 1
				}
				$http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
					if (res.code == 0) {
						let info = {
							...res.data,
							...this.payInfo,
							couponTitle: res.data && res.data.couponList && res.data.couponList.length && res
								.data.couponList[0].title,
							couponId: res.data && res.data.couponList && res.data.couponList.length && res.data
								.couponList[0].id
						}
						this.payInfo = info
						this.payShow = true
					}
				}).catch(() => {
					uni.$u.toast('开刮失败，请重试！');
				})
			},

			// 关闭支付弹框
			close() {
				this.payShow = false
			},

			// 盲票选中改变
			changeTicket({ detail }) {
				this.currentIndex = detail.current
				this.getPrize(this.ticketList[this.currentIndex].boxId)
			},

			changeList() {
				let data = {
					categoryId: '',
					tagId: '',
					type: 'online',
					noToken: true
				}
				$http.post(`/api/v1/mp/user/mall/ticket/list?pageNum=${this.pageNum}&pageSize=100`, data).then(
					res => {
						const boxIdStr = this.ticketList.map(item => item.boxId).join()
						let boxIdStrNew = res && res.rows && res.rows.map(item => item.boxId).join()
						if (boxIdStr != boxIdStrNew) {
							this.currentIndex = 0
							this.getList()
						}
					})
			},

			// 盲票向左箭头
			ticketLeft() {
				if ((this.currentIndex >= 0) && (this.currentIndex < (this.ticketList.length - 1))) {
					this.currentIndex++
				} else if (this.currentIndex == (this.ticketList.length - 1)) {
					this.currentIndex = 0
				}
				this.changeList()
			},

			// 盲票向右箭头
			ticketRight() {
				if (this.currentIndex > 0) {
					this.currentIndex--
				} else if (this.currentIndex == 0) {
					this.currentIndex = this.ticketList.length - 1
				}
				this.changeList()
			},

			// 线上立即刮票成功，跳转到刮奖过程
			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 }`
					})
				}
				//门店优惠券
				if (item.prizeType == "coupon") {
					// if (item.couponType == "1") {
					// 	uni.navigateTo({
					// 		url: `/pages/prizeGoods/detail?id=426`
					// 	})
					// }
					// if (item.couponType == "2") {
					// uni.navigateTo({
					// 	url: `/pages/prizeGoods/detail?id=425`
					// })
					// }
					uni.navigateTo({
						url: `/pages/prizeGoods/detail?id=425`
					})
				}
				// 盲豆
				if (item.prizeType == "coin") {
					uni.navigateTo({
						url: `/pages/prizeGoods/detail?id=424`
					})
				}
			},

			// 点击所有盲票
			toTicket() {
				uni.navigateTo({
					url: '/pages/ticketBox/index'
				})
			},

			// 点击奖品库
			toPrize() {
				if (!this.loginState) {
					uni.navigateTo({
						url: "/pages/login/index"
					})
					return
				}
				uni.navigateTo({
					url: '/pages/prize/index'
				})
			},

			// 点击规则说明
			toRule() {
				uni.navigateTo({
					url: '/pages/about/rule'
				})
			}
		},
		onShareAppMessage(res) {
			return {
				title: '盲票，玩的就是有趣',
				path: '/pages/index/index'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		width: 100%;
		height: var(--status-bar-height);
	}

	/deep/ .u-tabbar__placeholder {
		display: none;
	}
</style>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: calc(100vh - 50px);
		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/index_bg.jpeg) center center;

		&-top {
			position: relative;
			display: flex;
			justify-content: space-between;
			padding: 130rpx 0 0 40rpx;

			&-action {
				z-index: 20;
				display: flex;

				&-item {
					margin-right: 76rpx;

					&-cir {
						width: 72rpx;
						height: 72rpx;
						background-color: #FFC320;
						border-radius: 50%;
						margin-bottom: 14rpx;

						image {
							width: 40rpx;
							height: 36rpx;
						}
					}

					&-txt {
						font-size: 24rpx;
						text-align: center;
						color: #FFFFFF;
					}
				}
			}

			&-tip {
				z-index: 20;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				justify-content: flex-end;

				&-txt {
					font-size: 24rpx;
					width: 152rpx;
					height: 48rpx;
					background-color: #FFC320;
					border-radius: 24rpx 0 0 24rpx;
					margin-top: 40rpx;
				}

				&-txt:last-child {
					background-color: #FFFFCC;
				}
			}

			&-news {
				position: absolute;
				left: 0;
				bottom: 0;
				z-index: 10;
				width: 100vw;
			}
		}

		&-ticket {
			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-goods {
				display: flex;
				width: 100vw;
				height: 13vh;
				margin-top: 2vh;
				overflow: hidden;

				.prize-goods-item {
					display: flex;
					height: 13vh;

					.image-wrap {
						width: 160rpx;
						height: 13vh;
						border-radius: 20rpx;
						background: linear-gradient(0deg, #e6e6e6, #FFFFFF);
						margin-right: 60rpx;

						.img {
							width: 100%;
							height: 76%;
						}
					}
				}
			}

			.index-left {
				position: absolute;
				width: 100rpx;
				height: 100rpx;
				top: 380rpx;
				left: 10rpx;
				z-index: 20;
			}

			.index-right {
				position: absolute;
				width: 100rpx;
				height: 100rpx;
				top: 380rpx;
				right: 10rpx;
				z-index: 20;
			}

			.box-img {
				position: absolute;
				top: 0;
				z-index: 10;
				width: 100vw;
				height: 70vw;
			}
		}

		&-ticket-btn {
			margin-top: 30rpx;

			&-content {
				position: relative;
				width: 420rpx;
				height: 142rpx;

				image {
					width: 420rpx;
					height: 142rpx;
				}

				.title {
					position: absolute;
					top: 0;
					width: 100%;
					height: 142rpx;

					text {
						font-size: 56rpx;
						font-weight: bold;
						color: #C44906;
						text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76);
					}
				}
			}
		}
	}
</style>