feat: mine

wupengfei

2025-02-13 a9dd43e3494be328e8dd87e4e29e06df9817c15a

feat: mine

 apps/bMiniApp/src/assets/mine/icon-finance.png

 apps/bMiniApp/src/assets/mine/icon-realname.png

 apps/bMiniApp/src/assets/mine/icon-setting.png

 apps/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/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

@@ -55,36 +55,60 @@
      <div class="mine-content-record">
        <div class="mine-content-record-item">
          <img class="mine-content-record-item-icon" :src="IconCollect" alt="" />
          <div class="mine-content-record-item-text">我的收藏</div>
          <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="" />
          <div class="mine-content-record-item-text">联系记录</div>
          <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,16 @@
function goAuthentication() {
  goPage(RouterPath.authenticationHome);
}

async function handleLoginout() {
  try {
    await Message.confirm({
      message: '确定要退出登录吗？',
    });
    userStore.logoutAndToHome();
    queryClient.removeQueries();
  } catch (error) {}
}
</script>

<style lang="scss">