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

<template>
	<view>
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="盲票开启" v-if="rollingShow"></u-navbar>
		<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.url" mode="aspectFit"></image>
								<view class="content-title ells-one">{{ items.title }}</view>
								<view class="content-price">￥{{ $numberFormat(items.price) }}</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.url" mode="aspectFit"></image>
								<view class="content-title ells-one">{{ items.title }}</view>
								<view class="content-price">￥{{ $numberFormat(items.price) }}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 按钮 -->
			<view class="rolling-btn flex">
				<view class="rolling-btn-content flex" :class="{ 'btn-stop': btnIng }" @click="stop">
					<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>
			<view class="prize-navLeft flex" :style="{ top: statusHeight + 'px' }" @click="back">
				<u-icon size="19" color="#fff" name="arrow-left"></u-icon>
			</view>
			<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.url" mode="aspectFit"></image>
					</view>
					<view class="prize-box-popup__tip">哇，去瞅瞅我的宝贝</view>
				</view>
			</view>
			<view class="prize-info flex">
				<view class="prize-info-content">
					<view class="prize-info-content-price"><text>¥</text>{{ $numberFormat(prizeInfo.price) }}</view>
					<view class="prize-info-content-title">{{ prizeInfo.title }}</view>
				</view>
			</view>
			<view class="prize-btn flex">
				<view class="prize-btn-content flex">
					<image src="../../packagePrize/static/rolling_btn.png" mode="aspectFit"></image>
					<view class="prize-btn-content-txt">再来一张</view>
				</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: [
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
					[
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软显示（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
						{ url: 'https://cdn.uviewui.com/uview/album/1.jpg', title: '微软（Miceosoft)日版Xbox Seies S', price: 2999 },
					],
				],
				
				prizeInfo: { 
					url: 'https://cdn.uviewui.com/uview/album/4.jpg', 
					title: '中奖了！！！', 
					price: 9999 ,
				},
				btnIng: false,
				rollingShow: true,
				statusHeight: 30,
			}
		},
		
		onLoad() {
			// 创建动画实例
			this.animation = uni.createAnimation()
			// #ifdef MP-WEIXIN
			const res = uni.getMenuButtonBoundingClientRect()
			this.statusHeight = res.top //胶囊距离顶部
			// #endif
		},
		
		onUnload() {
			// 移除动画
			this.animationData = {}
		},
		
		mounted() {
			this.running()
		},
		
		methods: {
			// 动画开始
			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-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() {
				// 获取屏幕距离，用于计算停止动画移动距离计算
				let screenWidth = null
				uni.getSystemInfo({
					success: function(res) {
						screenWidth = res.screenWidth;
					}
				});
				this.btnIng = true
				/**
				 * 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] = this.prizeInfo
				} else if (this.num2 == 1) {
					this.list[5][1] = this.prizeInfo
				} else if (this.num2 == 2) {
					this.list[7][1] = this.prizeInfo
				} else if (this.num2 == 3) {
					this.list[9][1] = this.prizeInfo
				} else if (this.num2 == 4) {
					this.list[11][1] = this.prizeInfo
				} else if (this.num2 == 5) {
					this.list[13][1] = this.prizeInfo
				} else if (this.num2 == 6) {
					this.list[15][1] = this.prizeInfo
				} else if (this.num2 == 7) {
					this.list[1][1] = this.prizeInfo
				} else if (this.num2 == 8) {
					// #ifdef MP-WEIXIN
					this.list[1][1] = this.prizeInfo
					// #endif
					// #ifdef H5
					this.list[3][1] = 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)
				// #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)
				// #endif
			},
			
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
		},
	}
</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: 30vh;
			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: 42rpx;
			
			&-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 {
				flex-direction: column;
				width: 75vw;
				height: 38vh;
				background-color: #FFFFFF;
				border-radius: 22rpx;
				
				&__image {
					width: 65%;
					height: 65%;
					margin-bottom: 30rpx;
					
					image {
						width: 100%;
						height: 100%;
					}
				}
				
				&__tip {
					padding: 4rpx 0;
					width: 75%;
					text-align: center;
					background: rgba(255, 211, 157, .44);
					border-radius: 24rpx;
					font-size: 30rpx;
					font-weight: 500;
					color: #FB900B;
				}
			}
		}
		
		&-info {
			margin-bottom: 34rpx;
			
			&-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 {
					text-align: center;
					font-size: 36rpx;
					line-height: 36rpx;
					color: #FFFFFF;
				}
			}
		}
		
		&-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;
				}
			}
		}
	}
</style>