mp-ui-user/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_not_num.png" mode="" v-if="info.status == 1"></image>
							<image src="../../static/lucky/lucky_ok_num.png" mode="" v-else></image>
							<view class="luck-info-content-num__content flex" v-if="info.status == 2">
								<text>{{ info.plainLuckyNum }}</text>
							</view>
						</view>
						<view class="luck-info-content-title" v-if="info.status == 1">- 幸运数字 -</view>
						<view class="luck-info-content-tip" v-else>请刮开纸质票面的数字，与此幸运数字相同的就是所中奖项</view>
						<view class="luck-info-content-ticket">
							<image src="../../static/lucky/lucky_not.png" mode="" v-if="info.status == 1"></image>
							<image src="../../static/lucky/lucky_ok.png" mode="" v-else></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 / 100 }}元 立即查看</view>
						<view class="luck-info-content-btn code" @click="scanCode" 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>
				<navigator open-type="exit" target="miniProgram" hover-class="none" class="btn">确认</navigator>
			</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'

	export default {
		components: {
			PayPopup
		},
		data() {
			return {
				serialNo: '',
				info: '',
				payInfo: {},
				payShow: false,
				payLookFlag: true,
				showNull: false,
				luckyShow: false,
				status: 2,
				showAction: false,
			};
		},

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

			if (options.q) {
				let url = JSON.stringify(options.q)
				this.serialNo = url.substring(url.length - 22, url.length - 1)
				this.getDetail()
			}
		},
		
		methods: {
			scanCode() {
				let _this = this
				uni.scanCode({
					scanType: ['qrCode'],
					success(res) {
						let url = res.result
						_this.serialNo = url.substring(url.length - 21, url.length)
						_this.getDetail()
					},
					fail() {
						uni.$u.toast('请扫二维码');
					}
				});
			},

			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
							let num = res.data.plainLuckyNum
						} 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
										let num = res.data.plainLuckyNum
									}
								})
								if (num == 10) {
									uni.hideLoading();
									clearInterval(time)
								}
							}, 1000)
						}
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},

			close() {
				this.payShow = false
			},

			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();
				})
			},

			saveImg() {
				this.$refs.hchPoster.posterShow()
			},
		}
	}
</script>

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

		.luck-info {
			position: relative;
			width: 87vw;
			height: 60vh;
			// background-color: #fff;
			
			&-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: 60%;
					height: 10vh;
					margin-top: 17vh;
					margin-bottom: 2vh;
					
					image {
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
					}
					
					&__content {
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
						z-index: 5;
						font-size: 120rpx;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						color: #FD3331;
					}
				}
				
				&-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: 96%;
					height: 14vh;
					margin-bottom: 2vh;
					
					image {
						position: absolute;
						top: 0;
						width: 100%;
						height: 100%;
					}
					
					&-info {
						width: 100%;
						height: 100%;
						position: absolute;
						top: 0;
						z-index: 5;
						
						flex-direction: column;
						
						.title {
							font-size: 36rpx;
							line-height: 36rpx;
							font-weight: bold;
							color: #FF6D2C;
							margin-bottom: 2vh;
						}
						
						.serialNo {
							font-size: 26rpx;
							color: #FF6D2C;
						}
						
						.action {
							color: #FFCBAA;
						}
					}
				}
				
				&-btn {
					padding: 0 13%;
					height: 8vh;
					line-height: 8vh;
					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;
				}
				
				.code {
					padding: 0 20%;
				}
			}
			
			&-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;
		}
	}
</style>