H5_QiCaiYao/pages_tool/lottery/lottery.vue

<template>
	<view v-if="viewShow">
		<view v-if="isH5" class="view"
			:style="{ background: `url(${$util.img('/upload/weapp/user/lottery_bg.png')}) no-repeat` }">
			<!-- <view style="width: 100%;height:88rpx;background: #fff;">
				
			</view> -->
			<u-navbar leftIconColor="#fff" title="" :fixed="false" :safeAreaInsetTop="true" :placeholder="true"
				bgColor="transparent" :autoBack="true" @leftClick="leftBtn('/pages_tool/lottery/lotteryList')">
				<!-- <view slot="left" @click="">

					<image style="width: 45rpx;height: 45rpx;" :src="$util.img('/upload/weapp/user/arrow-left.png')"
						mode=""></image>
				</view> -->
				<view class="u-nav-slot luckyLog" slot="right" @click="goLuckyLog">记录</view>
			</u-navbar>

			<div class="title">
				<image :src="$util.img('/upload/weapp/user/lottery_title.png')" mode="scaleToFill"></image>
			</div>

			<div class="disk">
				<view class="luckyWheel">
					<luckyWheel ref="luckyWheel" :drawId='DrawId' @endCallBack="endCallBack"></luckyWheel>
				</view>
			</div>

			<div class="btn">
				<image :src="$util.img('/upload/weapp/user/lottery_btn.png')"
					@tap="$util.throttle($refs.luckyWheel.startCallBack, 5000)" v-if="!isLottery">
				</image>
				<view class="btn1" v-else>
					{{isLottery}}
				</view>
			</div>
			<div class="num">
				<br>
				剩余次数 {{ drawNum }}
				<!-- <br>
				剩余积分 {{ drawNum }} -->
			</div>

			<div class="desc">
				<div class="rules">
					<image :src="$util.img('/upload/weapp/user/lottery_desc.png')" mode=""></image>
				</div>
				<div class="text">
					<div>抽奖时间：</div>
					<div>{{ drawInfo.start_time }}～{{ drawInfo.end_time }}</div>

					<div style="margin-top: 20rpx;">{{ drawInfo.rule }}:
						<br>
						抽奖{{ drawInfo.point_num }}积分一次
						<br>
						{{ drawInfo.title }}
					</div>


				</div>
			</div>

			<u-overlay :show="show">
				<div class="card" v-if="prize.id">

					<div class="card_title">恭喜您获得{{ prize.title }}</div>
					<div class="imgbox">
						<image :src="$util.img(prize.image)" mode="aspectFill"></image>
					</div>
					<div class="text">{{ prize.description }}</div>
					<div class="X_btn" @click="close">
						<image :src="$util.img('/upload/weapp/user/X.png')" mode=""></image>
					</div>
				</div>
				<div class="card" v-if="!prize.id">
					<div class="card_title">很遗憾本次未中奖</div>

					<div class="imgbox">
						<image :src="$util.img(prize.image)" mode="aspectFill"></image>

					</div>
					<div class="text">{{ prize.text }}</div>
					<div class="X_btn" @click="close">
						<image :src="$util.img('/upload/weapp/user/X.png')" mode=""></image>
					</div>
				</div>
			</u-overlay>
		</view>
		<web-view v-else :src="webviewUrl"></web-view>
	</view>
</template>

<script>
	import luckyWheel from '../components/luckyWheel/luckyWheel.vue';
	import Config from '@/config/index.js';
	export default {
		components: {
			luckyWheel
		},
		data() {
			return {
				DrawId: "",
				viewShow: true,
				show: false,
				overlayFlag: 'losing',
				overlayInfo: null,
				drawInfo: {},
				showLuckyWheel: false,
				prize: {},
				drawNum: '',
				webviewUrl: '',
				isH5: false,
				isLottery: '',
			};
		},
		computed: {},
		onLoad(option) {
			this.DrawId = option.draw_id;
			console.log(this.DrawId);
			// #ifdef H5
			this.isH5 = true
			if (option.token) {
				uni.setStorageSync('token', option.token);
				this.$store.commit('setToken', option.token);
			}
			this.getDrawInfo();
			this.getDrawNum();
			// #endif

			// 非h5
			// #ifndef H5
			this.isH5 = false
			// this.webviewUrl = `http://192.168.0.8:8080/h5/#/pages_tool/lottery/lottery?draw_id=${this.draw_id}&token=${uni.getStorageSync('token')}`;
			this.webviewUrl =
				`${Config.baseUrl}/h5/#/pages_tool/lottery/lottery?draw_id=${this.DrawId}&token=${uni.getStorageSync('token')}`;
			// #endif
		},
		onHide() {
			this.viewShow = false;
		},
		onShow() {
			this.viewShow = true;
		},
		methods: {
			// 获取抽奖活动基本信息
			getDrawInfo() {
				this.$api.sendRequest({
					url: '/api/draw/getDrawInfo',
					data: {
						draw_id: this.DrawId
					},
					success: ({ data }) => {
						this.drawInfo = data;
						let newTime = new Date().getTime() / 1000
						let start_time = this.$util.timeTurnTimeStamp(this.drawInfo.start_time)
						let end_time = this.$util.timeTurnTimeStamp(this.drawInfo.end_time)
						if (newTime >= start_time && newTime <= end_time) {
							this.isLottery = ''
						} else if (newTime < start_time) {
							this.isLottery = '活动未开始'
						} else if (newTime > end_time) {
							this.isLottery = '活动已结束'
						}
					}
				});
			},
			//获取抽奖次数
			getDrawNum() {
				this.$api.sendRequest({
					url: '/api/draw/checkdrawnum',
					data: {
						draw_id: Number(this.DrawId)
					},
					success: ({ data }) => {
						this.drawNum = data.cam_draw_num;
					}
				});
			},
			//抽奖结束
			endCallBack(prize) {
				this.prize = prize;
				this.show = true;
				this.getDrawNum();
			},
			close() {
				this.show = false;
			},
			goLuckyLog() {
				// #ifdef MP-WEIXIN
				console.log(webUni);
				if (this.isH5 && webUni) {
					return webUni.navigateTo({ url: '/pages_tool/lottery/luckyLog' })
				}
				// #endif
				// #ifndef MP-WEIXIN
				this.$util.redirectTo('/pages_tool/lottery/luckyLog')
				// #endif
			},
			leftBtn(url) {
				// #ifdef MP-WEIXIN
				if (this.isH5 && webUni) {
					return webUni.redirectTo({ url })
				}
				// #endif

				// #ifndef MP-WEIXIN
				this.$util.redirectTo(url, {}, 'redirectTo')
				// #endif
			}
		}
	};
</script>

<style lang="scss" scoped>
	.view {


		/deep/ .u-navbar {
			width: 100vw;
			// padding-top: calc(var(--status-bar-height) + 60rpx);
			position: sticky;
			top: calc(var(--status-bar-height) + 80rpx);
			position: absolute;
			top: 80rpx;
		}

		// }


		background-size: cover !important;
		padding-bottom: 100rpx;
		min-height: 100vh;
		box-sizing: border-box;

		.luckyLog {
			color: #ffffff;
			border: 1px solid #ffffff;
			border-radius: 30rpx;
			padding: 2rpx 30rpx;
		}

		.title {
			padding-top: 226rpx;
			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 552rpx;
				height: 190rpx;
			}
		}

		.disk {
			margin-top: 30rpx;

			display: flex;
			align-items: center;
			justify-content: center;

			image {
				width: 212rpx;
				height: 238rpx;
			}
		}

		.btn {
			margin-top: 86rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			image {
				width: 500rpx;
				height: 110rpx;
			}

			.btn1 {
				width: 500rpx;
				height: 110rpx;
				line-height: 110rpx;
				text-align: center;
				background: #999;
				border-radius: 80rpx;
				color: #fff;
				font-size: 42rpx;
				font-weight: 700;
				box-shadow: 0 0 32rpx rgba(100, 100, 100, 0.3);
			}
		}

		.desc {
			margin-top: 64rpx;

			.rules {
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 176rpx;
					height: 40rpx;
				}
			}

			.text {
				margin-top: 34rpx;
				padding: 0 40rpx;
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				color: #ffd7a8;
				line-height: 40rpx;
			}
		}

		.card {
			position: relative;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
			width: 534rpx;
			background: linear-gradient(180deg, #ffe8e5 0%, #fffaf8 100%);
			border-radius: 32rpx;
			border: 3rpx solid #ffffff;

			.card_title {
				font-size: 36rpx;
				font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #333333;
				padding-top: 40rpx;
				text-align: center;
			}

			.imgbox {
				margin-top: 40rpx;

				display: flex;
				justify-content: center;
				align-items: center;

				image {
					border-radius: 16rpx;
					width: 360rpx;
					height: 360rpx;
				}
			}

			.text {
				margin-top: 32rpx;
				margin-bottom: 32rpx;
				text-align: center;

				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}

			.X_btn {
				position: absolute;
				left: 50%;
				transform: translate(-50%);
				bottom: -100rpx;

				image {
					width: 52rpx;
					height: 52rpx;
				}
			}
		}

		.num {
			width: 100%;
			display: flex;
			justify-content: center;
			color: #ffd7a8;
		}
	}
</style>