feat: 是否首次-接口调用

src/App.vue

@@ -20,7 +20,7 @@
 import AppHeader from '@/components/AppHeader.vue';
 import AppBackTop from '@/components/AppBackTop.vue';
 import NewUserGuide from '@/components/NewUserGuide/index.vue';
-import { lockStatus, useInfo } from "@/api/allApi";
+import { lockStatus, checkFirstLogin } from "@/api/allApi";
 export default {
   name: 'app',
   components: {
@@ -39,15 +39,25 @@ export default {
   },
   created(){
     this.$store.dispatch('GetUserInfo');
+    // 每10分钟调用一次getUseInfo接口保持token活跃 TODO ly
+    // setInterval(() => {
+    //   useInfo();
+    // }, 600000);
 
-
-    // 延迟显示新手指引
-    this.$nextTick(() => {
-      setTimeout(() => {
-        if (this.$refs.guide) {
-          this.$refs.guide.show();
-        }
-      }, 800);
+    // 判断是否初次登录，决定是否显示新手指引
+    checkFirstLogin().then(res => {
+      const isFirst = res.data && res.data.data && res.data.data.isFirstLogin
+      if (isFirst) {
+        this.$nextTick(() => {
+          setTimeout(() => {
+            if (this.$refs.guide) {
+              this.$refs.guide.show();
+            }
+          }, 800);
+        });
+      }
+    }).catch(() => {
+      // 接口异常时不显示引导，避免影响用户正常使用
     });
     this.$nextTick(() => {
       // 1.禁用右键菜单

src/api/allApi.js

@@ -539,3 +539,12 @@ export function winningList(query) {
     params:query
   })
 }
+
+// 判断是否初次登录（后端从 token 解析 userId，无需传参）
+export function checkFirstLogin() {
+  return request({
+    url: '/entry-period/check-first-login',
+    method: 'get',
+    timeout: 50000,
+  })
+}

src/components/NewUserGuide/index.vue

@@ -35,6 +35,7 @@
 </template>
 
 <script>
+import { checkFirstLogin } from '@/api/allApi'
 import WelcomeGuide from './steps/WelcomeGuide.vue'
 import SignInGuide from './steps/SignInGuide.vue'
 import PointsMallGuide from './steps/PointsMallGuide.vue'
@@ -42,7 +43,7 @@ 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 CouponGuide from './steps/CouponGuideV2.vue'
 import RewardGuide from './steps/RewardGuide.vue'
 
 /**
@@ -57,7 +58,7 @@ const stepComponents = [
   EarnPointsGuide,   // Step 5 — 完成任务
   ProfileGuide,      // Step 6 — 个人中心：我的积分
   ExchangeGuide,     // Step 7 — 个人中心：我的兑换
-  CouponGuide,       // Step 8 — 个人中心：礼品券兑换
+  CouponGuide,       // Step 8 — 个人中心：礼品券兑换（V2 含截图引导）
   RewardGuide,       // Step 9 — 引导完成领奖
 ]
 

src/components/NewUserGuide/steps/CouponGuideV2.vue

@@ -0,0 +1,125 @@
+<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 8</div>
+      <h2 class="guide-title small">个人中心 — 礼品券兑换</h2>
+      <p class="guide-desc compact">在「我的礼品券」Tab 管理你的礼品券，两步轻松使用：</p>
+
+      <!-- 截图引导 -->
+      <div class="screenshot-list">
+        <div class="screenshot-item">
+          <div class="screenshot-num">1</div>
+          <div class="screenshot-content">
+            <img class="screenshot-img" :src="step1Img" alt="点击去使用" />
+            <p class="screenshot-label">点击礼品券上的「去使用」按钮</p>
+          </div>
+        </div>
+        <div class="screenshot-item">
+          <div class="screenshot-num">2</div>
+          <div class="screenshot-content">
+            <img class="screenshot-img" :src="step2Img" alt="使用礼品券" />
+            <p class="screenshot-label">选择商品，确认订单，礼品券自动抵扣</p>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="guide-footer compact">
+      <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'
+import step1Img from '@/assets/image/newUserGuide/step1.png'
+import step2Img from '@/assets/image/newUserGuide/step2.png'
+
+export default {
+  name: 'CouponGuideV2',
+  props: {
+    isLast: { type: Boolean, default: false },
+    isFirst: { type: Boolean, default: false },
+    isReplay: { type: Boolean, default: false },
+  },
+  data() {
+    return {
+      step1Img,
+      step2Img,
+    }
+  },
+  methods: {
+    handleGoCoupon() {
+      setTab('welfare')
+      // 先跳首页再跳 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 8 V2 专属样式 */
+.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); }
+
+/* 截图引导 */
+.screenshot-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.screenshot-item {
+  display: flex;
+  gap: 12px;
+  align-items: flex-start;
+}
+.screenshot-num {
+  width: 24px;
+  height: 24px;
+  line-height: 24px;
+  text-align: center;
+  font-size: 13px;
+  font-weight: 700;
+  color: #fff;
+  background: #e87722;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-top: 4px;
+}
+.screenshot-content {
+  flex: 1;
+}
+.screenshot-img {
+  width: 100%;
+  border-radius: 8px;
+  border: 1px solid #f0e6d8;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+}
+.screenshot-label {
+  font-size: 12px;
+  color: #86909c;
+  margin: 6px 0 0;
+  line-height: 1.5;
+}
+</style>