web-base-h5/components/giftDrwal/index.vue

<template>
	<view>
		<u-popup :show='newVip' mode="center">
			<view class="wrap_close_center">
				<img :src="closeImg" @click="clickClose" />
			</view>
			<view class="gameBox">
				<view class="start" @click="move">
					<view class="lovesmart">
						<img src="@../../static/images/lovesmart.png" alt="" />
					</view>
					<view class='starttitle'>
						<view class="thestarttext">{{'开始'}}</view>
						<p>{{'可抽奖次数'}}：{{ number_of_draws }}</p>
					</view>
				</view>

				<ul>
					<li v-for="(item, i) in giftList" :key="i" :class="['item' + (i + 1), { active: index == i }]">
						<view class="img1">
							<img :src="item.giftCover" alt="" />
						</view>

						<p>{{ item.giftName }}</p>
					</li>
				</ul>
			</view>
		</u-popup>
		<!-- 抽奖获得产品 -->
		<u-popup class="chanpin" mode="center" :show="prizeShow">
			<div class="wrap">
				<div class="turntable">
					<div class="bg-closes">
						<div class="bg-img">
							<image src="../../static/images/bg-cologs.jpg"></image>
						</div>
						<div>
							<img class="close-icons" style="width: 25rpx; height: 25rpx" :src="closeImg1"
								@click="prizeClose" />
						</div>
						<div class="prize" style="position: relative;z-index: 11;display: block;align-items: none;">
							<div class="width-flex-s">
								<div class="top_texts" style="margin-top:110rpx;background-image: none;">{{'恭喜你获得'}}</div>
								<div class="top_texts overflow1">
									{{ productData.giftName || "" }}
								</div>
							</div>
							<div class="banner-bottom">
								<swiper v-if="productData.acGiftConfigList.length>2" circular="true" vertical="true"
									autoplay="true" interval="3000" duration="1000" class="margin-right30 swiperBox">
									<swiper-item v-for="(item,index) in productData.acGiftConfigList" :key="index"
										class="row-me row-center swiperItem">
										<div class="item-s" v-for="(item, index) in productData.acGiftConfigList"
											:key="index">
											<div class="product">{{'产品'}}：{{item.productName}} x{{item.quantity}}</div>
											<div class="price">{{'价值'}}：{{ item.retailPrice | numFilter }}{{'元'}}</div>
										</div>
									</swiper-item>
								</swiper>
								<div v-else>
									<div class="item-s" style="align-items: center"
										v-for="(item, index) in productData.acGiftConfigList" :key="index">
										<div class="product">{{'产品'}}：{{item.productName}} x{{item.quantity}}</div>
										<div class="price">{{'价值'}}：{{ item.retailPrice | numFilter }}{{'元'}}</div>
									</div>
								</div>
							</div>

							<div style="text-align: center">
								<img class="margin-tops" style="height: 150px;margin-top: 110rpx"
									:src="productData.giftCover" />
							</div>
						</div>
					</div>
				</div>
			</div>
		</u-popup>
		<!-- 充值抽奖次数 -->
		<u-popup mode="center" :show="rechargeShow" class="pay_password" closeable @close="rechargeShow=false">
			<view class="pay_item">
				<view class="pay_pt1">{{'充值抽奖次数'}}</view>
				<view style="font-size: 26rpx;margin: 20rpx 0;">
					<view>{{'抽奖次数'}}：{{totalSurplusNum}}</view>
					<view>{{'可抽奖次数'}}：0</view>
				</view>
				<u-input type="number" :placeholder="'请输入充值次数'" v-model="keyValue" clearable>
				</u-input>

				<view class="czbtnbox">
					<u-button class="btn" shape="circle" color="#D61820" @click="closeBtn">{{'充值'}}</u-button>
				</view>
			</view>
		</u-popup>
		<!-- <Pay :isPay="isPay" @closePay="closePay" :paramsPost="paramsPost"></Pay> -->
	</view>
</template>

<script>
	import * as act from "@/config/activity.js";
	// import Pay from "@/components/Pay.vue";
	export default {
		// components: {
		//   Pay,
		// },
		data() {
			return {
				isPay: false,
				giftList: [{
						id: 1,
						number: 15,
						prize_name: "欢乐豆1"
					},

					{
						id: 2,
						number: 15,
						prize_name: "欢乐豆2"
					},

					{
						id: 3,
						number: 15,
						prize_name: "欢乐豆3"
					},

					{
						id: 4,
						number: 15,
						prize_name: "欢乐豆4"
					},

					{
						id: 5,
						number: 15,
						prize_name: "欢乐豆5"
					},

					{
						id: 6,
						number: 15,
						prize_name: "欢乐豆6"
					},

					{
						id: 7,
						number: 15,
						prize_name: "欢乐豆7"
					},

					{
						id: 8,
						number: 15,
						prize_name: "欢乐豆8"
					},
				], //奖品列表

				index: 0, // 当前转动到哪个位置，第一次起点位置0,对应页面item1位置
				count: 8, // 总共有多少个位置
				times: 0, // 转动跑格子次数,
				cycle: 50, // 转动基本次数：即至少需要转动多少次再进入抽奖环节
				speed: 120, // 初始转动速度
				timer: 0, // 转动定时器
				lamp: 0, // 灯光定时器
				prize: 0, // 中奖位置，接口返回
				number_of_draws: 0, //限制每天抽奖次数，接口返回
				productData: {
					acGiftConfigList: [{
						productName: ""
					}],
				}, //中奖信息
				prize_data: {
					//中奖信息
					id: Number, //奖品ID
					name: "", //奖品名称
					number: Number, //奖品数量
					image: "", //奖品图片
					type: Number, // 奖品类型
				},
				newVip: false,
				pkId: "",
				prizeShow: false, //奖品
				closeImg: require("@/static/images/close.png"),
				closeImg1: require("@/static/images/close1.png"),
				rechargeShow: false,
				keyValue: "", //充值抽奖次数
				totalSurplusNum: "", //可购买次数
				paramsPost: {},
			};
		},
		filters: {
			numFilter (value) {
				// 截取当前数据到小数点后两位
				let realVal = parseFloat(value).toFixed(2)
				return realVal
			}
		},
		methods: {
			closePay(val) {
				if (val) {
					this.isPay = false;
				} else {
					this.isPay = false;
					// this.$confirm("确认取消支付？")
					// 	.then((_) => {
					// 		this.isPay = false;
					// 		// this.$router.replace({
					// 		//   path: "/order/myOrder",
					// 		// });
					// 	})
					// 	.catch((_) => {});
				}
			},
			// 充值抽奖次数
			closeBtn() {
				if (
					this.keyValue &&
					Number(this.keyValue) > 0 &&
					Number(this.keyValue) <= this.totalSurplusNum
				) {
					this.rechargeShow = false;
					act
						.drawOnlinePayDraw({
							payNum: Number(this.keyValue),
							pkBaseId: this.pkId,
						})
						.then((res) => {
							this.paramsPost = {
								orderType: "4",
								type: "0",
								orderCode: res.data.actCode,
								specialArea: "4",
								address: "0", //订单ID 不需要随便传个占位
								luckydrawData: {
									pkBaseId: this.pkId,
									payNum: Number(this.keyValue),
								},
							};

							uni.navigateTo({
								url: '/pages/pay/index?paramsPost=' + JSON.stringify(this.paramsPost),
							})
						})
						.catch((error) => {
							this.rechargeShow = true;
						});
				} else {

					uni.showToast({
						title: '提示',
						content: '请输入正确的充值次数',
						// success: (res) => {

						// },
					})
				}
			},
			clickClose() {
				this.newVip = false;
			},
			//关闭获得商品弹窗
			prizeClose() {
				this.prizeShow = false;
			},
			//查询转盘抽奖次数
			getDrawNum(val) {
				act.getLotteryDrawNum({
					pkBaseId: val
				}).then((res) => {
					if (res.code == 200) {
						this.number_of_draws = res.data.availableSurplusNum;
						this.totalSurplusNum = res.data.totalSurplusNum;
					}
				});
			},
			getGiftList(val) {
				this.pkId = val;
				act
					.getDrawPrizeList({
						pkBaseId: val,
					})
					.then((res) => {
						if (res.code == 200) {
							if (res.rows.length > 0) {
								this.newVip = true;
								this.giftList = res.rows;
								this.getDrawNum(val);
							} else {
								this.newVip = false;
							}
						}
					});
			},
			move() {
				if (this.number_of_draws == 0) {
					this.newVip = false;
					this.rechargeShow = true;
				} else if (this.times != 0) {
					// this.$message({
					// 	message: "正在抽奖中，请勿重复点击",
					// 	type: "warning",
					// });
					uni.showToast({
						title: '提示',
						content: '正在抽奖中，请勿重复点击',
						// success: (res) => {

						// },
					})

				} else {
					act.getLotteryDraw({
						pkBaseId: this.pkId
					}).then((res) => {
						if (res.code == 200) {
							this.giftList.forEach((ele, index) => {
								if (ele.pkId == res.data.pkId) {
									this.prize = index; //中奖位置赋值，跑马灯最终停留位置，这里实际位置需要-1
								}
							});
							//中奖奖品信息
							this.productData = res.data;

							this.getDrawNum(this.pkId);
							this.speed = 120; //每次抽奖速度初始化为200
							this.startRoll(); //执行抽奖
						}
					});


				}
			},

			// 开始转动

			startRoll() {
				this.times += 1; // 转动次数
				this.oneRoll(); // 转动过程调用的每一次转动方法，这里是第一次调用初始化
				this.usePrize();
			},

			// 每一次转动

			oneRoll() {
				let index = this.index; // 当前转动到哪个位置
				const count = 8; // 总共有多少个位置
				index += 1;
				if (index > count - 1) {
					index = 0;
				}
				this.index = index;
			},

			usePrize() {
				// 如果当前转动次数达到要求 && 目前转到的位置是中奖位置

				console.log(this.times);

				if (this.times > this.cycle && this.prize === this.index) {
					clearTimeout(this.timer); // 清除转动定时器

					clearTimeout(this.lamp); // 清除灯光定时器
					this.times = 0; // 转动跑格子次数初始化为0，可以开始下次抽奖
					this.prizeShow = true;
				} else {
					if (this.times < this.cycle - 10) {
						// this.speed -= 4; // 加快转动速度
					} else {
						this.speed += 10; // 抽奖即将结束，放慢转动速度
					}

					this.timer = setTimeout(this.startRoll, this.speed); //开始转动
				}
			},
		},
	};
</script>

<style lang="scss" scoped>
	uni-swiper {
		height: 31px;
		width: 100%;
	}

	.close-icons {
		position: absolute;
		right: 30rpx;
		top: 30rpx;
		cursor: pointer;
	}

	.seamless-warp {
		//margin-top: 30px;
		padding-top: 20px !important;
		padding: 10px 20px;
		height: 150px;
	}

	.product {
		color: #fff;
		font-size: 12rpx;
		margin-left: 15rpx;
		width: 120px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.price {
		margin-right: 15rpx;
		color: #005BAC;
		font-size: 12rpx;
		//width: 120px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.width-flex-s {
		// width: 700rpx;
		justify-content: center;
		align-items: center;
		// display: flex;
		text-align: center;
		font-size: 40rpx;
		color: #005BAC;
		// margin-top: -130rpx;
		// margin-left: -50rpx;
	}

	.bg-img {
		image {
			width: 650rpx;
			height: 850rpx;
			position: absolute;
		}
	}

	.bg-closes {
		width: 650rpx;
		height: 850rpx;
		// background: url("~@/assets/images/bg-cologs.jpg") no-repeat;
		// margin-top: 0rpx;
		position: relative;
	}

	.item-s {
		//margin-bottom: 15rpx;
		display: flex;
		justify-content: space-between;
		width: 470rpx;
	}

	.banner-bottom {
		width: 470rpx;
		height: 75rpx;
		position: absolute;
		left: 90rpx;
		bottom: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		//padding: 10px;
	}

	::v-deep .u-popup__content {
		background-color: rgba(0, 0, 0, 0);
	}

	.pay_password {
		display: flex;
		flex-direction: column;
		align-items: center;


		.pay_item {
			background: #fff;
			height: auto;
			border-radius: 10rpx 10rpx 0 0;
			padding: 42rpx;
			text-align: center;
			font-size: 28rpx;
			color: #202020;
			width: 500rpx;

			.pay_pt1 {
				margin-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: bold;
			}

			.czbtnbox {
				display: flex;
				justify-content: center;
				// margin: 30rpx auto 0 auto;
				margin-top: 30rpx;
			}
		}
	}

	.wrap_close_center {
		display: flex;
		justify-content: center;

		img {
			width: 40rpx;
			height: 40rpx;
			cursor: pointer
		}
	}

	.wrap {
		display: flex;
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 100%;
		height: 100%;

		.turntable {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			background-color: rgba(0, 0, 0, 0.5);
			height: 100vh;
			margin: auto;
			width: 100%;
		}

		.wrap_close_center {
			z-index: 100010;
			display: flex;
			justify-content: center;
			width: 325rpx;
			height: 120rpx;
		}

		.turntable_top {
			position: relative;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 40rpx;
			// width: 325rpx;

			.top_img {
				position: absolute;
				top: -20rpx;
				bottom: 0;
			}

			.top_text {
				font-size: 42.5rpx;
				letter-spacing: 0rpx;
				line-height: 45rpx;
				color: #f33030;
				// background-image: -webkit-linear-gradient(top, #f33030, #f33030);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				font-weight: bold;
			}
		}

		.footer_text {
			font-size: 24rpx;
			background-image: -webkit-linear-gradient(top, #0be9fe, #45b5fe);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			margin-top: 65rpx;
			text-align: center;
		}

		.prize {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 650rpx;
			height: 650rpx;
			background-size: 100% auto;
			background-repeat: no-repeat;

			.top_text {
				height: 100rpx;
				font-size: 40rpx;
				background-image: -webkit-linear-gradient(top, #ffffff, #ffffff);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				margin-top: 80rpx;
				text-align: center;
				padding: 0 50rpx;
			}
		}

		.turntableNum {
			width: 420rpx;
			height: 600rpx;
			background-image: linear-gradient(#c1edff, #02f2fe);
			margin-top: 50rpx;
			border-radius: 10rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.item {
				width: 385rpx;
				height: 529rpx;
				background-color: #ffffff;
				padding-top: 70rpx;

				.top {
					display: flex;
					flex-direction: column;
					font-size: 36rpx;
					color: #3ea5e1;
					text-align: center;
					line-height: 30rpx;

					.bottomcishu {
						margin-top: 40rpx;
					}
				}

				.btn_box {
					display: flex;
					justify-content: center;
					margin: 250rpx auto 0 auto;
				}
			}
		}
	}


	.gameBox {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 700rpx;
		height: 670rpx;
		margin: auto;
		border-radius: 8rpx;
		background: url("~@/static/images/giftDrwalbg.gif") no-repeat;
		background-size: 100% 100%;
		position: relative;

		.start {
			position: relative;
			// padding-top:20px;
			width: 160rpx;
			height: 140rpx;
			top: 0rpx;
			left: 32rpx;
			cursor: pointer;
			// background: linear-gradient(0deg, #ff6a00, #fed8bc);
			display: flex;
			// align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #ffffff;
			border-radius: 35rpx;

			.lovesmart {
				display: flex;
				justify-content: flex-end;

				img {
					width: 30rpx;
					height: 30rpx;
				}
			}

			.starttitle {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.thestarttext {
				// margin-top: 10px;
				color: #fced99;
				font-size: 38rpx;
				font-weight: 600;
			}

			p {
				// margin-bottom: 5rpx;
				margin: 10rpx 0;
				font-size: 12rpx;
				font-weight: 400;
				color: #fced99;

				//   color: rgba(255, 255, 255, 1);
			}

			// p {
			// 	font-size: 12rpx;
			// 	font-weight: 400;
			// }
		}

		ul {
			list-style: none;

			li {
				position: absolute;
				width: 160rpx;
				height: 153rpx;
				background-color: (0, 0, 0, 0.02);
				// background: linear-gradient(0deg, #fffdd6, #fffefb);
				border: 4rpx solid #ff6a00;
				border-radius: 38rpx;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				.img1 {
					width: 80rpx;
					height: 80rpx;

					img {
						width: 100%;
						height: auto;
					}
				}

				p {
					text-align: center;

					font-size: 13rpx;

					font-weight: 500;

					color: #fff;
				}
			}

			.item1 {
				left: 82rpx;

				top: 84rpx;
			}

			.item2 {
				left: 262rpx;
				top: 84rpx;
			}

			.item3 {
				left: 442rpx;

				top: 84rpx;
			}

			.item8 {
				left: 82rpx;

				top: 260rpx;
			}

			.item4 {
				left: 442rpx;

				top: 260rpx;
			}

			.item7 {
				left: 82rpx;

				top: 434rpx;
			}

			.item6 {
				left: 262rpx;

				top: 434rpx;
			}

			.item5 {
				left: 442rpx;

				top: 434rpx;
			}

			.active {
				 background:  linear-gradient(-20deg, rgb(249, 84, 19), rgba(253, 252, 252, 0.6));
				// background: #fff600;
			}
		}
	}
</style>