فهرست منبع

feat: 个人中心页面加入新手指引入口

longyang 3 هفته پیش
والد
کامیت
dd274690b3
3فایلهای تغییر یافته به همراه51 افزوده شده و 1 حذف شده
  1. 5 0
      src/App.vue
  2. 1 1
      src/components/NewUserGuide/steps/RewardGuide.vue
  3. 45 0
      src/views/HomeView/MyCenter.vue

+ 5 - 0
src/App.vue

@@ -75,6 +75,11 @@ export default {
     onGuideFinish() {
       console.log('新手指引已完成');
     },
+    showGuide() {
+      if (this.$refs.guide) {
+        this.$refs.guide.show();
+      }
+    },
     fatherMethod() {
       lockStatus().then(response=>{
         this.htmlData = response.data.errmsg; 

+ 1 - 1
src/components/NewUserGuide/steps/RewardGuide.vue

@@ -28,7 +28,7 @@
 
     <div class="guide-footer">
       <button class="btn-finish" @click="$emit('next')">
-        <span>🎁</span> 立即领取
+        <span>🚀</span> 开始探索
       </button>
       <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
         上一步

+ 45 - 0
src/views/HomeView/MyCenter.vue

@@ -293,6 +293,14 @@
                                 </div>
                             </div>
                         </el-tab-pane>
+                        <el-tab-pane label="新手指引" name="sixth">
+                            <div class="guide-replay-card">
+                                <div class="guide-replay-icon">📖</div>
+                                <h3 class="guide-replay-title">新手指引</h3>
+                                <p class="guide-replay-desc">回顾誉商城的功能介绍,快速上手积分兑换、参与活动等操作。</p>
+                                <el-button type="primary" @click="handleReplayGuide">重新查看</el-button>
+                            </div>
+                        </el-tab-pane>
                     </el-tabs>
                 </div>
 
@@ -601,6 +609,18 @@ export default {
             this.getSecondList(val);
         },
 
+        handleReplayGuide() {
+            let parent = this.$parent;
+            while (parent) {
+                if (parent.$options.name === 'app' && parent.showGuide) {
+                    parent.showGuide();
+                    return;
+                }
+                parent = parent.$parent;
+            }
+            console.warn('[Guide] 未找到 App 实例');
+        },
+
         handleClick(tab) {
             this.total = 0;
             this.listQuery = {
@@ -628,6 +648,31 @@ export default {
 };
 </script>
 <style scoped>
+.guide-replay-card {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 60px 40px;
+  text-align: center;
+}
+.guide-replay-icon {
+  font-size: 56px;
+  margin-bottom: 20px;
+}
+.guide-replay-title {
+  font-size: 20px;
+  font-weight: 600;
+  color: #333;
+  margin: 0 0 12px 0;
+}
+.guide-replay-desc {
+  font-size: 14px;
+  color: #999;
+  line-height: 1.6;
+  max-width: 400px;
+  margin: 0 0 30px 0;
+}
 .gray{
   filter: grayscale(100%);
 }