|
|
@@ -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>
|