mp-ui-user/src/packagePrize/rolling/index.vue

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启" v-if="rollingShow"  leftIconSize="0"></u-navbar>
		<!-- #endif -->
		
		<!-- #ifndef MP-ALIPAY -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启" v-if="rollingShow"></u-navbar>
		<!-- #endif -->
		
		<view class="rolling" v-if="rollingShow">
			<!-- 奖品滚动 -->
			<view class="rolling-prize">
				<view ref="rolling" class="rolling-prize-list" :animation="animationData">
					<view class="rolling-prize-list-item flex" v-for="(item, index) in list" :key="index">
						<view class="rolling-prize-list-item__items flex">
							<view class="content flex" v-for="(items, indexs) in item" :key="indexs">
								<image :src="items.picUrl" mode="aspectFit"></image>
								<view class="content-title ells-one" v-if="items.prizeType && items.prizeType.value != 'coin'">{{ items.title }}</view>
								<view class="content-title ells-one" v-else>盲豆</view>
								<view class="content-price" v-if="items.prizeType && items.prizeType.value != 'coin'">￥{{ $numberFormat(items.value) }}</view>
								<view class="content-price" v-else>{{ items.value }}个</view>
							</view>
						</view>
					</view>
				</view>
				<view class="rolling-prize-list" :animation="animationData">
					<view class="rolling-prize-list-item flex" v-for="(item, index) in list" :key="index">
						<view class="rolling-prize-list-item__items flex">
							<view class="content flex" v-for="(items, indexs) in item" :key="indexs">
								<image :src="items.picUrl" mode="aspectFit"></image>
								<view class="content-title ells-one" v-if="items.prizeType && items.prizeType.value != 'coin'">{{ items.title }}</view>
								<view class="content-title ells-one" v-else>盲豆</view>
								<view class="content-price" v-if="items.prizeType && items.prizeType.value != 'coin'">￥{{ $numberFormat(items.value) }}</view>
								<view class="content-price" v-else>{{ items.value }}个</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 按钮 -->
			<view class="rolling-btn flex">
				<view class="rolling-btn-content flex" :class="{ 'btn-stop': btnIng }" @click="stop" v-show="btnShow">
					<image src="../../static/ticketBox/ticket_btn_center.png" mode="scaleToFill"></image>
					<view class="rolling-btn-content-title">停止滚动</view>
				</view>
			</view>
			
			<!-- 倒计时 -->
			<view class="rolling-time flex">
				<view class="num">{{ num }}</view>
			</view>
		</view>
		<!-- 奖品显示 -->
		<view class="prize" v-else>
			<!-- #ifndef MP-ALIPAY -->
			<view class="prize-navLeft flex" :style="{ top: statusHeight + 'px' }" @click="back">
				<u-icon size="19" color="#fff" name="arrow-left"></u-icon>
			</view>
			<!-- #endif -->
			
			<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.picUrl" mode="aspectFit"></image>
					</view>
					<image class="prize-box-popup__rotate" src="../static/rolling_bg1.png" mode="scaleToFill" v-if="rotateShow" />
					<image class="prize-box-popup__circular" src="../static/rolling_bg2.png" mode="scaleToFill" v-if="circularShow" />
				</view>
			</view>
			<view class="prize-info flex">
				<view class="prize-info-content">
					<view class="prize-info-content-price" v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'"><text>¥</text>{{ $numberFormat(prizeInfo.value) }}</view>
					<view class="prize-info-content-price" v-else>{{ prizeInfo.value }}个</view>
					<!-- #ifdef MP-ALIPAY -->
					<view class="prize-info-content-titletwo ells-one" v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'">{{ prizeInfo.title }}</view>
					<view class="prize-info-content-titletwo" v-else>盲豆</view>
					<!-- #endif -->
					<!-- #ifndef MP-ALIPAY -->
					<view class="prize-info-content-title ells-one" v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'">{{ prizeInfo.title }}</view>
					<view class="prize-info-content-title" v-else>盲豆</view>
					<!-- #endif -->
					
					<view class="prize-info-content-btn flex">
						<view class="prize-info-content-btn-content flex" v-if="isTry == 0">
							<image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
							<view class="prize-info-content-btn-content-txt" @click="toPrize(prizeInfo.prizeType)" v-if="prizeInfo.prizeType && prizeInfo.prizeType.value != 'coin'">哇，去瞅瞅我的宝贝</view>
							<view class="prize-info-content-btn-content-txt" @click="toPrize(prizeInfo.prizeType)" v-else>哇，去商城兑换商品</view>
						</view>
						<view class="prize-info-content-btn-content flex" v-else @click="back">
							<image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
							<view class="prize-info-content-btn-content-txt">来把真的</view>
						</view>
					</view>
				</view>
			</view>
			<view class="prize-tip flex" v-if="isTry == 0" @click="back">
				<view class="txt">再来一张</view>
			</view>
		</view>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		data() {
			return {
				animationData: {}, // 动画信息
				num: 8, // 动画倒计时
				num2: 0, // 动画持续时间
				time: null, // 定时器
				stopTime: null, //自动停止
				list: [],
				prizeInfo: {},
				btnIng: false,
				rollingShow: true,
				statusHeight: 30,
				btnShow: false,
				
				boxId: '',
				isTry: null,
				orderId: '',
				ticketId: '',
				rotateShow: true,
				circularShow: true
			}
		},
		
		onLoad(options) {
			if(options) {
				this.boxId = options.boxId
				this.isTry = Number(options.isTry)
				this.orderId = options.orderId
				this.ticketId = options.ticketId
			}
			// 创建动画实例
			this.animation = uni.createAnimation()
			
			// #ifdef MP-WEIXIN
			const res = uni.getMenuButtonBoundingClientRect()
			this.statusHeight = res.top //胶囊距离顶部
			// #endif
		},
		
		onUnload() {
			// 移除动画
			this.animationData = {}
		},
		
		mounted() {
			this.getList()
		},
		
		methods: {
			getList() {
				let _this = this
				let data = {
					boxId: _this.boxId,
					isTry: _this.isTry,
					orderId: _this.orderId,
					ticketId: _this.ticketId
				}
				
				let num = 0
				let time = setInterval(() => {
					num ++
					uni.showLoading({
						title: '加载中'
					});
					$http.post('/api/v1/mp/user/ticket/autoCashPrize', data).then(res => {
						if(res.code == 0) {
							clearInterval(time)
							_this.list = res.data.ticketAwardsPrizeList
							_this.list.forEach(item => {
								item.forEach(ele => {
									ele.picUrl = env.filePublic + ele.picUrl.split(',')[0] + '?imageView2/2/w/170'
									ele.prizeType = JSON.parse(ele.prizeType)
								})
							})
							_this.prizeInfo = { 
								...res.data,
								picUrl: env.filePublic + res.data.picUrl.split(',')[0] + '?imageView2/2/w/340',
								prizeType: JSON.parse(res.data.prizeType)
							}
							setTimeout(()=> {
								uni.hideLoading();
								_this.btnShow = true
								_this.running()
							},500)
						} else if (res.code == 401 || res.code == 500) {
							uni.hideLoading();
							clearInterval(time)
							uni.navigateBack({
								delta: 2
							})
						} 
						
						if (num == 10) {
							uni.hideLoading();
							clearInterval(time)
						}
					})
				}, 1000)
			},
			
			// 动画开始
			running() {
				// #ifdef H5 
				// 获取滚动奖品列表长度
				this.data = this.$refs.rolling.$el.clientWidth
				// 调用 step() 来表示一组动画完成
				this.animation.translateX(-this.data).step({
					duration: 8000,
					timingFunction: 'linear'
				})
				// export方法导出动画数据
				this.animationData = this.animation.export()
				// 倒计时
				this.time = setInterval(() => {
					// 开奖倒计时、页面显示
					this.num--
					// 记录动画执行时间，停止动画计算移动距离时使用
					this.num2++
					if (this.num == 0) {
						clearInterval(this.time)
					}
				}, 1000)
				// 不手动停止动画，自动停止
				this.stopTime = setTimeout(() => {
					this.stop()
				}, 8000);
				// #endif
				
				// #ifdef MP-ALIPAY
				 my.createSelectorQuery().select('.rolling-prize-list').boundingClientRect().exec(info => {
					this.data = info[0].width
					// 调用 step() 来表示一组动画完成
					this.animation.translateX(-this.data).step({
						duration: 8000,
						timingFunction: 'linear'
					})
					// export方法导出动画数据
					this.animationData = this.animation.export()
					// 倒计时
					this.time = setInterval(() => {
						// 开奖倒计时、页面显示
						this.num--
						// 记录动画执行时间，停止动画计算移动距离时使用
						this.num2++
						if (this.num == 0) {
							clearInterval(this.time)
						}
					}, 1000)
				 })
				// 不手动停止动画，自动停止
				this.stopTime = setTimeout(() => {
					this.num = 0
					this.stop()
				}, 8000);
				// #endif
			
				// #ifdef MP-WEIXIN 
				// 元素详细信息
				uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
					this.data = info.width
					// 调用 step() 来表示一组动画完成
					this.animation.translateX(-this.data).step({
						duration: 8000,
						timingFunction: 'linear'
					})
					// export方法导出动画数据
					this.animationData = this.animation.export()
					// 倒计时
					this.time = setInterval(() => {
						// 开奖倒计时、页面显示
						this.num--
						// 记录动画执行时间，停止动画计算移动距离时使用
						this.num2++
						if (this.num == 0) {
							clearInterval(this.time)
						}
					}, 1000)
				}).exec();
				
				// 不手动停止动画，自动停止
				this.stopTime = setTimeout(() => {
					this.num = 0
					this.stop()
				}, 8000);
				// #endif
			},
			
			// 停止动画
			stop() {
				if(this.btnIng) return
				
				this.btnIng = true
				// 获取屏幕距离，用于计算停止动画移动距离计算
				// #ifndef MP-ALIPAY
				let screenWidth = null
				uni.getSystemInfo({
					success: function(res) {
						screenWidth = res.screenWidth;
					}
				});
				// #endif
				
				
				/**
				 * 0秒：下标4
				 * 1秒：下标6
				 * 2秒：下标8
				 * 3秒：下标10
				 * 4秒：下标12
				 * 5秒：下标14
				 * 6秒：下标16
				 * 7秒：下标2
				 * 8秒：下标2
				 * */
				
				clearInterval(this.time)
				clearTimeout(this.stopTime)
				this.animationData = {}
				if (this.num2 == 0) {
					this.list[3][1] = JSON.parse(JSON.stringify(this.prizeInfo))
				} else if (this.num2 == 1) {
					this.list[5][1] = JSON.parse(JSON.stringify(this.prizeInfo))
				} else if (this.num2 == 2) {
					this.list[7][1] = JSON.parse(JSON.stringify(this.prizeInfo))
				} else if (this.num2 == 3) {
					this.list[9][1] = JSON.parse(JSON.stringify(this.prizeInfo))
				} else if (this.num2 == 4) {
					this.list[11][1] = JSON.parse(JSON.stringify(this.prizeInfo))
				} else if (this.num2 == 5) {
					this.list[13][1] = JSON.parse(JSON.stringify(this.prizeInfo))
				} else if (this.num2 == 6) {
					this.list[15][1] = JSON.parse(JSON.stringify(this.prizeInfo))
				} else if (this.num2 == 7) {
					this.list[1][1] = JSON.parse(JSON.stringify(this.prizeInfo))
				} else if (this.num2 == 8) {
					// #ifdef MP-WEIXIN || MP-ALIPAY
					this.list[1][1] = JSON.parse(JSON.stringify(this.prizeInfo))
					// #endif
					// #ifdef H5 
					this.list[3][1] = JSON.parse(JSON.stringify(this.prizeInfo))
					// #endif
				}
				// #ifdef H5
				/**
				 * 根据动画时间移动到指定位置
				 * this.data / 8 ：动画平均移动距离
				 * this.num2 ： 动画执行时间
				 * screenWidth * 3 ：移动3个屏幕距离
				 */
				this.animation.translateX(-(this.data / 8 * this.num2 + screenWidth * 3)).step({
					duration: 4000,
					timingFunction: 'ease'
				})
				this.animationData = this.animation.export()
				
				setTimeout(() => {
					this.rollingShow = false
				},4500)
				setTimeout(() => {
					this.circularShow = false
				},5100)
				setTimeout(() => {
					this.rotateShow = false
				},7500)
				// #endif
				
				// #ifdef MP-ALIPAY
				
				let _this = this
				uni.getSystemInfo({
					success: (res)=> {
						let windowWidth = res.windowWidth;
						my.createSelectorQuery().select('.rolling-prize-list').boundingClientRect().exec(info => {
							_this.data = info[0].width
							_this.animation.translateX(-(_this.data  + windowWidth * 3)).step({
								duration: 4000,
								timingFunction: 'ease'
							})
							_this.animationData = _this.animation.export()
						})
						
						setTimeout(() => {
							_this.rollingShow = false
						},4500)
						setTimeout(() => {
							_this.circularShow = false
						},5100)
						setTimeout(() => {
							_this.rotateShow = false
						},7500)
					}
				});
				
				// #endif
			
				// #ifdef MP-WEIXIN 
				uni.createSelectorQuery().in(this).select(".rolling-prize-list").boundingClientRect(info => {
					this.data = info.width
					this.animation.translateX(-(this.data / 8 * this.num2 + screenWidth * 3)).step({
						duration: 4000,
						timingFunction: 'ease'
					})
					this.animationData = this.animation.export()
				}).exec();
				
				setTimeout(() => {
					this.rollingShow = false
				},4500)
				setTimeout(() => {
					this.circularShow = false
				},5100)
				setTimeout(() => {
					this.rotateShow = false
				},7500)
				// #endif
			},
			
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			
			toPrize(data) {
				if (data.value == 'goods') {
					uni.redirectTo({
						url: '/packagePrize/prize/index'
					})
				}
				if (data.value == 'coupon') {
					uni.redirectTo({
						url: '/packagePrize/prize/index?coupon=1'
					})
				}
				if (data.value == 'coupon_pkg') {
					uni.redirectTo({
						url: '/packagePrize/prize/index?coupon=1'
					})
				}
				if (data.value == 'coin') {
					uni.switchTab({
						url: '/pages/core/index'
					})
				}
			},
		},
	}
</script>

<style lang="scss" scoped>
	.rolling {
		width: 100%;
		height: calc(100vh - 44px);
		background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/prize_bkg1.png) center center no-repeat;
		background-size: 100vw calc(100vh - 44px);
		overflow: hidden;
		
		// 奖品滚动
		&-prize {
			display: flex;
			margin-top: 28vh;
			height: 28vh;
			background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/prize_bkg2.png) center center no-repeat;
			background-size: 100vw 28vh;
			margin-bottom: 82rpx;
			
			&-list {
				display: flex;
				margin-top: 76rpx;
				height: calc(100% - 76rpx);
				
				&-item {
					width: 100vw;
					height: 100%;
					
					&__items {
						align-items: flex-start;
						justify-content: space-evenly;
						width: 100vw;
						height: 100%;
						.content {
							flex-direction: column;
							width: 30%;
							height: 85%;
							
							image {
								width: 100%;
								height: 60%;
								margin-bottom: 16rpx;
							}
							
							&-title {
								width: 100%;
								line-height: 34rpx;
								font-size: 26rpx;
								text-align: center;
								margin-bottom: 20rpx;
							}

							&-price {
								width: 100%;
								line-height: 26rpx;
								font-size: 26rpx;
								text-align: center;
							}
						}
						
						// .content:nth-child(2) {
						// 	justify-content: flex-start;
						// 	color: #333;
							
						// 	image {
						// 		width: 100%;
						// 		height: 60%;
						// 	}
							
						// 	.content-title {
						// 		font-weight: bold;
						// 	}
							
						// 	.content-price {
						// 		font-weight: bold;
						// 	}
						// }
					}
				}
			}
		}
		
		// 按钮
		&-btn {
			height: 160rpx;
			margin-bottom: 36rpx;
			
			&-content {
				position: relative;
				height: 100%;
				
				image {
					width: 486rpx;
					height: 100%;
				}
				
				&-title {
					position: absolute;
					top: 30rpx;
					font-size: 72rpx;
					font-family: YouSheBiaoTiHei;
					font-weight: 400;
					color: #FFFFFF;
					line-height: 72rpx;
					opacity: 0.99;
				}
			}
			
			.btn-stop {
				animation: scaleBtn 0.2s linear;
			}
			
			// 放大缩小动画
			@keyframes scaleBtn {
				from {
					transform: scale(0.9);
				}
				
				to {
					transform: scale(1);
				}
			}
		}
		
		// 倒计时
		&-time {
			.num {
				font-size: 110rpx;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 110rpx;
			}
		}
	}
	
	// 奖品显示
	.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 {
				position: relative;
				flex-direction: column;
				width: 75vw;
				height: 38vh;
				background-color: #FFFFFF;
				border-radius: 22rpx;
				
				&__image {
					position: relative;
					z-index: 10;
					width: 65%;
					height: 65%;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				&__rotate {
					position: absolute;
					width: 100%;
					height: 100%;
					z-index: 5;
					animation: rotateBg 3s linear;
				}
				
				&__circular {
					position: absolute;
					width: 600rpx;
					height: 600rpx;
					z-index: 5;
					animation: scaleBg 0.7s linear;
				}
				
				// 旋转动画
				@keyframes rotateBg {
					from {
						transform: rotate(0);
					}
					
					to {
						transform: rotate(360deg);
					}
				}
				
				// 放大动画
				@keyframes scaleBg {
					from {
						transform: scale(0.8);
					}
					
					to {
						transform: scale(1.8);
					}
				}
			}
		}
		
		&-info {
			margin-bottom: 40rpx;
			
			&-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 {
					height: 36rpx;
					overflow: hidden;
					text-align: center;
					font-size: 36rpx;
					line-height: 36rpx;
					color: #FFFFFF;
					margin-bottom: 50rpx;
				}
				&-titletwo {
					height: 34rpx;
					overflow: hidden;
					text-align: center;
					font-size: 36rpx;
					line-height: 36rpx;
					color: #FFFFFF;
					margin-bottom: 50rpx;
				}
				
				&-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;
						}
					}
				}
			}
		}
		
		&-tip {
			.txt {
				width: 332rpx;
				height: 66rpx;
				line-height: 66rpx;
				text-align: center;
				background: rgba(255, 211, 157, .3);
				border-radius: 34rpx;
				font-size: 34rpx;
				font-weight: 500;
				color: #FB930D;
			}
		}
		
	}
</style>