feat: 九宫格完成

2025-08-15 00:44:01 +08:00
parent e8f5d354ec
commit ff3d0e5028
6 changed files with 332 additions and 153 deletions
@@ -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"
-      @complete="handleLotteryComplete" />
+    <LotteryGrid :prizesObj="prizesObj" :remain-count="prizesObj.times" :is-disabled="isRotating"
+      @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: [
-        { 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' }
-      ],
+      prizesObj: {
+        prizes: [],
+      },
+
      // 状态管理
      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) {
-            this.prizes = data.prizes || [];
-            this.prizes.split(4, 1, { iconUrl:'https://image.whzb.com/chain/inte-cloud/inte-cloud-train/p-lx.png',})
-          }
-        },
+      if (bizcode === 100) {
+        this.prizesObj = data || { prizes: [] };
+        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() {
-      if (this.remainCount <= 0) {
-        uni.showToast({ title: '没有抽奖次数了', icon: 'none' })
-        return false
+    async handleStartLottery(num) {
+      if (this.prizesObj.times <= 0) {
+        uni.showToast({
+          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;
-  background-color: #f8f9fa;
-  min-height: 100vh;
-}
-
-.lottery-title {
-  font-size: 40rpx;
-  font-weight: bold;
-  color: #e63946;
-  margin-bottom: 20rpx;
+  width: 100vw;
+  height: 1927rpx;
+  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;
 }

 .remain-count {
  font-size: 30rpx;
-  color: #666;
-  margin-bottom: 30rpx;
-  padding: 10rpx 20rpx;
-  background-color: #fff;
+  color: #FFFAE3;
  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>