实现服务页面接入

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>