JP-ChargeTeam51/pages/temporary/20241111/doubleElevenLottery.vue

<template>
	<view>
		<u-modal title="恭喜" confirm-text="前往查看" cancel-color="#333333" :show-cancel-button="true"
			@confirm="modalConfirm" cancel-text="关闭" :title-style="{color: '#101010',fontSize:'48rpx'}"
			confirm-color="#00B962" v-model="show">
			<view class="slot-content">
				<p>恭喜您！获得本次抽奖的幸运大奖</p>
				<p>奖品：<span style="color:#F08736 ;font-weight: bold;">{{resultObj.name}}</span></p>
				<p></p>
			</view>


		</u-modal>

		<ujp-navbar title="双11抽奖转盘" :zIndex="999999" :isBack="false"></ujp-navbar>
		<view class="top">
			<img class="cover" src="@/assets/img/topCover.png" alt="" />
			<img class="img1" src="@/assets/img/doubleEleven3x.png" alt="" />
			<img class="img2" src="@/assets/img/doubleElevenLogo.png" alt="" />

		</view>
		<view class="lotteryBox">
			<img class="cover2" src="@/assets/img/cover2.png" alt="" />
			<view class="chance">
				您有 {{useNum}} 次抽奖机会
			</view>
			<Lottery class="lottery" :width="550" :height="550" :data="dataLottery" @end="showlottery=false"
				ref="refLottery" @clickBtn="clickBtn" @playRewardEnd="playRewardEnd" :setWinnerFn="getWinnerFn">
			</Lottery>
		</view>
		<view class="listBox">

			<view class="head">
				<view class="head2">

					<view class="contentHead">

					</view>
				</view>


			</view>

			<view class="content">


				<view class="list">
					<view class="title">
						中奖名单
						<view class="img">
							<img src="@/assets/img/goldMedal.png" alt="" />
						</view>
					</view>
					<view class="listContent">
						<view class="name">
							<view class="title">
								用户名
							</view>
							<view class="title">
								手机号
							</view>
							<view class="title">
								奖品
							</view>
							<!-- <view class="title">
								时间
							</view> -->
						</view>
						<view class="account container">
							<scroll-view class="scroll-list" scroll-y :style="{ height: scrollHeight + 'px' }"
								:scroll-top="scrollTop" scroll-with-animation @scroll="onScroll">

								<view class="value" v-for="(item,i) in winList" :key="i">
									<view class="item">
										{{item.name}}
									</view>
									<view class="item">
										{{item.phone}}
									</view>
									<!-- <view class="item">
										{{item.prize}}
									</view> -->
									<view class="item item2" :class="{
										'itemA':item.prize=='充电免单券',
										'itemB':item.prize=='充电服务费6折月卡',
										'itemC':item.prize=='服务费免单劵',
									}" >
										{{(item.prize)}}
									</view>
								</view>
								<view class="value" style="color: #fff" v-for="(item) in 4" :key="item+'_a'">
									<view class="item">
										123
									</view>
									<view class="item">

									</view>

									<view class="item item2">

									</view>
								</view>
							</scroll-view>
						</view>
					</view>
				</view>

			</view>

		</view>


		<view class="hint">
			活动最终解释权归湖北鹏育优电新能源科技有限公司所有
		</view>


	</view>
</template>

<script>
	import * as API from '@/apis/temporary.js'

	import Lottery from '@/components/lottery/index11.vue'
	export default {
		components: {
			Lottery
		},
		data() {
			return {
				ckKey: false,
				resultObj: {
					id: 2,
					name: '服务费免单卷',
					nameText: ['服务费免单卷'],
					url: "/pages/user/coupon/myCoupon",
					img: '1',
					color: "#f7e2c3",
				},
				show: false,
				useNum: 0,
				scrollHeight: 310, // 滚动区域高度
				scrollTop: 0, // 初始滚动位置
				scrollSpeed: 1, // 滚动速度，值越大滚动越快
				intervalId: null, // 定时器ID

				lotteryIndex: -1,
				winList: [],
				dataLottery: [{
						id: 1,
						name: '充电免单卷(含电费)',
						nameText: ['充电免单卷', '(含电费)'],
						url: "/pages/user/coupon/myCoupon",
						img: '1',

						color: "#fbf0df"
					},
					{
						id: 2,
						name: '服务费免单卷',
						nameText: ['服务费免单卷'],
						url: "/pages/user/coupon/myCoupon",
						img: '1',
						color: "#f7e2c3",

					},

					{
						id: 3,
						name: '充电服务费6折月卡',
						nameText: ['充电服务费6折', '月卡'],
						url: "/pages/cardBag/cardBag",
						img: '1',
						color: "#fbf0df"
					},
					{
						id: 100,
						name: '谢谢参与',
						nameText: ['谢谢参与'],

						img: '2',
						color: "#f7e2c3",
					},


				],
			}
		},
		onLoad() {
			this.getInfo()
			// 页面加载时计算滚动区域高度，并启动自动滚动
			// this.scrollHeight = uni.getSystemInfoSync().windowHeight - 100; // 根据实际屏幕高度调整

		},

		methods: {

			onScroll(event) {
				// 可以监听滚动事件做一些其他处理
				//console.log("当前滚动位置:", event.detail.scrollTop);
			},
			startAutoScroll() {
				// 设置定时器，让列表自动滚动
				this.intervalId = setInterval(() => {
					// 更新 scrollTop，实现自动滚动
					this.scrollTop += this.scrollSpeed;

					// 如果滚动到底部，重置 scrollTop 重新开始

					if (this.scrollTop >= this.scrollHeight) {
						this.scrollTop = 0;
					}
				}, 50); // 每20毫秒更新一次，调整这个时间来控制滚动速度
			},
			stopAutoScroll() {
				// 清除定时器，停止滚动
				if (this.intervalId) {
					clearInterval(this.intervalId);
				}
			},
			modalConfirm() {
				uni.navigateTo({
					url: this.resultObj.url
				})
			},
			playRewardEnd() {
				if (this.resultObj.id != 100) {
					this.show = true;
				}
			},

			clickBtn() {
				if ((this.$refs.refLottery.isLottery || this.show) || !this.ckKey) {
					uni.showToast({
						title: "摇奖中...",
						icon: "none"
					})
					return
				}
				this.ckKey = false
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.getActivityResults({

				}).then((res) => {
					uni.hideLoading();
					
					var lotteryIndex = this.dataLottery.findIndex(item => {
						item.weight = 0
						//console.log(res.data.serviceDiscountRatio,item.num,res.data.serviceDiscountRatio==item.num)
						return res.data == item.id
					})

					if (lotteryIndex != -1) {
						this.resultObj = this.dataLottery[lotteryIndex]
						this.dataLottery[lotteryIndex].weight = 100
						this.$refs.refLottery.playReward()

					}


					this.getInfo()
				}).catch(error => {
					//this.showNt = false;
					this.ckKey = true
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.activityDetails({

				}).then((res) => {
					this.ckKey = true
					uni.hideLoading();
					this.useNum = res.data.useNum
					this.winList = res.data.winList
					if (this.winList.length > 10 && this.intervalId == null) {
						this.startAutoScroll();
					}
				}).catch(error => {
					//this.showNt = false;
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getWinnerFn() {
				// 自定义抽奖结果 ，返回值为 options 奖品列表下标，若返回 -1，则会进行随机抽奖
				return this.lotteryIndex
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #DD3032;
		padding-bottom: 44rpx;

	}

	.top {


		.cover {
			width: 100%;
			height: 100%;
			position: relative;

		}

		.img1 {
			width: 100%;
			height: 456rpx;
			position: absolute;
			top: 98rpx;
			left: 50%;
			transform: translateX(-50%);

		}

		.img2 {
			width: 594rpx;
			height: 248rpx;
			position: absolute;
			top: 108rpx;
			left: 50%;
			transform: translateX(-50%);
		}
	}


	.lotteryBox {
		margin-top: -248rpx;
		position: relative;
		background: linear-gradient(180deg, rgba(221, 48, 50, 0) 0%, rgba(221, 48, 50, 1) 76%);

		.chance {
			width: 402rpx;
			height: 72rpx;
			line-height: 72rpx;
			border-radius: 50px;
			background: linear-gradient(90deg, rgba(211, 51, 0, 1) 0%, rgba(255, 79, 63, 1) 53%, rgba(226, 19, 0, 1) 100%);
			text-align: center;
			margin: 0 auto;
			color: rgba(255, 255, 215, 1);
			font-size: 18px;
			position: absolute;
			top: -80rpx;
			left: 50%;
			transform: translateX(-50%);

		}

		.cover2 {
			width: 100%;
			height: 100%;


		}

		.lottery {
			margin-top: -500rpx;
		}
	}

	.slot-content {
		font-size: 36rpx;

		padding: 30rpx;
		margin-top: 40rpx;

		p {
			margin-bottom: 16rpx;
			line-height: 40rpx;

			text {
				color: #00B962;
			}
		}
	}


	.listBox {
		position: relative;
		margin-top: -60rpx;

		.head {
			width: 100%;
			height: 144rpx;
			border-radius: 16px 16px 0px 0px;
			background: linear-gradient(180deg, rgba(239, 121, 66, 1) 0%, rgba(221, 48, 50, 1) 100%);
			// border: 1px solid rgba(252, 163, 131, 1);
			display: flex;
			align-items: center;
			justify-content: center;

		}

		.head2 {
			position: relative;
			width: 702rpx;
			height: 56rpx;
			border-radius: 8px;
			background-color: rgba(145, 17, 18, 1);
			text-align: center;
			border: 6px solid rgba(206, 38, 37, 1);

		}

		.contentHead {
			width: 678rpx;
			height: 36rpx;
			background: linear-gradient(180deg, rgba(187, 58, 60, 1) 0%, rgba(255, 255, 255, 1) 100%);
		}

		.content {
			width: 678rpx;
			border-radius: 0px 0px 12px 12px;
			background-color: rgba(255, 255, 255, 1);
			padding: 24rpx 0;
			margin: -54rpx auto 0;
			z-index: 999;
			position: relative;


			.list {
				border-radius: 8px 50px 8px 8px;
				background: linear-gradient(88.8deg, rgba(226, 54, 53, 1) 1.5%, rgba(247, 143, 30, 1) 99.88%);
				margin: 24rpx;
				padding: 8rpx;

				.title {
					color: rgba(255, 255, 255, 1);
					font-size: 36rpx;
					text-align: center;
					font-weight: bold;
					position: relative;
					padding-top: 18rpx;

					.img {
						width: 144rpx;
						height: 144rpx;
						position: absolute;
						top: -16rpx;
						left: 0;

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

				.listContent {
					margin-top: 26rpx;
					padding: 16rpx 0;
					border-radius: 8rpx;
					background-color: #fff;

					.name,
					.value {
						display: flex;
						align-items: center;
						justify-content: space-around;
						text-align: center;
					}

					.name,
					.account {

						.title {
							color: rgba(119, 119, 119, 1);
							font-size: 24rpx;
							margin-top: 24rpx;
						}

						.value {
							color: rgba(51, 51, 51, 1);

							.item {
								width: 240rpx;
								overflow: hidden;
								line-height: 64rpx;
							}

							.item2 {
								width: 340rpx;
								white-space: pre;
							}
							.itemA {
								color: #ff9900;
							}
							.itemB {
								color: #00b962;
							}
							.itemC {
								
							}
						}
					}
				}
			}
		}
	}

	.hint {
		color: rgba(96, 2, 3, 1);

		font-size: 24rpx;

		text-align: center;
		margin-top: 20px;
	}


	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		//padding: 20px;
	}

	.scroll-list {
		// width: 80%;
		//  border: 1px solid #ccc;
		border-radius: 8px;
		padding: 10px;
		overflow: hidden;
	}

	.list-item {
		padding: 10px;
		text-align: center;
		font-size: 16px;
		border-bottom: 1px solid #f0f0f0;
	}

	.list-item:last-child {
		border-bottom: none;
	}
</style>