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

<template>
  <view class="lottery-page">
    <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>


    <!-- 九宫格抽奖组件 -->
    <LotteryGrid :prizesObj="prizesObj" :is-disabled="isRotating" @start="handleStartLottery"
      @complete="handleLotteryComplete" :targetIndex="targetIndex" />

    <!-- 规则 -->
    <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" />
  </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 {
      // 奖品配置数据
      prizesObj: {
        prizes: [],
      },

      // 状态管理
      remainCount: 3, // 剩余抽奖次数
      isRotating: false, // 是否正在抽奖
      showResult: false, // 是否显示结果弹窗
      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() {
      const { bizcode, data } = await getActivityList();
      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', })

      }
    },
    /**
     * 处理开始抽奖事件
     */
    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 { data } = await raffleExecute(params);
      this.targetIndex = this.prizesObj.prizes.findIndex(ele => ele.id === data.idList[0].id);

      this.currentPrize = data.prizeList;
      console.log("0------", this.currentPrize)

      // 减少抽奖次数并标记为正在抽奖

      this.isRotating = true

      const total = this.prizesObj.times;
      this.prizesObj.times = total - num;// 减去次数
    },

    /**
     * 处理抽奖完成事件
     * @param {Object} prize - 中奖奖品
     */
    handleLotteryComplete() {
      this.isRotating = false
      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>

<style scoped>
.lottery-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  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: #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%);

}

.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>