pointsMall/src/components/NewUserGuide/steps/RewardGuide.vue

<template>
  <div class="guide-card">
    <!-- 烟花动画背景 -->
    <div class="guide-illustration reward-bg">
      <div class="firework fw-1">🎆</div>
      <div class="firework fw-2">✨</div>
      <div class="firework fw-3">🎇</div>
      <div class="illus-center">🎁</div>
    </div>

    <div class="guide-body">
      <div class="guide-badge finish">Step 7 · 完成！</div>
      <h2 class="guide-title">引导完成，领取奖励！</h2>
      <p class="guide-desc">恭喜你完成新手引导！<br />你的专属<strong>新手礼包</strong>已准备就绪 🎉</p>

      <!-- 奖励展示 -->
      <div class="reward-list">
        <div class="reward-item" v-for="item in rewards" :key="item.id">
          <div class="reward-icon">{{ item.icon }}</div>
          <div class="reward-info">
            <div class="reward-name">{{ item.name }}</div>
            <div class="reward-value">{{ item.value }}</div>
          </div>
          <div class="reward-badge">新人专享</div>
        </div>
      </div>
    </div>

    <div class="guide-footer" v-if="hasClaimed !== null">
      <button class="btn-finish" v-if="hasClaimed" @click="$emit('next')">
        <span>🚀</span> 开始探索
      </button>
      <button class="btn-finish" v-else @click="handleClaim">
        <span>🎁</span> 立即领取
      </button>
      <button class="btn-prev" @click="$emit('prev')">
        上一步
      </button>
    </div>
  </div>
</template>

<script>
import { Message } from 'element-ui'
import { hasClaimedEntryIntegral, claimEntryIntegral } from '@/api/allApi'

export default {
  name: 'RewardGuide',
  props: {
    isLast: { type: Boolean, default: false },
    isFirst: { type: Boolean, default: false },
    isReplay: { type: Boolean, default: false },
  },
  data() {
    return {
      hasClaimed: null,
      rewards: [
        { id: 1, icon: '💰', name: '积分奖励', value: '+1000 积分' },
        { id: 2, icon: '🏅', name: '引导完成成就徽章', value: '新手成就解锁' },
        // { id: 3, icon: '🎫', name: '专属礼品券', value: '满 100 积分可用' },
      ],
    }
  },
  created() {
    const userId = this.$store.getters.userInfo.loginId
    if (userId) {
      hasClaimedEntryIntegral({ userId }).then(res => {
        if (res.data && res.data.data) {
          this.hasClaimed = !!res.data.data.hasClaimed
        }
      }).catch(() => {
        // 接口异常默认已领过，显示「开始探索」
        this.hasClaimed = true
      })
    }else {
        this.hasClaimed = true
    }
  },
  methods: {
    handleClaim() {
      const userId = this.$store.getters.userInfo.loginId
      claimEntryIntegral({ userId }).then(() => {
        Message.success('奖励领取成功！')
        this.hasClaimed = true
        this.$emit('next')
      }).catch(() => {
        Message.error('领取失败，请稍后重试')
      })
    },
  },
}
</script>

<style scoped>
.guide-card {
  width: 440px;
  max-width: 90vw;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
  animation: cardFloat 0.5s ease-out;
}
@keyframes cardFloat {
  from { opacity: 0; transform: translateY(30px) scale(0.95); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.reward-bg {
  position: relative;
  height: 160px;
  background: linear-gradient(135deg, #27ae60 0%, #6dd5fa 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.illus-center {
  font-size: 64px;
  z-index: 2;
  animation: giftPulse 2s ease-in-out infinite;
}
@keyframes giftPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1) rotate(5deg); }
}
.firework {
  position: absolute;
  font-size: 24px;
  animation: fireworkAnim 3s ease-in-out infinite;
}
.fw-1 { top: 16px; left: 24px; animation-delay: 0s; }
.fw-2 { top: 20px; right: 28px; animation-delay: 1s; }
.fw-3 { bottom: 16px; left: 50%; transform: translateX(-50%); animation-delay: 2s; }
@keyframes fireworkAnim {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.7; }
  50% { transform: scale(1.3) rotate(15deg); opacity: 1; }
}
.guide-body { padding: 24px 28px 16px; }
.guide-badge {
  display: inline-block;
  padding: 3px 12px;
  font-size: 12px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #27ae60, #6dd5fa);
  border-radius: 12px;
  margin-bottom: 12px;
}
.guide-title {
  font-size: 20px;
  font-weight: 700;
  color: #1d2129;
  margin: 0 0 8px;
}
.guide-desc {
  font-size: 13px;
  line-height: 1.7;
  color: #86909c;
  margin: 0 0 16px;
}
.guide-desc strong { color: #27ae60; }
.reward-list { display: flex; flex-direction: column; gap: 10px; }
.reward-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f0fdf4, #e8fdf5);
  border-radius: 12px;
  border: 1px solid #d1fae5;
  transition: all 0.25s;
}
.reward-item:hover { transform: translateX(4px); box-shadow: 0 2px 10px rgba(39,174,96,0.15); }
.reward-icon { font-size: 26px; }
.reward-info { flex: 1; }
.reward-name { font-size: 13px; font-weight: 600; color: #1d2129; }
.reward-value { font-size: 12px; color: #27ae60; font-weight: 700; margin-top: 2px; }
.reward-badge {
  padding: 2px 8px;
  font-size: 11px;
  color: #27ae60;
  background: #fff;
  border: 1px solid #27ae60;
  border-radius: 10px;
  white-space: nowrap;
}
.guide-footer { padding: 16px 28px 28px; }
.btn-finish {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 50px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #27ae60, #6dd5fa);
  border: none;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.3s;
  box-shadow: 0 4px 12px rgba(39,174,96,0.2);
  animation: btnShine 3s ease-in-out infinite;
}
.btn-finish:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(39,174,96,0.3); }
.btn-finish:active { transform: translateY(0); }
.btn-prev {
  width: 100%;
  height: 40px;
  font-size: 14px;
  font-weight: 500;
  color: #86909c;
  background: #f7f9fc;
  border: none;
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.25s;
  margin-top: 10px;
}
.btn-prev:hover { color: #4e5969; background: #eef1f6; }
@keyframes btnShine {
  0%, 100% { box-shadow: 0 4px 12px rgba(39,174,96,0.2); }
  50% { box-shadow: 0 4px 16px rgba(39,174,96,0.35); }
}
</style>