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

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

pages/mine/distribution/auth.vue

@@ -3,160 +3,100 @@
     <view>
       <h4>实名认证（请上传真实的个人信息，认证通过后将无法修改）</h4>
       <view>
-        <u-form :model="ruleForm" label-width="200rpx" ref="uForm">
-          <u-form-item label="姓名" prop="name">
-            <u-input v-model="ruleForm.name" placeholder="请输入您的真实姓名" />
-          </u-form-item>
-          <u-form-item label="身份证" prop="idNumber">
-            <u-input v-model="ruleForm.idNumber" placeholder="请输入身份证号码" />
-          </u-form-item>
-          <u-form-item label="银行开户行" prop="settlementBankBranchName">
-            <u-input v-model="ruleForm.settlementBankBranchName" type="text" placeholder="请输入银行开户行" />
-          </u-form-item>
-          <u-form-item label="银行开户名" prop="settlementBankAccountName">
-            <u-input v-model="ruleForm.settlementBankAccountName" type="text" placeholder="请输入银行开户名" />
-          </u-form-item>
-          <u-form-item label="银行账号" prop="settlementBankAccountNum">
-            <u-input v-model="ruleForm.settlementBankAccountNum" type="text" placeholder="请输入银行账号" />
-          </u-form-item>
-          <!-- <u-form-item label="身份证正面照" prop="name">
-            <u-upload></u-upload>
-          </u-form-item>
-          <u-form-item label="身份证反面照" prop="name">
-            <u-upload></u-upload>
-          </u-form-item>
-          <u-form-item label="手持身份证照" prop="name">
-            <u-upload></u-upload>
-          </u-form-item> -->
-        </u-form>
-        <u-button :customStyle="{'background':$lightColor,'color':'#fff' }" @click="submit">提交</u-button>
+        <up-form
+          :model="formData"
+          label-position="left"
+          label-width="180rpx"
+          ref="uFormRef"
+        >
+        <up-form-item label="姓名" prop="name">
+            <u-input v-model="formData.name" placeholder="请输入您的真实姓名" />
+          </up-form-item>
+          <up-form-item label="身份证" prop="idNumber">
+            <u-input v-model="formData.idNumber" placeholder="请输入身份证号码" />
+          </up-form-item>
+          <up-form-item label="银行开户行" prop="settlementBankBranchName">
+            <u-input v-model="formData.settlementBankBranchName" placeholder="请输入银行开户行" />
+          </up-form-item>
+          <up-form-item label="银行开户名" prop="settlementBankAccountName">
+            <u-input v-model="formData.settlementBankAccountName" placeholder="请输入银行开户名" />
+          </up-form-item>
+          <up-form-item label="银行账号" prop="settlementBankAccountNum">
+            <u-input v-model="formData.settlementBankAccountNum" placeholder="请输入银行账号" />
+          </up-form-item>
+        </up-form>
+        <u-button :customStyle="{ background: lightColor, color: '#fff' }" @click="submitForm">提交</u-button>
       </view>
     </view>
-
     <view class="tips">
       <view>您提交的信息正在审核</view>
       <view>提交认证申请后，工作人员将在三个工作日进行核对完成审核</view>
     </view>
   </view>
 </template>
-<script>
-import { applyDistribution } from "@/api/goods";
-export default {
-  data() {
-    return {
-      ruleForm: {
-        name: "",
-        idNumber: "",
-        settlementBankBranchName: "", // 银行开户行
-        settlementBankAccountName: "", //银行开户名
-        settlementBankAccountNum: "", //银行账号
-      },
-      rules: {
-        name: [
-          {
-            required: true,
-            message: "请输入姓名",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-          {
-            // 自定义验证函数，见上说明
-            validator: (rule, value, callback) => {
-              // 上面有说，返回true表示校验通过，返回false表示不通过
-              // this.$u.test.mobile()就是返回true或者false的
-              return this.$u.test.chinese(value);
-            },
-            message: "姓名输入不正确",
-            // 触发器可以同时用blur和change
-            trigger: ["change", "blur"],
-          },
-        ],
-        // 银行开户行
-        settlementBankBranchName: [
-          {
-            required: true,
-            message: "请输入银行开户行",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-        ], //银行开户名
-        settlementBankAccountName: [
-          {
-            required: true,
-            message: "银行开户名",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-        ],
-        //银行账号
-        settlementBankAccountNum: [
-          {
-            required: true,
-            message: "请输入银行账号",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-        ],
-        idNumber: [
-          {
-            required: true,
-            message: "请输入身份证",
-            // 可以单个或者同时写两个触发验证方式
-            trigger: "blur",
-          },
-          {
-            // 自定义验证函数，见上说明
-            validator: (rule, value, callback) => {
-              // 上面有说，返回true表示校验通过，返回false表示不通过
-              // this.$u.test.mobile()就是返回true或者false的
-              return this.$u.test.idCard(value);
-            },
-            message: "身份证号码不正确",
-            // 触发器可以同时用blur和change
-            trigger: ["change", "blur"],
-          },
-        ],
-      },
-    };
-  },
-  methods: {
-    submit() {
-      this.$refs.uForm.validate((valid) => {
-        if (valid) {
-          applyDistribution(this.ruleForm).then((res) => {
-            if (res.data.success) {
-              uni.showToast({
-                title: "认证提交成功!",
-                duration: 2000,
-                icon: "none",
-              });
 
-              setTimeout(() => {
-                uni.navigateBack();
-              }, 500);
-            } else {
-              uni.showToast({
-                title: res.data.message,
-                duration: 2000,
-                icon: "none",
-              });
-            }
-          });
-        } else {
-          uni.showToast({
-            title: "请填写有效信息",
-            duration: 2000,
-            icon: "none",
-          });
-        }
-      });
+<script setup lang="ts">
+import { reactive, computed, ref, getCurrentInstance } from 'vue'
+import { onReady } from '@dcloudio/uni-app'
+import { useStore } from '@/store'
+import { applyDistribution } from '@/api/goods'
+
+const store = useStore()
+const { proxy } = getCurrentInstance()!
+
+const lightColor = computed(() => store.getters.lightColor)
+const uFormRef = ref<any>(null)
+
+const formData = reactive({
+  name: '',
+  idNumber: '',
+  settlementBankBranchName: '',
+  settlementBankAccountName: '',
+  settlementBankAccountNum: '',
+})
+
+const rules = {
+  name: [
+    { required: true, message: '请输入姓名', trigger: 'blur' },
+    {
+      validator: (_rule: unknown, value: string) => proxy.$u.test.chinese(value),
+      message: '姓名输入不正确',
+      trigger: ['change', 'blur'],
     },
-  },
-  onReady() {
-    this.$refs.uForm.setRules(this.rules);
-  },
-};
+  ],
+  settlementBankBranchName: [{ required: true, message: '请输入银行开户行', trigger: 'blur' }],
+  settlementBankAccountName: [{ required: true, message: '银行开户名', trigger: 'blur' }],
+  settlementBankAccountNum: [{ required: true, message: '请输入银行账号', trigger: 'blur' }],
+  idNumber: [
+    { required: true, message: '请输入身份证', trigger: 'blur' },
+    {
+      validator: (_rule: unknown, value: string) => proxy.$u.test.idCard(value),
+      message: '身份证号码不正确',
+      trigger: ['change', 'blur'],
+    },
+  ],
+}
+
+onReady(() => {
+  uFormRef.value?.setRules(rules)
+})
+
+function submitForm() {
+  uFormRef.value?.validate().then(() => {
+    applyDistribution(formData).then((res) => {
+      if (res.data.success) {
+        uni.showToast({ title: '认证提交成功!', duration: 2000, icon: 'none' })
+        setTimeout(() => uni.navigateBack(), 500)
+      } else {
+        uni.showToast({ title: res.data.message, duration: 2000, icon: 'none' })
+      }
+    })
+  }).catch(() => {
+    uni.showToast({ title: '请填写有效信息', duration: 2000, icon: 'none' })
+  })
+}
 </script>
+
 <style lang="scss" scoped>
 .wrapper {
   padding: 32rpx;