抽奖

pages/index/index.vue

@@ -230,11 +230,8 @@
 
 	// 跳转公告链接
 	function goMsg(url) {
-		// uni.navigateTo({
-		// 	url: '/pages/index/prizeDraw/kevy-luckydraw'
-		// });
 		uni.navigateTo({
-			url: '/pages/me/prizeDraw'
+			url: '/pages/index/prizeDraw/kevy-luckydraw'
 		});
 	}
 

pages/index/prizeDraw/choujiangcanvas.vue

@@ -1,138 +0,0 @@
-<template>
-  <view class="lottery-container">
-    <!-- 抽奖圆盘 -->
-    <view class="lottery-wheel" @click="startLottery">
-      <view class="lottery-item" v-for="(item, index) in lotteryItems" :key="index">
-        <image :src="item.icon" mode="aspectFit"></image>
-        <text>{{ item.name }}</text>
-      </view>
-      <view class="start-btn">开始抽奖</view>
-    </view>
-    <!-- 剩余抽奖次数 -->
-    <view class="lottery-info">
-      <text>剩余免费抽奖{{ remainingTimes }}次</text>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { ref } from 'vue';
-
-// 抽奖项目数据
-const lotteryItems = [
-  {
-    name: '现金红包',
-    icon: 'https://example.com/red-envelope-icon.png'
-  },
-  {
-    name: '平板',
-    icon: 'https://example.com/tablet-icon.png'
-  },
-  {
-    name: '爱奇艺会员',
-    icon: 'https://example.com/iqiyi-icon.png'
-  },
-  {
-    name: '淘宝优惠券',
-    icon: 'https://example.com/taobao-coupon-icon.png'
-  },
-  {
-    name: '京东优惠券',
-    icon: 'https://example.com/jd-coupon-icon.png'
-  },
-  {
-    name: '拼多多优惠券',
-    icon: 'https://example.com/pdd-coupon-icon.png'
-  }
-];
-
-// 剩余抽奖次数
-const remainingTimes = ref(2);
-
-// 开始抽奖函数
-const startLottery = () => {
-  if (remainingTimes.value > 0) {
-    // 这里可以添加实际的抽奖逻辑，例如随机选择一个奖项
-    // 以下只是模拟抽奖过程
-    const randomIndex = Math.floor(Math.random() * lotteryItems.length);
-    const selectedItem = lotteryItems[randomIndex];
-    console.log('恭喜你获得：', selectedItem.name);
-    remainingTimes.value--;
-  } else {
-    uni.showToast({
-      title: '抽奖次数已用完',
-      icon: 'none'
-    });
-  }
-}
-</script>
-<style lang="scss">
-.lottery-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  height: 100vh;
-}
-
-.lottery-wheel {
-  width: 300px;
-  height: 300px;
-  border-radius: 50%;
-  background-color: #ffd700;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: relative;
-}
-
-.lottery-item {
-  width: 50%;
-  height: 50%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-}
-
-.lottery-item:nth-child(1) {
-  transform: rotate(0deg);
-}
-
-.lottery-item:nth-child(2) {
-  transform: rotate(60deg);
-}
-
-.lottery-item:nth-child(3) {
-  transform: rotate(120deg);
-}
-
-.lottery-item:nth-child(4) {
-  transform: rotate(180deg);
-}
-
-.lottery-item:nth-child(5) {
-  transform: rotate(240deg);
-}
-
-.lottery-item:nth-child(6) {
-  transform: rotate(300deg);
-}
-
-.start-btn {
-  width: 100px;
-  height: 100px;
-  border-radius: 50%;
-  background-color: #ff4500;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: #fff;
-  font-size: 18px;
-}
-
-.lottery-info {
-  margin-top: 20px;
-}
-</style>

pages/index/prizeDraw/kevy-luckydraw.vue

@@ -3,22 +3,22 @@
 		<view class="t-bg" style="">
 			<image class="t-wan" src="./luck/wenan.png"></image>
 			<image class="t-wan-lp" src="./luck/hengfu.png"></image>
-			<view class="t-choujiang t-flex-row" style="background-image:url('./luck/BJ.png')">
-				<choujiangcanvas v-if="list.length" ref="lucky" startText="开始" :wIndex="0" :luckyList="list"
-					@onReadyStart="onReadyStart" @lotteryData="getLotterData"></choujiangcanvas>
+			<view class="t-choujiang t-flex-row" >
+				<l-dialer :prizeList="list" @click="onClick" @done="onDone" ref="dialer" />
 			</view>
 		</view>
 		<!-- 规则部分 -->
 		<view class="t-bottom">
 			<view class="t-luck-wrapper">
-				<view class="t-jh t-flex-row" style="background-image:url('./luck/anniu.png')">
+				<view class="t-jh t-flex-row">
 					剩余免费抽奖{{luckDrawTimes}}次
 				</view>
 				<!-- <view class="t-fuhuo-text t-flex-row">{{freeNumDay}}</view> -->
 				<view class="t-fh-fs t-flex-row-sb">
-					<view class="t-flex-row" @tap='goUrl("/pages/me/withdraw/index")' hover-class="t-click-class">红包 &nbsp;{{totalMoney}}</view>
-					<button open-type="share" @tap='goUrl("/pages/task/prizeList?source=2")' class="t-share t-flex-row t-plain-btn"
-						hover-class="t-click-class">我的奖品</button>
+					<view class="t-flex-row" @tap='goUrl("/pages/me/withdraw/index")' hover-class="t-click-class">红包
+						&nbsp;{{totalMoney}}</view>
+					<button open-type="share" @tap='goUrl("/pages/task/prizeList?source=2")'
+						class="t-share t-flex-row t-plain-btn" hover-class="t-click-class">我的奖品</button>
 				</view>
 				<view class="t-line"></view>
 				<view class="t-r-title t-flex-row">活动规则</view>
@@ -32,24 +32,23 @@
 		<kevy-mask :show="isShowAwd" @click="toConfirmAwd">
 			<view class="t-full t-flex-row">
 				<view class="t-tk-modal">
-					<view class="t-tk-bg t-bg-full" style="background-image:url('./luck/tankuang.png')">
-						<view v-if="drawIdx!=null && drawIdx == 0" class="t-xxcy t-flex-col-s">
+					<view class="t-tk-bg t-bg-full">
+						<!-- 	<view v-if="drawIdx!=null && drawIdx == 0" class="t-xxcy t-flex-col-s">
 							<image src="./luck/xiexiecanyu.png"></image>
 							<view class="t-xxcy-ts t-flex-row">再努力努力肯定就会中哦~</view>
-						</view>
-						<view v-if="drawIdx!=null && drawIdx > 0" class="t-tk-zj t-flex-col-s">
+						</view> -->
+						<view class="t-tk-zj t-flex-col-s">
 							<image class="t-tk-zj-tip" src="./luck/wenzi.png"></image>
 							<view class="t-tk-zj-desc t-flex-col">
-								<image class="t-zj-jp" :src="'./luck/'+drawIdx+'.png'"></image>
-								<view class="t-zj-jp-desc">某某公司提供的能量动力
-									{{drawIdx==5?"探亲礼包":(drawIdx==4?"加油卡":(drawIdx==3?"鸡腿":(drawIdx==2?"方便面":"矿泉水")))}}，同等价值{{drawIdx==5?"888":(drawIdx==4?"100":(drawIdx==3?"10":(drawIdx==2?"5":"2")))}}元现金已到账微信零钱
+								<image class="t-zj-jp" :src="selectData.img"></image>
+								<view class="t-zj-jp-desc">
+									{{selectData.name}}
 								</view>
 							</view>
 						</view>
 					</view>
-					<view @click="toConfirmAwd" class="t-tk-btn t-bg-full"
-						style="background-image:url('./luck/xiaoanniu.png')">
-						{{drawIdx > 0?"领取":"确定"}}
+					<view @click="toConfirmAwd" class="t-tk-btn t-bg-full">
+						确定
 					</view>
 				</view>
 			</view>
@@ -64,7 +63,6 @@
 		selectDiscSpinning,
 		discSpinningdraw
 	} from '@/api/index/index.js';
-	import choujiangcanvas from './choujiangcanvas.vue'
 	var animation = uni.createAnimation({
 		duration: 4000,
 		timingFunction: 'ease-out'
@@ -73,7 +71,6 @@
 	export default {
 		components: {
 			kevyMask,
-			choujiangcanvas
 		},
 		data() {
 			return {
@@ -85,7 +82,8 @@
 				drawIdx: null, //抽到的奖品下标，用于指定中奖奖品并旋转转盘到对应奖品处。例如共5个奖品，下标3代表第4个奖品，下标从0开始
 				// 每天免费抽奖次数
 				freeNumDay: 0,
-				list: []
+				list: [],
+				selectData: "",
 			}
 		},
 		onLoad() {
@@ -94,23 +92,30 @@
 			this.getPrizeList();
 		},
 		methods: {
-			goUrl(url){
+			goUrl(url) {
 				uni.navigateTo({
 					url
 				})
 			},
-			async onReadyStart() {
-				// 后台处理获得开奖数据
-				const res = await discSpinningdraw({
-					source: 1
-				});
-				console.log(res, 'debug')
-				this.wIndex = 2
-				// this.$refs.lucky.o n S t a r t() 
-				this.$refs.lucky.onStart() // 官方大大把这个过滤掉了o.n.S.t.a.r.t()
+			onDone(index) {
+				this.selectData = this.list[index]
+				this.isShowAwd = true
 			},
-			getLotterData(data) {
-				console.log(data, 'debugger')
+
+			async onClick() {
+				if (this.luckDrawTimes) {
+					const res = await discSpinningdraw({
+						source: 1
+					});
+					let indexs = -1
+					this.list.forEach((ele, index) => {
+						if (ele.id == res.discSpinningId) {
+							indexs = index
+						}
+					})
+					// 奖品的索引
+					this.$refs.dialer.run(indexs)
+				}
 			},
 			// 抽奖次数
 			async getCount() {
@@ -131,6 +136,9 @@
 				const res = await selectDiscSpinning({
 					source: 1
 				});
+				res.records.forEach(res => {
+					res.img = res.url
+				})
 				this.list = res.records
 			},
 
@@ -140,7 +148,8 @@
 			toConfirmAwd() {
 				//这里中奖信息关闭弹框
 				this.isShowAwd = false;
-
+				this.getRedPack();
+				this.getCount();
 			}
 		}
 	}
@@ -153,7 +162,7 @@
 	}
 
 	.t-bg {
-		background-image:url('./luck/DZP_BJ.png');
+		background-image: url('./luck/DZP_BJ.png');
 		width: 100%;
 		box-sizing: border-box;
 		background-size: 100% 100%;
@@ -207,6 +216,7 @@
 		background-repeat: no-repeat;
 		margin: 0rpx auto;
 		position: relative;
+		background-image:url('./luck/BJ.png')
 	}
 
 	.t-zp {
@@ -232,6 +242,7 @@
 		background-repeat: no-repeat;
 		font-size: 40rpx;
 		color: #980100;
+		background-image: url('./luck/anniu.png')
 	}
 
 	.t-fuhuo-text {
@@ -359,6 +370,7 @@
 		width: 100%;
 		height: 528rpx;
 		background-size: 100% 100%;
+		background-image: url('./luck/tankuang.png')
 	}
 
 	.t-tk-btn {
@@ -372,6 +384,7 @@
 		line-height: 120rpx;
 		text-align: center;
 		background-size: 100% 100%;
+		background-image: url('./luck/xiaoanniu.png')
 	}
 
 	.t-flex-row {
@@ -513,7 +526,7 @@
 	.t-zj-jp-desc {
 		font-size: 24rpx;
 		color: #D93637;
-		text-align: justify;
+		text-align: center;
 		width: 420rpx;
 	}