更新

2026-01-18 17:42:46 +08:00
parent 836bdc9409
commit f038dbab41
42 changed files with 3068 additions and 575 deletions
--- a/resources/mobile/components/pages/pages.vue
+++ b/resources/mobile/components/pages/pages.vue
@@ -0,0 +1,168 @@
+<template>
+	<view class="un-pages-container">
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar v-if="showNavBar" :fixed="true" :background-color="navBarBgColor" :color="navBarColor"
+			:status-bar="true" :border="navBarBorder" :left-icon="showBack ? 'left' : ''" :title="navBarTitle"
+			@click-left="handleBack">
+			<slot name="navbar-right" slot="right"></slot>
+		</uni-nav-bar>
+
+		<!-- 中间内容区域 -->
+		<scroll-view class="content-scroll" scroll-y :style="{ height: scrollHeight }" :show-scrollbar="showScrollbar">
+			<view class="content-wrapper">
+				<slot></slot>
+			</view>
+		</scroll-view>
+
+		<!-- 底部tabbar -->
+		<un-tab-bar v-if="showTabBar" :current-path="currentPath" @change="handleTabChange"></un-tab-bar>
+	</view>
+</template>
+
+<script>
+export default {
+	name: 'UnPages',
+	props: {
+		// 是否显示顶部导航栏
+		showNavBar: {
+			type: Boolean,
+			default: true
+		},
+		// 导航栏标题
+		navBarTitle: {
+			type: String,
+			default: ''
+		},
+		// 导航栏背景色
+		navBarBgColor: {
+			type: String,
+			default: '#fff'
+		},
+		// 导航栏文字颜色
+		navBarColor: {
+			type: String,
+			default: '#333'
+		},
+		// 导航栏是否显示边框
+		navBarBorder: {
+			type: Boolean,
+			default: true
+		},
+		// 是否显示返回按钮
+		showBack: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示底部tabbar
+		showTabBar: {
+			type: Boolean,
+			default: false
+		},
+		// 是否显示滚动条
+		showScrollbar: {
+			type: Boolean,
+			default: false
+		}
+	},
+	data() {
+		return {
+			scrollHeight: 'calc(100vh - 44px)',
+			systemInfo: null,
+			currentPath: ''
+		}
+	},
+	mounted() {
+		this.calculateHeight()
+		// 获取当前页面路径
+		this.getCurrentPath()
+		// 监听窗口变化
+		uni.onWindowResize(() => {
+			this.calculateHeight()
+		})
+	},
+	methods: {
+		/**
+		 * 计算滚动区域高度
+		 */
+		calculateHeight() {
+			try {
+				const systemInfo = uni.getSystemInfoSync()
+				const statusBarHeight = systemInfo.statusBarHeight || 0
+				const navBarHeight = this.showNavBar ? 44 : 0
+				const tabBarHeight = this.showTabBar ? 50 : 0 // tabbar高度约50px
+
+				let height = systemInfo.windowHeight - navBarHeight - tabBarHeight
+
+				// 如果有tabbar，加上安全区域
+				if (this.showTabBar && systemInfo.safeAreaInsets) {
+					height -= systemInfo.safeAreaInsets.bottom
+				}
+
+				this.scrollHeight = height + 'px'
+			} catch (e) {
+				console.error('计算高度失败:', e)
+				this.scrollHeight = 'calc(100vh - 44px)'
+			}
+		},
+
+		/**
+		 * 处理返回按钮点击
+		 */
+		handleBack() {
+			uni.navigateBack({
+				delta: 1,
+				fail: () => {
+					// 如果无法返回，跳转到首页
+					uni.switchTab({
+						url: '/pages/index/index'
+					})
+				}
+			})
+		},
+
+		/**
+		 * 获取当前页面路径
+		 */
+		getCurrentPath() {
+			try {
+				const pages = getCurrentPages()
+				if (pages && pages.length > 0) {
+					const currentPage = pages[pages.length - 1]
+					this.currentPath = '/' + currentPage.route
+				}
+			} catch (e) {
+				console.error('获取当前页面路径失败:', e)
+			}
+		},
+
+		/**
+		 * 处理tab切换
+		 */
+		handleTabChange(path) {
+			this.$emit('tab-change', path)
+		}
+	}
+}
+</script>
+
+<style lang="scss" scoped>
+.un-pages-container {
+	width: 100%;
+	height: 100vh;
+	display: flex;
+	flex-direction: column;
+	background: #F8F8F8;
+	overflow: hidden;
+}
+
+.content-scroll {
+	flex: 1;
+	width: 100%;
+	overflow-y: auto;
+}
+
+.content-wrapper {
+	width: 100%;
+	min-height: 100%;
+}
+</style>