WeChatAppH5/pages/game/Lottery.vue

<template>
	<view class="pages">
		<!-- <navbar ref="navbarRef" :config="config" :backColor="backColor"></navbar> -->
		<view class="page-content" :style="{backgroundImage: 'url('+activityInfo.imageUrl + ossImg +')'}">
			<view class="winning-c">
				<view class="winning-user" v-if="WinningUserList && WinningUserList.length > 0">
					<!-- 第一次进入，有数据， ，到最后一页替换数据之后在请求下一次数据，无数据时做30s轮询查询 -->
					<swiper class="winning-list" :disable-touch="true" circular="true" vertical="true" autoplay
						interval="3000" duration="1000" @change="WinningCurrent">
						<swiper-item class="winning-item-box" v-for="item in WinningUserList">
							<view class="winning-item zw-one-row">
								*恭喜用户：{{item.userName}}, 获得{{item.prizeName}}
							</view>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- strDirection="vertical" -->

			<view class="pedestal-bg">
				<template v-if="prizeList.length">
					<my-turntable-draw ref="raffleWheel" :canvasWidth="boxData.width" :canvasHeight="boxData.width"
						:prizeList="prizeList" :targetIndex="targetIndex" @befoterClick="befoterClick"
						@afterClick="afterClick">
					</my-turntable-draw>
				</template>
				<!-- <view class="share-btn" @click.stop="onShare()">
					分享
				</view> -->

			</view>

			<view class="Lottery-info">
				<view class="Lottery-info-item zw-one-row">
					次数:{{freeResidueNum}}
				</view>
				<view class="Lottery-info-item zw-one-row" v-if="activityInfo.pointExchangeLottery">
					积分:{{integral}}
				</view>
				<!-- <view class="Lottery-info-item zw-one-row" @click="onWinningList()">
					中奖记录
				</view> -->
			</view>
			<view class="winning-record">
				<text @click.stop="onWinningList()" class="record-text">中奖记录 <text class="iconfont_yige">&#xe65f;</text>
				</text>
			</view>
			<view class="activity-rule-box">
				<view class="activity-rule-top" />
				<view class="activity-rule">
					<view class="rule-title">
						活动规则
					</view>
					<view class="rule-list" v-html="activityInfo.ruleExplain" />
				</view>
				<view class="activity-rule-boot" />
			</view>

		</view>
		<!-- 商品 -->
		<view class="goods-boxs">
			<view class="goods-box" v-if="goodsList && goodsList.length > 0">
				<view class="goods-module-title">
					推荐商品
				</view>
				<view class="goods-item" v-for="item in goodsList"
					@click="goProductDetails('/pages/product/goods/goods?id=' + item.goodsId)">
					<!-- <image :src="item.cover" mode="aspectFill"></image> -->
					<view class="goods-img lazy-img">
						<u-image class="service-img" :src="item.goodsCover" mode="aspectFit" :lazy-load="true" />
					</view>
					<view class="goods-info">
						<view class="goods-title">{{item.goodsTitle}}</view>
						<view class="goods-price">
							<rich-text :nodes="$mUtil.priceBigSmall(item.goodsSalePrice)"></rich-text>
							<text class="line-price">¥ {{ item.goodsMarketPrice }}</text>
						</view>
					</view>
				</view>
			</view>
			<EmptyDate v-else-if="status !== 'loading' && status" />
		</view>

		<Winning ref="WinningRef" :activityJoinRecordId="activityJoinRecordId" />
		<!-- 		<sharePoster ref="sharePosterRef" :posterUrl="activityInfo.posterUrl" :codeUrl="codeurl"
			@onShareSuccess="onShareSuccess" /> -->

	</view>
</template>

<script>
	import myTurntableDraw from '@/components/my-turntable-draw/my-turntable-draw'
	import Winning from "./popup/Winning.vue"

	import CONFIG from "@/config/global.config.js"
	import {
		setPrizeLevel
	} from "./common.js"
	import {
		myUserInfo
	} from "@/api/government.js"
	import {
		getActivity,
		getActivityPrize,
		getActivityLottery,
		getActivityUserInfo,
		getWinningRecords,
		setActivityViewVolume,
		getActivityGoods,
		setShareRecord
		// getActivityUvRecord,
		// getActivityViewVolume_pv,
		// getActivityViewVolume_uv
	} from "@/api/Lottery.js"
	const app = getApp();
	export default {
		components: {
			myTurntableDraw,
			Winning,
		},
		data() {
			return {
				ossImg: '',
				// ?x-oss-process=style/w_750_jpg

				codeurl: null,
				location: null,
				config: {
					back: true,
					title: '转盘抽奖',
					color: 'white',
					backgroundColor: [0, '#fff'],
					statusBarFontColor: 'transparent',
					barPlaceholder: false
				},
				backColor: '',
				activityId: null, //  活动ID
				activityInfo: {},

				// 转盘 , 
				// colors: ["#F0DDAE", "#F6F0E7"],

				// 以下是奖品配置数据
				// 奖品数据
				prizeList: [],
				// 中奖下标  
				activityJoinRecordId: null,
				// 抽奖次数
				freeResidueNum: 0,
				integral: 0,
				// 中奖用户
				current: 0,
				WinningUserList: [],
				cacheWinningUser: [],
				clearWinningTime: null,
				// 是否在抽奖
				isRotate: false,
				targetIndex: -1,
				boxData: {
					width: uni.upx2px(673),
					height: uni.upx2px(673)
				},

				// ----商品----
				status: '',
				params: {
					page: 1,
					limit: 6
				},
				imgSize: 60,
				goodsList: [],

				Volume_Timeout: null
			};
		},
		onPageScroll(e) {
			// config: {
			// 	back: true,
			// 	title: '关注',
			// 	color: 'black',
			// 	backgroundColor: [1, '#fff'],
			// 	statusBarFontColor: 'black'
			// },
			if (e.scrollTop >= 50 && this.config.color === 'white') {
				this.config.color = 'black'
				this.config.backgroundColor = [1, '#fff']
				this.config.statusBarFontColor = 'black'
				this.backColor = '#999';
				// this.$refs.navbarRef.init();
			} else if (e.scrollTop < 50 && this.config.color === 'black') {
				this.config.color = 'white'
				this.config.backgroundColor = [0, '#fff']
				this.config.statusBarFontColor = 'transparent';
				this.backColor = '';
				// console.log('this.config = ', this.config)
				// this.$refs.navbarRef.init();
			}
		},
		onLoad(opt) {
			this.location = app.globalData.location || null;

			this.activityId = opt.activityId || null
			// this.codeurl = `${CONFIG.hostUrl}?URLType=BigTurnplate&activityId=${this.activityId}`
			// /api/activity/info/{activityId}
			// this.Volume_Timeout = setTimeout(() => {
			// 	if (this.Volume_Timeout) {
			// 		this.setActivityViewVolume_();
			// 		clearTimeout(this.Volume_Timeout);
			// 		this.Volume_Timeout = null;
			// 	}
			// }, 3000)
			this.getActivityInfo()
			this.guessLike()
		},
		// onReachBottom() {
		// 	if (this.status == 'more') {
		// 		this.params.page++;
		// 		this.guessLike();
		// 	}
		// },

		onUnload() {
			clearTimeout(this.Volume_Timeout);
			this.Volume_Timeout = null;
		},
		methods: {
			// PV,PU记录
			setActivityViewVolume_() {
				setActivityViewVolume({
					activityId: this.activityId
				}).then(res => {})
			},
			onShare() {
				myUserInfo().then(res => {
					const data = res.data || null;
					if (!data) {
						uni.showToast({
							title: '请先登录',
							icon: 'none'
						})
						setTimeout(() => {
							uni.redirectTo({
								url: '/pages/login/index'
							})
						}, 1000)
					} else if (!this.activityInfo.posterUrl) {
						uni.showToast({
							title: '暂未配置分享内容',
							icon: 'none'
						});
						return

					} else {
						// this.$refs.shareRef.open()
						this.$refs.sharePosterRef.open();
					}

				})

			},
			// 获取活动详情
			getActivityInfo() {
				getActivity(this.activityId).then(res => {
					const { data } = res || {} 
					this.activityInfo = data || {};

					let list = this.activityInfo.prizes || [];
					const list_l = list.length;
					if (list_l < 8) {
						this.imgSize = 80
					} else {
						this.imgSize = 100
					}
					list.map((el, index) => {
						el.prizeId = el.activityPrizeId;
						el.prizeName = el.prizeName;
						el.prizeImage = el.imageUrl + '?x-oss-process=style/game_w_50';
						el.prizeChinese = setPrizeLevel(el.prizeGrade);

						return el
					});
					this.prizeList = list;

					this.getActivityPrizeList();
					this.getActivityUserInfo_();
					this.getWinningRecords_();
				})
			},
			// 最新中奖记录
			getWinningRecords_(_cache = false) {
				try {
					clearTimeout(this.clearWinningTime)
				} catch (e) {};
				this.clearWinningTime = null;
				getWinningRecords(this.activityId).then(res => {
					const data = res.data
					if (data && data.length > 0) {
						if (_cache) {
							this.cacheWinningUser = data;
						} else {
							this.WinningUserList = data;
						};
					} else {
						this.clearWinningTime = setTimeout(() => {
							this.getWinningRecords_()
						}, 30000)
					}
				})
			},
			// 获取活动的用户信息
			getActivityUserInfo_() {
				getActivityUserInfo(this.activityId).then(res => {
					const val = res.data || {};
					this.freeResidueNum = val?.freeResidueNum || 0;
					this.integral = val?.integral || 0;
				})
			},
			// 获取奖品信息
			getActivityPrizeList() {
				getActivityPrize(this.activityId).then(res => {
					// prizeId	奖品对应 ID	Number
					// prizeName	奖品名称	String
					// prizeStock	奖品库存	Number
					// prizeWeight	奖品权重	Number
					// prizeImage	奖品图片地址，网络图片仅支持http和https协议	String
					let list = res.data || [];
					list.map((el, index) => {
						// prizes

						el.prizeId = el.activityPrizeId;
						el.prizeName = el.prizeName;
						el.prizeImage = el.imageUrl + '?x-oss-process=style/game_w_50';
						// console.log('el.prizeImage = ', el.prizeImage)
						el.prizeChinese = setPrizeLevel(el.prizeGrade);

						return el
					});
					this.prizeList = list;
				})

			},

			WinningCurrent(event) {
				const index = event.detail.current + 1;

				if (index >= this.WinningUserList.length) {
					if (this.cacheWinningUser.length > 0) {
						this.WinningUserList = this.cacheWinningUser;
						this.cacheWinningUser = [];
					}
					this.getWinningRecords_(true)
				}


			},

			async befoterClick(data) {
				// 当前正在抽奖
				// console.log(" 当前正在抽奖  ", this.isRotate)
				if (this.isRotate) callback(false)

				if (data.type == 'start') {
					try {
						this.isRotate = true;
						this.targetIndex = -1;
						let prize_ = -1;
						if (this.activityInfo.areaLimit) {
							// 	抽奖限制地区 - 检查是否定位
							if (!this.location || !this.location.city) {
								uni.showModal({
									title: '提示',
									content: '当前抽奖需要定位信息，是否获取定位',
									confirmText: '获取定位信息',
									success: res => {
										if (res.confirm) {
											uni.showLoading({
												title: '获取中'
											})
											uni.getLocation({
												type: 'gcj02',
												geocode: true,
												cacheTimeout: 30 * 60,
												success: Location => {
													const address = Location.address;
													// 缓存全局的定位信息
													app.globalData.location = address;
													this.location = address;
													if (!address.city) {
														uni.showToast({
															title: '获取定位失败',
															icon: 'none'
														})
													} else {
														uni.showToast({
															title: '获取定位成功，请开始抽奖',
															icon: 'none'
														})
													}

												},
												fail: LocationErr => {
													uni.showToast({
														title: '获取定位失败',
														icon: 'none'
													})
												},
												complete: () => {
													uni.hideLoading()
													// console.log('145')
												}
											})
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
								throw new Error('')
							};
						};


						// if (this.freeResidueNum > 0) {

						// } else 
						if (this.freeResidueNum <= 0 && this.activityInfo.pointExchangeLottery) {
							const Modal = await uni.showModal({
								content: `是否消耗${this.activityInfo.singleExchangePoints}抽一次奖`,
							});
							if (!Modal[1].confirm) {
								throw new Error('用户拒接使用积分抽奖')
							}
						}


						const c_y = this.location?.city || undefined
						// console.log('本次抽奖开始')
						// 这里需要处理你的抽奖逻辑，并得出中奖物品的 this.targetIndex
						// 请查看示例项目中的代码 
						this.activityJoinRecordId = null;
						getActivityLottery({
							activityId: this.activityId,
							cityName: c_y
						}).then(res => {
							const val = res.data;
							try {
								// console.log('抽奖成功 1= ', this.prizeList)
								this.prizeList.forEach((el, index) => {
									if (el.activityPrizeId === val.prizeId) {
										// console.log('抽奖成功 = ', el)
										this.targetIndex = index;
										this.activityJoinRecordId = val.activityJoinRecordId;
										throw new Error('')
									}

								})
							} catch (e) {
								//TODO handle the exception
							}
							// console.log("this.targetIndex = ", this.targetIndex)
							if (this.targetIndex > -1) {
								data.callback && data.callback(this.targetIndex)
							} else {
								throw new Error('获取奖品错误')
							}
						}).catch(err => {
							data.callback && data.callback(-1)
							this.isRotate = false;
							throw new Error('获取奖品错误')
						})

					} catch (e) {
						//TODO handle the exception
						this.isRotate = false;
						data.callback && data.callback(-1)
					}
				}
			},

			afterClick(data) {
				if (data.type == 'end') {
					// console.log(data.content.count)
					data.callback && data.callback();

					// console.log('handleDrawEnd =旋转结束，执行拿到结果后到逻辑')
					this.getActivityUserInfo_();
					// 完成抽奖后，这里处理你拿到结果后的逻辑
					const prizeVal = this.prizeList[this.targetIndex];
					this.isRotate = false
					this.$refs.WinningRef.onWinning(prizeVal)
				}
			},




			// 查看自己得中奖信息
			onWinningList() {
				uni.navigateTo({
					url: '/pages/game/winning-list'
				})
			},
			// --------商品---------------
			/**猜你喜欢 */
			guessLike() {
				this.status = 'loading';
				getActivityGoods({
					page: this.params.page,
					limit: this.params.limit,
					activityId: this.activityId
				}).then(res => {
					this.goodsList = res.rows
					// 		if (res && res.code == 200) {

					// 			this.goodsList = this.params.page == 1 ? res.rows : this.goodsList.concat(res.rows);
					// 			if (res.total <= res.page.currPage) {
					// 				this.status = "noMore";
					// 			} else {
					// 				this.status = "more";
					// 			}
					// 			// console.log(this.goodsList)
					// 		}

				}).catch(err => {
					// this.status = "noMore";
				})
				// this.$http.get(`/goods/smart`, {
				// 	page: this.params.page,
				// 	limit: this.params.limit,
				// }).then((res) => {
				// 	if (res && res.code == 200) {
				// 		this.goodsList = this.params.page == 1 ? res.page.list : this.goodsList.concat(res.page
				// 			.list);
				// 		if (res.page.totalPage <= res.page.currPage) {
				// 			this.status = "noMore";
				// 		} else {
				// 			this.status = "more";
				// 		}
				// 		// console.log(this.goodsList)
				// 	}
				// }).catch(err => {
				// 	this.status = "noMore";
				// })
			},
			goProductDetails(path) {
				uni.navigateTo({
					url: path
				})
			},
			//分享成功 
			// onShareSuccess(type) {
			// 	// this.$emit('onShareSuccess', "WeChat")download
			// 	let shareMode = null;
			// 	switch (type) {
			// 		case 'download':
			// 			shareMode = 0;
			// 			break;
			// 		case 'WeChat':
			// 			shareMode = 1;
			// 			break;
			// 	}
			// 	setShareRecord({
			// 		activityId: _this.activityId,
			// 		shareMode: shareMode
			// 	}).then(res => {
			// 		console.log("success:1 图片已成功保存到相册");
			// 	})
			// }
		},
		watch: {
			// cacheWinningUser: {
			// 	handler(newV, oldA) {
			// 		if(newV)
			// 	},
			// 	immediate: true
			// }
		}
	}
</script>

<style lang="scss" scoped>
	$padd_: 28rpx;

	.pages {
		width: 750rpx;
		overflow: hidden;
		background-color: #C90700;
	}

	.page-content {
		width: 100%;
		// height: 1432rpx;
		// background-color: #fff;
		padding-top: 353rpx;
		// min-height: 100vh;
		background-size: 100% 1432rpx;
		background-repeat: no-repeat;
	}

	.winning-c {
		width: 100%;
		height: 163rpx;
		padding: 40rpx 0;
	}

	.Lottery-title {
		width: 100%;
		font-size: 40rpx;
		color: #fff;
		font-weight: 600;
		text-align: center;
		padding: 80rpx;
	}

	.winning-user {
		width: 100%;
		height: 83rpx;
		// padding: 0 20rpx 60rpx;
		box-sizing: border-box;
		background: linear-gradient(90deg, rgba(222, 28, 64, 0.00) 11%, #b10424 48%, rgba(222, 28, 64, 0.00) 89%);

		.winning-list {
			// width: 100%;
			height: 83rpx;
			padding: 0 80rpx;
			// background-color: red;
			border-radius: 40rpx;

			.winning-item-box {
				width: 100%;
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC, PingFang SC-Light;
				font-weight: 300;
				color: #ffffff;

				.winning-item {
					width: 100%;
					text-align: center;
				}
			}
		}
	}

	.pedestal-bg {
		position: relative;
		width: 100%;
		// height: 673rpx; + 217
		height: 875rpx;
		background: url("@/static/Lottery/pedestal.png") no-repeat center bottom;
		background-size: 429rpx 217rpx;

		.share-btn {
			position: absolute;
			right: 30rpx;
			bottom: 20rpx;
			width: 120rpx;
			height: 120rpx;
			background: linear-gradient(180deg, #c90700, #981a15);
			// border: 1rpx solid rgba(255, 255, 255, 0.12);
			border-radius: 60rpx;
			box-shadow: 0px -1rpx 34rpx 0px rgba(255, 199, 199, 0.16) inset;
			text-align: center;
			line-height: 119rpx;

			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #ffffff;
		}
	}

	.Lottery-info {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 13rpx $padd_ 14rpx;

		.Lottery-info-item {
			width: calc(50% - 10rpx);
			flex-shrink: 0;
			height: 64rpx;
			line-height: 64rpx;
			text-align: center;
			padding: 0 20rpx;
			background: url("@/static/Lottery/bg_2.png") no-repeat center center;
			background-size: 100% 100%;

			font-size: 28rpx;
			// font-family: .PingFang SC, .PingFang SC-Light;
			// font-weight: 300;
			color: #542f10;
			margin-right: 20rpx;

			&:last-child {
				margin-right: 0;
			}
		}
	}

	// <view class="winning-record">
	// 	<text class="record-text">中奖记录</text>
	// </view>
	.winning-record {
		padding: 20rpx $padd_;
		text-align: right;
		font-weight: 600;
		font-size: 28rpx;
		font-weight: 500;
		color: #fff;

		.iconfont_yige {
			font-size: 26rpx;
			color: #fff;
		}
	}

	.activity-rule-box {
		padding: 0 $padd_;
	}

	.activity-rule-top {
		width: 100%;
		height: 40rpx;
		background: url("@/static/Lottery/bg_1.png") no-repeat top center;
		background-size: 100% 398rpx;
	}

	.activity-rule-boot {
		width: 100%;
		height: 40rpx;
		background: url("@/static/Lottery/bg_1.png") no-repeat bottom center;
		background-size: 100% 398rpx;
	}

	.activity-rule {
		padding: 0 40rpx;
		background: url("@/static/Lottery/bg_1.png") no-repeat center center;
		background-size: 100% 10000%;

		.rule-title {
			// font-size: 32rpx; 
			font-weight: 600;

			font-size: 28rpx;
			// font-family: .PingFang SC, .PingFang SC-Medium;
			font-weight: 500;
			color: #1a1a1a;
		}

		.rule-list {
			// padding-top: 18rpx;
			// font-size: 24rpx;
			// font-weight: 300;
			// color: #666666;

			/deep/ img,
			/deep/ video {
				max-width: 100%;
			}
		}
	}

	.goods-boxs {
		padding: 90rpx $padd_ 0;
	}

	.goods-box {
		background: #fff4ea;
		padding: 92rpx 20rpx 10rpx;
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		margin-top: $zw-gap;
		border: 6rpx solid #e72726;
		border-radius: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		position: relative;

		.goods-module-title {
			position: absolute;
			left: 50%;
			top: -40rpx;
			transform: translateX(-50%);
			width: 337rpx;
			height: 114rpx;
			text-align: center;
			line-height: 80rpx;
			background: url('@/static/Lottery/goods.png') no-repeat center center;
			background-size: 100% 100%;
			font-size: 28rpx;
			// font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			color: #ffffff;
		}

		.goods-item {
			width: 316rpx;
			height: 482rpx;
			// margin-right: 18rpx;
			margin-bottom: 38rpx;
			background: #ffffff;
			border-radius: 18rpx;
			overflow: hidden;
			box-shadow: 0 2rpx 12rpx 0 rgba(0, 0, 0, 0.1);

			// &:nth-child(2n) {
			// 	margin-right: 0;
			// }

			.goods-img {
				width: 316rpx;
				height: 316rpx;
				border-radius: 18rpx 18rpx 0 0;
				vertical-align: middle;
			}

			.goods-info {
				padding: 0 20rpx 20rpx;
				padding-top: 14rpx;
				height: calc(100% - 316rpx);
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.goods-title {
					// height: 90rpx;
					margin-bottom: 10rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.goods-price {
					display: flex;
					align-items: baseline;
					color: #FF6600;
					font-size: 36rpx;

					.line-price {
						font-size: 22rpx;
						color: #999999;
						margin-left: 16rpx;
						text-decoration: line-through;
					}
				}
			}
		}
	}
</style>