|  |  |  | 
|---|
|  |  |  | <template> | 
|---|
|  |  |  | <PageLayout class="mine-page-wrapper" :need-auth="false"> | 
|---|
|  |  |  | <PageLayoutWithBg class="mine-page-wrapper" title="我的" :need-auth="false"> | 
|---|
|  |  |  | <template #navigationBar> | 
|---|
|  |  |  | <TransparentNavigationBar | 
|---|
|  |  |  | title="个人中心" | 
|---|
|  |  |  | 
|---|
|  |  |  | <UserHomeTopView :showUserHomePageBtn="isLogin" :showOperation="isLogin"> | 
|---|
|  |  |  | <template #avatar> | 
|---|
|  |  |  | <div class="mine-avatar-wrapper" @click="goLogin"> | 
|---|
|  |  |  | <UserAvatar :size="60" class="mine-avatar" /> | 
|---|
|  |  |  | <UserAvatar :size="52" class="mine-avatar" /> | 
|---|
|  |  |  | <div class="user-info" v-if="isLogin"> | 
|---|
|  |  |  | <div class="user-info-item">{{ userDetail?.userName ?? '' }}</div> | 
|---|
|  |  |  | <div class="user-info-item2" v-if="isCertified"> | 
|---|
|  |  |  | {{ userDetail?.customerName ?? '' }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="user-info-unCertified" v-else @click.stop="goAuthentication"> | 
|---|
|  |  |  | <img :src="IconUnCertified" class="user-info-unCertified-icon" /> | 
|---|
|  |  |  | <div class="user-info-unCertified-text">未认证</div> | 
|---|
|  |  |  | <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> | 
|---|
|  |  |  | 
|---|
|  |  |  | </UserHomeTopView> | 
|---|
|  |  |  | </ContentView> | 
|---|
|  |  |  | <ContentScrollView v-if="isLogin" class="mine-content-scroll-view"> | 
|---|
|  |  |  | <div class="mine-id-menu-wrapper"> | 
|---|
|  |  |  | <img :src="IconLamp" class="mine-id-menu-icon" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <List class="mine-setting-list"> | 
|---|
|  |  |  | <List class="mine-list-wrapper mine-balance"> | 
|---|
|  |  |  | <div class="mine-balance-title">我的余额</div> | 
|---|
|  |  |  | <div class="mine-balance-money">¥{{ toThousand(userDetail?.balance ?? 0) }}</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> | 
|---|
|  |  |  | </PageLayout> | 
|---|
|  |  |  | </PageLayoutWithBg> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | <script setup lang="ts"> | 
|---|
|  |  |  | import { | 
|---|
|  |  |  | PageLayout, | 
|---|
|  |  |  | TransparentNavigationBar, | 
|---|
|  |  |  | ContentScrollView, | 
|---|
|  |  |  | UserHomeTopView, | 
|---|
|  |  |  | } from '@/components'; | 
|---|
|  |  |  | import IconUnCertified from '@/assets/mine/icon-unCertified.png'; | 
|---|
|  |  |  | import IconLamp from '@/assets/mine/icon-lamp.png'; | 
|---|
|  |  |  | import IconMenuBusiness from '@/assets/mine/icon-menu-business.png'; | 
|---|
|  |  |  | import IconMenuContact from '@/assets/mine/icon-menu-contact.png'; | 
|---|
|  |  |  | import { TransparentNavigationBar, ContentScrollView, UserHomeTopView } from '@/components'; | 
|---|
|  |  |  | import IconArrow from '@/assets/setting/icon-arrow.png'; | 
|---|
|  |  |  | import IconSetting from '@/assets/mine/icon-setting.png'; | 
|---|
|  |  |  | import IconMessage from '@/assets/mine/icon-message.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'; | 
|---|
|  |  |  | import { useIntervalFn } from 'senin-mini/hooks'; | 
|---|
|  |  |  | import { useQuery } from '@tanstack/vue-query'; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { userDetail, isCertified } = useUser(); | 
|---|
|  |  |  | const { userDetail, isCertified, updateUserInfo } = useUser(); | 
|---|
|  |  |  | const isLogin = useIsLogin(); | 
|---|
|  |  |  | const systemStore = useSystemStore(); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | const { goLoginFn } = useGoLogin(); | 
|---|
|  |  |  | const bgHeight = computed(() => 133 + systemStore.navHeight); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | useQuery({ | 
|---|
|  |  |  | queryKey: ['updateUserInfo'], | 
|---|
|  |  |  | queryFn: () => {}, | 
|---|
|  |  |  | enabled: computed( | 
|---|
|  |  |  | () => isLogin.value && userDetail.value?.realStatus === EnumPersonalUserRealStatus.Checking | 
|---|
|  |  |  | ), | 
|---|
|  |  |  | refetchInterval: 5000, | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | Taro.useDidShow(() => { | 
|---|
|  |  |  | if (isLogin.value) { | 
|---|
|  |  |  | updateUserInfo(); | 
|---|
|  |  |  | } | 
|---|
|  |  |  | }); | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function goLogin() { | 
|---|
|  |  |  | if (!isLogin.value) { | 
|---|
|  |  |  | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | function goSetting() { | 
|---|
|  |  |  | // goPage(RouterPath.setting); | 
|---|
|  |  |  | goPage(RouterPath.setting); | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | Taro.showShareMenu({ | 
|---|
|  |  |  | 
|---|
|  |  |  |  | 
|---|
|  |  |  | Taro.useShareAppMessage((res) => { | 
|---|
|  |  |  | return { | 
|---|
|  |  |  | title: `${userDetail.value?.contacter}名片`, | 
|---|
|  |  |  | // title: `${userDetail.value?.contacter}名片`, | 
|---|
|  |  |  | // path: `${RouterPath.userHomePage}?userId=${userDetail.value?.userId}`, | 
|---|
|  |  |  | imageUrl: userDetail.value?.avatarUrl, | 
|---|
|  |  |  | // 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> | 
|---|
|  |  |  |  | 
|---|
|  |  |  | 
|---|
|  |  |  | .mine-setting-badge { | 
|---|
|  |  |  | margin-right: 20px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .mine-setting-list { | 
|---|
|  |  |  | .pro-list-item-icon { | 
|---|
|  |  |  | width: 48px; | 
|---|
|  |  |  | height: 48px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | </style> | 
|---|