AIxiaocaishen/src/views/wealth/goldenWheel.vue

<template>
  <div class="wheel-container">
    <!-- 顶部区域 -->
    <div class="top-section">
      <div class="expire-time">财富金轮到期时间：{{ expireTime }}</div>
      <div class="top-right">
        <div class="icon-item">
          <img :src="historyImg" class="history-icon" alt="历史记录">
          <span class="icon-text">历史记录</span>
        </div>
        <div class="icon-item" @click="handleRuleClick">
          <img :src="ruleImg" class="rule-icon" alt="活动规则">
          <span class="icon-text">活动规则</span>
        </div>
      </div>
    </div>
    
    <!-- 主标题图片 -->
    <img :src="titleImg" class="title-img" alt="转动财富金轮 开启财富人生">
    
    <!-- 转盘区域 -->
    <div class="wheel-section">
      <div class="wheel-wrapper">
        <!-- 转盘图片尺寸：333x333 -->
        <img 
          :src="wheelImg" 
          class="wheel-img" 
          :class="{ spinning: isSpinning }" 
          :style="{ transform: `rotate(${currentRotation}deg)` }"
          alt="财富金轮"
          ref="wheel"
        >
        <!-- 指针图片尺寸：137x137 -->
        <img :src="pointerImg" class="pointer-img" alt="指针">
        <!-- 指针盖图片尺寸：104x106 -->
        <img :src="pointerCoverImg" class="pointer-cover-img" alt="指针盖">
      </div>
    </div>
    
    <!-- 剩余次数 -->
    <div class="remaining-section">
      <img :src="remainingBgImg" class="remaining-bg" alt="今日剩余">
      <span class="remaining-text">今日剩余：{{ remainingTimes }}次</span>
    </div>
    
    <!-- 转动按钮 -->
    <button 
      class="spin-btn" 
      :disabled="isSpinning || showPrizeModal || showRuleModal || isFirstVisit || remainingTimes === 0"
      @click="handleSpin"
    >
      <img 
        :src="(remainingTimes > 0 && !showPrizeModal && !showRuleModal && !isFirstVisit) ? spinBtnImg : disabledSpinBtnImg" 
        alt="转动金轮"
        class="spin-btn-img"
      >
    </button>
    
    <!-- 中奖弹窗 -->
    <div class="prize-modal" v-if="showPrizeModal">
      <div class="modal-overlay" @click="closeModal"></div>
      <div class="modal-content">
        <img :src="modalBgImg" class="modal-bg" alt="弹窗背景">
        <!-- 右上角关闭按钮 -->
        <button class="close-modal" @click="closeModal">
          <img :src="closeBtnImg" alt="关闭弹窗">
        </button>
        <div class="prize-info">
          <div class="prize-title">{{ prizeMessage }}</div>
          <div class="prize-amount-wrapper">
            <img :src="prizeAmountImg" class="prize-amount-bg" alt="奖品数量背景">
            <div class="prize-amount">{{ prizeAmount }}</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 剩余次数为0时的提示弹窗 -->
    <div class="no-times-modal" v-if="showNoTimesModal">
      <div class="modal-overlay" @click="closeNoTimesModal"></div>
      <div class="no-times-content">
        <img :src="noTimesImg" class="no-times-bg" alt="今日次数已用完">
      </div>
    </div>
    
    <!-- 活动规则弹窗 -->
    <div class="rule-modal" v-if="showRuleModal">
      <div class="modal-overlay" @click="closeRuleModal"></div>
      <div class="rule-content">
        <img :src="ruleBgImg" class="rule-bg" alt="活动规则背景">
        <!-- 右上角关闭按钮 -->
        <button class="close-rule-btn" @click="closeRuleModal">
          <img :src="closeRuleBtnImg" alt="关闭活动规则">
        </button>
        <div class="rule-text">
          <div class="rule-line">1.在财富金轮使用期限内，每天可以转动一次</div>
          <div class="rule-line">2.通过财富金轮可以获得免费Tonken和背包礼物等</div>
          <div class="rule-line">3.用户通过财富金轮获得的物品以最终展示结果为准</div>
          <div class="rule-line">4.Homily Link平台拥有最终解释权</div>
        </div>
      </div>
    </div>
    
    <!-- 首次访问活动规则弹窗 -->
    <div class="rule-modal" v-if="isFirstVisit">
      <div class="modal-overlay" @click="closeFirstVisitModal"></div>
      <div class="rule-content">
        <img :src="ruleBgImg" class="rule-bg" alt="活动规则背景">
        <!-- 右上角关闭按钮 -->
        <button class="close-rule-btn" @click="closeFirstVisitModal">
          <img :src="closeRuleBtnImg" alt="关闭活动规则">
        </button>
        <div class="rule-text">
          <div class="rule-line">1.在财富金轮使用期限内，每天可以转动一次</div>
          <div class="rule-line">2.通过财富金轮可以获得免费Tonken和背包礼物等</div>
          <div class="rule-line">3.用户通过财富金轮获得的物品以最终展示结果为准</div>
          <div class="rule-line">4.Homily Link平台拥有最终解释权</div>
        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import { permissionApi, lotteryApi } from '@/api/goldenWheel'
export default {
  name: 'FortuneWheel',
  data() {
    return {
      // 图片资源
      historyImg: 'https://d31zlh4on95l9h.cloudfront.net/images/aed693de6beb9faae015fd0628c4f052.png',
      ruleImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9a3f7680b29e31b60151cf562c0d43cb.png',
      homeImg: 'https://d31zlh4on95l9h.cloudfront.net/images/453475456dad8e6832e9904c901c1274.png',
      titleImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a87d19806fed47b7fdf18d4b5dd70e65.png',
      wheelImg: 'https://d31zlh4on95l9h.cloudfront.net/images/d925f375c9ef15a751500ae130d91fe5.png',
      pointerImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9c09631c202b78cc06b8935c17431dac.png',
      pointerCoverImg: 'https://d31zlh4on95l9h.cloudfront.net/images/536c171c263990b12f1cc0a6e511b5e7.png',
      remainingBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a43f0c383d55fc56b34768f039a401a8.png',
      spinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/11b749e0fd4b08238980b74c6e80b2e6.png',
      disabledSpinBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9b7383c1f80bb32a279791879947791a.png',
      modalBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/f75ce9ca2703662fd3176dd0493f6d7b.png',
      prizeAmountImg: 'https://d31zlh4on95l9h.cloudfront.net/images/878b8ea0c78bcafdaf4f6eb63a0b2eef.png',
      closeBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/453475456dad8e6832e9904c901c1274.png',
      noTimesImg: 'https://d31zlh4on95l9h.cloudfront.net/images/a67e8b3de6e441af7bcb8fbbb2153ec2.png',
      ruleBgImg: 'https://d31zlh4on95l9h.cloudfront.net/images/9f585ee0ab251f348a4568355ad36816.png',
      closeRuleBtnImg: 'https://d31zlh4on95l9h.cloudfront.net/images/ca2ddd411ffb85968bc261382477c984.png',
      
      // 数据
      token: '',
      expireTime: '',
      remainingTimes: 0,
      isSpinning: false,
      showPrizeModal: false,
      showNoTimesModal: false,
      showRuleModal: false,
      isFirstVisit: true,
      currentRotation: 0,
      noTimesTimer: null,
      prizeMessage: '',
      prizeAmount: ''
    }
  },
  mounted() {
    this.token = decodeURIComponent(this.getQueryString('token'))
    // 调用API获取数据
    this.fetchWheelInfo();
    this.getTokenFromURL();
  },
  methods: {
    getQueryString(name) {
      var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
      var r = window.location.search.substr(1).match(reg);
      console.log("获取token方法getQueryString"+reg)
      console.log("获取token方法getQueryString"+r)
      if (r != null) {
          return unescape(r[2]);
      }
      return null;
    },
    getTokenFromURL() {
          // 使用URLSearchParams API获取token参数
          const urlParams = new URLSearchParams(window.location.search);
          const tokenParam = urlParams.get('token');
          console.log("getTokenFromURL"+tokenParam)
          if (tokenParam) {
            this.token = decodeURIComponent(tokenParam);
            console.log("getTokenFromURL"+this.token)
            console.log('获取到Token:', this.token);
          } else {
            console.log('URL中没有找到token参数');
          }
        },
    // 调用API获取财富金轮信息
    fetchWheelInfo() {
      const token = 'pC134lIG1xDIbIi1ohnnbZi0+fEeMx8pywnIlrmTxdwROKkuwWqAWu9orpkpeXVqL98DPfeonNYpHv+mucA';
      
      permissionApi({ token }).then(res => {
        if(res.code === 200){
          this.expireTime = res.data.deadline;
          this.remainingTimes = res.data.count;
        } else {
          console.error('API返回错误:', res.msg);
        }
      }).catch(error => {
        console.error('API调用失败:', error);
      });
    },
    
    // 调用抽奖API获取奖品信息
    fetchPrizeInfo() {
      const token = 'pC134lIG1xDIbIi1ohnnbZi0+fEeMx8pywnIlrmTxdwROKkuwWqAWu9orpkpeXVqL98DPfeonNYpHv+mucA';
      
      return lotteryApi({ token }).then(res => {
        if(res.code === 200){
          // 解析API返回的字符串数据
          const prizeData = res.data;
          // 假设返回格式为 "恭喜您获得卡券 2"
          // 这里可以根据实际返回格式进行调整
          const parts = prizeData.split(' ');
          this.prizeMessage = parts.slice(0, -1).join(' '); // 获取除最后一部分外的所有部分
          this.prizeAmount = parts[parts.length - 1]; // 获取最后一部分作为奖品数量
          
          // 抽奖成功后重新获取剩余次数
          this.fetchWheelInfo();
          
          return true;
        } else {
          console.error('抽奖API返回错误:', res.msg);
          // 设置默认值
          this.prizeMessage = '抽奖失败';
          this.prizeAmount = '请重试';
          return false;
        }
      }).catch(error => {
        console.error('抽奖API调用失败:', error);
        // 设置默认值
        this.prizeMessage = '网络错误';
        this.prizeAmount = '请重试';
        return false;
      });
    },
    
    // 处理转动
    async handleSpin() {
      if (this.showRuleModal || this.isFirstVisit) return;
      
      if (this.remainingTimes <= 0) {
        this.showNoTimesModal = true;
        
        if (this.noTimesTimer) {
          clearTimeout(this.noTimesTimer);
        }
        this.noTimesTimer = setTimeout(() => {
          this.showNoTimesModal = false;
        }, 3000);
        
        return;
      }
      
      if (this.isSpinning) return;
      
      this.isSpinning = true;
      
      // 开始旋转动画
      const newRotation = this.currentRotation + 1440;
      this.currentRotation = newRotation;
      
      // 调用抽奖API获取奖品信息
      const success = await this.fetchPrizeInfo();
      
      setTimeout(() => {
        this.isSpinning = false;
        
        if (success) {
          setTimeout(() => {
            this.showPrizeModal = true;
          }, 500);
        }
      }, 3000);
    },
    
    // 处理活动规则点击
    handleRuleClick() {
      this.showRuleModal = true;
    },
    
    // 关闭弹窗
    closeModal() {
      this.showPrizeModal = false;
    },
    
    // 关闭无次数提示弹窗
    closeNoTimesModal() {
      this.showNoTimesModal = false;
      if (this.noTimesTimer) {
        clearTimeout(this.noTimesTimer);
      }
    },
    
    // 关闭活动规则弹窗
    closeRuleModal() {
      this.showRuleModal = false;
    },
    
    // 关闭首次访问弹窗
    closeFirstVisitModal() {
      this.isFirstVisit = false;
    },
    
  }
}
</script>

<style scoped>
.wheel-container {
  min-height: 100vh;
  background-image: url('https://d31zlh4on95l9h.cloudfront.net/images/aec2d399d578ab0a97d72bc8628433bb.png');
  background-size: cover;
  background-position: bottom center;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* 顶部区域样式 */
.top-section {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 15px;
}

.expire-time {
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  margin: 11px 0 0 12px;
}

.top-right {
  display: flex;
  gap: 20px;
  align-items: center;
}

.icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.history-icon, .rule-icon, .home-icon {
  width: 25px;
  height: 25px;
  cursor: pointer;
}

.icon-text {
  color: #fff;
  font-size: 11px;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
}

/* 主标题图片样式 */
.title-img {
  width: 327px;
  height: 144px;
  margin-bottom: 20px;
}

/* 转盘区域样式 */
.wheel-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 15px;
}

.wheel-wrapper {
  position: relative;
  width: 333px;
  height: 333px;
}

.wheel-img {
  width: 100%;
  height: 100%;
  transform-origin: center;
  will-change: transform;
  transition: transform 0.3s ease-out;
}

.wheel-img.spinning {
  animation: optimal-spin 3s ease-out forwards;
}

@keyframes optimal-spin {
  0% {
    transform: rotate(0deg);
    animation-timing-function: ease-in;
  }
  70% {
    transform: rotate(1260deg);
  }
  100% {
    transform: rotate(1440deg);
  }
}

/* 指针样式 */
.pointer-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 137px;
  height: 137px;
  transform: translate(-50%, -50%);
  z-index: 2;
}

/* 指针盖样式 */
.pointer-cover-img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 104px;
  height: 106px;
  transform: translate(-50%, -50%);
  z-index: 3;
}

/* 剩余次数样式 */
.remaining-section {
  position: relative;
  margin-bottom: 20px;
  display: flex;
  justify-content: center;
  margin-top: -5px;
}

.remaining-bg {
  width: 104px;
  height: 21.5px;
}

.remaining-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8);
  width: 100%;
  text-align: center;
  white-space: nowrap;
}

/* 转动按钮样式 */
.spin-btn {
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.spin-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.spin-btn:disabled {
  cursor: not-allowed;
  opacity: 0.7;
}

.spin-btn-img {
  width: 240px;
  height: 94px;
}

/* 弹窗样式 */
.prize-modal, .no-times-modal, .rule-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}

/* 中奖弹窗内容区域尺寸为333x377 */
.modal-content {
  position: relative;
  width: 333px;
  height: 377px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  animation: modal-appear 0.3s ease-out;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* 无次数提示弹窗样式 */
.no-times-content {
  position: relative;
  width: 333px;
  height: 79px;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001;
  margin-top: 250px;
  animation: slide-up 0.3s ease-out;
}

@keyframes slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.no-times-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* 弹窗内容样式 */
.prize-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  margin-top: 120px;
}

.prize-title {
  color: #B82525;
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 35px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
  animation: text-pulse 2s infinite;
}

@keyframes text-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.prize-amount-wrapper {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}

/* 奖品数量背景图片尺寸为272x58 */
.prize-amount-bg {
  width: 272px;
  height: 58px;
}

.prize-amount {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #FFFFFF;
  font-size: 25px;
  font-weight: bold;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
}

/* 关闭按钮样式 - 修改位置 */
.close-modal {
  position: absolute;
  top: 115px;
  right: 22px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1002;
  transition: transform 0.2s ease;
}

.close-modal:hover {
  transform: scale(1.1);
}

.close-modal img {
  width: 35px;
  height: 35px;
}

/* 活动规则弹窗样式 - 整体下移 */
.rule-content {
  position: relative;
  width: 333px;
  height: 239px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1001;
  animation: modal-appear 0.3s ease-out;
  margin-top: 80px;
}

.rule-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;
}

/* 活动规则关闭按钮 - 修复：确保按钮层级高于背景 */
.close-rule-btn {
  position: absolute;
  top: 45.5px;
  right: 35.5px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1002;
  transition: transform 0.2s ease;
  padding: 0;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-rule-btn:hover {
  transform: scale(1.1);
}

.close-rule-btn img {
  width: 20px;
  height: 20px;
  display: block;
}

/* 活动规则文本 */
.rule-text {
  position: absolute;
  top: 83px;
  left: 27px;
  display: flex;
  flex-direction: column;
  gap: 9.15px;
  width: calc(100% - 54px);
}

.rule-line {
  color: #FFFFFF;
  font-size: 12px;
  line-height: 1.4;
}

/* 媒体查询 - 适配小屏幕 */
@media (max-width: 380px) {
  .title-img {
    width: 280px;
    height: 123px;
  }
  
  .wheel-wrapper {
    width: 280px;
    height: 280px;
  }
  
  .pointer-img {
    width: 115px;
    height: 115px;
  }
  
  .pointer-cover-img {
    width: 87px;
    height: 89px;
  }
  
  .spin-btn-img {
    width: 200px;
    height: 78px;
  }
  
  .top-right {
    gap: 15px;
  }
  
  .remaining-section {
    margin-top: -8px;
  }
  
  /* 小屏幕适配中奖弹窗 */
  .modal-content {
    width: 300px;
    height: 340px;
  }
  .prize-info {
      margin-top: 100px;
  }
  
  .prize-title {
      margin-bottom: 30px;
  }
  
  .prize-amount-wrapper {
      margin-top: 18px;
  }
  
  .prize-amount-bg {
    width: 240px;
    height: 51px;
  }
  
  .prize-amount {
    font-size: 22px;
  }
  
  .no-times-content {
    width: 280px;
    height: 66px;
    margin-top: 200px;
  }
  
  /* 小屏幕适配关闭按钮位置 */
  .close-modal {
      top: 100px;
      right: 18px;
  }
  .close-modal img {
      width: 30px;
      height: 30px;
  }
  
  /* 小屏幕适配活动规则弹窗 */
  .rule-content {
    width: 300px;
    height: 215px;
    margin-top: 70px;
  }
  
  .close-rule-btn {
    top: 41px;
    right: 32px;
  }
  
  .rule-text {
    top: 75px;
    left: 24px;
    width: calc(100% - 48px);
  }
}
</style>