Pārlūkot izejas kodu

fix: 提现校验区间取配置项、个人中心增加下拉刷新的功能

liangan 1 nedēļu atpakaļ
vecāks
revīzija
dfe794501f
2 mainītis faili ar 112 papildinājumiem un 80 dzēšanām
  1. 90 71
      src/pages/mine/mine.vue
  2. 22 9
      src/pages/wallet/withdraw.vue

+ 90 - 71
src/pages/mine/mine.vue

@@ -9,6 +9,10 @@
   </route>
 
 <script lang="ts" setup>
+// eslint-disable-next-line unused-imports/no-unused-imports
+import { onPageScroll } from '@dcloudio/uni-app' // 必须导入需要用到的页面生命周期(即使在当前页面上没有直接使用到)
+import useZPaging from 'z-paging/components/z-paging/js/hooks/useZPaging.js'
+
 import { getConfigByCode } from '@/api/common'
 import { pendingRedDots } from '@/api/order'
 import { getWalletAccountInfo } from '@/api/wallet'
@@ -21,6 +25,11 @@ defineOptions({
   name: 'Mine', // 我的
 })
 
+// z-paging
+const paging = ref(null)
+// 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
+useZPaging(paging)
+
 // 获取屏幕边界到安全区域距离
 const systemInfo = uni.getSystemInfoSync()
 const safeAreaInsets = systemInfo.safeAreaInsets
@@ -148,100 +157,110 @@ async function getPendingRedDots() {
   }
   catch {}
 }
+
+// 下拉刷新时调用
+async function handleRefresh() {
+  await Promise.all([
+    getWalletInfo(),
+    getPendingRedDots(),
+    userStore.getUserInfo(),
+  ])
+  paging.value?.complete()
+}
+
 onShow(() => {
   getWalletInfo()
   getPendingRedDots()
-})
-onLoad(() => {
-  // 页面加载时的逻辑
   userStore.getUserInfo()
 })
 </script>
 
 <template>
-  <view
-    class="flex items-center justify-between bg-[rgba(var(--wot-color-theme-rgb),0.3)] pb-72rpx pl-24rpx pr-54rpx"
-    :style="{ paddingTop: `${safeAreaInsets?.top + 24}px` }"
-  >
-    <view class="flex items-center">
-      <wd-img
-        width="96rpx"
-        height="96rpx"
-        round
-        :src="isLoggedIn ? userInfo?.headPic : '/static/images/default-avatar.png'"
-      />
-      <!-- 已登录 -->
-      <view v-if="isLoggedIn" class="ml-24rpx text-32rpx font-bold">
-        {{ userInfo?.name || userInfo?.username || 'User' }}
-      </view>
-      <!-- 未登录 -->
-      <view v-else class="ml-24rpx flex items-center">
-        <wd-button size="small" custom-class="mr-20rpx! bg-transparent!" plain @click="toPage({ url: '/pages/register/register' })">
-          {{ $t('mine.auth.register') }}
-        </wd-button>
-        <wd-button size="small" @click="toPage({ url: '/pages/login/login' })">
-          {{ $t('mine.auth.login') }}
-        </wd-button>
-      </view>
-    </view>
-    <wd-icon name="setting" color="#3A444C" size="36rpx" @click="toPage({ url: '/pages/mine/setting' })" />
-  </view>
-  <view class="relative rounded-tl-24rpx rounded-tr-24rpx bg-white px-24rpx pb-36rpx pt-32rpx -top-24rpx" @click="toPage({ url: '/pages/wallet/myWallet' })">
-    <view class="mb-24rpx text-32rpx">
-      {{ $t('mine.wallet.title') }}
-    </view>
+  <z-paging ref="paging" refresher-only use-page-scroll @refresh="handleRefresh">
     <view
-      class="flex items-center justify-between rounded-12rpx bg-[rgba(var(--wot-color-theme-rgb),0.1)] px-16rpx py-34rpx"
+      class="flex items-center justify-between bg-[rgba(var(--wot-color-theme-rgb),0.3)] pb-72rpx pl-24rpx pr-54rpx"
+      :style="{ paddingTop: `${safeAreaInsets?.top + 24}px` }"
     >
       <view class="flex items-center">
-        <wd-img width="84rpx" height="84rpx" round src="/static/icons/wallet-balance.png" />
-        <view class="ml-18rpx">
-          <view class="mb-3px text-22rpx text-#595959">
-            {{ $t('mine.wallet.balance') }}
-          </view>
-          <view class="text-44rpx text-[var(--wot-color-theme)] font-bold">
-            {{ formatNumber(walletInfo.balance) }}
-          </view>
+        <wd-img
+          width="96rpx"
+          height="96rpx"
+          round
+          :src="isLoggedIn ? userInfo?.headPic : '/static/images/default-avatar.png'"
+        />
+        <!-- 已登录 -->
+        <view v-if="isLoggedIn" class="ml-24rpx text-32rpx font-bold">
+          {{ userInfo?.name || userInfo?.username || 'User' }}
         </view>
+        <!-- 未登录 -->
+        <view v-else class="ml-24rpx flex items-center">
+          <wd-button size="small" custom-class="mr-20rpx! bg-transparent!" plain @click="toPage({ url: '/pages/register/register' })">
+            {{ $t('mine.auth.register') }}
+          </wd-button>
+          <wd-button size="small" @click="toPage({ url: '/pages/login/login' })">
+            {{ $t('mine.auth.login') }}
+          </wd-button>
+        </view>
+      </view>
+      <wd-icon name="setting" color="#3A444C" size="36rpx" @click="toPage({ url: '/pages/mine/setting' })" />
+    </view>
+    <view class="relative rounded-tl-24rpx rounded-tr-24rpx bg-white px-24rpx pb-36rpx pt-32rpx -top-24rpx" @click="toPage({ url: '/pages/wallet/myWallet' })">
+      <view class="mb-24rpx text-32rpx">
+        {{ $t('mine.wallet.title') }}
       </view>
-      <view class="flex flex-col items-end" @click.stop="toPage({ url: '/pages/wallet/recharge' })">
-        <wd-button size="small">
-          {{ $t('mine.wallet.recharge') }}
-        </wd-button>
+      <view
+        class="flex items-center justify-between rounded-12rpx bg-[rgba(var(--wot-color-theme-rgb),0.1)] px-16rpx py-34rpx"
+      >
+        <view class="flex items-center">
+          <wd-img width="84rpx" height="84rpx" round src="/static/icons/wallet-balance.png" />
+          <view class="ml-18rpx">
+            <view class="mb-3px text-22rpx text-#595959">
+              {{ $t('mine.wallet.balance') }}
+            </view>
+            <view class="text-44rpx text-[var(--wot-color-theme)] font-bold">
+              {{ formatNumber(walletInfo.balance) }}
+            </view>
+          </view>
+        </view>
+        <view class="flex flex-col items-end" @click.stop="toPage({ url: '/pages/wallet/recharge' })">
+          <wd-button size="small">
+            {{ $t('mine.wallet.recharge') }}
+          </wd-button>
+        </view>
       </view>
     </view>
-  </view>
-  <view class="mb-24rpx bg-white px-24rpx pb-32rpx pt-26rpx">
-    <view class="mb-24rpx flex items-center justify-between">
-      <text class="text-32rpx">
-        {{ $t('mine.group.title') }}
-      </text>
-      <view class="flex items-center" @click="toPage({ url: '/pages/myOrders/myOrders' })">
-        <text class="mr-8rpx text-22rpx text-#3A444C">
-          {{ $t('mine.group.all') }}
+    <view class="mb-24rpx bg-white px-24rpx pb-32rpx pt-26rpx">
+      <view class="mb-24rpx flex items-center justify-between">
+        <text class="text-32rpx">
+          {{ $t('mine.group.title') }}
         </text>
-        <wd-icon name="chevron-right" size="28rpx" />
+        <view class="flex items-center" @click="toPage({ url: '/pages/myOrders/myOrders' })">
+          <text class="mr-8rpx text-22rpx text-#3A444C">
+            {{ $t('mine.group.all') }}
+          </text>
+          <wd-icon name="chevron-right" size="28rpx" />
+        </view>
+      </view>
+      <view class="grid grid-cols-4 gap-24rpx">
+        <view v-for="(item, index) in groupList" :key="index" class="flex flex-col items-center" @click="toPage({ url: item.url, params: { type: item.type } })">
+          <wd-badge :model-value="item.type === 3 ? 0 : pendingRedDotsData[item.dotName]" :max="99">
+            <wd-img width="48rpx" height="48rpx" :src="item.icon" />
+          </wd-badge>
+          <view class="mt-24rpx text-22rpx text-#3A444C">
+            {{ item.name }}
+          </view>
+        </view>
       </view>
     </view>
-    <view class="grid grid-cols-4 gap-24rpx">
-      <view v-for="(item, index) in groupList" :key="index" class="flex flex-col items-center" @click="toPage({ url: item.url, params: { type: item.type } })">
-        <wd-badge :model-value="item.type === 3 ? 0 : pendingRedDotsData[item.dotName]" :max="99">
-          <wd-img width="48rpx" height="48rpx" :src="item.icon" />
-        </wd-badge>
+    <view class="grid grid-cols-3 gap-48rpx bg-white py-65rpx">
+      <view v-for="(item, index) in menuList" :key="index" class="flex flex-col items-center" @click="menuClick(item)">
+        <wd-img width="48rpx" height="48rpx" :src="item.icon" />
         <view class="mt-24rpx text-22rpx text-#3A444C">
           {{ item.name }}
         </view>
       </view>
     </view>
-  </view>
-  <view class="grid grid-cols-3 gap-48rpx bg-white py-65rpx">
-    <view v-for="(item, index) in menuList" :key="index" class="flex flex-col items-center" @click="menuClick(item)">
-      <wd-img width="48rpx" height="48rpx" :src="item.icon" />
-      <view class="mt-24rpx text-22rpx text-#3A444C">
-        {{ item.name }}
-      </view>
-    </view>
-  </view>
+  </z-paging>
   <!-- 在页面最下方添加占位视图,高度等于 tabBar 的高度 -->
   <!-- <view class="edgeInsetBottom" /> -->
 </template>

+ 22 - 9
src/pages/wallet/withdraw.vue

@@ -39,9 +39,9 @@ const bankColumns = [
   { label: 'ROCKET', value: 'ROCKET' },
 ]
 
-// 提现限制
-const withdrawMinAmount = 300
-const withdrawMaxAmount = 20000
+// 提现限制(从配置中获取)
+const withdrawMinAmount = ref<number>(300)
+const withdrawMaxAmount = ref<number>(20000)
 
 const loading = ref<boolean>(false)
 async function submit() {
@@ -70,13 +70,13 @@ async function submit() {
   }
 
   // 校验金额范围
-  if (amount < withdrawMinAmount) {
-    toast.info(t('wallet.withdraw.notes.4', [formatNumber(withdrawMinAmount), formatNumber(withdrawMaxAmount)]))
+  if (amount < withdrawMinAmount.value) {
+    toast.info(t('wallet.withdraw.notes.4', [formatNumber(withdrawMinAmount.value), formatNumber(withdrawMaxAmount.value)]))
     return
   }
 
-  if (amount > withdrawMaxAmount) {
-    toast.info(t('wallet.withdraw.notes.4', [formatNumber(withdrawMinAmount), formatNumber(withdrawMaxAmount)]))
+  if (amount > withdrawMaxAmount.value) {
+    toast.info(t('wallet.withdraw.notes.4', [formatNumber(withdrawMinAmount.value), formatNumber(withdrawMaxAmount.value)]))
     return
   }
 
@@ -109,8 +109,21 @@ async function submit() {
 const withdrawRate = ref<any>()
 async function getConfig() {
   try {
-    const res = await getConfigByCode({ code: queryParams.value.type === '2' ? 'earning_withdraw_rate' : 'withdraw_rate' })
-    withdrawRate.value = res.data.valueInfo
+    // 获取提现费率
+    const rateRes = await getConfigByCode({ code: queryParams.value.type === '2' ? 'earning_withdraw_rate' : 'withdraw_rate' })
+    withdrawRate.value = rateRes.data.valueInfo
+
+    // 获取最小提现金额
+    const minRes = await getConfigByCode({ code: 'min_withdraw_amount' })
+    if (minRes.code === '200' && minRes.data.valueInfo) {
+      withdrawMinAmount.value = Number(minRes.data.valueInfo)
+    }
+
+    // 获取最大提现金额
+    const maxRes = await getConfigByCode({ code: 'max_withdraw_amount' })
+    if (maxRes.code === '200' && maxRes.data.valueInfo) {
+      withdrawMaxAmount.value = Number(maxRes.data.valueInfo)
+    }
   }
   catch {