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">
                <view class="profile-header__user" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="$emit('user-info')">
                    <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>
    </view>
</template>

<script>
export default {
    options: {
        virtualHost: false,
        styleIsolation: 'apply-shared'
    },
    props: {
        userInfo: { type: Object, required: true },
        stats: { type: Object, required: true }
    },
    emits: ['user-info'],
    computed: {
        displayAvatar() {
            return this.userInfo.avatar || 'https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/AvatarEditWrap.png'
        }
    },
    data() {
        return {
            toolbarStyle: {},
            toolbarSpacerStyle: {},
            navRightStyle: {}
        }
    },
    mounted() {
        this.syncNavSafeArea()
    },
    methods: {
        syncNavSafeArea() {
            try {
                const sys = uni.getSystemInfoSync()
                const statusBarHeight = sys.statusBarHeight || 0
                const navHeight = 44
                const menu = uni.getMenuButtonBoundingClientRect?.()

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

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

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

<style>
@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>