<template>
|
<PageLayoutWithBg class="mine-page-wrapper" :need-auth="false">
|
<template #navigationBar>
|
<TransparentNavigationBar
|
title="个人中心"
|
:is-absolute="false"
|
mode="dark"
|
></TransparentNavigationBar>
|
</template>
|
<template #bg>
|
<img :src="OssAssets.mine.Bg" class="mine-page-bg" :style="{ height: `${bgHeight}px` }" />
|
</template>
|
<ContentView>
|
<UserHomeTopView>
|
<template #avatar>
|
<div class="mine-avatar-wrapper" @click="goLogin">
|
<UserAvatar :size="60" class="mine-avatar" />
|
<div class="user-info" v-if="isLogin">
|
<div class="user-info-item">
|
<div class="user-info-item-name">{{ userDetail?.userName ?? '123' }}</div>
|
<div class="user-info-item-gender">
|
<img v-if="1" :src="IconMale" class="user-info-item-gender-icon" />
|
<img v-else :src="IconFemale" class="user-info-item-gender-icon" />
|
</div>
|
<div class="user-info-item-position">管理员</div>
|
</div>
|
<div class="user-info-item">
|
<template v-if="isCertified">
|
<div class="user-info-unCertified-text">未认证</div>
|
<div class="user-info-unCertified-btn" @click.stop="goAuthentication">
|
立即认证
|
</div>
|
</template>
|
<template v-else>
|
<div class="user-info-certified-text">
|
{{ userDetail?.customerName ?? '123' }}
|
</div>
|
<div class="user-info-certified-btn">已认证</div>
|
</template>
|
</div>
|
</div>
|
<div class="mine-go-login" v-else>去登录</div>
|
</div>
|
</template>
|
<!-- <div class="mine-business-card">
|
<div class="mine-business-card-item">
|
<img class="mine-business-card-item-icon" :src="IconBusinessCard" alt="" />
|
<div class="mine-business-card-item-text">我的电子名片</div>
|
</div>
|
<div class="mine-business-card-btn">
|
<nut-button type="info">递名片</nut-button>
|
</div>
|
</div> -->
|
</UserHomeTopView>
|
<div class="mine-content-record">
|
<div class="mine-content-record-item" @click="goMineFavorites">
|
<img class="mine-content-record-item-icon" :src="IconCollect" alt="" />
|
<nut-badge top="0" right="0" :value="8" color="#FF7D00">
|
<div class="mine-content-record-item-text">我的收藏</div>
|
</nut-badge>
|
</div>
|
<div class="mine-content-record-item">
|
<img class="mine-content-record-item-icon" :src="IconRecord" alt="" />
|
<nut-badge top="0" right="0" :value="8" color="#FF7D00">
|
<div class="mine-content-record-item-text">联系记录</div>
|
</nut-badge>
|
</div>
|
</div>
|
<Cell :title="'更多服务'" class="mine-content-service">
|
<div class="mine-content-service-list">
|
<div class="mine-content-service--list-item">
|
<img class="mine-content-service--list-item-icon" :src="IconFinance" alt="" />
|
<div class="mine-content-service--list-item-text">财务管理</div>
|
</div>
|
<div class="mine-content-service--list-item">
|
<img class="mine-content-service--list-item-icon" :src="IconRealName" alt="" />
|
<div class="mine-content-service--list-item-text">企业实名</div>
|
</div>
|
<div class="mine-content-service--list-item" @click="goSetting">
|
<img class="mine-content-service--list-item-icon" :src="IconSetting" alt="" />
|
<div class="mine-content-service--list-item-text">设置</div>
|
</div>
|
</div>
|
</Cell>
|
<nut-button type="info" class="mine-content-logout" @click="handleLoginout"
|
>退出登录</nut-button
|
>
|
</ContentView>
|
</PageLayoutWithBg>
|
</template>
|
|
<script setup lang="ts">
|
import { PageLayoutWithBg, TransparentNavigationBar, UserHomeTopView } from '@/components';
|
import IconBusinessCard from '@/assets/mine/icon-business-card.png';
|
import IconCollect from '@/assets/mine/icon-collect.png';
|
import IconRecord from '@/assets/mine/icon-record.png';
|
import IconMale from '@/assets/mine/icon-male.png';
|
import IconFemale from '@/assets/mine/icon-female.png';
|
import IconFinance from '@/assets/mine/icon-finance.png';
|
import IconRealName from '@/assets/mine/icon-realname.png';
|
import IconSetting from '@/assets/mine/icon-setting.png';
|
import { useUser, useIsLogin, useGoLogin } from '@/hooks';
|
import Taro from '@tarojs/taro';
|
import { RouterPath, OssAssets } from '@/constants';
|
import { useSystemStore } from '@/stores/modules/system';
|
import { Message } from '@12333/utils';
|
import { useUserStore } from '@/stores/modules/user';
|
import { useQueryClient } from '@tanstack/vue-query';
|
|
const userStore = useUserStore();
|
const queryClient = useQueryClient();
|
const { userDetail, isCertified } = useUser();
|
const isLogin = useIsLogin();
|
const systemStore = useSystemStore();
|
|
const { goLoginFn } = useGoLogin();
|
const bgHeight = computed(() => 133 + systemStore.navHeight);
|
|
function goLogin() {
|
if (!isLogin.value) {
|
goLoginFn();
|
}
|
}
|
|
function goPage(routeName: string) {
|
Taro.navigateTo({
|
url: routeName,
|
});
|
}
|
|
function goSetting() {
|
goPage(RouterPath.setting);
|
}
|
|
Taro.showShareMenu({
|
showShareItems: ['shareAppMessage'],
|
});
|
|
Taro.useShareAppMessage((res) => {
|
return {
|
title: `${userDetail.value?.contacter}名片`,
|
// path: `${RouterPath.userHomePage}?userId=${userDetail.value?.userId}`,
|
imageUrl: userDetail.value?.avatarUrl,
|
};
|
});
|
|
function goAuthentication() {
|
goPage(RouterPath.authenticationHome);
|
}
|
function goMineFavorites() {
|
goPage(RouterPath.mineFavorites);
|
}
|
|
async function handleLoginout() {
|
try {
|
await Message.confirm({
|
message: '确定要退出登录吗？',
|
});
|
userStore.logoutAndToHome();
|
queryClient.removeQueries();
|
} catch (error) {}
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
@import './index.scss';
|
|
.mine-setting-badge {
|
margin-right: 20px;
|
}
|
</style>
|
