mp-ui-user/src/pages/lucky/index.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=""></image>
					</view>
					<view class="luck-info-content flex">
						<view class="luck-info-content-num">
							<image src="../../static/lucky/lucky_gkmp.png" mode=""></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=""></image>
								<view class="luck-info-content-img-word__content">
									<text>{{ info.awardsName }}</text>
								</view>
								<image class="imgtwo" src="../../static/lucky/lucky_xiaoguo.png" mode="" v-if="infoimg">
								</image>
								<image class="img" src="../../static/lucky/lucky_guajiangqu.png" mode="" 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=""></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" @click="pay" v-if="info.status == 1 && info.salePrice != 0">
							支付{{ info.salePrice / 100 }}元 立即刮开盲票</view>
						<view class="luck-info-content-btn" @click="payDetail"
							v-else-if="info.status == 1 && info.salePrice == 0">收下盲票，立即刮开盲票</view>
						<view class=" code" v-else>开奖啦!</view>
					</view>
					<view class="luck-info-close flex">
						<navigator open-type="exit" target="miniProgram" hover-class="none"
							class="luck-info-close-content flex">
							<u-icon name="close" color="#fff" size="20"></u-icon>
						</navigator>
					</view>
				</view>
			</view>
		</u-overlay>

		<pay-popup :pay-show="payShow" :pay-info="payInfo" @close="close" @success="getDetailInfo" v-if="payShow" />

		<u-popup :show="showNull" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
			@touchmove.prevent.stop>
			<view class="null-prize">
				<view class="title">该盲票已兑奖</view>
				<view class="btn" @click="toUser">确认</view>
			</view>
		</u-popup>
		
		<u-popup :show="tipShow" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
			@touchmove.prevent.stop>
			<view class="null-prize">
				<view class="title">该盲票已被他人买走了</view>
				<view class="btn" @click="toUser">确认</view>
			</view>
		</u-popup>

		<u-popup :show="showAction" :round="10" mode="center" :safeAreaInsetBottom="false" overlayOpacity="0.8"
			@touchmove.prevent.stop>
			<view class="null-prize">
				<view class="title">该盲票未激活</view>
				<navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import PayPopup from '../../components/pay-popup/pay-popup.vue'
	import {
		urlParameter
	} from '@/utils/util.js'
	export default {
		components: {
			PayPopup
		},
		data() {
			return {
				serialNo: '',
				info: '',
				payInfo: {},
				payShow: false,
				payLookFlag: true,
				showNull: false,
				luckyShow: false,
				status: 2,
				showAction: false,
				infoimg: false,
			};
		},

		onLoad(options) {
			if (options.id) {
				this.serialNo = options.id
				this.getDetail()
			}

			if (options.q) {
				let obj = urlParameter(decodeURIComponent(options.q))
				this.serialNo = obj.id
				this.getDetail()
			}
		},

		methods: {
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
					serialNo: this.serialNo,
					noToken: true
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						if (res.data.status == 1) {
							this.info = res.data
							this.luckyShow = true
						} else if (res.data.status == 2) {
							this.info = res.data
							if (uni.getStorageSync('token')) {
								uni.redirectTo({
									url: `/packagePrize/choice/index?id=${ res.data.ticketId }&type=offLine`
								})

							} else {
								this.luckyShow = true
								uni.showModal({
									title: '提示',
									content: '您未登录或登录失效！',
									confirmText: '去登录',
									showCancel: false,
									success(res) {
										if (res.confirm) {
											uni.navigateTo({
												url: "/pages/login/index"
											})
										}
									}
								})
							}
						} else {
							this.showNull = true
							this.luckyShow = false
						}
					} else if (res.code == 1023) {
						this.showAction = true
						this.luckyShow = false
					} else {
						uni.$u.toast('该盲票不存在！');
						setTimeout(() => {
							uni.switchTab({
								url: '/pages/index/index'
							})
						}, 1000)
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			getDetailInfo() {
				let _this = this
				_this.payShow = false
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
					serialNo: _this.serialNo,
					noToken: true
				}).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						if (res.data.status == 2) {
							_this.info = res.data
							setTimeout(() => {
								this.infoimg = true
								setTimeout(() => {
									uni.redirectTo({
										url: `/packagePrize/choice/index?id=${ res.data.ticketId }&type=offLine`
									})
								}, 500)
							}, 500)
						} else {
							let num = 0
							let time = setInterval(() => {
								num++
								uni.showLoading({
									title: '加载中'
								});
								$http.post('/api/v1/mp/user/ticket/queryLuckyNum', {
									serialNo: _this.serialNo,
									noToken: true
								}).then(ele => {
									if (ele.data.status == 2) {
										uni.hideLoading();
										clearInterval(time)
										_this.info = res.data
										setTimeout(() => {
											this.infoimg = true
											setTimeout(() => {
												uni.redirectTo({
													url: `/packagePrize/choice/index?id=${ res.data.ticketId }&type=offLine`
												})
											}, 500)
										}, 500)
									}
								})
								if (num == 10) {
									uni.hideLoading();
									clearInterval(time)
								}
							}, 1000)
						}
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			close() {
				this.payShow = false
			},
			payDetail() {
				let data = {
					ticketId: this.info.ticketId,
					autoCoupon: 0,
					userCouponIds: [],
					orderNum: 1
				}
				uni.showLoading();
				$http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						if (res.data.payAmt == 0) {
							$http.post('/api/v1/mp/user/ticket/order/submit', {
								suid: uni.getStorageSync('shareUid'),
								type: uni.getStorageSync('shareType')
							}).then(res => {
								uni.hideLoading();
								if (res.code == 0) {
									this.getDetailInfo()
								} else {
									this.tipShow = true
									this.luckyShow = false
								}
							}).catch(() => {
								uni.hideLoading();
							})
						}
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			pay() {
				let data = {
					ticketId: this.info.ticketId,
					autoCoupon: 1,
					userCouponIds: [],
					orderNum: 1
				}
				this.payLookFlag = false
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/ticket/order/settle', data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						let info = {
							...res.data,
							...this.info,
							picUrl: env.filePublic + res.data.picUrl,
							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.hideLoading();
				})
			},

			toUser() {
				uni.switchTab({
					url: '/pages/user/index'
				})
			},

			saveImg() {
				this.$refs.hchPoster.posterShow()
			},
		}
	}
</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;
						}

						.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>