Przeglądaj źródła

```
feat(home): 优化入驻流程步骤状态计算逻辑

将 el-steps 的 active 和 finish-status 属性改为使用计算属性动态控制。
新增对用户是否完成个人实名认证的判断,以决定当前步骤状态。
引入 computed 和 localGet 工具函数支持相关逻辑。
```

zhuli 3 tygodni temu
rodzic
commit
c6dfb6e86a
1 zmienionych plików z 32 dodań i 6 usunięć
  1. 32 6
      src/views/home/components/go-enter.vue

+ 32 - 6
src/views/home/components/go-enter.vue

@@ -3,11 +3,7 @@
   <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
-        :active="storeApplicationStatus == 0 || storeApplicationStatus == 2 ? 2 : 0"
-        :finish-status="storeApplicationStatus == 0 || storeApplicationStatus == 2 ? 'success' : undefined"
-      >
+      <el-steps align-center :active="stepActive" :finish-status="stepFinishStatus">
         <el-step v-for="(item, index) in entryList" :key="index">
           <template #title>
             <div class="step-title-wrapper">
@@ -33,7 +29,8 @@
   </div>
 </template>
 <script setup lang="ts">
-import { ref, defineProps, defineEmits } from "vue";
+import { ref, defineProps, defineEmits, computed } from "vue";
+import { localGet } from "@/utils/index";
 import homeIcon from "../../../assets/images/home-icon.png";
 
 const entryList = ref([
@@ -71,6 +68,35 @@ const props = defineProps({
 
 const emit = defineEmits(["update:currentStep"]);
 
+// 检查用户是否已完成个人实名认证
+const hasCompletedRealName = computed(() => {
+  const geekerUser = localGet("geeker-user");
+  return geekerUser?.userInfo?.idCard ? true : false;
+});
+
+// 计算步骤的 active 值
+const stepActive = computed(() => {
+  // 如果审核状态为等待审核(0)或审核拒绝(2),显示第三步
+  if (props.storeApplicationStatus == 0 || props.storeApplicationStatus == 2) {
+    return 2;
+  }
+  // 如果已完成个人实名认证,显示第二步
+  if (hasCompletedRealName.value) {
+    return 1;
+  }
+  // 否则显示第一步
+  return 0;
+});
+
+// 计算 finish-status
+const stepFinishStatus = computed(() => {
+  // 如果审核状态为等待审核(0)或审核拒绝(2),或者已完成个人实名认证,显示成功状态
+  if (props.storeApplicationStatus == 0 || props.storeApplicationStatus == 2 || hasCompletedRealName.value) {
+    return "success";
+  }
+  return undefined;
+});
+
 // 处理入驻按钮
 // 点击后跳转到 go-flow 组件(步骤1:填写信息)
 const handleRegister = () => {