dz-app/pages/personal-center/index/index.vue

<template>
    <view class="page-content mx-bg-shared-gradient">
        <view class="px-40 fx-row fx-bet-cen gap-20" :class="largeScreen?'mt-80':'mt-50'">
            <uv-avatar shape="circle" :size="64" :src="avatar" @click="uploadAvatar"/>
            <view class="flex-1 fx-col fx-bet-base">
                <view class="fx-row items-center gap-20">
                    <text class="text-main text-2xl font-bold">{{ currentUser.nickName }}</text>
                    <uv-image width="auto" height="18" mode="heightFix" :src="vipTagImg"/>
                </view>
                <text class="text-content text-lg items-end">{{ encryptMobile }}</text>
            </view>
            <uv-image :src="iconSetting" width="24" height="24" @click="goSettingPage"/>
        </view>
        <view class="mt-30 grid grid-cols-3">
            <view class="fx-col items-center" :class="largeScreen?'gap-15':'gap-5'">
                <text class="text-main text-lg font-bold">{{ userStat.numExercise || '0' }}</text>
                <text class="text-content text-sm">做题数量</text>
            </view>
            <view class="fx-col items-center" :class="largeScreen?'gap-15':'gap-5'">
                <view class="text-main text-lg font-bold">
                    {{ userStat.timeVideo || '0' }}
                    <text v-if="userStat.timeVideo && userStat.timeVideoUnit" class="text-xs font-normal">
                        {{ userStat.timeVideoUnit }}
                    </text>
                </view>
                <text class="text-content text-sm">视频观看时长</text>
            </view>
            <view class="fx-col items-center" :class="largeScreen?'gap-15':'gap-5'">
                <text class="text-main text-lg font-bold">{{ userStat.numLogin || '0' }}</text>
                <text class="text-content text-sm">登陆次数</text>
            </view>
        </view>
        <view class="p-40">
            <view class="buy-vip">
                <view class="fx-row fx-bet-cen h-full text-xs">
                    <template v-if="currentUser.isBind">
                        <text>已开通会员，享受权益中</text>
                        <text class="font-thin">{{ currentUser.outDate }} 到期</text>
                    </template>
                    <template v-else>
                        <text>开通会员，享受全部权益</text>
                        <view @click="handleVipClick">
                            <uv-text text="去开通" suffix-icon="arrow-right"/>
                        </view>
                    </template>
                </view>
            </view>
        </view>
        <index-title-wrap title="常用功能" disable-line bold class="px-40">
            <mx-index-menus :data="usualMenus" title-class="text-sm font-normal text-content" class="!mx-0"
                            container-wrap-class="p-30" :gap-class="largeScreen?undefined:'gap-0'"/>
        </index-title-wrap>
        <index-title-wrap title="其它功能" disable-line bold class="mx-40 mt-40" :class="{'!gap-0': !largeScreen}">
            <uv-cell v-for="m in otherMenus" :key="m.name" is-link :icon="m.icon" :title="m.name"
                     @click="handleSettingClick(m)"/>
        </index-title-wrap>
        <view class="flex-1 min-h-180 fx-row fx-cen-cen">
            <uv-button type="error" size="large" shape="circle" text="退出登陆" plain
                       :custom-style="{ width: '50vw', height: '44px' }" @click="handleLogout"/>
        </view>
    </view>
</template>

<script setup>
import {computed} from "vue";
import {onShow} from "@dcloudio/uni-app";
import mxConfig from "@/common/mxConfig";
import mxConst from "@/common/mxConst.js";
import {useUserStore} from "@/hooks/useUserStore";
import {useEnvStore} from "@/hooks/useEnvStore";
import {useTransfer} from "@/hooks/useTransfer";
import {useChooseImage} from "@/hooks/useChooseImage";
import {useUserStorePageFilter} from "@/hooks/useUserStorePageFilter";
import {mobile} from "@/uni_modules/uv-ui-tools/libs/function/test";
import _ from "lodash";

import IndexTitleWrap from "@/pages/index/components/index-title-wrap.vue";
import iconVip from "@/static/personal/vip_tag.png";
import iconVipNone from "@/static/personal/vip_none_tag.png";
import iconSetting from "@/static/personal/setting.png";
import {sys} from "@/uni_modules/uv-ui-tools/libs/function";
import {useSingletonBuyVip} from "@/hooks/useSingletonComponent";

const {isLogin, currentUser, avatar, GetInfo, Logout} = useUserStore();
const {transferTo, transferToFAQ} = useTransfer();
const {isDisplayedPermission} = useEnvStore();
const {chooseAvatar} = useChooseImage()

const vipTagImg = computed(() => currentUser.value.isBind ? iconVip : iconVipNone);
const userStat = computed(() => currentUser.value.userStat || {});
const encryptMobile = computed(() =>
    mobile(currentUser.value.phonenumber)
        ? currentUser.value.phonenumber.replace(/^(\d{3})\d{4}(\d+)/, "$1****$2")
        : currentUser.value.phonenumber
);
const {menus} = useUserStorePageFilter("PersonalCenter");
const groupedMenus = computed(() => _.partition(menus.value, (m) => m.category == "usual"))
const usualMenus = computed(() => groupedMenus.value[0])
const otherMenus = computed(() => groupedMenus.value[1])
const largeScreen = computed(() => sys().windowHeight > 740)

onShow(async () => {
    if (!isLogin.value) transferTo(mxConst.routes.login)
});

function goSettingPage() {
    transferTo(mxConst.routes.setting)
}

async function handleLogout() {
    await Logout()
    transferTo(mxConst.routes.login)
}

function handleVipClick() {
    const buyVipPopup = useSingletonBuyVip()
    buyVipPopup.open()
}

function handleSettingClick(setting) {
    if (setting.type === "FAQ") return transferToFAQ()
    if (!setting.path) return
    let nextData = setting.nextData || {}
    nextData.settingName = ""
    transferTo(setting.path, nextData, [currentUser, {settingName: setting.name}])
}

function uploadAvatar() {
    // 简单判断一下，不能保证已经真正获取权限
    if (!isDisplayedPermission.value) {
        uni.showModal({
            title: "权限说明",
            content: mxConfig.cameraAuthTips,
            showCancel: false,
            success: (res) => {
                if (res.confirm) {
                    isDisplayedPermission.value = true;
                    chooseAvatarCore()
                }
            },
        });
    } else {
        chooseAvatarCore()
    }
}

function chooseAvatarCore() {
    chooseAvatar((data) => {
        currentUser.avatar = data.imgUrl
        GetInfo()
    })
}
</script>

<style scoped>
.buy-vip {
    background-image: url("~@/static/personal/buy_vip.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 44px;
    border-radius: 6px;
    overflow: hidden;
    padding: 0 12px 0 48px;
}

::v-deep .uv-cell .uv-cell__body {
    padding: 10px 0;
}
</style>