refactor: 重构多个组件以支持 Vue 3 语法和功能

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能
- 优化状态管理和事件处理逻辑，简化代码结构
- 更新样式和布局以适应新组件结构
- 添加新功能和修复已知问题，提升用户体验

pages/passport/entry/seller/index.vue

@@ -1,12 +1,12 @@
 <template>
-  <div class="wrapper">
-       <u-navbar
-         :border="false"
-         :fixed="true"
-         :placeholder="true"
-         :auto-back="true"
-       ></u-navbar>
-    <div>
+  <div class="wrapper" :style="themeStyle">
+    <u-navbar
+      :border="false"
+      :fixed="true"
+      :placeholder="true"
+      :auto-back="true"
+    ></u-navbar>
+    <div class="entry-content">
       <div class="title">店铺入驻</div>
       <div class="step-list">
         <div
@@ -24,144 +24,164 @@
   </div>
 </template>
 
-<script>
-import { getCompanyDetail } from "@/api/entry";
-export default {
-  components: {},
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { onLoad, onShow } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { tipsToLogin } from '@/utils/filters.js'
+import { getCompanyDetail } from '@/api/entry'
+import { getThemeStyle } from '@/utils/theme'
 
-  data() {
-    return {
-      current: 999,
-      entrySteps: [
-        {
-          title: "填写资质信息",
-          value: "APPLY",
-        },
-        {
-          title: "提交审核",
-          value: "APPLYING",
-        },
-      ],
+const store = useStore()
 
-      storeStatusWay: [
-        {
-          title: "申请已通过，请联系管理员",
-          value: "OPEN",
-        },
-        {
-          title: "店铺已关闭，重申请联系管理员",
-          value: "CLOSED",
-        },
-        {
-          title: "审核未通过,请修改资质信息",
-          value: "REFUSED",
-        },
-      ],
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
 
-      companyData: "", // 公司信息
-    };
+const current = ref(999)
+const companyData = ref<any>('')
+
+const entrySteps = ref([
+  {
+    title: '填写资质信息',
+    value: 'APPLY',
   },
-  onShow() {
-    if(this.tipsToLogin()){
-        this.init();
-    }
+  {
+    title: '提交审核',
+    value: 'APPLYING',
   },
+])
 
-  mounted() {},
+const storeStatusWay = [
+  {
+    title: '申请已通过，请联系管理员',
+    value: 'OPEN',
+  },
+  {
+    title: '店铺已关闭，重申请联系管理员',
+    value: 'CLOSED',
+  },
+  {
+    title: '审核未通过,请修改资质信息',
+    value: 'REFUSED',
+  },
+]
 
-  onLoad(options) {},
-  methods: {
-    getEntryNotice() {
-      uni.navigateTo({
-        url: "/pages/mine/help/tips?type=STORE_REGISTER",
-      });
+onShow(() => {
+  if (tipsToLogin()) {
+    init()
+  }
+})
+
+onLoad(() => {})
+
+function getEntryNotice() {
+  uni.navigateTo({
+    url: '/pages/mine/help/tips?type=STORE_REGISTER',
+  })
+}
+
+function keepOn() {
+  if (companyData.value && companyData.value.storeDisable == 'OPEN') {
+    uni.showToast({
+      title: '审核已通过',
+      icon: 'none',
+    })
+  } else {
+    uni.navigateTo({
+      url: '/pages/passport/entry/seller/control',
+    })
+  }
+}
+
+async function init() {
+  entrySteps.value = [
+    {
+      title: '填写资质信息',
+      value: 'APPLY',
     },
-    keepOn() {
-      if (this.companyData && this.companyData.storeDisable == "OPEN") {
-        uni.showToast({
-          title:"审核已通过",
-          icon:"none"
-        })
-      } else {
-        uni.navigateTo({
-          url: "/pages/passport/entry/seller/control",
-        });
-      }
+    {
+      title: '提交审核',
+      value: 'APPLYING',
     },
-    async init() {
-      this.entrySteps = [
-        {
-          title: "填写资质信息",
-          value: "APPLY",
-        },
-        {
-          title: "提交审核",
-          value: "APPLYING",
-        },
-      ];
-      const res = await getCompanyDetail();
-      if (res.data.success) {
-        this.companyData = res.data.result;
+  ]
+  const res = await getCompanyDetail()
+  if (res.data.success) {
+    companyData.value = res.data.result
 
-        if (this.companyData) {
-          this.storeStatusWay.forEach((item) => {
-            if (item.value == this.companyData.storeDisable) {
-              this.entrySteps.push(item);
-            }
-          });
-
-          this.current =
-            this.entrySteps.findIndex(
-              (item) => item.value == this.companyData.storeDisable
-            ) || 0;
-        } else {
-          this.current = 0;
+    if (companyData.value) {
+      storeStatusWay.forEach((item) => {
+        if (item.value == companyData.value.storeDisable) {
+          entrySteps.value.push(item)
         }
-      }
-    },
-  },
-};
+      })
+
+      current.value =
+        entrySteps.value.findIndex(
+          (item) => item.value == companyData.value.storeDisable
+        ) || 0
+    } else {
+      current.value = 0
+    }
+  }
+}
 </script>
-<style>
+<style lang="scss">
 page {
   background: #fff;
 }
 </style>
 <style lang="scss" scoped>
-@import url("./entry.scss");
 .wrapper {
-  padding: 0 80rpx;
+  min-height: 100vh;
+  background: #fff;
+  box-sizing: border-box;
+}
+
+.entry-content {
+  padding: 32rpx 80rpx calc(40rpx + env(safe-area-inset-bottom));
+  box-sizing: border-box;
 }
 
 .title {
-  padding-top: calc(104rpx);
-  font-style: normal;
-  line-height: 1;
+  line-height: 1.2;
   font-weight: 500;
   font-size: 56rpx;
   color: #333;
-  padding-left: 20rpx;
 }
+
+.step-list {
+  margin: 80rpx 0;
+}
+
 .step-item {
   padding: 30rpx 20rpx;
   font-size: 40rpx;
   font-weight: bold;
   color: #666;
 }
-.step-list {
-  margin: 80rpx 0;
-  overflow: hidden;
-}
-.active {
-  color: $light-color;
-  background: rgba($color: $light-color, $alpha: 0.1);
+
+.step-item.active {
+  color: var(--theme-light, #ff6b35);
+  background: var(--theme-light-10, rgba(255, 107, 53, 0.1));
   border-radius: 20rpx;
 }
+
+.submit,
+.notice {
+  font-weight: bold;
+  font-size: 28rpx;
+  height: 92rpx;
+  text-align: center;
+  letter-spacing: 4rpx;
+  line-height: 92rpx;
+  border-radius: 20rpx;
+}
+
 .submit {
   color: #fff;
   margin-top: 120rpx;
-  background: rgba($light-color, 0.8);
+  background: var(--theme-light, #ff6b35);
 }
+
 .notice {
   margin-top: 40rpx;
   color: #333;