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

2026-06-04 14:18:53 +08:00
parent 8e7c8f52f6
commit 7350293d0e
170 changed files with 18092 additions and 35 deletions
@@ -0,0 +1,106 @@
+<template>
+    <view class="sub-nav">
+        <view class="sub-nav__toolbar" :style="toolbarStyle">
+            <view class="sub-nav__nav">
+                <view class="sub-nav__back" @tap.stop="$emit('back')">
+                    <image
+                        class="sub-nav__back-icon"
+                        src="/static/images/chevronleft.png"
+                        mode="aspectFit"
+                    />
+                </view>
+                <text class="sub-nav__title">{{ title }}</text>
+                <view class="sub-nav__right">
+                    <view
+                        v-if="rightText"
+                        class="sub-nav__action"
+                        :class="{ 'sub-nav__action--button': actionButton }"
+                        @tap.stop="$emit('right-action')"
+                    >
+                        <text class="sub-nav__action-text">{{ rightText }}</text>
+                    </view>
+                    <view class="sub-nav__capsule" :class="{ 'sub-nav__capsule--h5': isH5 }" :style="capsuleStyle"></view>
+                </view>
+            </view>
+        </view>
+        <view class="sub-nav__spacer" :style="toolbarSpacerStyle"></view>
+    </view>
+</template>
+
+<script>
+export default {
+    options: {
+        virtualHost: false,
+        styleIsolation: 'apply-shared'
+    },
+    props: {
+        title: { type: String, required: true },
+        rightText: { type: String, default: '' },
+        actionButton: { type: Boolean, default: false }
+    },
+    emits: ['back', 'right-action'],
+    data() {
+        return {
+            toolbarStyle: {},
+            toolbarSpacerStyle: {},
+            capsuleStyle: {},
+            isH5: false
+        }
+    },
+    mounted() {
+        this.syncNavSafeArea()
+        this.$nextTick(() => {
+            setTimeout(() => this.syncNavSafeArea(), 50)
+        })
+    },
+    methods: {
+        syncNavSafeArea() {
+            try {
+                const sys = uni.getSystemInfoSync()
+                const statusBarHeight = sys.statusBarHeight || 0
+                const navHeight = 44
+                const extraGap = 4
+                const menu = uni.getMenuButtonBoundingClientRect?.()
+                // #ifdef H5
+                this.isH5 = true
+                // #endif
+                // #ifndef H5
+                this.isH5 = false
+                // #endif
+                if (!this.isH5 && typeof window !== 'undefined' && !menu?.width) {
+                    this.isH5 = sys.uniPlatform === 'web' || sys.platform === 'web'
+                }
+
+                this.toolbarStyle = {
+                    paddingTop: `${statusBarHeight}px`
+                }
+
+                this.toolbarSpacerStyle = {
+                    height: `${statusBarHeight + navHeight + extraGap}px`
+                }
+
+                if (!this.isH5 && menu && menu.width) {
+                    const capsuleGap = sys.windowWidth - menu.left + 8
+                    this.capsuleStyle = {
+                        width: `${capsuleGap}px`,
+                        minWidth: `${capsuleGap}px`
+                    }
+                } else {
+                    this.capsuleStyle = {
+                        width: '0px',
+                        minWidth: '0px'
+                    }
+                }
+            } catch (e) {
+                this.toolbarSpacerStyle = { height: '44px' }
+                this.isH5 = true
+                this.capsuleStyle = { width: '0px', minWidth: '0px' }
+            }
+        }
+    }
+}
+</script>
+
+<style>
+@import '@/common/style/memberInfo/member-info-sub-nav.css';
+</style>