会员个人中心页面初步完成

2026-06-04 14:18:53 +08:00
parent c19e0e0181
commit f30514c700
170 changed files with 18092 additions and 35 deletions
@@ -0,0 +1,151 @@
+<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="/static/images/bell.png"
+                        mode="aspectFit"
+                    />
+                    <image
+                        class="profile-header__icon-settings"
+                        src="/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="/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="/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 || '/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>