yicangzongtai_app_240321/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+')'}">
			<!-- <view class="Lottery-title">
				{{activityInfo.activityName}}
			</view> -->
			<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>
							<!-- <text>恭喜用户</text>
							<text>{{item.userName}}</text>
							<text>获得{{current}}</text>
							<text>{{item.prizeName}}</text> -->
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!-- strDirection="vertical" -->

			<view class="pedestal-bg">
				<template v-if="prizeList.length">W
					<almost-lottery :lotteryBg="lotteryBg" :actionBg="pointerBg" :strFontColors="['#542f10']"
						:strFontSize="28" :strMarginOutside="40" :imgMarginStr="40" :colors="colors"
						:canvasMarginOutside="100" :lottery-size="673" pointerPosition="middle" :ring-count="8"
						:duration="5" :imgDrawed="true" :canvasCached="false" :prize-list="prizeList"
						:prize-index="prizeIndex" @draw-before="handleDrawBefore" @reset-index="prizeIndex = -1"
						@draw-start="handleDrawStart" @draw-end="handleDrawEnd" @finish="handleDrawFinish" />
				</template>
				<!-- <image src="@/static/Lottery/pedestal.png" mode=""></image> -->

				<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>
		<!-- <loadMore 
		posterUrl: {
			type: String,
			default: null
		},
		codeUrl: {
			type: String,
			default: null 	
		},v-if="goodsList.length > 0 || status === 'loading'" :status="status"></loadMore> -->
		<Winning ref="WinningRef" :activityJoinRecordId="activityJoinRecordId" />
		<sharePoster ref="sharePosterRef" :posterUrl="activityInfo.posterUrl" :codeUrl="codeurl"
			@onShareSuccess="onShareSuccess" />
		<!-- <template v-if="activityInfo.posterUrl">
			<share ref="shareRef" :posterUrl="activityInfo.posterUrl" :activityId="activityId" />
		</template> -->
		<!-- <jifenhint ref="jifenhintRef" :singleExchangePoints="activityInfo.singleExchangePoints"/> -->
	</view>
</template>

<script>
	import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue';
	// https://github.com/ialmost/almost-components_uniapp/blob/dev/Lottery/almost-lottery_sample/pages/index/index.vue
	// https://ext.dcloud.net.cn/plugin?id=1030
	import Winning from "./popup/Winning.vue"

	import CONFIG from "@/config/global.config.js"
	// import jifenhint from "./popup/jifenhint.vue"
	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: {
			AlmostLottery,
			Winning,
			// share,
			// jifenhint
		},
		data() {
			return {
				codeurl: null,
				location: null,
				config: {
					back: true,
					title: '转盘抽奖',
					color: 'white',
					backgroundColor: [0, '#fff'],
					statusBarFontColor: 'transparent',
					barPlaceholder: false
				},
				backColor: '',
				activityId: null, //  活动ID
				activityInfo: {},

				// 转盘
				lotteryBg: require("@/static/Lottery/circle.png"),
				pedestalBg: require("@/static/Lottery/pedestal.png"),
				pointerBg: require("@/static/Lottery/pointer.png"),
				colors: ["#F0DDAE", "#F6F0E7"],

				// 以下是奖品配置数据
				// 奖品数据
				prizeList: [],
				// 中奖下标
				prizeIndex: -1,
				prizeThanks: -1,
				activityJoinRecordId: null,
				// 抽奖次数
				freeResidueNum: 0,
				integral: 0,
				// 中奖用户
				current: 0,
				WinningUserList: [],
				cacheWinningUser: [],
				clearWinningTime: null,



				// ----商品----
				status: '',
				params: {
					page: 1,
					limit: 6
				},
				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 => {
					this.activityInfo = res.data || {};

					let list = this.activityInfo.prizes || []
					// prizeId	奖品对应 ID	Number
					// prizeName	奖品名称	String
					// prizeStock	奖品库存	Number
					// prizeWeight	奖品权重	Number
					// prizeImage	奖品图片地址，网络图片仅支持http和https协议	String
					// let list = res.data || [];
					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);
						// if (el.prizeGrade === 20) {
						// 	// 记录谢谢惠顾的下标，网络失败之后弹窗
						// 	this.prizeThanks = index
						// }
						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);
						// if (el.prizeGrade === 20) {
						// 	// 记录谢谢惠顾的下标，网络失败之后弹窗
						// 	this.prizeThanks = index
						// }
						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 handleDrawBefore(callback) {
				// 这里需要处理你抽奖之前的逻辑
				// 请查看示例项目中的代码
				// 必须调用 callback 并传递一个布尔值，布尔值为 true 时，转盘才会开始旋转
				let flag = false
				try {
					if (this.activityInfo.areaLimit) {
						// 	抽奖限制地区 - 检查是否定位
						if (!this.location || !this.location.city) {
							flag = false;
							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) {
						flag = true
					} else if (this.activityInfo.pointExchangeLottery) {
						flag = false
						// 当允许积分抽奖的时候
						// if (this.integral >= this.activityInfo.singleExchangePoints) {
						// 	const Modal = await uni.showModal({
						// 		content: `是否消耗${this.activityInfo.singleExchangePoints}抽一次奖`,
						// 	});
						// 	flag = Modal[1].confirm || false;
						// } else {
						// 	uni.showToast({
						// 		title: '当前积分不够抽一次',
						// 		icon: 'none'
						// 	})
						// }
						const Modal = await uni.showModal({
							content: `是否消耗${this.activityInfo.singleExchangePoints}抽一次奖`,
						});
						flag = Modal[1].confirm || false;
					} else {
						flag = false
						uni.showToast({
							title: '当前抽奖次数已用完',
							icon: 'none'
						})
					};
				} catch (e) {
					//TODO handle the exception
				}
				callback(flag)
			},
			// 本次抽奖开始
			handleDrawStart() {
				// console.log('本次抽奖开始')
				// 这里需要处理你的抽奖逻辑，并得出中奖物品的 prizeIndex
				// 请查看示例项目中的代码 
				this.activityJoinRecordId = null;
				getActivityLottery({
					activityId: this.activityId,
					cityName: this.location.city || undefined
				}).then(res => {
					const val = res.data;
					try {
						this.prizeList.forEach((el, index) => {
							if (el.activityPrizeId === val.prizeId) {
								// console.log('抽奖成功 = ', index)
								this.prizeIndex = index;
								this.activityJoinRecordId = val.activityJoinRecordId;
								throw new Error('')
							}

						})
					} catch (e) {
						//TODO handle the exception
					}

				})

			},
			// 本次抽奖结束
			handleDrawEnd() {
				// console.log('handleDrawEnd =旋转结束，执行拿到结果后到逻辑')
				this.getActivityUserInfo_();
				// 完成抽奖后，这里处理你拿到结果后的逻辑
				const prizeVal = this.prizeList[this.prizeIndex];
				this.$refs.WinningRef.onWinning(prizeVal)
			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				// 抽奖转盘准备就绪后，这里处理你的逻辑
				// 请查看示例项目中的代码
				// console.log('抽奖转盘绘制完成')
			},

			// 查看自己得中奖信息
			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;
		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: space-between;
		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;
		}
	}

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