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>

    <!-- 中奖结果弹窗 -->
    <!-- #ifdef APP-PLUS -->
    <!-- <ResultModal :visible="showResult" :prize="currentPrize" @close="showResult = false" /> -->
    <!-- #endif -->
  </view>
</template>

<script>
// import LotteryGrid from "./components/LotteryGrid.vue";
// import ResultModal from './components/ResultModal.vue'
import { getActivityList, 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://static.tbmall.xin/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://static.tbmall.xin/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>