feat: mine

wupengfei

2025-02-13 d864edfd4d033ad01d053cf7ac585fa1efd07fe5

 apps/bMiniApp/src/components/UserHome/UserHomeTopView.vue

@@ -1,33 +1,11 @@
<template>
  <div class="mine-page-top-view">
    <slot name="avatar"></slot>
    <div class="setting-wrapper" v-if="showUserHomePageBtn" @click="goUserHomePage">
      <div class="setting-text">我的主页</div>
    </div>
  </div>
  <div class="mine-page-operation-wrapper" v-if="showOperation">
    <div class="mine-page-operation-item" @click="goEditProfile">
      <img class="mine-page-operation-item-icon" :src="IconEdit" />
      <div class="mine-page-operation-item-text">编辑资料</div>
      <img class="mine-page-operation-item-arrow" :src="IconArrow" />
    </div>
    <button class="mine-page-operation-item share" open-type="share">
      <!-- <div class="mine-page-operation-item-inner"> -->
      <img class="mine-page-operation-item-icon" :src="IconCard" />
      <div class="mine-page-operation-item-text">发送名片</div>
      <img class="mine-page-operation-item-arrow" :src="IconArrow" />
      <!-- </div> -->
    </button>
    <slot></slot>
  </div>
</template>

<script setup lang="ts">
import { useUser, useIsLogin } from '@/hooks';
import Taro from '@tarojs/taro';
import IconEdit from '@/assets/mine/icon-edit.png';
import IconCard from '@/assets/mine/icon-card.png';
import IconArrow from '@/assets/mine/icon-arrow.png';

defineOptions({
  name: 'UserHomeTopView',
});
@@ -41,109 +19,17 @@
  showUserHomePageBtn: false,
  showOperation: false,
});

const { userDetail } = useUser();

function goUserHomePage() {
  Taro.navigateTo({
    url: `${RouterPath.userHomePage}?userId=${userDetail.value?.userId}`,
  });
}

function goEditProfile() {
  Taro.navigateTo({
    url: RouterPath.userInfo,
  });
}
</script>

<style lang="scss">
@import '@/styles/common.scss';

.mine-page-top-view {
  padding-top: 34px;
  display: flex;
  margin-bottom: 20px;

  .setting-wrapper {
    height: 56px;
    background: rgba(#000, $alpha: 0.15);
    border-radius: 200px 0px 0px 200px;
    align-self: center;
    display: flex;
    align-items: center;
    margin-right: calc(boleGetCssVar('size', 'body-padding-h') * -1);
    padding-left: 24px;
    padding-right: 16px;

    .setting-icon {
      width: 32px;
      height: 32px;
      margin-right: 4px;
      margin-left: 32px;
    }

    .setting-text {
      font-weight: 400;
      font-size: 24px;
      color: #ffffff;
      line-height: 34px;
    }
  }
}

.mine-page-operation-wrapper {
  display: flex;
  padding-top: 22px;
  margin-bottom: 36px;

  .mine-page-operation-item {
    flex: 1;
    min-width: 0;
    align-items: center;
    display: flex;
    padding-left: 28px;
    border-right: 1px solid #efefef;

    &:last-child {
      border-right: none;
    }

    &.share {
      background-color: transparent;
      padding-right: 0;
      appearance: none;
      text-align: left;

      &::after {
        border: none;
      }
      /* .mine-page-operation-item-inner {
        display: flex;
        align-items: center;
      } */
    }

    .mine-page-operation-item-icon {
      width: 32px;
      height: 32px;
      margin-right: 8px;
    }

    .mine-page-operation-item-text {
      flex: 1;
      min-width: 0;
      font-weight: bold;
      font-size: 24px;
      color: boleGetCssVar('text-color', 'primary');
      line-height: 34px;
    }

    .mine-page-operation-item-arrow {
      width: 28px;
      height: 28px;
      margin-right: 28px;
    }
  }
  flex-direction: column;
  background-color: #ffffff;
  border-radius: 12px;
  padding: 30px 20px 0;
  margin-top: 30px;
}
</style>