feat: 九宫格完成

api/raffle.js

@@ -5,9 +5,9 @@ import request from '@/utils/request.js'; // 引入封装的方法
 export function getActivityList(data) {
 	// return request.post('/common/getSmsCode',qs.stringify(params));
 	return request({
-	    url: "/raffle/getActivityList",
+		url: "/raffle/getActivityList",
-	    method: "get",
+		method: "get",
-	    data,
+		data,
 	});
 }
 
@@ -17,19 +17,19 @@ export function getActivityList(data) {
  */
 export function raffleExecute(params) {
 	return request({
-	    url: "/raffle/execute",
+		url: "/raffle/execute",
-	    method: "post",
+		method: "post",
-	    data:params,
+		data: params,
-		isShowLoading:false,
+		isShowLoading: false,
 	});
 }
 
 // 查询中奖记录
 export function getWinningList(data) {
 	return request({
-	    url: "/raffle/getWinningList",
+		url: "/raffle/getWinningList",
-	    method: "get",
+		method: "get",
-	    data,
+		data,
 	});
 }
 /**
@@ -38,17 +38,17 @@ export function getWinningList(data) {
  */
 export function takeGoods(params) {
 	return request({
-	    url: "/raffle/takeGoods",
+		url: "/raffle/takeGoods",
-	    method: "post",
+		method: "post",
-	    data:params,
+		data: params,
 	});
 }
 
 // 查询抽奖加速次数
 export function getQuickenTimes(data) {
 	return request({
-	    url: "/raffle/getQuickenTimes",
+		url: "/raffle/getQuickenTimes",
-	    method: "get",
+		method: "get",
-	    data,
+		data,
 	});
 }

pages/home/home.vue

@@ -407,8 +407,11 @@ export default {
 			})
 		},
 		jumpTurntable() {
+			// uni.navigateTo({
+			// 	url: '/pages/other_package/turntable/turntable?backPath=home',
+			// })
 			uni.navigateTo({
-				url: '/pages/other_package/turntable/turntable?backPath=home',
+				url: '/pages/other_package/nine-grid/nine-grid?backPath=home',
 			})
 		},
 		jumpPrdference() {

pages/mine/mine.vue

@@ -218,7 +218,7 @@ export default {
 					id: 2,
 					title: "抽奖",
 					url: 'https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/apply_prize.png',
-					path: "/pages/other_package/turntable/turntable"
+					path: "/pages/other_package/nine-grid/nine-grid"
 				},
 				{
 					id: 4,

pages/other_package/nine-grid/components/LotteryGrid.vue

@@ -12,15 +12,14 @@
     <view class="grid-item" v-for="(item, index) in 9" :key="index">
       <!-- 中间格子作为抽奖按钮 (索引4) -->
       <template v-if="index === 4">
-        <view class="lottery-btn" @click="handleStartClick">
+        <image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img-button" mode="widthFix"
-          <text>{{ isRotating ? '抽奖中...' : '开始抽奖' }}</text>
+          @click="handleStartClick"></image>
-        </view>
       </template>
 
       <!-- 其他8个奖品格子 -->
       <template v-else>
-        <image :src="prizes[index].img" class="prize-img" mode="widthFix"></image>
+        <image :src="prizesObj.prizes[index]?.iconUrl" class="prize-img" mode="widthFix"></image>
-        <text class="prize-name">{{ prizes[index].name }}</text>
+        <text class="prize-name">{{ prizesObj.prizes[index]?.name }}</text>
       </template>
     </view>
   </view>
@@ -30,15 +29,20 @@
 export default {
   props: {
     // 奖品数据数组
-    prizes: {
+    prizesObj: {
-      type: Array,
+      type: Object,
       required: true,
-      default: () => []
+      default: () => ({ prizes: [] })
     },
     // 是否禁用抽奖
     isDisabled: {
       type: Boolean,
       default: false
+    },
+    // 指定停止的位置索引 (0-7)
+    targetIndex: {
+      type: Number,
+      default: null
     }
   },
   data() {
@@ -66,8 +70,8 @@ export default {
     moveHighlight(index) {
       const row = Math.floor(index / 3) // 计算行
       const col = index % 3 // 计算列
-      this.highlightTop = `${row * 200}rpx`
+      this.highlightTop = `${row * 202}rpx`
-      this.highlightLeft = `${col * 200}rpx`
+      this.highlightLeft = `${col * 202}rpx`
     },
     /**
      * 执行抽奖动画
@@ -113,7 +117,7 @@ export default {
         this.isRotating = false
         this.animationTimer = null
         // 触发抽奖完成事件，返回中奖奖品
-        this.$emit('complete', this.prizes[this.LOTTERY_PATH[nextStep]])
+        this.$emit('complete', this.prizesObj.prizes[this.LOTTERY_PATH[nextStep]])
         return
       }
 
@@ -128,6 +132,18 @@ export default {
         })
       }, nextSpeed)
     },
+    /**
+     * 获取目标位置
+     * @returns {number} 目标位置索引
+     */
+    getTargetStep() {
+      // 如果传入了targetIndex，则使用传入的值
+      if (this.targetIndex !== null && this.targetIndex >= 0 && this.targetIndex < this.LOTTERY_PATH.length) {
+        return this.targetIndex
+      }
+      // 否则随机生成目标位置（带权重）
+      return this.getRandomTarget()
+    },
     /**
      * 随机生成目标位置（带权重）
      * @returns {number} 目标位置索引
@@ -158,7 +174,7 @@ export default {
       }
 
       // 通知父组件开始抽奖
-      this.$emit('start')
+      this.$emit('start', 1)
 
       // 开始抽奖动画（无论父组件做了什么处理）
       this.startLotteryAnimation()
@@ -177,7 +193,7 @@ export default {
       this.runAnimation({
         currentStep: 0,
         speed: this.INITIAL_SPEED,
-        targetStep: this.getRandomTarget(),
+        targetStep: this.getTargetStep(),
         cycleCount: 0,
         totalSteps: 0
       })
@@ -195,34 +211,36 @@ export default {
 
 <style scoped>
 .lottery-grid {
-  width: 600rpx;
+  width: 615rpx;
-  height: 600rpx;
+  height: 605rpx;
   display: flex;
   flex-wrap: wrap;
   position: relative;
-  border: 8rpx solid #ffc107;
   border-radius: 16rpx;
-  background-color: #fff;
+  background-color: transparent;
   box-sizing: content-box;
-  margin: 0 auto;
+  margin: 45rpx 0 0 10rpx;
 }
 
 .grid-item {
-  width: 200rpx;
+  width: 203rpx;
-  height: 200rpx;
+  height: 194rpx;
   box-sizing: border-box;
-  border: 2rpx solid #ffeeba;
+  border: 8rpx solid #FF4646;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   position: relative;
   flex-shrink: 0;
+  background: linear-gradient(180deg, #FFF7E7 0%, #FFDAB2 100%);
+  box-shadow: inset 0px 0 24rpx 0px rgba(255, 129, 9, 0.5);
+  border-radius: 20rpx;
 }
 
 .lottery-btn {
-  width: 180rpx;
+  width: 203rpx;
-  height: 180rpx;
+  height: 194rpx;
   background: linear-gradient(135deg, #ff5252 0%, #e63946 100%);
   border-radius: 50%;
   display: flex;
@@ -251,6 +269,12 @@ export default {
   margin-bottom: 10rpx;
 }
 
+.prize-img-button {
+  width: 100%;
+  height: 100%;
+
+}
+
 .prize-name {
   font-size: 26rpx;
   color: #333;
@@ -264,13 +288,17 @@ export default {
 .highlight-box {
   position: absolute;
   width: 200rpx;
-  height: 200rpx;
+  height: 194rpx;
   box-sizing: border-box;
-  border: 6rpx solid #ff4081;
+  border: 6rpx solid #FFDAB2;
-  background-color: rgba(255, 64, 129, 0.1);
+  background-color: rgba(255, 64, 129, 0.4);
   z-index: 1;
   pointer-events: none;
+  border-radius: 20rpx;
   /* 增加高亮动画效果 */
-  box-shadow: 0 0 15rpx 2rpx rgba(255, 64, 129, 0.5);
+  /* box-shadow: 0 0 15rpx 2rpx rgba(255, 64, 129, 0.5); */
+
+  /* background: linear-gradient(180deg, #FFF7E7 0%, #FFDAB2 100%); */
+  box-shadow: inset 0px 0 24px 0px rgba(255, 129, 9, 0.5);
 }
 </style>

pages/other_package/nine-grid/components/ResultModal.vue

@@ -2,10 +2,16 @@
   <!-- 中奖结果弹窗 -->
   <view class="result-modal" v-if="visible">
     <view class="modal-content">
-      <text class="result-title">恭喜您获得</text>
+      <view class="modal-content-result">
-      <image :src="prize.img" class="result-img" mode="widthFix" :alt="prize.name || '奖品图片'"></image>
+        <view v-for="item in prize" class="modal-content-result-item">
-      <text class="result-desc">{{ prize.name || '未知奖品' }}</text>
+          <view class="par-value">
-      <button class="confirm-btn" @click="$emit('close')">确定</button>
+            <text v-if="item.type === 'redpacket'" class="moeny">¥ </text>{{ item.parValue }}
+          </view>
+          <view class="prize-name">{{ item.prizeName }}</view>
+        </view>
+      </view>
+      <view class="close" @click="jumpGetFun"> </view>
+      <view class="confirm-btn" @click="jumpGetFun">立即领取</view>
     </view>
   </view>
 </template>
@@ -20,10 +26,20 @@ export default {
     },
     // 中奖奖品信息
     prize: {
-      type: Object,
+      type: Array,
-      default: () => ({})
+      default: () => ([
+
+      ])
     }
-  }
+  },
+  methods: {
+    jumpGetFun(item) {
+      this.$emit('close')
+      // uni.navigateTo({
+      //   url: '/pages/other_package/get_prize/get_prize?id=' + item.id,
+      // })
+    },
+  },
 }
 </script>
 
@@ -42,63 +58,69 @@ export default {
 }
 
 .modal-content {
-  width: 500rpx;
+  width: 650rpx;
-  background-color: #fff;
+  height: 1000rpx;
-  border-radius: 20rpx;
-  padding: 40rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  /* 添加弹窗动画 */
-  animation: popup 0.3s ease-out;
-}
 
-@keyframes popup {
+  background: url('https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/lottery-pop.png') no-repeat center center;
-  0% {
+  background-size: 100% auto;
-    transform: scale(0.8);
+  position: relative;
-    opacity: 0;
+
+  .confirm-btn {
+    width: 436rpx;
+    height: 76rpx;
+    background: linear-gradient(180deg, #FFE361 0%, #FF7B21 70%, #FFB931 91%, #FFB245 100%);
+    box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5);
+    border-radius: 38rpx;
+    font-weight: 500;
+    font-size: 32rpx;
+    color: #FFFFFF;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: absolute;
+    bottom: 230rpx;
+    left: 50%;
+    transform: translateX(-50%);
   }
 
-  100% {
+  .modal-content-result {
-    transform: scale(1);
+    position: absolute;
-    opacity: 1;
+    bottom: 450rpx;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 420rpx;
+    display: flex;
+    justify-content: space-around;
+
+    .modal-content-result-item {
+
+      .par-value {
+        font-weight: bold;
+        font-size: 42rpx;
+        color: #D0010D;
+        text-align: center;
+
+        .moeny {
+          font-size: 28rpx;
+        }
+      }
+
+      .prize-name {
+        font-size: 36rpx;
+        color: #000000;
+        text-align: center;
+        margin-top: 15rpx;
+      }
+    }
   }
-}
 
-.result-title {
+  .close {
-  font-size: 36rpx;
+    width: 120rpx;
-  color: #e63946;
+    height: 120rpx;
-  font-weight: bold;
+    position: absolute;
-  margin-bottom: 30rpx;
+    top: 130rpx;
-}
+    right: 40rpx;
+  }
 
-.result-img {
-  width: 150rpx;
-  height: 150rpx;
-  margin-bottom: 30rpx;
-  object-fit: contain;
-}
-
-.result-desc {
-  font-size: 32rpx;
-  color: #333;
-  margin-bottom: 40rpx;
-  font-weight: bold;
-}
-
-.confirm-btn {
-  width: 300rpx;
-  height: 80rpx;
-  line-height: 80rpx;
-  background-color: #e63946;
-  color: #fff;
-  border-radius: 40rpx;
-  font-size: 32rpx;
-  border: none;
-  transition: background-color 0.2s;
-}
-
-.confirm-btn:active {
-  background-color: #c72c3a;
 }
 </style>

pages/other_package/nine-grid/nine-grid.vue

@@ -1,12 +1,30 @@
 <template>
   <view class="lottery-page">
-    <view class="lottery-title">幸运九宫格抽奖</view>
+    <view class="back" style="width:100rpx;height:100rpx;" @click="jumpMine">
+      <up-image src="/static/common/left_b.png" width="22" height="22" bgColor="#f1f6ff00"></up-image>
+    </view>
+    <!-- 中奖记录 -->
+    <view class="history" @click="jumpWinningRecord">中奖记录
+    </view>
+
+    <view class="remain-count"> 剩余抽奖次数: {{ prizesObj.times }} </view>
+
 
-    <view class="remain-count"> 剩余抽奖次数: {{ remainCount }} </view>
 
     <!-- 九宫格抽奖组件 -->
-    <LotteryGrid :prizes="prizes" :remain-count="remainCount" :is-disabled="isRotating" @start="handleStartLottery"
+    <LotteryGrid :prizesObj="prizesObj" :remain-count="prizesObj.times" :is-disabled="isRotating"
-      @complete="handleLotteryComplete" />
+      @start="handleStartLottery" @complete="handleLotteryComplete" :targetIndex="targetIndex" />
+
+    <view class="coiled-lottery" v-if="prizesObj.times > 10" @click="handleStartLottery(10)"> 连续抽奖10次 </view>
+
+
+    <!-- 规则 -->
+    <view class="rule">
+      <view class="rule-title"> 活动规则</view>
+      <view class="rule_content" v-html="prizesObj.ruleDescr"></view>
+    </view>
+
+
 
     <!-- 中奖结果弹窗 -->
     <ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" />
@@ -26,64 +44,118 @@ export default {
   data() {
     return {
       // 奖品配置数据
-      prizes: [
+      prizesObj: {
-        { name: '10元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/logo.png' },
+        prizes: [],
-        { name: '20积分', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/teacher.png' },
+      },
-        { name: '50元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/student.png' },
+
-        { name: '谢谢参与', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/recommend.png' },
-        { name: '', img: '' }, // 中间按钮位置，不使用
-        { name: '100积分', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/uncollection.png' },
-        { name: '2元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-mn.png' },
-        { name: '50积分', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png' },
-        { name: '8元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png' }
-      ],
       // 状态管理
       remainCount: 3, // 剩余抽奖次数
       isRotating: false, // 是否正在抽奖
       showResult: false, // 是否显示结果弹窗
-      currentPrize: {} // 当前中奖奖品
+      currentPrize: [],// 当前中奖奖品
+
+      targetIndex: 0,
+      backPath: null,
+    }
+  },
+  onLoad(option) {
+    const backPath = option.backPath;
+    console.log("option backPath", backPath);
+    if (backPath && backPath !== 'null') {
+      this.backPath = backPath;
     }
   },
   mounted() {
     this.getActivityList();
   },
   methods: {
-    // 
+
     /**
   * 查询活动详情
   */
-        async getActivityList() {
+    async getActivityList() {
       const { bizcode, data } = await getActivityList();
-          if (bizcode === 100) {
+      if (bizcode === 100) {
-            this.prizes = data.prizes || [];
+        this.prizesObj = data || { prizes: [] };
-            this.prizes.split(4, 1, { iconUrl:'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png',})
+        console.log('查询活动详情-1', this.prizesObj)
-          }
+        this.prizesObj.prizes.splice(4, 0, { iconUrl: 'https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/activity-button.png', })
-        },
+
+      }
+    },
     /**
      * 处理开始抽奖事件
      */
-    handleStartLottery() {
+    async handleStartLottery(num) {
-      if (this.remainCount <= 0) {
+      if (this.prizesObj.times <= 0) {
-        uni.showToast({ title: '没有抽奖次数了', icon: 'none' })
+        uni.showToast({
-        return false
+          title: `您当前未获取到抽奖次数，快去获取吧～`,
+          icon: 'none'
+        });
+        return;
+      }
+
+      if (this.prizesObj.times < num) {
+        return;
+      }
+
+
+      const params = {
+        id: this.prizesObj.id,
+        times: num,
+      }
+      const result = await raffleExecute(params);
+      let runCount = null;
+      if (result && result.bizcode === 100) {
+
+        this.targetIndex = this.prizesObj.prizes.findIndex(ele => ele.id === result.data[0].id);
+
+        this.currentPrize = result.data;
+        console.log("0------", this.currentPrize)
+
+        // 减少抽奖次数并标记为正在抽奖
+
+        this.isRotating = true
+
+        const total = this.prizesObj.times;
+        const data = result.data;
+        this.lotteryList = data;// 中奖列表
+        this.prizesObj.times = total - num;// 减去次数
+
       }
 
-      // 减少抽奖次数并标记为正在抽奖
-      this.remainCount--
-      this.isRotating = true
-      this.showResult = false
 
-      return true
     },
     /**
      * 处理抽奖完成事件
      * @param {Object} prize - 中奖奖品
      */
-    handleLotteryComplete(prize) {
+    handleLotteryComplete() {
       this.isRotating = false
-      this.currentPrize = prize
       this.showResult = true
-    }
+    },
+
+    /**
+     *  跳转到中奖记录
+     */
+    jumpWinningRecord() {
+      uni.navigateTo({
+        url: '/pages/mine_package/mine_winning_record/mine_winning_record',
+      })
+    },
+
+    jumpMine() {
+      const backPath = this.backPath;
+      console.log("backPath", backPath);
+      if (backPath) {
+        uni.switchTab({
+          url: '/pages/home/home',
+        })
+      } else {
+        uni.switchTab({
+          url: '/pages/mine/mine',
+        })
+      }
+    },
   }
 }
 </script>
@@ -93,24 +165,78 @@ export default {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 30rpx;
+  width: 100vw;
-  background-color: #f8f9fa;
+  height: 1927rpx;
-  min-height: 100vh;
+  background: url('https://cex-pub.s3.ap-southeast-1.amazonaws.com/static/activity-bg.png') no-repeat center center;
-}
+  background-size: 100% auto;
-
+  position: relative;
-.lottery-title {
-  font-size: 40rpx;
-  font-weight: bold;
-  color: #e63946;
-  margin-bottom: 20rpx;
 }
 
 .remain-count {
   font-size: 30rpx;
-  color: #666;
+  color: #FFFAE3;
-  margin-bottom: 30rpx;
-  padding: 10rpx 20rpx;
-  background-color: #fff;
   border-radius: 20rpx;
+  margin-top: 430rpx;
+  width: 340rpx;
+  height: 44rpx;
+  text-align: center;
+  line-height: 44rpx;
+  background: linear-gradient(180deg, #F33838 0%, #FF4F28 100%);
+
+}
+
+.coiled-lottery {
+  width: 670rpx;
+  height: 88rpx;
+  background: linear-gradient(180deg, #FFE361 0%, #FF7B21 70%, #FFB931 91%, #FFB245 100%);
+  box-shadow: inset 0px 0 24rpx 0px rgba(255, 255, 255, 0.5);
+  border-radius: 44rpx;
+  margin: 120rpx auto 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  font-size: 32rpx;
+  color: #FFFFFF;
+}
+
+.rule {
+  width: 670rpx;
+  background: linear-gradient(180deg, #FF8876 0%, #FF3D36 17%, #FF4646 85%, #FF8978 100%);
+  border-radius: 24rpx;
+  padding: 50rpx 24rpx;
+  margin: 50rpx auto 0;
+  font-size: 34rpx;
+  color: #FFFAE3;
+  line-height: 54rpx;
+
+  .rule-title {
+    text-align: center;
+    margin-bottom: 30rpx;
+  }
+
+
+}
+
+.history {
+  width: 130rpx;
+  height: 64rpx;
+  line-height: 64rpx;
+  background: #000000;
+  border-top-left-radius: 100rpx;
+  border-bottom-left-radius: 100rpx;
+  opacity: 0.4;
+  font-size: 26rpx;
+  color: #FFFFFF;
+  position: absolute;
+  right: 0;
+  top: 80rpx;
+  text-align: end;
+}
+
+.back {
+  position: absolute;
+  left: 40rpx;
+  top: 40rpx;
 }
 </style>