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" :remainCount="prizesObj.times" :is-disabled="isRotating"
      @start="handleStartLottery" @complete="handleLotteryComplete" />
	  <view class="notice-view">
		<view class="notice-li">
			<u-notice-bar :text="noticeList" color="#fff" icon="" justifyContent="center"
			 direction="column" bgColor="rgba(0,0,0,0)"></u-notice-bar>
		</view>
	  </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" />
  </view>
</template>

<script>
import LotteryGrid from './components/LotteryGrid.vue'
import ResultModal from './components/ResultModal.vue'
import { getActivityList, raffleExecute,getCommonRaffle } from '@/api/raffle.js';

export default {
  components: {
    LotteryGrid,
    ResultModal
  },
  data() {
    return {
      // 奖品配置数据
	  noticeList:[],
      prizesObj: {
        prizes: [],
      },

      // 状态管理
      isRotating: false, // 是否正在抽奖
      showResult: false, // 是否显示结果弹窗
      currentPrize: [],// 当前中奖奖品

      backPath: null,
    }
  },
  onLoad(option) {
    const backPath = option.backPath;
    console.log("option backPath", backPath);
    if (backPath && backPath !== 'null') {
      this.backPath = backPath;
	  
    }
	this.getCommon();
  },
  mounted() {
    this.getActivityList();
  },
  methods: {
	getCommon(){
		getCommonRaffle().then(res=>{
			let tmpArr = res.data && res.data.length ? res.data : [];
			this.noticeList = [];
			tmpArr.forEach(item=>{
				if(item.type == 'quicken'){
					item.text = `恭喜 ${item.user} 获得${item.parValue}个${item.prizeName}`;
				}else if(item.type == 'balance'){
					item.text = `恭喜 ${item.user} 获得${item.parValue}元${item.prizeName}`;
				}else if(item.type == 'redpacket'){
					item.text = `恭喜 ${item.user} 获得${item.parValue}${item.prizeName}`;
				}
				this.noticeList.push(item.text);
			})
			
			console.log('getCommonRaffle',res)
		})
	},
    /**
  * 查询活动详情
  */
    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, currentPrize) {


      this.currentPrize = 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>
	
	.notice-view{
		width:100%;
		min-height:64rpx;
		display: flex;
		padding: 0 40rpx;
		margin-top:30rpx;
		box-sizing: border-box;
		.notice-li{
			width:100%;
			height:100%;
			display: flex;
			border-radius: 32rpx;
			background: linear-gradient( 180deg, #FF8876 0%, #FF3D36 17%, #FF4646 85%, #FF8978 100%);
		}
	}
.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: 30rpx 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>