<template>
|
<PageLayoutWithBg class="mine-page-wrapper" title="我的" :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 :showUserHomePageBtn="isLogin" :showOperation="isLogin">
|
<template #avatar>
|
<div class="mine-avatar-wrapper" @click="goLogin">
|
<UserAvatar :size="52" class="mine-avatar" />
|
<div class="user-info" v-if="isLogin">
|
<div class="user-info-item">{{ userDetail?.name ?? '' }}</div>
|
<div class="user-info-auth">
|
<div class="user-info-auth-item">
|
<div class="user-info-unCertified">
|
<div
|
class="user-info-unCertified-text"
|
v-if="userDetail.realStatus === EnumPersonalUserRealStatus.UnReal"
|
>
|
未认证
|
</div>
|
<div class="user-info-unCertified-text" v-else>
|
{{ EnumUserRealMethodText[userDetail?.realMethod]
|
}}{{ EnumPersonalUserRealStatusText[userDetail.realStatus] }}
|
</div>
|
<div
|
class="user-info-unCertified-btn"
|
@click.stop="goAuthentication"
|
v-if="
|
userDetail.realStatus === EnumPersonalUserRealStatus.UnReal ||
|
userDetail.realStatus === EnumPersonalUserRealStatus.Fail
|
"
|
>
|
立即认证
|
</div>
|
</div>
|
<!-- <div class="user-info-unCertified" v-else>
|
<img :src="IconAuth" class="user-info-unCertified-icon" />
|
<div class="user-info-unCertified-text">
|
{{ EnumUserRealMethodText[userDetail?.realMethod] }}{{ EnumPersonalUserRealStatusText[userDetail.realStatus] }}
|
</div>
|
</div> -->
|
</div>
|
</div>
|
</div>
|
<div class="mine-go-login" v-else>去登录</div>
|
</div>
|
</template>
|
</UserHomeTopView>
|
</ContentView>
|
<ContentScrollView v-if="isLogin" class="mine-content-scroll-view">
|
<List class="mine-list-wrapper mine-balance">
|
<div class="mine-balance-title">我的余额</div>
|
<div class="mine-balance-money">￥{{ toThousand(userDetail?.balance) }}</div>
|
<div class="mine-balance-btn" @click="goMineWallet">
|
进入我的钱包
|
<img :src="IconArrow" class="mine-balance-btn-icon" />
|
</div>
|
</List>
|
<List class="mine-list-wrapper mine-order-list">
|
<div class="mine-order-list-title">
|
<div class="mine-order-list-title-text">我的订单</div>
|
<img :src="IconArrow" class="mine-order-list-title-icon" />
|
</div>
|
<div class="mine-order-list-content">
|
<nut-badge
|
class="mine-order-list-item"
|
top="8"
|
:value="userDetail?.taskCount ?? 0"
|
@click="goMineSign"
|
>
|
<img :src="IconOrderSign" class="mine-order-list-icon" />
|
<div class="mine-order-list-text">我的报名</div>
|
</nut-badge>
|
<nut-badge
|
class="mine-order-list-item"
|
top="8"
|
:value="userDetail?.hirePassTaskCount ?? 0"
|
@click="goMineHire"
|
>
|
<img :src="IconOrderHire" class="mine-order-list-icon" />
|
<div class="mine-order-list-text">已安排</div>
|
</nut-badge>
|
<nut-badge
|
class="mine-order-list-item"
|
top="8"
|
:value="userDetail?.hireRefuseTaskCount ?? 0"
|
@click="goMineCancel"
|
>
|
<img :src="IconOrderCancel" class="mine-order-list-icon" />
|
<div class="mine-order-list-text">已取消</div>
|
</nut-badge>
|
</div>
|
</List>
|
<List class="mine-list-wrapper mine-setting-list">
|
<ListItem :icon="IconCollect" title="我收藏的任务" @click="goMineCollectTask"></ListItem>
|
<ListItem :icon="IconAgreement" title="协议签约" @click="goMineAgreementSign"></ListItem>
|
<ListItem :icon="IconSetting" title="设置" @click="goSetting"></ListItem>
|
<!-- <ListItem :icon="IconRecruit" title="我要招人/用人" @click="goSetting"></ListItem> -->
|
</List>
|
</ContentScrollView>
|
</PageLayoutWithBg>
|
</template>
|
|
<script setup lang="ts">
|
import { TransparentNavigationBar, ContentScrollView, UserHomeTopView } from '@/components';
|
import IconArrow from '@/assets/setting/icon-arrow.png';
|
import IconSetting from '@/assets/mine/icon-setting.png';
|
import IconCollect from '@/assets/mine/icon-collect.png';
|
import IconAgreement from '@/assets/mine/icon-agreement.png';
|
import IconRecruit from '@/assets/mine/icon-recruit.png';
|
import IconOrderSign from '@/assets/mine/icon-order-sign.png';
|
import IconOrderHire from '@/assets/mine/icon-order-hire.png';
|
import IconOrderCancel from '@/assets/mine/icon-order-cancel.png';
|
import IconAuth from '@/assets/mine/icon-auth.png';
|
import { useUser, useIsLogin, useGoLogin } from '@/hooks';
|
import Taro from '@tarojs/taro';
|
import { RouterPath, OssAssets } from '@/constants';
|
import {
|
EnumUserRealMethodText,
|
EnumPersonalUserRealStatusText,
|
EnumPersonalUserRealStatus,
|
} from '@12333/constants';
|
import { List, ListItem } from '@12333/components';
|
import { useSystemStore } from '@/stores/modules/system';
|
import PageLayoutWithBg from '@/components/Layout/PageLayoutWithBg.vue';
|
import { toThousand } from '@12333/utils';
|
|
const { userDetail, isCertified, updateUserInfo } = useUser();
|
const isLogin = useIsLogin();
|
const systemStore = useSystemStore();
|
|
const { goLoginFn } = useGoLogin();
|
const bgHeight = computed(() => 133 + systemStore.navHeight);
|
|
Taro.useDidShow(({ scene }) => {
|
if (isLogin.value) {
|
setTimeout(() => {
|
updateUserInfo();
|
}, 300);
|
}
|
});
|
|
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 goMineSign() {
|
goPage(RouterPath.mineSign);
|
}
|
function goMineHire() {
|
goPage(RouterPath.mineHire);
|
}
|
function goMineCancel() {
|
goPage(RouterPath.mineCancel);
|
}
|
function goMineCollectTask() {
|
goPage(RouterPath.mineCollectTask);
|
}
|
function goMineAgreementSign() {
|
goPage(RouterPath.mineAgreementSign);
|
}
|
|
function goMineWallet() {
|
goPage(RouterPath.mineWallet);
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
@import './index.scss';
|
|
.mine-setting-badge {
|
margin-right: 20px;
|
}
|
|
.mine-setting-list {
|
.pro-list-item-icon {
|
width: 48px;
|
height: 48px;
|
}
|
}
|
</style>
|
