<template>
    <view class="container">
        <view class="navBarBox">
            <!-- 状态栏占位 -->
            <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
            <!-- 真正的导航栏内容 -->
            <view class="navBar">
                个人中心
            </view>
        </view>

        <view class="pdx-30 mgt-30 flex fd_c">
            <view class="flex ai_center">
                <image class="w-120 h-120 radio-circle" src="/static/logo.png" mode="scaleToFill" />
                <view class="mgl-30 text-400 text-36">我是用户名字啊</view>
            </view>
            <view class="flex ai_center fd_c mgt-100">
                <view class="w flex ai_center jc_between mgb-40" @click="navTo('/pages/tabBar/my/setting')">
                    <view class="flex ai_center">
						<uni-icons customPrefix="iconfont" class="mgr-10" type="icon-shezhi" size="20" />
                        <view class="mgl-10 text-32">设置</view>
                    </view>
					<uni-icons customPrefix="iconfont" class="mgr-10" type="icon-youjiantou" color="#b9b7c1" size="16" />
                </view>
                <view class="w flex ai_center jc_between" @click="navTo('/pages/tabBar/my/aboutUs')">
                    <view class="flex ai_center">
						<uni-icons customPrefix="iconfont" class="mgr-10" type="icon-fl-xinxi" size="20" />
                        <view class="mgl-10 text-32">关于我们</view>
                    </view>
					<uni-icons customPrefix="iconfont" class="mgr-10" type="icon-youjiantou" color="#b9b7c1" size="16" />
                </view>
            </view>
        </view>
		<!-- 引入自定义 TabBar -->
		<custom-tabbar :currentIndex='2' />
    </view>
</template>
<script>
	import CustomTabbar from "@/components/custom-tabbar.vue";
	export default {
		components: {
			CustomTabbar
		},
		data(){
			return{
				statusBarHeight:0,
				navBarHeight:0,
			}
		},
		onBeforeMount(){
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			// #ifndef H5
			const custom = uni.getMenuButtonBoundingClientRect();
			// 导航栏的高度 = 胶囊的高度 + （胶囊距离顶部的距离 - 状态栏的高度）* 2
			//                                   即胶囊的上下边距
			this.navBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2;
			// #endif
		},
		methods: {
			navTo(url){
				uni.navigateTo({
					url
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
.container {
    .navBarBox {
        .navBar {
            width: 100%;
            height: 80rpx !important;
            line-height: 80rpx;
            padding-left: 30rpx;
            font-size: 32rpx;
            color: #333;
        }
    }
}
</style>
