Parcourir la source

feat: 一些问题调整

longyang il y a 1 mois
Parent
commit
9c8679dbfa

+ 15 - 1
src/components/NewUserGuide/index.vue

@@ -23,7 +23,9 @@
             :is="currentComponent"
             :key="currentStep"
             :isLast="isLastStep"
+            :isFirst="isFirstStep"
             @next="goNext"
+            @prev="goPrev"
           />
         </transition>
       </div>
@@ -70,6 +72,10 @@ export default {
     }
   },
   computed: {
+    /** 当前是否为第一步 */
+    isFirstStep() {
+      return this.currentStep === 1
+    },
     /** 当前是否为最后一步 */
     isLastStep() {
       return this.currentStep === this.totalSteps
@@ -96,8 +102,16 @@ export default {
       }
     },
 
-    /** 点击步骤圆点跳转 */
+    /** 上一步 */
+    goPrev() {
+      if (this.currentStep > 1) {
+        this.currentStep--
+      }
+    },
+
+    /** 点击步骤圆点跳转(允许回到已访问步骤或下一个步骤) */
     handleDotClick(step) {
+      if (step === this.currentStep) return
       if (step < this.currentStep || step === this.currentStep + 1) {
         this.currentStep = step
       }

+ 17 - 1
src/components/NewUserGuide/steps/ActivityGuide.vue

@@ -28,9 +28,12 @@
       <button class="btn-primary" @click="handleGoActivity">
         <span>🎯</span> 了解活动
       </button>
-      <button class="btn-secondary" @click="$emit('next')">
+      <button v-if="false" class="btn-secondary" @click="$emit('next')">
         {{ isLast ? '完成新手教程 ✓' : '下一步' }}
       </button>
+      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+        上一步
+      </button>
     </div>
   </div>
 </template>
@@ -40,6 +43,7 @@ export default {
   name: 'ActivityGuide',
   props: {
     isLast: { type: Boolean, default: false },
+    isFirst: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -174,4 +178,16 @@ export default {
   transition: all 0.25s;
 }
 .btn-secondary:hover { background: #eaf2ff; }
+.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>

+ 17 - 1
src/components/NewUserGuide/steps/EarnPointsGuide.vue

@@ -25,9 +25,12 @@
       <button class="btn-primary" @click="handleGoEarn">
         <span>💰</span> 去获取积分
       </button>
-      <button class="btn-secondary" @click="$emit('next')">
+      <button v-if="false" class="btn-secondary" @click="$emit('next')">
         {{ isLast ? '完成新手教程 ✓' : '下一步' }}
       </button>
+      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+        上一步
+      </button>
     </div>
   </div>
 </template>
@@ -37,6 +40,7 @@ export default {
   name: 'EarnPointsGuide',
   props: {
     isLast: { type: Boolean, default: false },
+    isFirst: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -170,4 +174,16 @@ export default {
   transition: all 0.25s;
 }
 .btn-secondary:hover { background: #eaf2ff; }
+.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>

+ 17 - 1
src/components/NewUserGuide/steps/PointsMallGuide.vue

@@ -25,9 +25,12 @@
       <button class="btn-primary" @click="handleGoMall">
         <span>🛍️</span> 去看看
       </button>
-      <button class="btn-secondary" @click="$emit('next')">
+      <button v-if="false" class="btn-secondary" @click="$emit('next')">
         {{ isLast ? '完成新手教程 ✓' : '下一步' }}
       </button>
+      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+        上一步
+      </button>
     </div>
   </div>
 </template>
@@ -37,6 +40,7 @@ export default {
   name: 'PointsMallGuide',
   props: {
     isLast: { type: Boolean, default: false },
+    isFirst: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -170,4 +174,16 @@ export default {
   transition: all 0.25s;
 }
 .btn-secondary:hover { background: #eaf2ff; }
+.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>

+ 17 - 1
src/components/NewUserGuide/steps/ProfileGuide.vue

@@ -39,9 +39,12 @@
       <button class="btn-primary" @click="handleGoProfile">
         <span>👤</span> 进入个人中心
       </button>
-      <button class="btn-secondary" @click="$emit('next')">
+      <button v-if="false" class="btn-secondary" @click="$emit('next')">
         {{ isLast ? '完成新手教程 ✓' : '下一步' }}
       </button>
+      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+        上一步
+      </button>
     </div>
   </div>
 </template>
@@ -51,6 +54,7 @@ export default {
   name: 'ProfileGuide',
   props: {
     isLast: { type: Boolean, default: false },
+    isFirst: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -210,4 +214,16 @@ export default {
   transition: all 0.25s;
 }
 .btn-secondary:hover { background: #eaf2ff; }
+.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>

+ 18 - 0
src/components/NewUserGuide/steps/RewardGuide.vue

@@ -30,6 +30,9 @@
       <button class="btn-finish" @click="$emit('next')">
         <span>🎁</span> 立即领取
       </button>
+      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+        上一步
+      </button>
     </div>
   </div>
 </template>
@@ -39,6 +42,7 @@ export default {
   name: 'RewardGuide',
   props: {
     isLast: { type: Boolean, default: false },
+    isFirst: { type: Boolean, default: false },
   },
   data() {
     return {
@@ -166,6 +170,20 @@ export default {
 }
 .btn-finish:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(39,174,96,0.5); }
 .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 6px 20px rgba(39,174,96,0.35); }
   50% { box-shadow: 0 6px 28px rgba(39,174,96,0.6); }

+ 30 - 1
src/components/NewUserGuide/steps/SignInGuide.vue

@@ -54,9 +54,12 @@
         <span class="btn-icon">✅</span>
         去签到
       </button>
-      <button class="btn-next" @click="$emit('next')">
+      <button v-if="false" class="btn-next" @click="$emit('next')">
         {{ isLast ? '完成新手教程 ✓' : '下一步' }}
       </button>
+      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+        上一步
+      </button>
     </div>
   </div>
 </template>
@@ -69,6 +72,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {
@@ -282,7 +289,9 @@ export default {
 .btn-checkin {
   display: flex;
   align-items: center;
+  justify-content: center;
   gap: 8px;
+  width: 100%;
   padding: 12px 28px;
   font-size: 15px;
   font-weight: 600;
@@ -332,4 +341,24 @@ export default {
 .btn-next:active {
   transform: translateY(0);
 }
+
+.btn-prev {
+  margin-top: 12px;
+  width: 100%;
+  padding: 10px 20px;
+  font-size: 13px;
+  font-weight: 500;
+  color: #86909c;
+  background: #f0f2f5;
+  border: none;
+  border-radius: 20px;
+  cursor: pointer;
+  transition: all 0.25s;
+  white-space: nowrap;
+}
+
+.btn-prev:hover {
+  color: #4e5969;
+  background: #e5e8ed;
+}
 </style>

+ 29 - 0
src/components/NewUserGuide/steps/WelcomeGuide.vue

@@ -44,6 +44,9 @@
         <span class="btn-arrow" v-if="!isLast">→</span>
         <span class="btn-check" v-else>✓</span>
       </button>
+      <button class="btn-prev" v-if="!isFirst" @click="$emit('prev')">
+        上一步
+      </button>
     </div>
   </div>
 </template>
@@ -56,6 +59,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    isFirst: {
+      type: Boolean,
+      default: false,
+    },
   },
 }
 </script>
@@ -273,4 +280,26 @@ export default {
 .btn-start:hover .btn-arrow {
   transform: translateX(4px);
 }
+
+.btn-prev {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 40px;
+  margin-top: 10px;
+  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>