实现服务页面接入

components/homeService/ServicePageHeader.uvue

@@ -0,0 +1,110 @@
+<template>
+	<view class="service-page-header" :style="headerStyle">
+		<view class="service-page-header-inner">
+			<view class="service-page-back" @click="goBack">
+				<text class="service-page-back-icon">＜</text>
+			</view>
+			<text class="service-page-title">{{ title }}</text>
+			<view class="service-page-right-placeholder"></view>
+		</view>
+	</view>
+</template>
+
+<script setup lang="uts">
+import { computed, ref } from 'vue'
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: ''
+	},
+	fallbackUrl: {
+		type: String,
+		default: ''
+	}
+})
+
+const statusBarHeight = ref(0)
+
+try {
+	const systemInfo = uni.getSystemInfoSync()
+	statusBarHeight.value = systemInfo.statusBarHeight
+} catch (error) {
+	statusBarHeight.value = 20
+}
+
+const headerStyle = computed((): string => {
+	return 'padding-top:' + statusBarHeight.value + 'px;'
+})
+
+function goBack() {
+	let pageCount = 0
+	try {
+		pageCount = getCurrentPages().length
+	} catch (error) {
+		pageCount = 0
+	}
+
+	if (pageCount > 1) {
+		uni.navigateBack()
+		return
+	}
+
+	if (props.fallbackUrl == '') {
+		uni.showToast({ title: '暂无可返回页面', icon: 'none' })
+		return
+	}
+
+	if (props.fallbackUrl.indexOf('/pages/main/') == 0) {
+		uni.switchTab({ url: props.fallbackUrl })
+		return
+	}
+
+	uni.redirectTo({ url: props.fallbackUrl })
+}
+</script>
+
+<style scoped>
+.service-page-header {
+	background: #f3f7f9;
+	padding-left: 24rpx;
+	padding-right: 24rpx;
+	padding-bottom: 16rpx;
+	box-sizing: border-box;
+}
+
+.service-page-header-inner {
+	height: 88rpx;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+	justify-content: space-between;
+}
+
+.service-page-back {
+	min-width: 88rpx;
+	height: 88rpx;
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.service-page-back-icon {
+	font-size: 52rpx;
+	line-height: 1;
+	color: #16324f;
+}
+
+.service-page-title {
+	flex: 1;
+	font-size: 34rpx;
+	font-weight: 700;
+	color: #16324f;
+	text-align: center;
+}
+
+.service-page-right-placeholder {
+	min-width: 88rpx;
+	height: 88rpx;
+}
+</style>

components/homeService/ServicePageScaffold.uvue

@@ -0,0 +1,79 @@
+<template>
+	<view class="service-page-shell">
+		<view class="service-page-fixed-header">
+			<ServicePageHeader :title="title" :fallback-url="fallbackUrl"></ServicePageHeader>
+		</view>
+		<view class="service-page-header-placeholder" :style="{ height: headerHeight + 'px' }"></view>
+		<scroll-view class="service-page-scroll" scroll-y="true">
+			<view class="service-page-content">
+				<slot></slot>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup lang="uts">
+import { ref } from 'vue'
+import ServicePageHeader from '@/components/homeService/ServicePageHeader.uvue'
+
+const props = defineProps({
+	title: {
+		type: String,
+		default: ''
+	},
+	fallbackUrl: {
+		type: String,
+		default: ''
+	}
+})
+
+const headerHeight = ref(116)
+
+try {
+	const systemInfo = uni.getSystemInfoSync()
+	const statusBar = systemInfo.statusBarHeight
+	const unit = systemInfo.screenWidth / 750
+	headerHeight.value = statusBar + Math.round(124 * unit)
+} catch (error) {
+	headerHeight.value = 116
+}
+</script>
+
+<style scoped>
+.service-page-shell {
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	display: flex;
+	flex-direction: column;
+	background: #f3f7f9;
+	overflow: hidden;
+}
+
+.service-page-fixed-header {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 100;
+	background: #f3f7f9;
+}
+
+.service-page-header-placeholder {
+	width: 100%;
+	flex-shrink: 0;
+}
+
+.service-page-scroll {
+	flex: 1;
+	min-height: 0;
+	width: 100%;
+}
+
+.service-page-content {
+	padding: 24rpx;
+	box-sizing: border-box;
+}
+</style>