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

<template>
  <div class="guide-card wide">
    <div class="guide-illustration short" 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 compact">
      <div class="guide-badge compact">Step 7</div>
      <h2 class="guide-title small">个人中心 — 我的兑换</h2>
      <p class="guide-desc compact">在「我的兑换」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 compact">
      <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 },
    isReplay: { 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() {
      setTab('exchange')
      // 先跳首页再跳 myCenter，确保组件重新 created 读取 Cookie
      this.$router.push('/home').then(() => {
        this.$router.push('/myCenter')
      })
      setTimeout(() => this.$emit('next'), 800)
    },
  },
}
</script>

<style scoped>
@import './guide-common.css';

/* Step 7 专属样式 */
.guide-badge { color: #e87722; background: #fff4e8; }
.btn-primary {
  background: linear-gradient(135deg, #e87722, #f9ca24);
  box-shadow: 0 4px 14px rgba(232,119,34,0.3);
}
.btn-primary:hover { box-shadow: 0 6px 18px rgba(232,119,34,0.45); }

/* Tab 列表 */
.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;
}
</style>