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

<template>
    <view class="profile-header">
        <!-- 登录状态 -->
        <view class="profile-card" v-if="isLogin" hover-class="mi-tap--hover" :hover-stay-time="150" @tap="handleUserTap">
            <view class="profile-card__main">
                <view class="profile-avatar">
                    <image
                        class="profile-avatar__img"
                        :key="userInfo.avatar"
                        :src="displayAvatar"
                        mode="aspectFill"
                    />
                </view>
                <view class="profile-info">
                    <view class="profile-info__row">
                        <text class="profile-info__name">{{ userInfo.name || "活氧舱用户" }}</text>
                        <view class="profile-info__badge">
                            <image class="profile-info__badge-icon" src="https://gymfuture.oss-cn-chengdu.aliyuncs.com/static/images/crown0.png" mode="aspectFit" />
                            <text class="profile-info__level">{{ userInfo.memberLevel }}</text>
                        </view>
                    </view>
                    <text class="profile-info__phone">{{ userInfo.phone }}</text>
                </view>
            </view>
            <view class="profile-card__stats">
                <view class="profile-stat">
                    <text class="profile-stat__value">{{ stats.checkInCount ?? 0 }}</text>
                    <text class="profile-stat__label">累计签到</text>
                </view>
                <view class="profile-stat">
                    <text class="profile-stat__value">{{ stats.courseCount ?? 0 }}</text>
                    <text class="profile-stat__label">报课次数</text>
                </view>
            </view>
        </view>

        <!-- 未登录状态 -->
        <view class="profile-card profile-card--guest" v-else @tap="handleGuestLogin">
            <view class="profile-card__main">
                <view class="profile-avatar">
                    <image class="profile-avatar__img" src="/static/OIP-C.png" mode="aspectFill" />
                </view>
                <view class="profile-info">
                    <text class="profile-info__name">小伙伴，点我登录</text>
                    <text class="profile-info__phone">陪你遇见更好的自己 ~</text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { computed } 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')
}
</script>

<style lang="scss" scoped>
.profile-header {
    padding: 24rpx 24rpx 0;
}

.profile-card {
    background: #FFFFFF;
    border-radius: 20rpx;
    padding: 28rpx 28rpx 24rpx;
    box-shadow: 0 4rpx 20rpx rgba(45, 74, 90, 0.06);
    display: flex;
    flex-direction: column;
    gap: 24rpx;

    &--guest {
        cursor: pointer;
    }
}

.profile-card__main {
    display: flex;
    align-items: center;
    gap: 20rpx;
}

.profile-avatar {
    width: 88rpx;
    height: 88rpx;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    border: 3rpx solid #E8F4F8;
}

.profile-avatar__img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.profile-info {
    flex: 1;
    min-width: 0;
}

.profile-info__row {
    display: flex;
    align-items: center;
    gap: 12rpx;
    margin-bottom: 6rpx;
}

.profile-info__name {
    font-size: 32rpx;
    font-weight: 700;
    color: #1A202C;
    line-height: 1.2;
}

.profile-info__badge {
    display: flex;
    align-items: center;
    gap: 4rpx;
    background: linear-gradient(135deg, #FFF7ED, #FFF1E6);
    border-radius: 20rpx;
    padding: 4rpx 14rpx;
}

.profile-info__badge-icon {
    width: 24rpx;
    height: 24rpx;
}

.profile-info__level {
    font-size: 20rpx;
    font-weight: 600;
    color: #ED8936;
}

.profile-info__phone {
    font-size: 24rpx;
    color: #A0AEC0;
}

.profile-card__stats {
    display: flex;
    justify-content: space-around;
    padding-top: 20rpx;
    border-top: 1rpx solid #F0F4F8;
}

.profile-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rpx;
}

.profile-stat__value {
    font-size: 36rpx;
    font-weight: 700;
    color: #2D4A5A;
}

.profile-stat__label {
    font-size: 22rpx;
    color: #A0AEC0;
}
</style>