mp-ui-user/src/pages/lucky/index.vue

<template>
	<view>
		<view class="lucky"></view>
		<u-overlay :show="luckyShow" :opacity="0.3" zIndex="100">
			<view class="flex luck-warp" @touchmove.prevent.stop>
				<view class="luck-info">
					<view class="luck-info-bg">
						<image src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/lucky1_prize.jpg" mode="scaleToFill"></image>
					</view>
					<view class="luck-info-content flex">
						<view class="luck-info-content-num">
							<!-- <image src="../../static/lucky/lucky_gkmp.png" mode="aspectFit" v-if="info.salePrice == 0">
							</image> -->
							<!-- <view v-if="info.salePrice == 0"> -->
							<view class="luck-info-content-num-word" v-if="info.salePrice == 0">
								<text>共富体验</text>
								<text style="font-size: 66rpx;">开启我的
								<text style="color: #FF0000;">共富</text>
								时刻</text>
							</view>
							<image src="../../static/lucky/zioff.png" mode="aspectFit" v-else></image>
						</view>
						<view class="luck-info-content-img" v-if="info.status != 1">
							<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>
									<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="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/lucky_background3.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-nearby" v-if="info.status == 1 ">
							附近已有<view class="num" style="display: inline-block; padding: 0 2px;">{{ nearbyNum }}</view>人刮开<view class="dots"><view>.</view><view>.</view><view>.</view></view>
						</view>
						<view class="luck-info-content-btn" style="width: 500rpx;" @click="pay"
							v-if="info.status == 1 && info.salePrice != 0">
							点击支付</view>
						<view class="luck-info-content-btn" style="width: 500rpx;" @click="payDetail"
							v-else-if="info.status == 1 && info.salePrice == 0">立即刮奖</view>
						<!-- <view class=" code" v-else>开奖啦!</view> -->
						<view class="luck-info-content-btn" style="width: 500rpx;" @click="toChoice" v-if="Choice">领取奖品
						</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="showStop" :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 appId from '@/config/appId.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,
				showStop: false,
				luckyShow: false,
				status: 2,
				showAction: false,
				infoimg: false,
				Choice: false,
				ChoiceData: '',
				nearbyNum: 0,
			};
		},

		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()
			}
			if(uni.getStorageSync('code')){
				this.serialNo = uni.getStorageSync('code')
			}
			this.jumpNumber()
		},
		onShow() {
			if(uni.getStorageSync('code')){
				this.serialNo = uni.getStorageSync('code')
				this.getDetail()
			}
		},

		methods: {
			getDetail() {
				uni.showLoading({
					title: '加载中'
				});
				let data = {
					serialNo: this.serialNo,
					noToken: true
				}
				// #ifdef MP-WEIXIN
				data.appSource = 1
				// #endif
				$http.post('/api/v1/mp/user/ticket/queryLuckyNum', data).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 if(res.data.status == 5){
							this.showStop = true
							this.luckyShow = false
						} else {
							this.showNull = true
							this.luckyShow = false
						}
					} else if (res.code == 1023) {
						this.showAction = true
						this.luckyShow = false
					} else if (res.code == 1027){
						this.showStop = 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: '加载中'
				});
				let data = {
					serialNo: _this.serialNo,
					noToken: true
				}
				// #ifdef MP-WEIXIN
				data.appSource = 1
				// #endif
				$http.post('/api/v1/mp/user/ticket/queryLuckyNum', data).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: '加载中'
								});
								let data = {
									serialNo: _this.serialNo,
									noToken: true
								}
								// #ifdef MP-WEIXIN
								data.appSource = 1
								// #endif
								$http.post('/api/v1/mp/user/ticket/queryLuckyNum', data ).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)
								}
							}, 1000)
						}
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			
			jumpNumber() {
			      this.nearbyNum = 0 //起始数据
			      let endNum = Math.floor(Math.random()*10+1) //最终数据
			      let step = 0  //累加步长
						let time = 200 //动画时间
			      const timer = setInterval(() => {
			        if(this.nearbyNum < (endNum - step)) {
			          step++
			          //小数
			          this.nearbyNum = step
			        } else {
			          clearInterval(timer)
			          this.nearbyNum = endNum
			        }
			    }, time)
			},
			
			//跳转奖品页
			toChoice() {
				uni.redirectTo({
					url: `/packagePrize/choice/index?id=${ this.ChoiceData }&type=offline`
				})
			},

			close() {
				this.payShow = false
			},
			payDetail() {
				let data = {
					ticketId: this.info.ticketId,
					autoCoupon: 0,
					userCouponIds: [],
					orderNum: 1,
					appSource: appId
				}
				uni.showLoading();
				let suid = uni.getStorageSync('shareUid')
				$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: suid !== 'undefined' && suid !== undefined ? suid : null,
								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,
					appSource: appId
				}
				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;
			width: 100%;
			height: 60vh;

			&-bg {
				position: absolute;
				top: 0;
				width: 100%;
				image {
					// width: 87vw;
					width: 100%;
					height: 70vh;
				}
			}

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

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

					image {
						position: absolute;
						top: 0rpx;
						width: 100%;
						height: 100%;
					}
					&-word {
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						font-size: 81rpx;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						color: #7231F1;
						// line-height: 164rpx;
					}


				}

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

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

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

						.imgtwo {
							position: absolute;
							width: 20%;
							height: 100%;
							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%;
							line-height: 8vh;
							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: 70%;
					height: 10vh;
					margin-top: 3vh;

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

					&-info {
						text-align: center;
						width: 90%;
						height: 75%;
						left: 5%;
						position: absolute;
						top: 0;
						z-index: 5;
						margin-top: 10rpx;
						flex-direction: column;

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

						.serialNo {
							font-size: 26rpx;
							color: #fff;
							font-weight: 400;
						}

						// .action {
						// 	color: #FFCBAA;
						// }
					}
				}
				
				&-nearby {
					position: relative;
					text-align: center;
					width: 73%;
					// height: 6vh;
					margin-top: 4vh;
					font-size: 30rpx;
					color: #666;
					
					.num {
						font-size: 46rpx;
					}
					.dots {
						display: inline-block;
						view {
							display: inline-block;
						}
					}
					.dots view {
						animation: dots-1 2s infinite steps(1);
						-webkit-animation: dots-1 2s infinite steps(1);
					}
					.dots view:first-child+view {
						animation-name: dots-2;
						-webkit-animation-name: dots-2;
					}
					.dots view:first-child+view+view {
						animation-name: dots-3;//第三个点的动画名称
						-webkit-animation-name: dots-3;
					}
				}

				&-btn {
					padding: 0 8%;
					height: 8vh;
					line-height: 7vh;
					background: url(https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/static/lucky_button.png) no-repeat center center;
					background-size: 100% 100%;
					// background: linear-gradient(0deg, #FF4924, #F9D448);
					// box-shadow: 0px 6px 9px 0px rgba(135, 19, 3, 0.49);
					// border-radius: 4vh;
					text-align: center;
					font-size: 32rpx;
					font-weight: 500;
					margin-top: 2vh;
				}

				.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/static/lucky_background.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: $uni-bg-color;
			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%;
		}
	}
	
	//动态省略号
	@keyframes dots-1 {
		from {
			opacity: 0
		}
		25% {
			opacity: 1
		}
	}
	@keyframes dots-2 {
		from {
			opacity: 0
		}
		50% {
			opacity: 1
		}
	}
	@keyframes dots-3 {
		from {
			opacity: 0
		}
		75% {
			opacity: 1
		}
	}
	@-webkit-keyframes dots-1 {
		from {
			opacity: 0
		}
		25% {
			opacity: 1
		}
	}
	@-webkit-keyframes dots-2 {
		from {
			opacity: 0
		}
		50% {
			opacity: 1
		}
	}
	@-webkit-keyframes dots-3 {
		from {
			opacity: 0
		}
		75% {
			opacity: 1
		}
	}
</style>