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

- 将多个组件转换为 `<script setup>` 语法，提升可读性和性能 - 优化状态管理和事件处理逻辑，简化代码结构 - 更新样式和布局以适应新组件结构 - 添加新功能和修复已知问题，提升用户体验
2026-08-06 10:57:25 +08:00 · 2026-07-08 18:37:11 +08:00
parent 4d0b0fb5e4
commit 349ffa4f34
189 changed files with 18278 additions and 20758 deletions
--- a/pages/mine/deposit/index.vue
+++ b/pages/mine/deposit/index.vue
@@ -52,84 +52,64 @@
  </view>
 </template>

-<script>
-import { getUserRecharge, getWalletLog, getUserWallet } from "@/api/members";
-export default {
-  data() {
-    return {
-      walletNum: 0,
-      current: 0,
-      swiperCurrent: 0,
-      userInfo: "",
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        order: "desc",
-      },
-      depositData: [],
-      rechargeList: "",
-      walletLogList: "",
-      list: [{ name: "预存款变动明细" }],
-    };
-  },
-  watch: {
-    swiperCurrent(index) {
-      this.swiperCurrent = index;
-    },
-  },
-  async mounted() {
-    this.getWallet();
-    const result = await getUserWallet();
-    this.walletNum = result.data.result.memberWallet;
-  },
-  methods: {
-    isOutgoing(serviceType) {
-      return serviceType === "WALLET_PAY" || serviceType === "WALLET_WITHDRAWAL";
-    },
-    isIncoming(serviceType) {
-      return (
-        serviceType === "WALLET_REFUND" ||
-        serviceType === "WALLET_RECHARGE" ||
-        serviceType === "WALLET_COMMISSION"
-      );
-    },
-    getMoneyClass(serviceType) {
-      if (this.isOutgoing(serviceType)) return "out";
-      if (this.isIncoming(serviceType)) return "in";
-      return "";
-    },
-    formatLogMoney(logItem) {
-      const amount = this.unitPrice(logItem.money);
-      if (this.isOutgoing(logItem.serviceType)) return `-${amount}`;
-      if (this.isIncoming(logItem.serviceType)) return `+${amount}`;
-      return amount;
-    },
-    getRecharge() {
-      getUserRecharge(this.params).then((res) => {
-        if (res.data.success && res.data.result.records.length) {
-          this.depositData.push(...res.data.result.records);
-        }
-      });
-    },
-    getWallet() {
-      getWalletLog(this.params).then((res) => {
-        if (res.data.success && res.data.result.records.length) {
-          this.depositData.push(...res.data.result.records);
-        }
-      });
-    },
-    changed(index) {
-      this.depositData = [];
-      this.swiperCurrent = index;
-      this.params.pageNumber = 1;
-      this.getWallet();
-    },
-    loadMore() {
-      this.params.pageNumber++;
-      this.getWallet();
-    },
-  },
-};
+<script setup lang="ts">
+import { ref, onMounted } from 'vue'
+import { getWalletLog, getUserWallet } from '@/api/members'
+import { unitPrice } from '@/utils/filters.js'
+
+const walletNum = ref(0)
+const swiperCurrent = ref(0)
+const params = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  order: 'desc',
+})
+const depositData = ref<any[]>([])
+const list = [{ name: '预存款变动明细' }]
+
+onMounted(async () => {
+  getWallet()
+  const result = await getUserWallet()
+  walletNum.value = result.data.result.memberWallet
+})
+
+function isOutgoing(serviceType: string) {
+  return serviceType === 'WALLET_PAY' || serviceType === 'WALLET_WITHDRAWAL'
+}
+
+function isIncoming(serviceType: string) {
+  return (
+    serviceType === 'WALLET_REFUND' ||
+    serviceType === 'WALLET_RECHARGE' ||
+    serviceType === 'WALLET_COMMISSION'
+  )
+}
+
+function getMoneyClass(serviceType: string) {
+  if (isOutgoing(serviceType)) return 'out'
+  if (isIncoming(serviceType)) return 'in'
+  return ''
+}
+
+function formatLogMoney(logItem: any) {
+  const amount = unitPrice(logItem.money)
+  if (isOutgoing(logItem.serviceType)) return `-${amount}`
+  if (isIncoming(logItem.serviceType)) return `+${amount}`
+  return amount
+}
+
+function getWallet() {
+  getWalletLog(params.value).then((res) => {
+    if (res.data.success && res.data.result.records.length) {
+      depositData.value.push(...res.data.result.records)
+    }
+  })
+}
+
+function loadMore() {
+  params.value.pageNumber++
+  getWallet()
+}
 </script>

 <style lang="scss" scoped>
--- a/pages/mine/deposit/info.vue
+++ b/pages/mine/deposit/info.vue
@@ -12,8 +12,7 @@
  </view>
 </template>

-<script>
-export default {};
+<script setup lang="ts">
 </script>

 <style lang="scss" scoped>
--- a/pages/mine/deposit/operation.vue
+++ b/pages/mine/deposit/operation.vue
@@ -38,33 +38,30 @@
  </view>
 </template>

-<script>
-import { getUserWallet } from "@/api/members";
-export default {
-  data() {
-    return {
-      walletNum: 0,
-    };
-  },
-  async onShow() {
-    if (this.isLogin("auth")) {
-      let result = await getUserWallet();
-      this.walletNum = result.data.result.memberWallet;
-    } else {
-      this.navigateToLogin("redirectTo");
-    }
-  },
-  methods: {
-    back() {
-      uni.switchTab({
-        url: "/pages/tabbar/user/my",
-      });
-    },
-    navigateTo(url) {
-      uni.navigateTo({ url });
-    },
-  },
-};
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { getUserWallet } from '@/api/members'
+import { isLogin, navigateToLogin, unitPrice } from '@/utils/filters.js'
+
+const walletNum = ref(0)
+
+onShow(async () => {
+  if (isLogin('auth')) {
+    const result = await getUserWallet()
+    walletNum.value = result.data.result.memberWallet
+  } else {
+    navigateToLogin('redirectTo')
+  }
+})
+
+function back() {
+  uni.switchTab({ url: '/pages/tabbar/user/my' })
+}
+
+function navigateTo(url: string) {
+  uni.navigateTo({ url })
+}
 </script>

 <style lang="scss" scoped>
--- a/pages/mine/deposit/recharge.vue
+++ b/pages/mine/deposit/recharge.vue
@@ -19,40 +19,30 @@
  </view>
 </template>

-<script>
-import { recharge } from "@/api/members";
-export default {
-  data() {
-    return {
-      price: "",
-      flag: true,
-    };
-  },
-  watch: {
-    price(val) {
-      this.flag = !(Number(val) > 0);
-    },
-  },
-  methods: {
-    async handlerRecharge() {
-      const amount = Number(this.price);
-      if (!(amount > 0)) {
-        uni.showToast({
-          title: "请输入充值金额",
-          icon: "none",
-        });
-        return;
-      }
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { recharge } from '@/api/members'

-      const res = await recharge({ price: amount });
-      if (res.data.success) {
-        uni.navigateTo({
-          url: `/pages/cart/payment/payOrder?orderType=RECHARGE&recharge_sn=${res.data.result.rechargeSn}`,
-        });
-      }
-    },
-  },
-};
+const price = ref('')
+const flag = ref(true)
+
+watch(price, (val) => {
+  flag.value = !(Number(val) > 0)
+})
+
+async function handlerRecharge() {
+  const amount = Number(price.value)
+  if (!(amount > 0)) {
+    uni.showToast({ title: '请输入充值金额', icon: 'none' })
+    return
+  }
+  const res = await recharge({ price: amount })
+  if (res.data.success) {
+    uni.navigateTo({
+      url: `/pages/cart/payment/payOrder?orderType=RECHARGE&recharge_sn=${res.data.result.rechargeSn}`,
+    })
+  }
+}
 </script>

 <style lang="scss" scoped>
--- a/pages/mine/deposit/withdrawApply.vue
+++ b/pages/mine/deposit/withdrawApply.vue
@@ -25,182 +25,149 @@
  </view>
 </template>

-<script>
-import { getWithdrawApplyPage, getWithdrawApplyWechatTransferInfo } from "@/api/members";
-export default {
-  data() {
-    return {
-      loaded: false,
-      params: {
-        pageNumber: 1,
-        pageSize: 10,
-        order: "desc",
-      },
-      records: [],
-    };
-  },
-  onShow() {
-    this.params.pageNumber = 1;
-    this.records = [];
-    this.loaded = false;
-    this.getData();
-  },
-  methods: {
-    withdrawStatusText(applyStatus) {
-      switch (applyStatus) {
-        case "APPLY":
-          return "申请中";
-        case "VIA_AUDITING":
-          return "审核通过";
-        case "D_VIA_AUDITING":
-          return "分销提现审核通过";
-        case "FAIL_AUDITING":
-          return "审核未通过";
-        case "D_FAIL_AUDITING":
-          return "分销提现审核未通过";
-        case "WAIT_USER_CONFIRM":
-          return "等待用户确认";
-        case "SUCCESS":
-          return "提现成功";
-        case "ERROR":
-          return "提现失败";
-        default:
-          return applyStatus || "";
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onShow } from '@dcloudio/uni-app'
+import { getWithdrawApplyPage, getWithdrawApplyWechatTransferInfo } from '@/api/members'
+import { unitPrice } from '@/utils/filters.js'
+
+const loaded = ref(false)
+const params = ref({
+  pageNumber: 1,
+  pageSize: 10,
+  order: 'desc',
+})
+const records = ref<any[]>([])
+
+onShow(() => {
+  params.value.pageNumber = 1
+  records.value = []
+  loaded.value = false
+  getData()
+})
+
+function withdrawStatusText(applyStatus: string) {
+  switch (applyStatus) {
+    case 'APPLY':
+      return '申请中'
+    case 'VIA_AUDITING':
+      return '审核通过'
+    case 'D_VIA_AUDITING':
+      return '分销提现审核通过'
+    case 'FAIL_AUDITING':
+      return '审核未通过'
+    case 'D_FAIL_AUDITING':
+      return '分销提现审核未通过'
+    case 'WAIT_USER_CONFIRM':
+      return '等待用户确认'
+    case 'SUCCESS':
+      return '提现成功'
+    case 'ERROR':
+      return '提现失败'
+    default:
+      return applyStatus || ''
+  }
+}
+
+function getData() {
+  getWithdrawApplyPage(params.value).then((res) => {
+    loaded.value = true
+    if (res.data.success && res.data.result.records.length != 0) {
+      records.value.push(...res.data.result.records)
+    }
+  })
+}
+
+function loadMore() {
+  params.value.pageNumber++
+  getData()
+}
+
+function confirmWechatReceive(item: any) {
+  const id = item && item.id
+  if (!id) {
+    uni.showToast({ title: '缺少提现记录ID', duration: 2000, icon: 'none' })
+    return
+  }
+
+  uni.showLoading({ title: '加载中' })
+  getWithdrawApplyWechatTransferInfo(id)
+    .then((res) => {
+      if (!res.data || !res.data.success) return
+
+      const info = res.data.result || {}
+      const mchId = info.mchId
+      const wechatPackage = info.wechatPackage
+      let appId = info.appId
+
+      if (typeof wx !== 'undefined' && wx.getAccountInfoSync) {
+        try {
+          const accountInfo = wx.getAccountInfoSync()
+          const mpAppId = accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.appId
+          if (mpAppId) appId = mpAppId
+        } catch (e) {}
      }
-    },
-    getData() {
-      getWithdrawApplyPage(this.params).then((res) => {
-        this.loaded = true;
-        if (res.data.success) {
-          if (res.data.result.records.length != 0) {
-            this.records.push(...res.data.result.records);
-          }
+
+      if (!mchId || !appId || !wechatPackage) {
+        uni.showToast({ title: '微信确认参数缺失', duration: 2000, icon: 'none' })
+        return
+      }
+
+      const openResultToast = (errMsg?: string) => {
+        if (errMsg === 'requestMerchantTransfer:ok') {
+          uni.showToast({ title: '已唤起确认页面', duration: 2000, icon: 'none' })
+          return
+        }
+        if (errMsg === 'requestMerchantTransfer:cancel') {
+          uni.showToast({ title: '已取消', duration: 2000, icon: 'none' })
+          return
        }
-      });
-    },
-    loadMore() {
-      this.params.pageNumber++;
-      this.getData();
-    },
-    confirmWechatReceive(item) {
-      const id = item && item.id;
-      if (!id) {
        uni.showToast({
-          title: "缺少提现记录ID",
-          duration: 2000,
-          icon: "none",
-        });
-        return;
+          title: errMsg ? `唤起失败：${errMsg}` : '唤起失败',
+          duration: 2500,
+          icon: 'none',
+        })
      }

-      uni.showLoading({
-        title: "加载中",
-      });
-      getWithdrawApplyWechatTransferInfo(id)
-        .then((res) => {
-          if (!res.data || !res.data.success) return;
-
-          const info = res.data.result || {};
-          const mchId = info.mchId;
-          const wechatPackage = info.wechatPackage;
-          let appId = info.appId;
-
-          if (typeof wx !== "undefined" && wx.getAccountInfoSync) {
-            try {
-              const accountInfo = wx.getAccountInfoSync();
-              const mpAppId = accountInfo && accountInfo.miniProgram && accountInfo.miniProgram.appId;
-              if (mpAppId) appId = mpAppId;
-            } catch (e) {}
-          }
-
-          if (!mchId || !appId || !wechatPackage) {
+      if (typeof wx !== 'undefined' && wx.getSystemInfoSync) {
+        try {
+          const sys = wx.getSystemInfoSync()
+          if (sys && sys.platform === 'devtools') {
            uni.showToast({
-              title: "微信确认参数缺失",
-              duration: 2000,
-              icon: "none",
-            });
-            return;
-          }
-
-          const openResultToast = (errMsg) => {
-            if (errMsg === "requestMerchantTransfer:ok") {
-              uni.showToast({
-                title: "已唤起确认页面",
-                duration: 2000,
-                icon: "none",
-              });
-              return;
-            }
-            if (errMsg === "requestMerchantTransfer:cancel") {
-              uni.showToast({
-                title: "已取消",
-                duration: 2000,
-                icon: "none",
-              });
-              return;
-            }
-            uni.showToast({
-              title: errMsg ? `唤起失败：${errMsg}` : "唤起失败",
+              title: '开发者工具可能不支持，请真机测试',
              duration: 2500,
-              icon: "none",
-            });
-          };
-
-          if (typeof wx !== "undefined" && wx.getSystemInfoSync) {
-            try {
-              const sys = wx.getSystemInfoSync();
-              if (sys && sys.platform === "devtools") {
-                uni.showToast({
-                  title: "开发者工具可能不支持，请真机测试",
-                  duration: 2500,
-                  icon: "none",
-                });
-              }
-            } catch (e) {}
+              icon: 'none',
+            })
          }
+        } catch (e) {}
+      }

-          if (typeof wx !== "undefined" && wx.canIUse && wx.canIUse("requestMerchantTransfer")) {
-            wx.requestMerchantTransfer({
-              mchId,
-              appId,
-              package: wechatPackage,
-              success: (r) => {
-                openResultToast(r && (r.errMsg || r.err_msg));
-              },
-              fail: (r) => {
-                openResultToast(r && (r.errMsg || r.err_msg));
-              },
-            });
-            return;
-          }
-
-          if (typeof WeixinJSBridge !== "undefined" && WeixinJSBridge.invoke) {
-            WeixinJSBridge.invoke(
-              "requestMerchantTransfer",
-              {
-                mchId,
-                appId,
-                package: wechatPackage,
-              },
-              (r) => {
-                openResultToast(r && (r.errMsg || r.err_msg));
-              }
-            );
-            return;
-          }
-
-          uni.showToast({
-            title: "请在微信内打开确认收款",
-            duration: 2000,
-            icon: "none",
-          });
+      if (typeof wx !== 'undefined' && wx.canIUse && wx.canIUse('requestMerchantTransfer')) {
+        wx.requestMerchantTransfer({
+          mchId,
+          appId,
+          package: wechatPackage,
+          success: (r: any) => openResultToast(r && (r.errMsg || r.err_msg)),
+          fail: (r: any) => openResultToast(r && (r.errMsg || r.err_msg)),
        })
-        .finally(() => {
-          uni.hideLoading();
-        });
-    },
-  },
-};
+        return
+      }
+
+      if (typeof WeixinJSBridge !== 'undefined' && WeixinJSBridge.invoke) {
+        WeixinJSBridge.invoke(
+          'requestMerchantTransfer',
+          { mchId, appId, package: wechatPackage },
+          (r: any) => openResultToast(r && (r.errMsg || r.err_msg))
+        )
+        return
+      }
+
+      uni.showToast({ title: '请在微信内打开确认收款', duration: 2000, icon: 'none' })
+    })
+    .finally(() => {
+      uni.hideLoading()
+    })
+}
 </script>

 <style lang="scss" scoped>
--- a/pages/mine/deposit/withdrawal.vue
+++ b/pages/mine/deposit/withdrawal.vue
@@ -58,77 +58,68 @@
  </view>
 </template>

-<script>
-import { getUserWallet, withdrawalApply, withdrawalSettingVO } from "@/api/members";
-export default {
-  data() {
-    return {
-      price: "",
-      walletNum: 0,
-      minPrice: 0,
-      type: "",
-      connectNumber: "",
-      realName: "",
-    };
-  },
-  computed: {
-    typeLabel() {
-      if (this.type === "ALI") return "支付宝";
-      if (this.type) return "微信";
-      return "--";
-    },
-  },
-  async mounted() {
-    const result = await getUserWallet();
-    const res = await withdrawalSettingVO();
-    this.walletNum = result.data.result.memberWallet;
-    this.minPrice = res.data.result.minPrice;
-    this.type = res.data.result.type;
-  },
-  methods: {
-    cashd() {
-      const amount = Number(this.price);
-      if (!this.$u.test.amount(parseInt(amount))) {
-        uni.showToast({
-          title: "请输入正确金额",
-          duration: 2000,
-          icon: "none",
-        });
-        return;
-      }
+<script setup lang="ts">
+import { ref, computed, getCurrentInstance, onMounted } from 'vue'
+import { getUserWallet, withdrawalApply, withdrawalSettingVO } from '@/api/members'
+import { unitPrice } from '@/utils/filters.js'

-      const params = { price: amount };
-      if (this.type === "ALI") {
-        if (!this.connectNumber || !this.realName) {
-          uni.showToast({
-            title: "请输入真实姓名和第三方登录账号",
-            duration: 2000,
-            icon: "none",
-          });
-          return;
-        }
-        params.connectNumber = this.connectNumber;
-        params.realName = this.realName;
-      }
+const { proxy } = getCurrentInstance()!

-      withdrawalApply(params).then((res) => {
-        if (res.data.success) {
-          uni.showToast({
-            title: "提现成功!",
-            duration: 2000,
-            icon: "none",
-          });
-          setTimeout(() => {
-            uni.navigateBack({ delta: 1 });
-          }, 1000);
-        }
-      });
-    },
-    handleAll() {
-      this.price = String(this.walletNum || "");
-    },
-  },
-};
+const price = ref('')
+const walletNum = ref(0)
+const minPrice = ref(0)
+const type = ref('')
+const connectNumber = ref('')
+const realName = ref('')
+
+const typeLabel = computed(() => {
+  if (type.value === 'ALI') return '支付宝'
+  if (type.value) return '微信'
+  return '--'
+})
+
+onMounted(async () => {
+  const result = await getUserWallet()
+  const res = await withdrawalSettingVO()
+  walletNum.value = result.data.result.memberWallet
+  minPrice.value = res.data.result.minPrice
+  type.value = res.data.result.type
+})
+
+function cashd() {
+  const amount = Number(price.value)
+  if (!proxy.$u.test.amount(parseInt(String(amount)))) {
+    uni.showToast({ title: '请输入正确金额', duration: 2000, icon: 'none' })
+    return
+  }
+
+  const params: Record<string, any> = { price: amount }
+  if (type.value === 'ALI') {
+    if (!connectNumber.value || !realName.value) {
+      uni.showToast({
+        title: '请输入真实姓名和第三方登录账号',
+        duration: 2000,
+        icon: 'none',
+      })
+      return
+    }
+    params.connectNumber = connectNumber.value
+    params.realName = realName.value
+  }
+
+  withdrawalApply(params).then((res) => {
+    if (res.data.success) {
+      uni.showToast({ title: '提现成功!', duration: 2000, icon: 'none' })
+      setTimeout(() => {
+        uni.navigateBack({ delta: 1 })
+      }, 1000)
+    }
+  })
+}
+
+function handleAll() {
+  price.value = String(walletNum.value || '')
+}
 </script>

 <style lang="scss" scoped>