|  |  |  | 
|---|
|  |  |  | <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', | 
|---|
|  |  |  | }); | 
|---|
|  |  |  | 
|---|
|  |  |  | 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> | 
|---|