feat: 九宫格基础结构

2025-08-13 09:20:29 +08:00
parent 3c200051e6
commit c507d7397f
5 changed files with 501 additions and 475 deletions
@@ -0,0 +1,116 @@
+<template>
+  <view class="lottery-page">
+    <view class="lottery-title">幸运九宫格抽奖</view>
+
+    <view class="remain-count"> 剩余抽奖次数: {{ remainCount }} </view>
+
+    <!-- 九宫格抽奖组件 -->
+    <LotteryGrid :prizes="prizes" :remain-count="remainCount" :is-disabled="isRotating" @start="handleStartLottery"
+      @complete="handleLotteryComplete" />
+
+    <!-- 中奖结果弹窗 -->
+    <ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" />
+  </view>
+</template>
+
+<script>
+import LotteryGrid from './components/LotteryGrid.vue'
+import ResultModal from './components/ResultModal.vue'
+import { getActivityList, raffleExecute } from '@/api/raffle.js';
+
+export default {
+  components: {
+    LotteryGrid,
+    ResultModal
+  },
+  data() {
+    return {
+      // 奖品配置数据
+      prizes: [
+        { name: '10元红包', img: 'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/logo.png' },
+        { 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: {} // 当前中奖奖品
+    }
+  },
+  mounted() {
+    this.getActivityList();
+  },
+  methods: {
+    // 
+    /**
+  * 查询活动详情
+  */
+        async getActivityList() {
+      const { bizcode, data } = await getActivityList();
+          if (bizcode === 100) {
+            this.prizes = data.prizes || [];
+            this.prizes.split(4, 1, { iconUrl:'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png',})
+          }
+        },
+    /**
+     * 处理开始抽奖事件
+     */
+    handleStartLottery() {
+      if (this.remainCount <= 0) {
+        uni.showToast({ title: '没有抽奖次数了', icon: 'none' })
+        return false
+      }
+
+      // 减少抽奖次数并标记为正在抽奖
+      this.remainCount--
+      this.isRotating = true
+      this.showResult = false
+
+      return true
+    },
+    /**
+     * 处理抽奖完成事件
+     * @param {Object} prize - 中奖奖品
+     */
+    handleLotteryComplete(prize) {
+      this.isRotating = false
+      this.currentPrize = prize
+      this.showResult = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.lottery-page {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 30rpx;
+  background-color: #f8f9fa;
+  min-height: 100vh;
+}
+
+.lottery-title {
+  font-size: 40rpx;
+  font-weight: bold;
+  color: #e63946;
+  margin-bottom: 20rpx;
+}
+
+.remain-count {
+  font-size: 30rpx;
+  color: #666;
+  margin-bottom: 30rpx;
+  padding: 10rpx 20rpx;
+  background-color: #fff;
+  border-radius: 20rpx;
+}
+</style>