high-mini/subPages/lottery/lottery.vue

<template>
	<view class="almost-lottery">
		<!-- head -->
		<image :src="imagewxUrl+imgadres1" mode="widthFix" class="width100"></image>
		<view class="almost-lottery__wheel">
			<AlmostLottery :lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize"
				:ring-count="2" :duration="5" :prize-list="prizeList" :prize-index="prizeIndex"
				@reset-index="prizeIndex = -1" @draw-start="handleDrawStart" @draw-end="handleDrawEnd"
				@finish="handleDrawFinish" v-if="prizeList.length" />
		</view>
		<view class="almost-lottery__rule">
			<view class="_notice">
				<swiper class="_swiper tc" indicator-dots="false" autoplay="true" :interval="interval" circular="true"
					display-multiple-items="2" :duration="duration">
					<swiper-item>
						<view class="swiper-item uni-bg-red"></view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-red"></view>
					</swiper-item>
					<swiper-item v-for="(item,index) in list" :key="index">
						<view class="swiper-item uni-bg-red">恭喜{{item.phone}}获得{{item.awardName}}</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="font14 fotct mart10 marb10">拥有{{ LotteryNum }}次抽奖机会</view>
			<view class="rule-head">
				<view class="line"></view>
				<text class="title">活动规则</text>
				<view class="line"></view>
			</view>
			<view class="rule-body">
				<view class="item">
					<rich-text class="text font14" :nodes="activityInfo"></rich-text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import AlmostLottery from '../../uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
	import {
		getActivityByCoupon,
		userLottery,
		getUserLotteryNum,
		getWinLotteryList
	} from '../../Utils/Api.js';
	let app = getApp();
	export default {
		name: 'Home',
		components: {
			AlmostLottery
		},
		data() {
			return {
				imageUrl: app.globalData.imgUrl,
				imagewxUrl: app.globalData.imageWxImg,
				imgadres1: 'activityhead.png',
				//活动id
				activityId : '',
				//获取中间参数
				userLotteryId:'',
				//抽奖次数
				LotteryNum:'',
				//活动描述
				activityInfo:'',
				//卡券id
				couponId:'',
				// 开启调试模式
				isDev: true,
				background: ['color1', 'color2', 'color3'],
				indicatorDots: false,
				autoplay: true,
				interval: 2000,
				duration: 500,
				// 以下是转盘配置相关数据
				lotteryConfig: {
					// 抽奖转盘的整体尺寸，单位rpx
					lotterySize: 600,
					// 抽奖按钮的尺寸，单位rpx
					actionSize: 200
				},

				// 以下是转盘 UI 配置
				// 转盘外环图
				lotteryBg: 'https://raw.githubusercontent.com/ialmost/almost-components_uniapp/dev/Lottery/almost-lottery_sample/static/lottery-bg.png',
				// 抽奖按钮图
				actionBg: 'https://raw.githubusercontent.com/ialmost/almost-components_uniapp/dev/Lottery/almost-lottery_sample/static/action-bg.png',

				// 以下是奖品配置数据
				// 奖品数据
				prizeList: [],
				// 奖品是否设有库存
				onStock: true,
				// 中奖下标
				prizeIndex: -1,

				// 是否正在抽奖中，避免重复触发
				prizeing: false,

				// 以下为中奖概率有关数据
				// 是否由前端控制概率，默认不开启，强烈建议由后端控制
				onFrontend: false,
				// 权重随机数的最大值
				prizeWeightMax: 0,
				// 权重数组
				prizeWeightArr: [],

				// 以下为业务需求有关示例数据
				// 金币余额
				goldCoin: 600,
				// 当日免费抽奖次数余额
				freeNum: 3,
				// 每次消耗的金币数
				goldNum: 20,
				// 每天免费抽奖次数
				freeNumDay: 3,
				interval: 3000,
				duration: 12000,
				list: []
			}
		},
		computed: {
			isApple() {
				return uni.getSystemInfoSync().platform === 'ios'
			}
		},
		methods: {
			changeIndicatorDots(e) {
				this.indicatorDots = !this.indicatorDots
			},
			changeAutoplay(e) {
				this.autoplay = !this.autoplay
			},
			intervalChange(e) {
				this.interval = e.target.value
			},
			durationChange(e) {
				this.duration = e.target.value
			},
			// 重新生成
			handleInitCanvas() {
				this.prizeList = []
				this.getActivityByCoupon()
			},
			// 获取中奖奖品
			userLottery() {
				let params = {
					activityId: this.activityId
				}
				userLottery(params).then(res => {
					if (res.return_code == '000000') {
						this.userLotteryId = res.return_data.activityAwardId;
						this.remoteGetPrizeIndex();
					}else{
						uni.showToast({
							title: res.return_msg,
							icon: 'none',
							duration: 2000
						})
					}
				});
			},
			//中奖次数
			getUserLotteryNum(){
				let params = {
					activityId: this.activityId
				}
				getUserLotteryNum(params).then(res => {
					if (res.return_code == '000000') {
						this.LotteryNum = res.return_data;
					}
				});
			},
			//中奖名单
			getWinLotteryList(){
				let params = {
					activityId: this.activityId
				}
				getWinLotteryList(params).then(res => {
					if (res.return_code == '000000') {
						this.list =  res.return_data;
					}
				});
			},
			// 获取奖品列表
			getActivityByCoupon() {
				uni.showLoading({
					title: '奖品准备中...'
				})
				let params = {
					couponId: this.couponId
				}
				getActivityByCoupon(params).then(res => {
					uni.hideLoading();
					if (res.return_code == '000000') {
						let prizeLists = res.return_data.activityAward;
						this.activityId = res.return_data.activityInfo.id;
						let prizesList = [];

						prizeLists.map((r) => {
							const pris = new prizeListNew();
							pris.prizeId = r.id;
							pris.prizeImage = this.imageUrl + r.img;
							pris.prizeName = r.name;
							pris.prizeStr = r.prizeStr;
							prizesList.push(pris);
						})
						this.activityInfo =  this.transform(res.return_data.activityInfo.content);
						this.prizeList = prizesList;
						this.getUserLotteryNum();
						this.getWinLotteryList();
					}
				});
			},
			//换行
			transform(value){
			  value = value.replace(/\r\n/g, '<br/>');
			  value = value.replace(/\n/g, '<br/>');
			  return value;
			},
			// 本次抽奖开始
			handleDrawStart() {
				if(this.LotteryNum <= 0){
					uni.showToast({
						title: '当前抽奖次数不足',
						icon: 'none',
						duration: 2000
					})
					return;
				}
				this.userLottery();
			},
			// 远程请求接口获取中奖下标
			// 大哥，这里只是模拟，别告诉我你不会对接自己的接口
			remoteGetPrizeIndex() {
				console.warn('###当前处于模拟的请求接口，并返回了中奖信息###')
				// 模拟请求接口获取中奖信息
				let stoTimer = setTimeout(() => {
					clearTimeout(stoTimer)
					stoTimer = null
					let list = [...this.prizeList]
					// 这里随机产生的 prizeId 是模拟后端返回的 prizeId
					let prizeId = this.userLotteryId;
					// 拿到后端返回的 prizeId 后，开始循环比对得出那个中奖的数据
					for (let i = 0; i < list.length; i++) {
						let item = list[i]
						if (item.prizeId === prizeId) {
							// 中奖下标
							this.prizeIndex = i
							break
						}
					}
				}, 200)
			},
			// 本次抽奖结束
			handleDrawEnd() {
				console.log('旋转结束，执行拿到结果后到逻辑')
				// 旋转结束后，开始处理拿到结果后的逻辑
				this.prizeing = false
				let prizeName = this.prizeList[this.prizeIndex].prizeName;
				let prizeStr = this.prizeList[this.prizeIndex].prizeStr;
				let tipContent = ''
				// if (prizeName === '参与奖') {
				// 	tipContent = '很遗憾，没有中奖，请再接再厉！'
				// } else {
					tipContent = `恭喜您获得了${prizeName} : `+` ${prizeStr}`+` , 请前往我的优惠券查看`
				
				// }
				this.getUserLotteryNum();
				this.getWinLotteryList();
				uni.showModal({
					content: tipContent,
					showCancel: false
				})
			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				console.log('抽奖转盘绘制完成', res)

				uni.showToast({
					title: res.msg,
					mask: true,
					icon: 'none'
				})
			}
		},
		onLoad(options) {
			this.couponId = options.id
			// this.handleInitCanvas();
		},
		onShow() {
			this.handleInitCanvas();
		},
		onUnload() {
			uni.hideLoading()
		}
	}
	export class prizeListNew {
		prizeId = ''
		prizeName = ''
		prizeImage = ''
		prizeStr = ''
	}
</script>

<style lang="scss" scoped>
	._notice {
		position: fixed;
		left: 0;
		top: 0;
		/* #ifdef H5 */
		top: 88upx;
		/* #endif */
		z-index: 9;
		width: 100%;
		background: rgba(72, 1, 1, 0.3);
		font-size: 20upx;
		height: 44upx;
		color: #ffffff;
		border-radius: 6upx;
		overflow: hidden;
		box-sizing: border-box;

	}

	._swiper {
		line-height: 44upx;
	}

	.almost-lottery {
		flex: 1;
		background-color: #FF893F;
	}

	.almost-lottery__wheel {
		margin-top: 30rpx;
		text-align: center;

		.almost-lottery__count {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			padding: 40rpx 0;
		}

		.text {
			color: #FFFFFF;
			font-size: 24rpx;
		}
	}

	.almost-lottery__rule {
		padding: 0 28rpx;
		color: #FFF8CB;

		.rule-head {
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin: 40rpx 0;

			.line {
				flex: 1;
				height: 1px;
				background-color: #FFF3A5;
			}

			.title {
				width: 280rpx;
				color: #F63857;
				line-height: 70rpx;
				text-align: center;
				margin: 0 20rpx;
				border-radius: 8rpx;
				background-image: linear-gradient(0deg, rgba(255, 242, 158, 1), rgba(255, 244, 168, 1));
			}
		}

		.rule-body {
			color: #FFF8CB;
			font-size: 24rpx;
			padding: 10rpx 0 40rpx;

			.item {
				display: flex;
				margin-bottom: 10rpx;
			}

			.number {
				position: relative;
				top: 4rpx;
				width: 28rpx;
				height: 28rpx;
				line-height: 28rpx;
				text-align: center;
				border-radius: 50%;
				margin-right: 10rpx;
			}

			.text {
				flex: 1;
				margin-top: 1px;
			}

			.item-rule .text {
				display: flex;
				margin-top: 1px;
				flex-direction: column;
			}
		}
	}
</style>