Ver código fonte

feat(home): 根据店铺申请状态动态展示入驻流程步骤和按钮

根据 storeApplicationStatus 动态控制 el-steps 的 active 状态与样式,
并调整“去入驻”按钮的显示逻辑及文案。新增红色按钮样式用于审核拒绝状态,
同时修改步骤跳转逻辑,确保在不同状态下正确引导用户操作。
优化了部分 UI 样式以提升视觉一致性。
zhuli 3 semanas atrás
pai
commit
a8dfe3f5a2

+ 41 - 5
src/views/home/components/go-enter.vue

@@ -3,7 +3,11 @@
   <div v-if="currentStep === 0" class="home-entry">
     <h3 class="title"><el-image :src="homeIcon" class="homeIcon" />免费入驻店铺</h3>
     <div class="steps-container">
-      <el-steps align-center>
+      <el-steps
+        align-center
+        :active="storeApplicationStatus == 0 || storeApplicationStatus == 2 ? 2 : 0"
+        :finish-status="storeApplicationStatus == 0 || storeApplicationStatus == 2 ? 'success' : undefined"
+      >
         <el-step v-for="(item, index) in entryList" :key="index">
           <template #title>
             <div class="step-title-wrapper">
@@ -20,7 +24,11 @@
       </el-steps>
     </div>
     <div class="button-container">
-      <el-button type="primary" size="large" class="register-btn" @click="handleRegister"> 去入驻 </el-button>
+      <el-button type="danger" size="large" class="register-btn-red" @click="handleRegister" v-if="storeApplicationStatus == 2">
+        审核拒绝,重新入驻
+      </el-button>
+      <el-button type="primary" size="large" class="register-btn" v-else-if="storeApplicationStatus == 0"> 等待审核 </el-button>
+      <el-button type="primary" size="large" class="register-btn" @click="handleRegister" v-else> 去入驻 </el-button>
     </div>
   </div>
 </template>
@@ -54,14 +62,19 @@ const props = defineProps({
   currentStep: {
     type: Number,
     default: 0
+  },
+  storeApplicationStatus: {
+    type: Number,
+    default: undefined
   }
 });
 
 const emit = defineEmits(["update:currentStep"]);
 
 // 处理入驻按钮
+// 点击后跳转到 go-flow 组件(步骤1:个人实名)
 const handleRegister = () => {
-  emit("update:currentStep", 1);
+  emit("update:currentStep", 2);
 };
 </script>
 
@@ -94,6 +107,14 @@ const handleRegister = () => {
     margin-top: 120px;
     margin-bottom: 60px;
     :deep(.el-steps) {
+      // 所有连接线保持蓝色
+      .el-step__line {
+        border-color: #6c8ff8 !important;
+        .el-step__line-inner {
+          background-color: #6c8ff8 !important;
+          border-color: #6c8ff8 !important;
+        }
+      }
       .el-step__head {
         .el-step__icon {
           width: 30px;
@@ -104,8 +125,14 @@ const handleRegister = () => {
           background: #6c8ff8;
           border: 0;
         }
-        .el-step__line {
-          border: 1px solid #6c8ff8;
+
+        // 已完成步骤的样式(显示对勾)
+        &.is-finish {
+          .el-step__icon {
+            color: #ffffff;
+            background-color: #6c8ff8 !important;
+            border-color: #6c8ff8 !important;
+          }
         }
       }
       .el-step__title {
@@ -156,6 +183,15 @@ const handleRegister = () => {
       border-radius: 4px;
       outline: none;
     }
+    .register-btn-red {
+      width: 200px;
+      height: 44px;
+      font-size: 16px;
+      font-weight: 500;
+      border: 0;
+      border-radius: 4px;
+      outline: none;
+    }
   }
 }
 </style>

+ 12 - 9
src/views/home/components/go-flow.vue

@@ -2,9 +2,7 @@
   <div class="form-container">
     <div>
       <!-- 进度条 -->
-      <el-button class="back-btn" @click="handleBack" v-if="storeApplicationStatus == 2 && storeApplicationStatus == 1">
-        返回
-      </el-button>
+      <el-button class="back-btn" @click="handleBack"> 返回 </el-button>
       <div class="progress-container">
         <el-steps :active="currentStep" style="max-width: 1500px" align-center>
           <el-step v-for="(item, index) in entryList" :key="index">
@@ -192,14 +190,14 @@
       </div>
     </div>
     <!-- 第三步: 等待审核-->
-    <div v-if="currentStep === 3">
+    <!-- <div v-if="currentStep === 3">
       <div class="button-container">
-        <el-button type="danger" size="large" class="register-btn-red" @click="changeRefuse" v-if="storeApplicationStatus == 2">
+        <el-button type="danger" size="large" class="register-btn-red" @click="handleGoToEnter" v-if="storeApplicationStatus == 2">
           审核拒绝,重新入驻
         </el-button>
-        <el-button type="primary" size="large" class="register-btn" v-if="storeApplicationStatus == 0"> 等待审核 </el-button>
+        <el-button type="primary" size="large" class="register-btn" @click="handleGoToEnter" v-if="storeApplicationStatus == 0"> 等待审核 </el-button>
       </div>
-    </div>
+    </div> -->
   </div>
 
   <!-- 图片预览 -->
@@ -417,6 +415,11 @@ onMounted(() => {
 const changeRefuse = () => {
   currentStep.value = 2;
 };
+
+// 跳转到 go-enter 组件(首页)
+const handleGoToEnter = () => {
+  setStep(0);
+};
 const setStep = (val: number) => {
   currentStep.value = val;
   emit("update:currentStep", val);
@@ -880,10 +883,11 @@ const handleSubmit = async () => {
             if (res && res.code == 200) {
               // 重新提交后,状态应该变为等待审核(0)
               storeApplicationStatus.value = 0;
-              setStep(3); // 跳转到等待审核步骤
               ElMessage.success(res.msg);
               // 通知父组件重新获取用户信息,更新状态
               callGetUserInfo();
+              // 跳转到 go-enter 组件(首页)
+              setStep(0);
             } else {
               ElMessage.error(res.msg || "提交失败");
             }
@@ -919,7 +923,6 @@ const handleExceed = () => {
     border-color: #dcdfe6;
   }
   .progress-container {
-    margin-top: 120px;
     margin-bottom: 40px;
     :deep(.el-step__head.is-process .el-step__icon) {
       color: #909399;

+ 10 - 7
src/views/home/index.vue

@@ -3,7 +3,12 @@
     <!--已入驻-->
     <go-examine v-if="isExaime" />
     <!-- 第一步  未入驻 -->
-    <go-enter :current-step="currentStep" @update:current-step="handleUpdateCurrentStep" v-if="isEntry && currentStep === 0" />
+    <go-enter
+      :current-step="currentStep"
+      :store-application-status="storeApplicationStatus"
+      @update:current-step="handleUpdateCurrentStep"
+      v-if="isEntry && currentStep === 0"
+    />
     <!-- 第二步 -->
     <go-flow
       v-if="isEntry && currentStep > 0"
@@ -117,12 +122,10 @@ const getUserInfo = async () => {
         const resStore: any = await getDetail(param1);
         if (resStore && resStore.code == 200 && resStore.data) {
           storeApplicationStatus.value = resStore.data.storeApplicationStatus;
-          if (storeApplicationStatus.value == 0) {
-            //
-            currentStep.value = 3;
-          }
-          if (storeApplicationStatus.value == 2) {
-            currentStep.value = 3;
+          // 如果是等待审核(0)或审核拒绝(2),且当前步骤为0,显示 go-enter 组件
+          // 如果用户已经主动跳转到其他步骤,则不重置步骤
+          if ((storeApplicationStatus.value == 0 || storeApplicationStatus.value == 2) && currentStep.value === 0) {
+            currentStep.value = 0;
           }
 
           if (resStore.data.storeApplicationStatus !== 1 && res.data.storeId != null) {