gym-manage/gym-manage-uniapp/components/memberInfo/MemberInfoHeader.vue

<template>
    <view class="profile-header">
        <!-- 顶栏：白底居中标题，左侧放通知/设置，右侧留胶囊安全区 -->
        <view class="profile-header__toolbar" :style="toolbarStyle">
            <view class="profile-header__nav">
                <view class="profile-header__nav-left">
                    <image
                        class="profile-header__icon-bell"
                        src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/bell.png"
                        mode="aspectFit"
                    />
                    <image
                        class="profile-header__icon-settings"
                        src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/settings.png"
                        mode="aspectFit"
                    />
                </view>
                <text class="profile-header__title">个人中心</text>
                <view class="profile-header__nav-right" :style="navRightStyle"></view>
            </view>
        </view>
        <view class="profile-header__toolbar-spacer" :style="toolbarSpacerStyle"></view>
        <!-- 用户信息区：深蓝渐变 -->
        <view class="profile-header__hero">
            <view class="profile-header__inner" v-if="isLogin">
                <view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
                    <view class="profile-header__user-inner">
                        <view class="profile-header__avatar-wrap">
                            <view class="profile-header__avatar-ring">
                                <image
                                    class="profile-header__avatar"
                                    :key="userInfo.avatar"
                                    :src="displayAvatar"
                                    mode="aspectFill"
                                />
                            </view>
                            <view class="profile-header__avatar-badge">
                                <image
                                    class="profile-header__avatar-badge-icon"
                                    src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/camera.png"
                                    mode="aspectFit"
                                />
                            </view>
                        </view>
                        <view class="profile-header__user-meta">
                            <view class="profile-header__user-meta-inner">
                                <text class="profile-header__name">{{ userInfo.name || "活氧舱用户" }}</text>
                                <text class="profile-header__phone">{{ userInfo.phone }}</text>
                                <view class="profile-header__badge">
                                    <image
                                        class="profile-header__badge-icon"
                                        src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown0.png"
                                        mode="aspectFit"
                                    />
                                    <text class="profile-header__level">{{ userInfo.memberLevel }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </view>
                <view class="profile-header__stats">
                    <view class="profile-header__stats-inner">
                        <view class="profile-header__stat">
                            <view class="profile-header__stat-inner">
                                <text class="profile-header__stat-value">{{ stats.checkInCount }}</text>
                                <text class="profile-header__stat-label">累计签到</text>
                            </view>
                        </view>
                        <view class="profile-header__stat-divider"></view>
                        <view class="profile-header__stat">
                            <view class="profile-header__stat-inner">
                                <text class="profile-header__stat-value">{{ stats.trainingHours }}</text>
                                <text class="profile-header__stat-label">训练时长</text>
                            </view>
                        </view>
                        <view class="profile-header__stat-divider"></view>
                        <view class="profile-header__stat">
                            <view class="profile-header__stat-inner">
                                <text class="profile-header__stat-value">{{ stats.pointsBalance }}</text>
                                <text class="profile-header__stat-label">累计积分</text>
                            </view>
                        </view>
                    </view>
                </view>
				
            </view>
			<view class="profile-header__inner" v-else>
				<view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
					<view
						class="profile-header__user-inner--guest"
						@tap="handleGuestLogin"
					>
						<view class="profile-header__avatar-wrap--guest">
							<image
								class="profile-header__avatar--guest"
								src="/static/OIP-C.png"
								mode="aspectFill"
							/>
						</view>
						<view class="profile-header__user-meta--guest">
							<text class="profile-header__name--guest">小伙伴，点我登录</text>
							<text class="profile-header__phone--guest">陪你遇见更好的自己 ~</text>
						</view>
					</view>
				</view>
			</view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'

const props = defineProps({
    userInfo: { type: Object, required: true },
    stats: { type: Object, required: true },
	isLogin: { type: Boolean }
})


const emit = defineEmits(['user-info', 'guest-login'])

const displayAvatar = computed(() => {
    return props.userInfo.avatar || '/static/OC-default-headIamge.png'
})

function handleUserTap() {
    if (props.isLogin) {
        emit('user-info')
    }
}

function handleGuestLogin() {
    emit('guest-login')
}

const toolbarStyle = ref({})
const toolbarSpacerStyle = ref({})
const navRightStyle = ref({})

function syncNavSafeArea() {
    try {
        const sys = uni.getSystemInfoSync()
        const statusBarHeight = sys.statusBarHeight || 0
        const navHeight = 44
        const menu = uni.getMenuButtonBoundingClientRect?.()

        toolbarStyle.value = {
            paddingTop: `${statusBarHeight}px`
        }

        toolbarSpacerStyle.value = {
            height: `${statusBarHeight + navHeight}px`
        }

        if (menu && menu.width) {
            const capsuleGap = sys.windowWidth - menu.left + 8
            navRightStyle.value = {
                width: `${capsuleGap}px`,
                minWidth: `${capsuleGap}px`
            }
        }
    } catch (e) {
        toolbarSpacerStyle.value = { height: '44px' }
    }
}

onMounted(() => {
    syncNavSafeArea()
})
</script>

<style lang="scss">
@import '@/common/style/memberInfo/member-info-component-reset.css';
@import '@/common/style/memberInfo/member-info-header.css';
@import '@/common/style/memberInfo/member-info-tap.css';
</style>