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"></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="600" :height="600" :data="dataLottery" @end="showlottery=false"
				ref="refLottery" @clickBtn="clickBtn" @playRewardEnd="playRewardEnd" :setWinnerFn="getWinnerFn">
			</Lottery>
		</view>


	</view>
</template>

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

	import Lottery from '@/components/lottery/index11.vue'
	export default {
		components: {
			Lottery
		},
		data() {
			return {
				resultObj: {
					id: 2,
					name: '服务费免单卷',
					nameText: ['服务费免单卷'],
					url:"/pages/user/coupon/myCoupon",
					img: '1',
					color: "#f7e2c3",
				},
				show: false,
				useNum: 0,
				lotteryIndex: -1,
				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()
		},
		methods: {
			modalConfirm(){
				uni.navigateTo({
					url:this.resultObj.url
				})
			},
			playRewardEnd() {
				if (this.resultObj.id != 100) {
					this.show = true;
				}
			},
			clickBtn() {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.getActivityResults({

				}).then((res) => {
					uni.hideLoading();
					//this.useNum=res.data.useNum

					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;
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			getInfo() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				API.activityDetails({

				}).then((res) => {
					uni.hideLoading();
					this.useNum = res.data.useNum

				}).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: 556rpx;
			position: absolute;
			top: 88rpx;
			left: 50%;
			transform: translateX(-50%);

		}

		.img2 {
			width: 594rpx;
			height: 268rpx;
			position: absolute;
			top: 168rpx;
			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: 0;
			left: 50%;
			transform: translateX(-50%);

		}

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


		}

		.lottery {
			margin-top: -400rpx;
		}
	}
	
	.slot-content {
			font-size: 36rpx;
			
			padding: 30rpx;
			margin-top: 40rpx;
			p{
				margin-bottom: 16rpx;
				line-height: 40rpx;
				text{
					color: #00B962;
				}
			}
		}
</style>