feat: 个人中心步骤拆分

src/components/NewUserGuide/index.vue

@@ -40,6 +40,8 @@ import PointsMallGuide from './steps/PointsMallGuide.vue'
 import ActivityGuide from './steps/ActivityGuide.vue'
 import EarnPointsGuide from './steps/EarnPointsGuide.vue'
 import ProfileGuide from './steps/ProfileGuide.vue'
+import ExchangeGuide from './steps/ExchangeGuide.vue'
+import CouponGuide from './steps/CouponGuide.vue'
 import RewardGuide from './steps/RewardGuide.vue'
 
 /**
@@ -52,8 +54,10 @@ const stepComponents = [
   PointsMallGuide,   // Step 3 — 积分商城
   ActivityGuide,     // Step 4 — 参与活动
   EarnPointsGuide,   // Step 5 — 完成任务
-  ProfileGuide,      // Step 6 — 个人中心
-  RewardGuide,       // Step 7 — 引导完成领奖
+  ProfileGuide,      // Step 6 — 个人中心：我的积分
+  ExchangeGuide,     // Step 7 — 个人中心：我的兑换
+  CouponGuide,       // Step 8 — 个人中心：礼品券兑换
+  RewardGuide,       // Step 9 — 引导完成领奖
 ]
 
 export default {

src/components/NewUserGuide/steps/CouponGuide.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="guide-card wide">
+    <div class="guide-illustration" style="background: linear-gradient(135deg, #e87722 0%, #f9ca24 100%);">
+      <div class="illus-bubble bubble-1">🎫</div>
+      <div class="illus-bubble bubble-2">🎁</div>
+      <div class="illus-center">🎟️</div>
+    </div>
+
+    <div class="guide-body">
+      <div class="guide-badge">Step 8</div>
+      <h2 class="guide-title">个人中心 — 礼品券兑换</h2>
+      <p class="guide-desc">在「我的礼品券」Tab 管理你的礼品券，支持三种状态：</p>
+
+      <!-- 状态说明 -->
+      <div class="tab-list">
+        <div class="tab-item" v-for="item in statusList" :key="item.id">
+          <div class="tab-num">{{ item.icon }}</div>
+          <div class="tab-info">
+            <div class="tab-title">{{ item.title }}</div>
+            <div class="tab-desc">{{ item.desc }}</div>
+          </div>
+        </div>
+      </div>
+
+      <!-- 兑换流程 -->
+      <div class="redeem-flow">
+        <span class="flow-tip">🎫 礼品券兑换路径：</span>
+        <div class="flow-steps">
+          <span v-for="(step, i) in flowSteps" :key="i" class="flow-step-wrap">
+            <span class="flow-step">{{ step }}</span>
+            <span v-if="i < flowSteps.length - 1" class="flow-arrow">→</span>
+          </span>
+        </div>
+      </div>
+    </div>
+
+    <div class="guide-footer">
+      <button class="btn-primary" @click="handleGoCoupon">
+        <span>🎫</span> 查看礼品券
+      </button>
+      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+        ← 上一步
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setTab } from '@/utils/auth'
+
+export default {
+  name: 'CouponGuide',
+  props: {
+    isLast: { type: Boolean, default: false },
+    isFirst: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      statusList: [
+        { id: 1, icon: '🟢', title: '去使用', desc: '礼品券未使用，点击「去使用」即可兑换' },
+        { id: 2, icon: '⚪', title: '已使用', desc: '礼品券已完成兑换' },
+        { id: 3, icon: '🔴', title: '已超期', desc: '礼品券已过期，无法使用' },
+      ],
+      flowSteps: ['选择商品', '确认订单', '礼品券抵扣', '兑换成功'],
+    }
+  },
+  methods: {
+    handleGoCoupon() {
+      this.$router.push('/myCenter')
+      setTimeout(() => this.$emit('next'), 500)
+    },
+  },
+}
+</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;
+}
+.guide-card.wide { width: 500px; }
+@keyframes cardFloat {
+  from { opacity: 0; transform: translateY(30px) scale(0.95); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.guide-illustration {
+  position: relative;
+  height: 130px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.illus-center { font-size: 52px; z-index: 2; }
+.illus-bubble {
+  position: absolute;
+  font-size: 22px;
+  animation: bubbleFloat 4s ease-in-out infinite;
+}
+.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
+.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
+@keyframes bubbleFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+.guide-body { padding: 20px 28px 14px; }
+.guide-badge {
+  display: inline-block;
+  padding: 3px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #e87722;
+  background: #fff4e8;
+  border-radius: 12px;
+  margin-bottom: 10px;
+}
+.guide-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1d2129;
+  margin: 0 0 6px;
+}
+.guide-desc {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #86909c;
+  margin: 0 0 14px;
+}
+.tab-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #f7f9fc;
+  border-radius: 10px;
+  transition: all 0.25s;
+}
+.tab-item:hover { background: #fff4e8; }
+.tab-num {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.tab-info { flex: 1; }
+.tab-title { font-size: 13px; font-weight: 600; color: #1d2129; }
+.tab-desc { font-size: 12px; color: #86909c; margin-top: 2px; }
+.redeem-flow {
+  padding: 10px 12px;
+  background: linear-gradient(135deg, #fff9f0, #fff4e0);
+  border-radius: 10px;
+  border-left: 3px solid #e87722;
+}
+.flow-tip { font-size: 12px; color: #e87722; font-weight: 600; display: block; margin-bottom: 6px; }
+.flow-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
+.flow-step-wrap { display: flex; align-items: center; gap: 4px; }
+.flow-step {
+  padding: 3px 8px;
+  background: #fff;
+  border: 1px solid #e87722;
+  border-radius: 6px;
+  font-size: 11px;
+  color: #e87722;
+  font-weight: 500;
+}
+.flow-arrow { font-size: 12px; color: #e87722; }
+.guide-footer {
+  padding: 14px 28px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #e87722, #f9ca24);
+  border: none;
+  border-radius: 22px;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 4px 14px rgba(232,119,34,0.3);
+}
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,119,34,0.45); }
+.btn-prev {
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #86909c;
+  background: #f7f9fc;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.25s;
+}
+.btn-prev:hover { color: #4e5969; background: #eef1f6; }
+</style>

src/components/NewUserGuide/steps/ExchangeGuide.vue

@@ -0,0 +1,196 @@
+<template>
+  <div class="guide-card wide">
+    <div class="guide-illustration" style="background: linear-gradient(135deg, #e87722 0%, #f9ca24 100%);">
+      <div class="illus-bubble bubble-1">📦</div>
+      <div class="illus-bubble bubble-2">🚚</div>
+      <div class="illus-center">📋</div>
+    </div>
+
+    <div class="guide-body">
+      <div class="guide-badge">Step 7</div>
+      <h2 class="guide-title">个人中心 — 我的兑换</h2>
+      <p class="guide-desc">在「我的兑换」Tab 查看所有兑换订单状态：</p>
+
+      <!-- 订单状态说明 -->
+      <div class="tab-list">
+        <div class="tab-item" v-for="item in statusList" :key="item.id">
+          <div class="tab-num">{{ item.icon }}</div>
+          <div class="tab-info">
+            <div class="tab-title">{{ item.title }}</div>
+            <div class="tab-desc">{{ item.desc }}</div>
+          </div>
+        </div>
+      </div>
+
+      <div class="flow-tip-box">
+        <span class="flow-tip">💡 支持按状态筛选订单，点击「查看信息」查看兑换详情</span>
+      </div>
+    </div>
+
+    <div class="guide-footer">
+      <button class="btn-primary" @click="handleGoExchange">
+        <span>📦</span> 查看兑换记录
+      </button>
+      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+        ← 上一步
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { setTab } from '@/utils/auth'
+
+export default {
+  name: 'ExchangeGuide',
+  props: {
+    isLast: { type: Boolean, default: false },
+    isFirst: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      statusList: [
+        { id: 1, icon: '⏳', title: '待审核', desc: '订单已提交，等待审核中' },
+        { id: 2, icon: '🏪', title: '待发货', desc: '审核通过，等待发货' },
+        { id: 3, icon: '📬', title: '待收货', desc: '已发货，请注意查收' },
+        { id: 4, icon: '✅', title: '已收货', desc: '兑换完成' },
+        { id: 5, icon: '❌', title: '作废', desc: '订单已取消或作废' },
+      ],
+    }
+  },
+  methods: {
+    handleGoExchange() {
+      this.$router.push('/myCenter')
+      setTimeout(() => this.$emit('next'), 500)
+    },
+  },
+}
+</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;
+}
+.guide-card.wide { width: 500px; }
+@keyframes cardFloat {
+  from { opacity: 0; transform: translateY(30px) scale(0.95); }
+  to { opacity: 1; transform: translateY(0) scale(1); }
+}
+.guide-illustration {
+  position: relative;
+  height: 130px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+.illus-center { font-size: 52px; z-index: 2; }
+.illus-bubble {
+  position: absolute;
+  font-size: 22px;
+  animation: bubbleFloat 4s ease-in-out infinite;
+}
+.bubble-1 { top: 18px; left: 28px; animation-delay: 0s; }
+.bubble-2 { bottom: 18px; right: 28px; animation-delay: 2s; }
+@keyframes bubbleFloat {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-8px); }
+}
+.guide-body { padding: 20px 28px 14px; }
+.guide-badge {
+  display: inline-block;
+  padding: 3px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  color: #e87722;
+  background: #fff4e8;
+  border-radius: 12px;
+  margin-bottom: 10px;
+}
+.guide-title {
+  font-size: 18px;
+  font-weight: 700;
+  color: #1d2129;
+  margin: 0 0 6px;
+}
+.guide-desc {
+  font-size: 13px;
+  line-height: 1.6;
+  color: #86909c;
+  margin: 0 0 14px;
+}
+.tab-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
+.tab-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  background: #f7f9fc;
+  border-radius: 10px;
+  transition: all 0.25s;
+}
+.tab-item:hover { background: #fff4e8; }
+.tab-num {
+  width: 28px;
+  height: 28px;
+  line-height: 28px;
+  text-align: center;
+  font-size: 16px;
+  flex-shrink: 0;
+}
+.tab-info { flex: 1; }
+.tab-title { font-size: 13px; font-weight: 600; color: #1d2129; }
+.tab-desc { font-size: 12px; color: #86909c; margin-top: 2px; }
+.flow-tip-box {
+  padding: 10px 12px;
+  background: linear-gradient(135deg, #fff9f0, #fff4e0);
+  border-radius: 10px;
+  border-left: 3px solid #e87722;
+}
+.flow-tip {
+  font-size: 12px;
+  color: #e87722;
+  font-weight: 500;
+}
+.guide-footer {
+  padding: 14px 28px 22px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.btn-primary {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  height: 44px;
+  font-size: 15px;
+  font-weight: 600;
+  color: #fff;
+  background: linear-gradient(135deg, #e87722, #f9ca24);
+  border: none;
+  border-radius: 22px;
+  cursor: pointer;
+  transition: all 0.3s;
+  box-shadow: 0 4px 14px rgba(232,119,34,0.3);
+}
+.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(232,119,34,0.45); }
+.btn-prev {
+  height: 40px;
+  font-size: 14px;
+  font-weight: 500;
+  color: #86909c;
+  background: #f7f9fc;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.25s;
+}
+.btn-prev:hover { color: #4e5969; background: #eef1f6; }
+</style>

src/components/NewUserGuide/steps/ProfileGuide.vue

@@ -1,17 +1,17 @@
 <template>
   <div class="guide-card wide">
     <div class="guide-illustration" style="background: linear-gradient(135deg, #e87722 0%, #f9ca24 100%);">
-      <div class="illus-bubble bubble-1">👤</div>
-      <div class="illus-bubble bubble-2">🎫</div>
-      <div class="illus-center">🏠</div>
+      <div class="illus-bubble bubble-1">💰</div>
+      <div class="illus-bubble bubble-2">📊</div>
+      <div class="illus-center">👤</div>
     </div>
 
     <div class="guide-body">
       <div class="guide-badge">Step 6</div>
-      <h2 class="guide-title">个人中心 + 礼品券兑换引导</h2>
-      <p class="guide-desc">点击顶部头像进入个人中心，查看三大核心功能：</p>
+      <h2 class="guide-title">个人中心 — 我的积分</h2>
+      <p class="guide-desc">点击顶部头像进入个人中心，查看积分明细：</p>
 
-      <!-- 三个 Tab 说明 -->
+      <!-- 子功能说明 -->
       <div class="tab-list">
         <div class="tab-item" v-for="tab in tabs" :key="tab.id">
           <div class="tab-num">{{ tab.num }}</div>
@@ -22,17 +22,6 @@
           <span class="tab-icon">{{ tab.icon }}</span>
         </div>
       </div>
-
-      <!-- 兑换流程 -->
-      <div class="redeem-flow">
-        <span class="flow-tip">🎫 礼品券兑换路径：</span>
-        <div class="flow-steps">
-          <span v-for="(step, i) in flowSteps" :key="i" class="flow-step-wrap">
-            <span class="flow-step">{{ step }}</span>
-            <span v-if="i < flowSteps.length - 1" class="flow-arrow">→</span>
-          </span>
-        </div>
-      </div>
     </div>
 
     <div class="guide-footer">
@@ -43,7 +32,7 @@
         {{ isLast ? '完成新手教程 ✓' : '下一步' }}
       </button>
       <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
-        上一步
+        ← 上一步
       </button>
     </div>
   </div>
@@ -59,11 +48,10 @@ export default {
   data() {
     return {
       tabs: [
-        { id: 1, num: '①', icon: '💰', title: '我的积分', desc: '查看积分收支明细' },
-        { id: 2, num: '②', icon: '📦', title: '我的兑换', desc: '历史兑换记录' },
-        { id: 3, num: '③', icon: '🎫', title: '我的礼品券', desc: '未使用 / 已使用 / 已过期' },
+        { id: 1, num: '1', icon: '📋', title: '积分列表', desc: '查看积分收支明细与类型' },
+        { id: 2, num: '2', icon: '📖', title: '积分规则', desc: '了解积分获取与扣减规则' },
+        { id: 3, num: '3', icon: '⚡', title: '活跃度判定', desc: '查看活跃度评估标准' },
       ],
-      flowSteps: ['选择商品', '确认订单', '礼品券抵扣', '兑换成功'],
     }
   },
   methods: {
@@ -133,7 +121,7 @@ export default {
   color: #86909c;
   margin: 0 0 14px;
 }
-.tab-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
+.tab-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 0; }
 .tab-item {
   display: flex;
   align-items: center;
@@ -160,25 +148,6 @@ export default {
 .tab-title { font-size: 13px; font-weight: 600; color: #1d2129; }
 .tab-desc { font-size: 12px; color: #86909c; margin-top: 2px; }
 .tab-icon { font-size: 20px; }
-.redeem-flow {
-  padding: 10px 12px;
-  background: linear-gradient(135deg, #fff9f0, #fff4e0);
-  border-radius: 10px;
-  border-left: 3px solid #e87722;
-}
-.flow-tip { font-size: 12px; color: #e87722; font-weight: 600; display: block; margin-bottom: 6px; }
-.flow-steps { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
-.flow-step-wrap { display: flex; align-items: center; gap: 4px; }
-.flow-step {
-  padding: 3px 8px;
-  background: #fff;
-  border: 1px solid #e87722;
-  border-radius: 6px;
-  font-size: 11px;
-  color: #e87722;
-  font-weight: 500;
-}
-.flow-arrow { font-size: 12px; color: #e87722; }
 .guide-footer {
   padding: 14px 28px 22px;
   display: flex;