apps/bMiniApp/project.private.config.json
@@ -10,7 +10,7 @@ "list": [ { "name": "", "pathName": "pages/mine/index", "pathName": "subpackages/mine/mineFavorites/mineFavorites", "query": "", "launchMode": "default", "scene": null apps/bMiniApp/src/app.config.ts
@@ -68,7 +68,7 @@ }, { root: 'subpackages/mine', pages: ['setting/setting'], pages: ['setting/setting', 'mineFavorites/mineFavorites'], }, { root: 'subpackages/city', apps/bMiniApp/src/assets/mine/icon-finance.pngapps/bMiniApp/src/assets/mine/icon-realname.pngapps/bMiniApp/src/assets/mine/icon-setting.pngapps/bMiniApp/src/components/Chunk/Cell.vue
@@ -1,6 +1,6 @@ <template> <div class="bole-cell-wrapper"> <div class="cell-title-wrapper"> <div class="bole-cell-wrapper" v-bind="$attrs"> <div class="cell-title-wrapper" v-if="showTitle"> <slot name="title"> <div :class="titleSize === 'normal' ? 'cell-title' : 'cell-title-large'">{{ title }}</div> <slot name="title-right"></slot> @@ -18,10 +18,12 @@ type Props = { title?: string; titleSize?: 'large' | 'normal'; showTitle?: boolean; }; const props = withDefaults(defineProps<Props>(), { titleSize: 'normal', showTitle: true, }); </script> @@ -30,9 +32,9 @@ .bole-cell-wrapper { background: #ffffff; border-radius: 8px; padding: 24px 28px; margin-bottom: 24px; border-radius: 12px; padding: 36px 34px; margin-bottom: 20px; .cell-title-wrapper { display: flex; @@ -64,9 +66,9 @@ .cell-title-large { font-weight: 600; font-size: 32px; font-size: 30px; color: boleGetCssVar('text-color', 'primary'); line-height: 44px; line-height: 42px; @include ellipsis; } } apps/bMiniApp/src/components/Chunk/CellChunk.vue
New file @@ -0,0 +1,38 @@ <template> <div class="cell-chunk-wrapper"> <div class="cell-title-wrapper"> <slot name="title"> <div :class="titleSize === 'normal' ? 'cell-title' : 'cell-title-large'">{{ title }}</div> <slot name="title-right"></slot> </slot> </div> <slot></slot> </div> </template> <script setup lang="ts"> defineOptions({ name: 'CellChunk', }); type Props = { title?: string; titleSize?: 'large' | 'normal'; }; const props = withDefaults(defineProps<Props>(), { titleSize: 'normal', }); </script> <style lang="scss"> @import '@/styles/common.scss'; .cell-chunk-wrapper { margin-bottom: 20px; &:last-child { margin-bottom: 0; } } </style> apps/bMiniApp/src/constants/router.ts
@@ -23,4 +23,5 @@ citySelect = '/subpackages/city/citySelect/citySelect', setting = '/subpackages/mine/setting/setting', mineFavorites = '/subpackages/mine/mineFavorites/mineFavorites', } apps/bMiniApp/src/pages/mine/index.scss
@@ -122,13 +122,29 @@ .mine-content-record { display: flex; justify-content: space-between; margin-top: 24px; .mine-content-record-item { background-color: #ffffff; border-radius: 8px; padding: 40px 45px; display: flex; flex: 1; min-width: 0; align-items: center; justify-content: center; & + .mine-content-record-item { margin-left: 30px; } .mine-content-record-item-text { font-weight: 400; font-size: 28px; line-height: 33px; color: boleGetCssVar('text-color', 'primary'); } .mine-content-record-item-icon { width: 72px; height: 72px; @@ -136,4 +152,42 @@ } } } .mine-content-service { margin-top: 24px; margin-bottom: 48px; .cell-title-wrapper { margin-bottom: 40px; } .mine-content-service-list { display: flex; .mine-content-service--list-item { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-right: 60px; .mine-content-service--list-item-icon { width: 72px; height: 72px; margin-bottom: 24px; } .mine-content-service--list-item-text { font-size: 24px; line-height: 36px; color: boleGetCssVar('text-color', 'regular'); } } } } .mine-content-logout { width: 100%; height: 88px; } } apps/bMiniApp/src/pages/mine/index.vue
@@ -53,38 +53,62 @@ </div> --> </UserHomeTopView> <div class="mine-content-record"> <div class="mine-content-record-item"> <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="IconCollect" alt="" /> <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> <div class="mine-content"></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> <ContentScrollView v-if="isLogin" class="mine-content-scroll-view"> </ContentScrollView> </PageLayoutWithBg> </template> <script setup lang="ts"> import { PageLayoutWithBg, TransparentNavigationBar, ContentScrollView, UserHomeTopView, } from '@/components'; 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(); @@ -105,7 +129,7 @@ } function goSetting() { // goPage(RouterPath.setting); goPage(RouterPath.setting); } Taro.showShareMenu({ @@ -123,6 +147,19 @@ 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"> apps/bMiniApp/src/subpackages/mine/mineFavorites/InnerPage.vue
New file @@ -0,0 +1,55 @@ <template> <InfiniteLoading scrollViewClassName="common-infinite-scroll-list home-list" v-bind="infiniteLoadingProps" > <template #renderItem="{ item }"> <FlexJobCard> </FlexJobCard> </template> </InfiniteLoading> </template> <script setup lang="ts"> import { FlexJobCard } from '@12333/components'; import { useUserStore } from '@/stores/modules/user'; import { useInfiniteLoading } from '@12333/hooks'; import { OrderInputType } from '@12333/constants'; import * as orderServices from '@12333/services/api/Order'; defineOptions({ name: 'InnerPage', }); const userStore = useUserStore(); const { infiniteLoadingProps } = useInfiniteLoading( ({ pageParam }) => { let params: API.FrontOrderListInput = { pageModel: { rows: 20, page: pageParam, orderInput: [{ property: 'isRecommend', order: OrderInputType.Desc }], }, }; return orderServices.getFrontOrderList(params, { showLoading: false, }); }, { queryKey: ['orderServices/getFrontOrderList'], } ); </script> <style lang="scss"> @import '@/styles/common.scss'; .mineFavorites-page-wrapper { .task-card-actions-text { font-size: 24px; line-height: 42px; color: #9fa4ac; } } </style> apps/bMiniApp/src/subpackages/mine/mineFavorites/mineFavorites.config.ts
New file @@ -0,0 +1,3 @@ export default definePageConfig({ disableScroll: true, }); apps/bMiniApp/src/subpackages/mine/mineFavorites/mineFavorites.vue
New file @@ -0,0 +1,17 @@ <template> <PageLayoutWithBg class="mineFavorites-page-wrapper" :title="'我的收藏'"> <InnerPage></InnerPage> </PageLayoutWithBg> </template> <script setup lang="ts"> import InnerPage from './InnerPage.vue'; defineOptions({ name: 'mineFavorites', }); </script> <style lang="scss"> @import '@/styles/common.scss'; </style> packages/components/src/Card/FlexJobCard.vue
New file @@ -0,0 +1,175 @@ <template> <div class="flexJob-card-wrapper"> <div class="flexJob-card-top-wrapper"> <UserAvatar :size="60" class="flexJob-card-top-avatar" /> <div class="flexJob-card-top-info"> <div class="flexJob-card-top-info-item"> <div class="flexJob-card-top-info-name">{{ '洋洋' }}</div> <div class="flexJob-card-top-info-gender"> <img v-if="1" :src="IconMale" class="flexJob-card-top-info-gender-icon" /> <img v-else :src="IconFemale" class="flexJob-card-top-info-gender-icon" /> </div> <div class="flexJob-card-top-info-auth">{{ '已实名' }}</div> </div> <div class="flexJob-card-top-info-detail">{{ '26岁 | 非学生 | 本科 | 上岗121次' }}</div> </div> </div> <div class="flexJob-card-done-list"> {{ '做过：客房服务员、客房服务员、客房客房服务员、客房做过：客房服务员、客房服务员、客房客房服务员、客房' }} </div> <div class="flexJob-card-done-detail"> <div class="flexJob-card-done-detail-item"> {{ '在「宁波雷迪森酒店」，做过客房服务员在「宁波雷迪森酒店」，做过客房服务员' }} </div> <div class="flexJob-card-done-detail-item">{{ '在「宁波雷迪森酒店」，做过客房服务员' }}</div> </div> <div class="flexJob-card-footer"> <div class="flexJob-card-footer-left" v-if="showFooterLeft"> <slot name="footerLeft"> <div class="flexJob-card-footer-text">取消收藏</div> </slot> </div> <div class="flexJob-card-footer-right" v-if="showFooterRight"> <slot name="footerRight"> <nut-button type="primary">立即联系</nut-button> </slot> </div> </div> </div> </template> <script setup lang="ts"> import IconMale from '@/assets/mine/icon-male.png'; import IconFemale from '@/assets/mine/icon-female.png'; import { CommonTaskCardProps } from './card'; defineOptions({ name: 'FlexJobCard', }); type Props = CommonTaskCardProps & { showFooterLeft?: boolean; showFooterRight?: boolean; }; const props = withDefaults(defineProps<Props>(), { showFooterLeft: true, showFooterRight: true, }); </script> <style lang="scss"> @import '@/styles/common.scss'; .flexJob-card-wrapper { padding: 32px 24px 20px; margin-bottom: 24px; background-color: #fff; border-radius: 12px; &:last-child { margin-bottom: 0; } .flexJob-card-top-wrapper { display: flex; align-items: center; margin-bottom: 38px; .flexJob-card-top-avatar { margin-right: 30px; } .flexJob-card-top-info { display: flex; flex-direction: column; .flexJob-card-top-info-item { display: flex; align-items: center; .flexJob-card-top-info-name { font-size: 34px; line-height: 34px; font-weight: bold; color: boleGetCssVar('text-color', 'primary'); } .flexJob-card-top-info-gender { display: inline-flex; align-items: center; height: 34px; margin: 0 10px; .flexJob-card-top-info-gender-icon { width: 24px; height: 24px; } } .flexJob-card-top-info-auth { font-size: 28px; line-height: 34px; } } .flexJob-card-top-info-detail { font-size: 24px; font-weight: 400; line-height: 28px; margin-top: 12px; color: boleGetCssVar('text-color', 'secondary'); } } } .flexJob-card-done-list { font-size: 24px; line-height: 36px; color: boleGetCssVar('text-color', 'primary'); margin-bottom: 12px; @include ellipsis; } .flexJob-card-done-detail { display: flex; flex-direction: column; .flexJob-card-done-detail-item { font-size: 22px; line-height: 36px; color: boleGetCssVar('text-color', 'secondary'); @include ellipsis; margin-bottom: 12px; &:last-child { margin-bottom: 0; } } } .flexJob-card-footer { display: flex; align-items: center; justify-content: space-between; border-top: #d9d9d9 1px solid; padding-top: 24px; margin-top: 18px; .flexJob-card-footer-left { .flexJob-card-footer-text { font-size: 24px; line-height: 36px; color: boleGetCssVar('color', 'primary'); } } .flexJob-card-footer-right { --nut-button-default-font-size: 24px; --nut-button-default-height: 52px; } } } </style> packages/components/src/index.ts
@@ -21,6 +21,7 @@ export { default as TaskCard } from './Card/TaskCard.vue'; export { default as MineAgreementSignCard } from './Card/MineAgreementSignCard.vue'; export { default as MyTaskCard } from './Card/MyTaskCard.vue'; export { default as FlexJobCard } from './Card/FlexJobCard.vue'; export { default as TaskPrice } from './Card/TaskPrice.vue'; export { default as QueryMenuView } from './Menu/QueryMenuView.vue'; export { default as QueryMenuItem } from './Menu/QueryMenuItem.vue';
