| | |
| | | <template> |
| | | <PageLayoutWithBg class="mine-page-wrapper" :need-auth="false"> |
| | | <PageLayoutWithBg class="mine-page-wrapper" title="我的" :need-auth="false"> |
| | | <template #navigationBar> |
| | | <TransparentNavigationBar |
| | | title="个人中心" |
| | |
| | | <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?.userName ?? '' }}</div> |
| | | <div class="user-info-auth"> |
| | | <div class="user-info-item">{{ detail?.name ?? '' }}</div> |
| | | <!-- <div class="user-info-auth"> |
| | | <div class="user-info-auth-item"> |
| | | <div class="user-info-unCertified" v-if="isCertified"> |
| | | <div class="user-info-unCertified-text">未实名</div> |
| | | <div class="user-info-unCertified-btn">立即实名</div> |
| | | <div class="user-info-unCertified-btn" @click.stop="goAuthentication"> |
| | | 立即实名 |
| | | </div> |
| | | </div> |
| | | <div class="user-info-unCertified" v-else @click.stop="goAuthentication"> |
| | | <div class="user-info-unCertified" v-else> |
| | | <img :src="IconAuth" class="user-info-unCertified-icon" /> |
| | | <div class="user-info-unCertified-text">已实名</div> |
| | | </div> |
| | |
| | | <div class="user-info-auth-item"> |
| | | <div class="user-info-unCertified" v-if="!isCertified"> |
| | | <div class="user-info-unCertified-text">未认证</div> |
| | | <div class="user-info-unCertified-btn">立即认证</div> |
| | | <div class="user-info-unCertified-btn" @click.stop="goAuthentication"> |
| | | 立即认证 |
| | | </div> |
| | | </div> |
| | | <div class="user-info-unCertified" v-else @click.stop="goAuthentication"> |
| | | <div class="user-info-unCertified" v-else> |
| | | <img :src="IconAuth" class="user-info-unCertified-icon" /> |
| | | <div class="user-info-unCertified-text">已认证</div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> --> |
| | | </div> |
| | | <div class="mine-go-login" v-else>去登录</div> |
| | | </div> |
| | |
| | | </UserHomeTopView> |
| | | </ContentView> |
| | | <ContentScrollView v-if="isLogin" class="mine-content-scroll-view"> |
| | | <List class="mine-list-wrapper mine-balance"> |
| | | <!-- <List class="mine-list-wrapper mine-balance"> |
| | | <div class="mine-balance-title">我的余额</div> |
| | | <div class="mine-balance-money">¥{{ toThousand(100) }}</div> |
| | | <div class="mine-balance-btn"> |
| | | <div class="mine-balance-btn" @click="goMineWallet"> |
| | | 进入我的钱包 |
| | | <img :src="IconArrow" class="mine-balance-btn-icon" /> |
| | | </div> |
| | | </List> |
| | | </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" :value="8"> |
| | | <nut-badge |
| | | class="mine-order-list-item" |
| | | top="8" |
| | | :value="detail?.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" :value="8"> |
| | | <nut-badge |
| | | class="mine-order-list-item" |
| | | top="8" |
| | | :value="detail?.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" :value="8"> |
| | | <nut-badge |
| | | class="mine-order-list-item" |
| | | top="8" |
| | | :value="detail?.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="IconSetting" title="我收藏的任务" @click="goSetting"></ListItem> |
| | | <ListItem :icon="IconSetting" title="协议签约" @click="goSetting"></ListItem> |
| | | <ListItem :icon="IconCollect" title="我收藏的任务" @click="goMineCollectTask"></ListItem> |
| | | <!-- <ListItem :icon="IconAgreement" title="协议签约" @click="goMineAgreementSign"></ListItem> --> |
| | | <ListItem :icon="IconSetting" title="设置" @click="goSetting"></ListItem> |
| | | <ListItem :icon="IconSetting" title="我要招人/用人" @click="goSetting"></ListItem> |
| | | <!-- <ListItem :icon="IconRecruit" title="我要招人/用人" @click="goSetting"></ListItem> --> |
| | | </List> |
| | | </ContentScrollView> |
| | | </PageLayoutWithBg> |
| | |
| | | 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 { useSystemStore } from '@/stores/modules/system'; |
| | | import PageLayoutWithBg from '@/components/Layout/PageLayoutWithBg.vue'; |
| | | import { toThousand } from '@12333/utils'; |
| | | import { useQuery } from '@tanstack/vue-query'; |
| | | import * as authServices from '@12333/services/apiV2/auth'; |
| | | |
| | | const { userDetail, isCertified } = useUser(); |
| | | const isLogin = useIsLogin(); |
| | |
| | | |
| | | const { goLoginFn } = useGoLogin(); |
| | | const bgHeight = computed(() => 133 + systemStore.navHeight); |
| | | |
| | | const { |
| | | isLoading, |
| | | isError, |
| | | data: detail, |
| | | refetch, |
| | | } = useQuery({ |
| | | queryKey: ['authServices/getPersonalLoginInfo'], |
| | | queryFn: async () => { |
| | | return await authServices.getPersonalLoginInfo( |
| | | {}, |
| | | { |
| | | showLoading: false, |
| | | } |
| | | ); |
| | | }, |
| | | placeholderData: () => ({} as API.GetPersonalLoginInfoQueryResult), |
| | | }); |
| | | |
| | | 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> |