feat: mine

wupengfei

2025-02-13 054848933efdd0a8a836b593c98a84c621166915

feat: mine

 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

@@ -62,7 +62,7 @@
    },
    {
      root: 'subpackages/mine',
      pages: ['setting/setting'],
      pages: ['setting/setting', 'mineFavorites/mineFavorites'],
    },
    {
      root: 'subpackages/city',

 apps/bMiniApp/src/constants/router.ts

@@ -22,4 +22,5 @@
  citySelect = '/subpackages/city/citySelect/citySelect',

  setting = '/subpackages/mine/setting/setting',
  mineFavorites = '/subpackages/mine/mineFavorites/mineFavorites',
}

 apps/bMiniApp/src/pages/mine/index.vue

@@ -53,7 +53,7 @@
        </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>
@@ -147,6 +147,9 @@
function goAuthentication() {
  goPage(RouterPath.authenticationHome);
}
function goMineFavorites() {
  goPage(RouterPath.mineFavorites);
}

async function handleLoginout() {
  try {

 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';