From b61e0dd54ca5adf96bea4fd1f92d498fe5245ff4 Mon Sep 17 00:00:00 2001 From: wupengfei <834520024@qq.com> Date: 星期五, 14 二月 2025 09:13:27 +0800 Subject: [PATCH] feat: mine --- apps/bMiniApp/src/pages/mine/index.vue | 123 +++++++++++++++++++++++++++++++---------- 1 files changed, 93 insertions(+), 30 deletions(-) diff --git a/apps/bMiniApp/src/pages/mine/index.vue b/apps/bMiniApp/src/pages/mine/index.vue index 0232674..70e0c29 100644 --- a/apps/bMiniApp/src/pages/mine/index.vue +++ b/apps/bMiniApp/src/pages/mine/index.vue @@ -1,5 +1,5 @@ <template> - <PageLayout class="mine-page-wrapper" :need-auth="false"> + <PageLayoutWithBg class="mine-page-wrapper" :need-auth="false"> <template #navigationBar> <TransparentNavigationBar title="涓汉涓績" @@ -11,55 +11,102 @@ <img :src="OssAssets.mine.Bg" class="mine-page-bg" :style="{ height: `${bgHeight}px` }" /> </template> <ContentView> - <UserHomeTopView :showUserHomePageBtn="false" :showOperation="isLogin"> + <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">{{ userDetail?.userName ?? '' }}</div> - <div class="user-info-item2" v-if="isCertified"> - {{ userDetail?.customerName ?? '' }} + <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-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"> + <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> + <template v-if="isLogin"> + <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" @click="goMineContactRecord"> + <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"> + <TaskDetailWelfareItem :icon="IconFinance" text="璐㈠姟绠$悊"></TaskDetailWelfareItem> + <TaskDetailWelfareItem :icon="IconRealName" text="浼佷笟瀹炲悕"></TaskDetailWelfareItem> + <TaskDetailWelfareItem + :icon="IconSetting" + text="璁剧疆" + @click="goSetting" + ></TaskDetailWelfareItem> + </div> + </Cell> + <nut-button type="info" class="mine-content-logout" @click="handleLoginout" + >閫�鍑虹櫥褰�</nut-button + > + </template> </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"> - <ListItem :icon="IconSetting" 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 { 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 IconMessage from '@/assets/mine/icon-message.png'; import { useUser, useIsLogin, useGoLogin } from '@/hooks'; import Taro from '@tarojs/taro'; import { RouterPath, OssAssets } from '@/constants'; -import { List, ListItem } from '@12333/components'; import { useSystemStore } from '@/stores/modules/system'; +import { Message } from '@12333/utils'; +import { useUserStore } from '@/stores/modules/user'; +import { useQueryClient } from '@tanstack/vue-query'; +import { TaskDetailWelfareItem } from '@12333/components'; +const userStore = useUserStore(); +const queryClient = useQueryClient(); const { userDetail, isCertified } = useUser(); const isLogin = useIsLogin(); const systemStore = useSystemStore(); @@ -80,7 +127,7 @@ } function goSetting() { - // goPage(RouterPath.setting); + goPage(RouterPath.setting); } Taro.showShareMenu({ @@ -98,6 +145,22 @@ function goAuthentication() { goPage(RouterPath.authenticationHome); } +function goMineFavorites() { + goPage(RouterPath.mineFavorites); +} +function goMineContactRecord() { + goPage(RouterPath.mineContactRecord); +} + +async function handleLoginout() { + try { + await Message.confirm({ + message: '纭畾瑕侀��鍑虹櫥褰曞悧锛�', + }); + userStore.logoutAndToHome(); + queryClient.removeQueries(); + } catch (error) {} +} </script> <style lang="scss"> -- Gitblit v1.9.1