123 lines
5.3 KiB
Vue
123 lines
5.3 KiB
Vue
<template>
|
||
<view class="profile-header">
|
||
<!-- 用户信息区：深蓝渐变 -->
|
||
<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 { 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">
|
||
@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>
|