4387b15de0
- 实现未登录/已登录两种状态样式 - 添加常用功能入口：我的订单、往期测评、联系我们、邀请新用户 - 添加其他功能入口：关于、用户协议、隐私政策、退出登录 - 实现退出登录二次确认弹窗 - 修复 uni.scss 中 SCSS 导入路径问题 - 整理 .gitignore 文件，移除 unpackage 构建目录
94 lines
1.8 KiB
JavaScript
94 lines
1.8 KiB
JavaScript
/**
|
|
* 导航栏相关组合式函数
|
|
*/
|
|
|
|
import { computed } from 'vue'
|
|
import { useAppStore } from '../store/app.js'
|
|
|
|
/**
|
|
* 导航栏相关功能
|
|
* @returns {Object}
|
|
*/
|
|
export function useNavbar() {
|
|
const appStore = useAppStore()
|
|
|
|
// 确保系统信息已初始化
|
|
if (!appStore.initialized) {
|
|
appStore.initSystemInfo()
|
|
}
|
|
|
|
/**
|
|
* 状态栏高度
|
|
*/
|
|
const statusBarHeight = computed(() => appStore.statusBarHeight)
|
|
|
|
/**
|
|
* 导航栏高度（不含状态栏）
|
|
*/
|
|
const navbarHeight = computed(() => appStore.navbarHeight)
|
|
|
|
/**
|
|
* 导航栏总高度（状态栏 + 导航栏）
|
|
*/
|
|
const totalNavbarHeight = computed(() => appStore.totalNavbarHeight)
|
|
|
|
/**
|
|
* 内容区域顶部padding
|
|
*/
|
|
const contentPaddingTop = computed(() => appStore.contentPaddingTop)
|
|
|
|
/**
|
|
* 获取导航栏样式
|
|
* @param {boolean} [fixed=true] - 是否固定定位
|
|
* @returns {Object}
|
|
*/
|
|
function getNavbarStyle(fixed = true) {
|
|
const style = {
|
|
paddingTop: `${statusBarHeight.value}px`,
|
|
height: `${totalNavbarHeight.value}px`
|
|
}
|
|
|
|
if (fixed) {
|
|
style.position = 'fixed'
|
|
style.top = '0'
|
|
style.left = '0'
|
|
style.right = '0'
|
|
style.zIndex = '999'
|
|
}
|
|
|
|
return style
|
|
}
|
|
|
|
/**
|
|
* 获取内容区域样式（用于自定义导航栏页面）
|
|
* @returns {Object}
|
|
*/
|
|
function getContentStyle() {
|
|
return {
|
|
paddingTop: `${totalNavbarHeight.value}px`
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 获取占位元素样式
|
|
* @returns {Object}
|
|
*/
|
|
function getPlaceholderStyle() {
|
|
return {
|
|
height: `${totalNavbarHeight.value}px`
|
|
}
|
|
}
|
|
|
|
return {
|
|
statusBarHeight,
|
|
navbarHeight,
|
|
totalNavbarHeight,
|
|
contentPaddingTop,
|
|
getNavbarStyle,
|
|
getContentStyle,
|
|
getPlaceholderStyle
|
|
}
|
|
}
|
|
|
|
export default useNavbar
|