bandhuBuy-uniapp/src/pages/mine/mine.vue

<route lang="json5">
  {
    layout: 'default',
    needLogin: true,
    style: {
      navigationStyle: 'custom',
    },
  }
  </route>

<script lang="ts" setup>
import { getWalletAccountInfo } from '@/api/wallet'
import { t } from '@/locale'
import { useUserStore } from '@/store/user'
import { formatNumber } from '@/utils'
import { toPage } from '@/utils/page'

defineOptions({
  name: 'Mine', // 我的
})

// 获取屏幕边界到安全区域距离
const systemInfo = uni.getSystemInfoSync()
const safeAreaInsets = systemInfo.safeAreaInsets

// 用户状态管理
const userStore = useUserStore()

// 判断是否已登录
const isLoggedIn = computed(() => {
  return !!userStore.token
})

// 获取用户信息
const userInfo = computed(() => {
  return userStore.userInfo
})

const groupList = ref([
  { name: t('mine.group.toPay'), url: `/pages/myOrders/myOrders`, type: 1, icon: '/static/icons/to-pay.png' },
  { name: t('mine.group.success'), url: `/pages/myOrders/myOrders`, type: 2, icon: '/static/icons/success.png' },
  { name: t('mine.group.failed'), url: `/pages/myOrders/myOrders`, type: 3, icon: '/static/icons/failed.png' },
  { name: t('mine.group.reward'), url: `/pages/myOrders/myOrders`, type: 4, icon: '/static/icons/reward.png' },
])

const menuList = ref([
  { name: t('mine.menu.profile'), url: '/pages/mine/myProfile', icon: '/static/icons/my-profile.png' },
  { name: t('mine.menu.address'), url: '/pages/mine/addressBook', icon: '/static/icons/address-book.png' },
  { name: t('mine.menu.share'), url: '/pages/mine/share', icon: '/static/icons/share.png' },
  { name: t('mine.menu.favorite'), url: '/pages/mine/myFavorite', icon: '/static/icons/my-favorite.png' },
  { name: t('mine.menu.chat'), url: '', icon: '/static/icons/live-chat.png' },
  { name: t('mine.menu.activity'), url: '/pages/referEarn/referEarn', icon: '/static/icons/activity-group.png' },
])
const walletInfo = ref<any>({})
async function getWalletInfo() {
  // 获取钱包信息-查询余额
  const res = await getWalletAccountInfo()
  console.log(res)
  walletInfo.value = res?.data?.balance
}
onShow(() => {
  getWalletInfo()
})
</script>

<template>
  <view
    class="flex items-center justify-between bg-[rgba(var(--wot-color-theme-rgb),0.3)] pb-48rpx pl-24rpx pr-54rpx"
    :style="{ paddingTop: `${safeAreaInsets?.top + 3}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('/pages/register/register')">
          {{ $t('mine.auth.register') }}
        </wd-button>
        <wd-button size="small" @click="toPage('/pages/login/login')">
          {{ $t('mine.auth.login') }}
        </wd-button>
      </view>
    </view>
    <wd-icon name="setting" color="#3A444C" size="36rpx" @click="toPage('/pages/mine/setting')" />
  </view>
  <view class="relative rounded-tl-24rpx rounded-tr-24rpx bg-white px-24rpx pb-24rpx pt-28rpx -top-24rpx">
    <view class="mb-18rpx text-32rpx">
      {{ $t('mine.wallet.title') }}
    </view>
    <view
      class="flex items-center justify-between rounded-12rpx bg-[rgba(var(--wot-color-theme-rgb),0.1)] px-16rpx py-22rpx"
    >
      <view class="flex items-center" @click="toPage('/pages/wallet/myWallet')">
        <wd-img width="84rpx" height="84rpx" round src="/static/icons/wallet-balance.png" />
        <view class="ml-18rpx">
          <view class="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">
        <wd-button size="small" @click="toPage('/pages/wallet/recharge')">
          {{ $t('mine.wallet.recharge') }}
        </wd-button>
      </view>
    </view>
  </view>
  <view class="mb-20rpx bg-white px-24rpx pb-32rpx pt-26rpx">
    <view class="mb-24rpx flex items-center justify-between">
      <text class="text-32rpx font-bold">
        {{ $t('mine.group.title') }}
      </text>
      <view class="flex items-center" @click="toPage('/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(item.url, { type: item.type })">
        <wd-img width="48rpx" height="48rpx" :src="item.icon" />
        <view class="mt-18rpx text-22rpx text-#3A444C">
          {{ item.name }}
        </view>
      </view>
    </view>
  </view>
  <view class="grid grid-cols-3 gap-24rpx bg-white py-45rpx">
    <view v-for="(item, index) in menuList" :key="index" class="flex flex-col items-center" @click="toPage(item.url)">
      <wd-img width="48rpx" height="48rpx" :src="item.icon" />
      <view class="mt-18rpx text-22rpx text-#3A444C">
        {{ item.name }}
      </view>
    </view>
  </view>
</template>