102 lines
3.1 KiB
Vue
102 lines
3.1 KiB
Vue
<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="https://gymfuture.oss-cn-chengdu.aliyuncs.com/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 setup>
|
|
import { ref, onMounted, nextTick } from 'vue'
|
|
|
|
const props = defineProps({
|
|
title: { type: String, required: true },
|
|
rightText: { type: String, default: '' },
|
|
actionButton: { type: Boolean, default: false }
|
|
})
|
|
|
|
defineEmits(['back', 'right-action'])
|
|
|
|
const toolbarStyle = ref({})
|
|
const toolbarSpacerStyle = ref({})
|
|
const capsuleStyle = ref({})
|
|
const isH5 = ref(false)
|
|
|
|
function syncNavSafeArea() {
|
|
try {
|
|
const sys = uni.getSystemInfoSync()
|
|
const statusBarHeight = sys.statusBarHeight || 0
|
|
const navHeight = 44
|
|
const extraGap = 4
|
|
const menu = uni.getMenuButtonBoundingClientRect?.()
|
|
|
|
// #ifdef H5
|
|
isH5.value = true
|
|
// #endif
|
|
// #ifndef H5
|
|
isH5.value = false
|
|
// #endif
|
|
if (!isH5.value && typeof window !== 'undefined' && !menu?.width) {
|
|
isH5.value = sys.uniPlatform === 'web' || sys.platform === 'web'
|
|
}
|
|
|
|
toolbarStyle.value = {
|
|
paddingTop: `${statusBarHeight}px`
|
|
}
|
|
|
|
toolbarSpacerStyle.value = {
|
|
height: `${statusBarHeight + navHeight + extraGap}px`
|
|
}
|
|
|
|
if (!isH5.value && menu && menu.width) {
|
|
const capsuleGap = sys.windowWidth - menu.left + 8
|
|
capsuleStyle.value = {
|
|
width: `${capsuleGap}px`,
|
|
minWidth: `${capsuleGap}px`
|
|
}
|
|
} else {
|
|
capsuleStyle.value = {
|
|
width: '0px',
|
|
minWidth: '0px'
|
|
}
|
|
}
|
|
} catch (e) {
|
|
toolbarSpacerStyle.value = { height: '44px' }
|
|
isH5.value = true
|
|
capsuleStyle.value = { width: '0px', minWidth: '0px' }
|
|
}
|
|
}
|
|
|
|
onMounted(() => {
|
|
syncNavSafeArea()
|
|
nextTick(() => {
|
|
setTimeout(() => syncNavSafeArea(), 50)
|
|
})
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import '@/common/style/memberInfo/member-info-sub-nav.css';
|
|
</style>
|