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

<template>
	<view>
		<view class="lucky"></view>
		<u-overlay :show="luckyShow" :opacity="0.8" zIndex="100">
			<view class="flex luck-warp" @touchmove.prevent.stop>
				<view class="luck-info">
					<view class="luck-info-bg">
						<image src="../../static/lucky/lucky_bg.png" mode="scaleToFill"></image>
					</view>
					<view class="luck-info-content flex">
						<view class="luck-info-content-num">
							<image src="../../static/lucky/lucky_gkmp.png" mode="scaleToFill"
								v-if="info.salePrice == 0"></image>
							<image src="../../static/lucky/lucky_gkmptwo.png" mode="scaleToFill" v-else></image>
						</view>
						<view class="luck-info-content-img">
							<view class="luck-info-content-img-word">
								<image class="img" src="../../static/lucky/lucky_tu.png" mode="scaleToFill"></image>
								<view class="luck-info-content-img-word__content">
									<text>{{ info.awardsName }}</text>
								</view>
								<image class="imgtwo" src="../../static/lucky/lucky_xiaoguo.png" mode="scaleToFill"
									v-if="infoimg">
								</image>
								<image class="img" src="../../static/lucky/lucky_guajiangqu.png" mode="scaleToFill"
									v-if="info.status == 1">
									<image class="imgone" src="../../static/lucky/lucky_yidong.png"
										v-else-if="info.status == 2"></image>
							</view>
						</view>
						<view class="luck-info-content-ticket">
							<image src="../../static/lucky/lucky_piaohao.png" mode="scaleToFill"></image>
							<view class="luck-info-content-ticket-info flex">
								<view class="title" :class="{ 'action': info.status == 2 }">{{ info.title }}</view>
								<view class="serialNo" :class="{ 'action': info.status == 2 }">序列号：{{ info.serialNo }}
								</view>
							</view>
						</view>
						<view class="luck-info-content-btn" style="width: 500rpx;" @click="toChoice" v-if="Choice">领取奖品</view>
						<view class=" code" v-else>开奖啦!</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	export default {
		components: {
		},
		data() {
			return {
				orderId: '',
				info: '',
				luckyShow: true,
				status: 2,
				infoimg: false,
				Choice: false,
				ChoiceData: '',
				pagesNum: '',
			};
		},
		onShow() {
			this.pagesNum = getCurrentPages().length
		},
		onLoad(options) {
			if (options.orderId) {
				this.orderId = options.orderId
				this.getDetail()
			}	
		},

		methods: {
			getDetail() {
				let _this = this
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/ticket/query', {
					orderId: this.orderId,
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						if (res.data.status == 2) {
							_this.info = res.data
							setTimeout(() => {
								this.infoimg = true
								setTimeout(() => {
									this.ChoiceData = res.data.ticketId
									this.Choice = true
								}, 500)
							}, 500)
						} else {
							let num = 0
							let time = setInterval(() => {
								num++
								uni.showLoading({
									title: '加载中'
								});
								$http.post('/api/v1/mp/user/ticket/query', {
									orderId: this.orderId,
								}).then(ele => {
									if (ele.data.status == 2) {
										uni.hideLoading();
										clearInterval(time)
										_this.info = res.data
										setTimeout(() => {
											this.infoimg = true
											setTimeout(() => {
												this.ChoiceData = res.data.ticketId
												this.Choice = true

											}, 500)
										}, 500)
									}
								})
								if (num == 10) {
									uni.hideLoading();
									clearInterval(time)
									if(_this.pagesNum > 2) {
										uni.navigateBack({
											delta: 2
										})
									}else {
										uni.switchTab({
											url: `/pages/index/index`
										})
									}
								}
							}, 1000)
						}
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			//跳转奖品页
			toChoice() {
				uni.redirectTo({
					url: `/packagePrize/choice/index?id=${ this.ChoiceData }&type=offline`
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.luck-warp {
		height: 100%;

		.luck-info {
			position: relative;
			width: 87vw;
			height: 60vh;

			&-bg {
				position: absolute;
				top: 0;

				image {
					width: 87vw;
					height: 60vh;
				}
			}

			&-content {
				flex-direction: column;
				justify-content: flex-start;
				position: absolute;
				top: 0;
				z-index: 10;
				width: 100%;
				height: 100%;

				&-num {
					position: relative;
					width: 422rpx;
					height: 8vh;
					margin-top: 16vh;
					margin-bottom: 3vh;

					image {
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
					}


				}

				&-img {
					position: relative;
					width: 73%;
					height: 10vh;
					background-color: #fff;
					border-radius: 12rpx;

					&-word {
						position: absolute;
						top: 15%;
						left: 5%;
						width: 90%;
						height: 85%;
						overflow: hidden;

						.img {
							position: absolute;
							width: 100%;
							height: 82.6%;
						}

						.imgtwo {
							position: absolute;
							width: 20%;
							height: 82%;
							left: -20%;
							animation: shadowTwoMove 0.5s linear infinite;
							animation-iteration-count: 1;
						}

						.imgone {
							position: absolute;
							left: 100%;
							width: 100%;
							height: 100%;
							animation: shadowMove 0.5s linear infinite;
							animation-iteration-count: 1;
						}

						&__content {
							position: absolute;
							top: 25%;
							text-align: center;
							width: 100%;
							height: 100%;
							font-size: 36rpx;
							font-family: YouSheBiaoTiHei;
							font-weight: 400;
							color: #fff;
						}
					}

				}

				&-title {
					font-size: 40rpx;
					line-height: 40rpx;
					color: #FEFEFE;
					margin-bottom: 1vh;
				}

				&-tip {
					width: 80%;
					font-size: 26rpx;
					line-height: 35rpx;
					text-align: center;
					color: #fff;
				}

				&-ticket {
					position: relative;
					width: 73%;
					height: 10vh;
					margin-top: 2vh;

					image {
						position: absolute;
						top: 0;
						width: 100%;
						height: 95%;
					}

					&-info {
						width: 90%;
						height: 75%;
						left: 5%;
						position: absolute;
						top: 0;
						z-index: 5;

						flex-direction: column;

						.title {
							font-size: 30rpx;
							line-height: 30rpx;
							color: #FF6D2C;
							margin-top: 1vh;
							margin-bottom: 1vh;
							width: 90%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.serialNo {
							font-size: 24rpx;
							color: #FF6D2C;
						}

						.action {
							color: #FFCBAA;
						}
					}
				}

				&-btn {
					padding: 0 8%;
					height: 7vh;
					line-height: 7vh;
					background: linear-gradient(0deg, #FF4924, #F9D448);
					box-shadow: 0px 6px 9px 0px rgba(135, 19, 3, 0.49);
					border-radius: 4vh;
					text-align: center;
					color: #FEFEFE;
					font-size: 40rpx;
					margin-top: 1vh;
				}

				.code {
					padding: 0 20%;
					height: 7vh;
					line-height: 10vh;
					text-align: center;
					color: #FEFEFE;
					font-family: YouSheBiaoTiHei;
					font-size: 38rpx
				}
			}

			&-close {
				width: 100%;
				position: absolute;
				bottom: -140rpx;

				&-content {
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					border: 1px solid #fff;
				}
			}
		}
	}

	.lucky {
		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;
	}

	.null-prize {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 80vw;
		height: 320rpx;
		background-color: #FFFFFF;
		border: 1px solid rgba(187, 187, 187, 100);

		.btn {
			margin-top: 60rpx;
			width: 160rpx;
			height: 60rpx;
			line-height: 60rpx;
			border-radius: 8rpx;
			background-color: rgba(235, 112, 9, 100);
			color: rgba(255, 255, 255, 100);
			font-size: 28rpx;
			text-align: center;
		}
	}

	// 支付后移动动画
	@keyframes shadowMove {
		0% {
			left: 0%;
		}

		100% {
			left: 100%;
		}
	}

	// 支付后移动动画
	@keyframes shadowTwoMove {
		0% {
			left: -20%;
		}

		100% {
			left: 100%;
		}
	}
</style>