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

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

pages/mine/distribution/join.vue

@@ -1,104 +1,127 @@
 <template>
-  <view class="wrapper">
+  <view class="wrapper" :style="themeStyle">
     <u-tabs
-      :list="list"
+      :list="stepList"
       :scrollable="false"
-      v-model:current="current"
+      v-model:current="currentStep"
       :lineColor="lightColor"
       :activeStyle="{ color: lightColor }"
     ></u-tabs>
 
-  
-
-    <!-- 推广人资料 -->
-    <view class="message">
-      <u-form :model="ruleForm" label-width="250rpx" ref="uForm">
-        <u-form-item label="会员昵称" prop="name">
-          <u-input v-model="ruleForm.name" />
-        </u-form-item>
-        <u-form-item label="账户类型" prop="name"> </u-form-item>
-        <u-form-item
-          label="收款人姓名"
-          placeholder="请输入收款人姓名"
-          prop="name"
-        >
-          <u-input v-model="ruleForm.name" />
-        </u-form-item>
-        <u-form-item
-          label="收款账号"
-          placeholder="请输入收款人账号"
-          prop="name"
-        >
-          <u-input v-model="ruleForm.name" />
-        </u-form-item>
-        <u-form-item
-          label="银行名称"
-          placeholder="请输入开户银行支行名称"
-          prop="name"
-        >
-          <u-input v-model="ruleForm.name" />
-        </u-form-item>
-      </u-form>
-      <u-button  :customStyle="{'background':$lightColor,'color':'#fff' }"  @click="submit">提交</u-button>
+    <view class="feedBack-box">
+      <up-form
+        :model="formData"
+        label-position="top"
+        ref="uFormRef"
+      >
+        <up-form-item label="会员昵称" prop="name">
+          <u-input
+            border="none"
+            class="field-input"
+            v-model="formData.name"
+            :custom-style="fieldInputStyle"
+          />
+        </up-form-item>
+        <up-form-item label="账户类型" prop="name"></up-form-item>
+        <up-form-item label="收款人姓名" prop="name">
+          <u-input
+            border="none"
+            class="field-input"
+            v-model="formData.name"
+            placeholder="请输入收款人姓名"
+            :custom-style="fieldInputStyle"
+          />
+        </up-form-item>
+        <up-form-item label="收款账号" prop="name">
+          <u-input
+            border="none"
+            class="field-input"
+            v-model="formData.name"
+            placeholder="请输入收款人账号"
+            :custom-style="fieldInputStyle"
+          />
+        </up-form-item>
+        <up-form-item label="银行名称" prop="name">
+          <u-input
+            border="none"
+            class="field-input"
+            v-model="formData.name"
+            placeholder="请输入开户银行支行名称"
+            :custom-style="fieldInputStyle"
+          />
+        </up-form-item>
+      </up-form>
     </view>
+
+    <view class="submit" @click="submitForm">提交</view>
   </view>
 </template>
-<script>
-export default {
-  components: {},
-  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
-  onReady() {
-    this.$refs.uForm.setRules(this.rules);
-  },
-  data() {
-    return {
-      current:0,
-      lightColor: this.$lightColor,
-      list: [
-        {
-          name: "推广人资料",
-        },
-        {
-          name: "平台审核",
-        },
-        {
-          name: "完成",
-        },
-      ],
-      ruleForm: {
-        name: "",
-        radio: "",
-      },
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "请输入姓名",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-        ],
-      },
-    };
-  },
-};
+
+<script setup lang="ts">
+import { ref, reactive, computed } from 'vue'
+import { onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { getThemeStyle } from '@/utils/theme'
+import { fieldInputStyle } from '@/utils/form-style.js'
+
+const store = useStore()
+
+const themeStyle = computed(() => getThemeStyle(store.state.theme))
+const lightColor = computed(() => store.getters.lightColor)
+const currentStep = ref(0)
+const uFormRef = ref<any>(null)
+
+const stepList = [
+  { name: '推广人资料' },
+  { name: '平台审核' },
+  { name: '完成' },
+]
+
+const formData = reactive({
+  name: '',
+  radio: '',
+})
+
+const rules = {
+  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
+}
+
+onReady(() => {
+  uFormRef.value?.setRules(rules)
+})
+
+function submitForm() {
+  uFormRef.value?.validate().catch(() => {
+    uni.showToast({ title: '请填写有效信息', icon: 'none' })
+  })
+}
 </script>
-<style lang="scss" scoped>
-.menu {
-  height: 88rpx;
-  line-height: 88rpx;
-  background: $main-color;
-  display: flex;
-  > .menu-item {
-    flex: 1;
-    text-align: center;
-    color: $light-color;
-  }
-}
-.active {
-  color: #fff !important;
-}
-.message {
-  padding: 0 32rpx;
+
+<style lang="scss">
+page {
+  background: #f8f8f8;
+}
+</style>
+
+<style lang="scss" scoped>
+@import '@/pages/passport/entry/seller/entry-form.scss';
+
+.wrapper {
+  box-sizing: border-box;
+  min-height: 100vh;
+  padding: 20rpx 24rpx 40rpx;
+  background: #f8f8f8;
+  @include seller-entry-form;
+}
+
+.feedBack-box {
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 32rpx;
+  margin-top: 20rpx;
+}
+
+.submit {
+  @include seller-entry-submit;
 }
 </style>