实现服务页面接入

pages/main/index.uvue

@@ -1,81 +1,26 @@
 <!-- pages/main/index.uvue -->
 <template>
 	<view class="medic-home">
-		<view class="pdd-home-header" :style="headerStyle">
-			<view class="pdd-header-shell">
-				<view class="pdd-search-row" :style="searchRowStyle" @tap="handleHomeSearchClick">
-					<view class="pdd-search-box">
-						<text class="pdd-search-icon">⌕</text>
-						<view class="pdd-keyword-text">
-							<view :class="['pdd-keyword-track', { 'pdd-keyword-track-animating': placeholderAnimating }]">
-								<view class="pdd-keyword-slide">
-									<text class="pdd-keyword-placeholder">{{ currentPlaceholderKeyword }}</text>
-								</view>
-								<view class="pdd-keyword-slide">
-									<text class="pdd-keyword-placeholder">{{ nextPlaceholderKeyword }}</text>
-								</view>
-							</view>
-						</view>
-						<text class="pdd-camera-icon">◉</text>
-					</view>
-				</view>
-
-				<view class="category-wrapper">
-					<view :class="['category-bar-wrap', { 'category-bar-wrap-hidden': showCategoryPanel }]">
-						<scroll-view
-							class="category-scroll"
-							direction="horizontal"
-							:show-scrollbar="false"
-							:scroll-with-animation="true"
-							:scroll-into-view="categoryScrollIntoView"
-						>
-							<view
-								v-for="(item, index) in categoryList"
-								:key="buildListItemKey('top-category', item.id, index)"
-								:id="'cat-' + item.id"
-								:class="['category-item', { 'category-item-active': currentCategory === item.id }]"
-								@tap="handleCategoryTabClick(item)"
-							>
-								<text :class="['category-item-text', { 'category-item-text-active': currentCategory === item.id, 'category-item-text-accent': shouldHighlightCategory(item.name) && currentCategory !== item.id }]">{{ getCategoryTabDisplayName(item.name) }}</text>
-								<view v-if="currentCategory === item.id" class="category-active-line"></view>
-							</view>
-						</scroll-view>
-
-						<view class="category-expand-btn" @tap="toggleCategoryPanel">
-							<text class="category-expand-icon">{{ showCategoryPanel ? '∧' : '∨' }}</text>
-						</view>
-					</view>
-				</view>
-			</view>
+		<view class="jd-header-fixed">
+			<JdLikeHomeHeader
+				:status-bar-height="statusBarHeight"
+				:capsule-right="navBarRight"
+				:modules="topModules"
+				:active-module="activeTopModule"
+				:search-keyword="searchKeyword"
+				:placeholder="headerSearchPlaceholder"
+				:categories="headerCategories"
+				:active-category="activeCategory"
+				@changeModule="handleTopModuleChange"
+				@update:searchKeyword="handleSearchKeywordUpdate"
+				@search="handleHeaderSearch"
+				@changeCategory="handleHeaderCategoryChange"
+				@focusSearch="handleSearchFocus"
+			></JdLikeHomeHeader>
 		</view>
 
-		<view
-			v-if="showCategoryPanel"
-			class="category-panel"
-			:style="{ top: (navbarTotalHeight + 1) + 'px' }"
-		>
-			<view class="category-panel-header">
-				<text class="category-panel-title">全部分类</text>
-				<view class="category-panel-close-btn" @tap="toggleCategoryPanel">
-					<text class="category-panel-close-text">收起</text>
-					<text class="category-panel-close-arrow">∧</text>
-				</view>
-			</view>
-			<view class="category-panel-grid">
-				<view
-					v-for="(item, index) in categoryList"
-					:key="buildListItemKey('panel-category', item.id, index)"
-					:class="['category-panel-item', { 'category-panel-item-active': currentCategory === item.id }]"
-					@tap="selectCategoryFromPanel(item)"
-				>
-					<text :class="['category-panel-item-text', { 'category-panel-item-text-active': currentCategory === item.id }]">{{ item.name }}</text>
-				</view>
-			</view>
-		</view>
+		<view class="jd-header-placeholder" :style="{ height: headerPlaceholderHeight + 'px' }"></view>
 
-		<view class="pdd-header-placeholder" :style="{ height: headerPlaceholderHeight + 'px' }"></view>
-		
-		<!-- 主内容区 -->
 		<scroll-view 
 			direction="vertical" 
 			class="main-scroll"
@@ -83,184 +28,46 @@
 			:refresher-triggered="refreshing"
 			:lower-threshold="50"
 			@refresherrefresh="onRefresh"
-			@scrolltolower="loadMore"
+			@scrolltolower="handleMainScrollToLower"
 			@scroll="handleScroll"
 		>
-			<view class="category-feed-shell">
-				<view v-if="currentCategory !== 'recommend' && secondaryCategoryDisplay.length > 0" class="secondary-category-panel">
-					<view
-						v-for="(item, index) in secondaryCategoryDisplay"
-						:key="buildListItemKey('secondary-category', item.id, index)"
-						:class="['secondary-category-item', { 'secondary-category-item-active': selectedSubCategoryId === item.id }]"
-						@tap="handleSecondaryCategoryClick(item)"
-					>
-						<view class="secondary-category-icon-wrap">
-							<image
-								v-if="isImageIcon(item.icon)"
-								class="secondary-category-image"
-								:src="item.icon"
-								mode="aspectFill"
-							/>
-							<text v-else class="secondary-category-icon-text">{{ getCategoryDisplayIcon(item) }}</text>
-						</view>
-						<text class="secondary-category-name">{{ item.name }}</text>
-					</view>
-				</view>
+			<HomeMallContent
+				v-if="activeTopModule == 'home'"
+				:current-category="currentCategory"
+				:selected-sub-category-id="selectedSubCategoryId"
+				:secondary-category-display="secondaryCategoryDisplay"
+				:marketing-channels="marketingChannels"
+				:category-simple-channels="categorySimpleChannels"
+				:hot-products="hotProducts"
+				:loading="loading"
+				:has-more="hasMore"
+				:show-load-more="showLoadMore"
+				@secondary-category-click="handleSecondaryCategoryClick"
+				@select-channel="navigateToChannel"
+				@select-simple-channel="navigateToSimpleChannel"
+				@select-product="navigateToProduct"
+			></HomeMallContent>
 
-				<view v-if="currentCategory === 'recommend' && marketingChannels.length > 0" class="recommend-channel-section">
-					<view
-						v-for="(channel, index) in marketingChannels"
-						:key="buildListItemKey('marketing-channel', channel.id, index)"
-						class="recommend-channel-card"
-						:style="{ backgroundColor: channel.bgColor }"
-						@tap="navigateToChannel(channel)"
-					>
-						<view class="recommend-channel-header">
-							<view class="recommend-channel-title-row">
-								<text class="recommend-channel-title">{{ channel.title }}</text>
-								<text class="recommend-channel-badge" :style="{ color: channel.themeColor, borderColor: channel.themeColor }">{{ channel.badge }}</text>
-							</view>
-							<text class="recommend-channel-subtitle">{{ channel.subtitle }}</text>
-						</view>
-						<view class="recommend-channel-products">
-							<view
-								v-for="(product, pIndex) in channel.products"
-								:key="buildListItemKey('channel-product', product.id, pIndex)"
-								class="recommend-channel-product"
-							>
-								<image
-									class="recommend-channel-product-image"
-									:src="getChannelProductImage(product)"
-									mode="aspectFill"
-								/>
-								<text class="recommend-channel-product-name">{{ product.shortName }}</text>
-								<view class="recommend-channel-price-row">
-									<text class="recommend-channel-product-tag" :style="{ color: channel.themeColor }">{{ product.tag }}</text>
-									<text class="recommend-channel-product-price" :style="{ color: channel.themeColor }">¥{{ formatChannelPrice(product.price) }}</text>
-								</view>
-								<text v-if="product.marketPrice > product.price" class="recommend-channel-market-price">¥{{ formatChannelPrice(product.marketPrice) }}</text>
-							</view>
-						</view>
-					</view>
-				</view>
+			<HomeServiceContent
+				v-else
+				:active-category="activeCategory"
+				:categories="serviceCategories"
+				:entries="serviceEntries"
+				@change-category="handleHeaderCategoryChange"
+				@select-entry="handleServiceEntrySelect"
+			></HomeServiceContent>
 
-				<view v-else-if="currentCategory !== 'recommend' && categorySimpleChannels.length > 0" class="category-simple-channel-section">
-					<view
-						v-for="(channel, index) in categorySimpleChannels"
-						:key="buildListItemKey('simple-channel', channel.id, index)"
-						:class="['simple-channel-card', { 'simple-channel-card-with-divider': index === 0 }]"
-						@tap="navigateToSimpleChannel(channel)"
-					>
-						<view class="simple-channel-left">
-							<view class="simple-channel-title-row">
-								<text class="simple-channel-icon">{{ channel.icon }}</text>
-								<text class="simple-channel-title">{{ channel.title }}</text>
-							</view>
-							<text class="simple-channel-subtitle">{{ channel.subtitle }}</text>
-						</view>
-						<view class="simple-channel-cover-wrap">
-							<view
-								v-for="(cover, coverIndex) in channel.coverImages"
-								:key="buildListItemKey('simple-channel-cover', channel.id + '-' + cover, coverIndex)"
-								class="simple-channel-cover-slot"
-							>
-								<image
-									v-if="isImageIcon(cover)"
-									class="simple-channel-cover-image"
-									:src="cover"
-									mode="aspectFill"
-								/>
-								<view v-else class="simple-channel-cover-fallback">
-									<text class="simple-channel-cover-text">{{ cover }}</text>
-								</view>
-							</view>
-						</view>
-					</view>
-				</view>
-
-				<view class="feed-divider"></view>
-
-				<view v-if="hotProducts.length > 0" class="products-grid products-grid-dense">
-					<view 
-						v-for="(product, index) in hotProducts" 
-						:key="buildProductLoopKey(product, index)"
-						class="product-card product-card-skeleton"
-						@click="navigateToProduct(product)"
-					>
-						<view class="product-image-wrapper product-image-wrapper-fixed">
-							<image
-								class="product-image"
-								:src="getProductCover(product)"
-								@error="() => handleProductImageError(product.id)"
-								mode="aspectFill"
-							/>
-						</view>
-						<view class="product-placeholder-body">
-							<view v-if="getProductCardTags(product).length > 0" class="product-card-tags">
-								<text
-									v-for="(tag, index) in getProductCardTags(product)"
-									:key="product.id + '-card-tag-' + index"
-									class="product-card-tag"
-								>
-									{{ tag }}
-								</text>
-							</view>
-							<text class="product-skeleton-title">{{ getProductTitle(product) }}</text>
-							<text v-if="getProductHighlight(product) !== ''" class="product-highlight-text">{{ getProductHighlight(product) }}</text>
-							<view v-if="getProductServiceTags(product).length > 0" class="product-service-tags">
-								<text
-									v-for="(tag, index) in getProductServiceTags(product)"
-									:key="product.id + '-service-tag-' + index"
-									class="product-service-tag"
-								>
-									{{ tag }}
-								</text>
-							</view>
-							<view class="product-price-row">
-								<text class="product-price-value">¥{{ formatProductPrice(product) }}</text>
-								<text v-if="showMarketPrice(product)" class="product-market-price">¥{{ formatMarketPrice(product) }}</text>
-							</view>
-							<text v-if="getProductSalesText(product) !== ''" class="product-sales-text">{{ getProductSalesText(product) }}</text>
-						</view>
-					</view>
-				</view>
-
-				<view v-else-if="loading" class="feed-loading-state">
-					<text class="loading-text">正在加载商品...</text>
-				</view>
-
-				<view v-else class="feed-empty-state">
-					<text class="feed-empty-title">当前分类暂无商品</text>
-					<text class="feed-empty-desc">可以切换二级分类或其他频道继续浏览</text>
-				</view>
-
-				<view class="load-more-status" v-if="loading || showLoadMore">
-					<text class="loading-text">正在加载更多商品...</text>
-				</view>
-
-				<view v-if="!hasMore && hotProducts.length > 0" class="feed-end-state">
-					<text class="feed-end-text">已经到底了</text>
-				</view>
-			</view>
-
-		
-			<!-- 底部安全区域 -->
-			<view class="safe-area"></view>
+			<view class="safe-area" :style="{ height: bottomSafeArea + 88 + 'px' }"></view>
 		</scroll-view>
-
-		<!-- 遮罩：覆盖分类面板下方内容区域，点击关闭面板 -->
-		<view
-			v-if="showCategoryPanel"
-			class="category-panel-mask"
-			:style="{ top: navbarTotalHeight + 'px' }"
-			@tap="toggleCategoryPanel"
-		></view>
 	</view>
 </template>
 
 <script setup lang="uts">
-import { ref, reactive, onMounted, onUnmounted } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, computed } from 'vue'
 import { onShow, onLoad, onHide } from '@dcloudio/uni-app'
+import HomeMallContent from '@/components/home/HomeMallContent.uvue'
+import HomeServiceContent from '@/components/home/HomeServiceContent.uvue'
+import JdLikeHomeHeader from '@/components/home/JdLikeHomeHeader.uvue'
 import supabaseService from '@/utils/supabaseService.uts'
 import type { Product, Category, Brand, PaginatedResponse } from '@/utils/supabaseService.uts'
 import { getRecommendMarketingChannels } from '@/utils/mockChannelData.uts'
@@ -271,6 +78,7 @@ import { logSupaConfig } from '@/ak/config.uts'
 
 // 响应式数据
 const statusBarHeight = ref(0)
+const bottomSafeArea = ref(20)
 const scrollHeight = ref(0)
 const refreshing = ref(false)
 const loading = ref(false)
@@ -301,6 +109,66 @@ const headerPlaceholderHeight = ref(128)
 
 const headerStyle = ref('')
 const searchRowStyle = ref('')
+const activeTopModule = ref('home')
+const activeCategory = ref('recommend')
+const searchKeyword = ref('')
+
+type HeaderModuleItem = {
+	key: string
+	label: string
+}
+
+type ServiceHomeCategoryItem = {
+	id: string
+	name: string
+}
+
+type ServiceEntryItem = {
+	id: string
+	title: string
+	desc: string
+	icon: string
+	tone: string
+	category: string
+	linkText: string
+	route: string
+}
+
+const topModules: Array<HeaderModuleItem> = [
+	{ key: 'home', label: '首页' },
+	{ key: 'service', label: '服务' }
+]
+
+const serviceCategories: Array<ServiceHomeCategoryItem> = [
+	{ id: 'all', name: '推荐' },
+	{ id: 'nursing', name: '居家护理' },
+	{ id: 'rehab', name: '康复照护' },
+	{ id: 'assist', name: '适老用品' },
+	{ id: 'health', name: '健康管理' },
+	{ id: 'life', name: '生活服务' }
+]
+
+const serviceEntries: Array<ServiceEntryItem> = [
+	{ id: 'apply', title: '服务申请', desc: '快速发起上门护理与健康随访申请。', icon: '📝', tone: 'red', category: 'nursing', linkText: '立即申请', route: '/pages/mall/consumer/home-service/apply' },
+	{ id: 'service-home', title: '服务大厅', desc: '查看服务项目、适用对象与预约说明。', icon: '🏠', tone: 'blue', category: 'all', linkText: '查看大厅', route: '/pages/mall/consumer/home-service/index' },
+	{ id: 'progress', title: '服务进度', desc: '追踪评估、方案、执行和验收节点。', icon: '📍', tone: 'green', category: 'health', linkText: '查看工单', route: '/pages/mall/consumer/home-service/order-detail?id=case-001' },
+	{ id: 'assessment', title: '上门评估', desc: '了解评估前准备事项和风险核对重点。', icon: '🩺', tone: 'blue', category: 'rehab', linkText: '查看说明', route: '/pages/mall/consumer/home-service/assessment?id=case-001' },
+	{ id: 'plan', title: '服务方案', desc: '查看护理频次、服务周期和执行建议。', icon: '📋', tone: 'green', category: 'rehab', linkText: '方案说明', route: '/pages/mall/consumer/home-service/service-plan?id=case-001' },
+	{ id: 'execution', title: '上门执行', desc: '同步执行记录、签到留痕与异常处理。', icon: '🚪', tone: 'orange', category: 'life', linkText: '查看进展', route: '/pages/mall/consumer/home-service/order-detail?id=case-002' },
+	{ id: 'feedback', title: '验收反馈', desc: '服务完成后提交验收意见和满意度反馈。', icon: '✅', tone: 'red', category: 'nursing', linkText: '去反馈', route: '/pages/mall/consumer/home-service/feedback?id=case-001' },
+	{ id: 'settlement', title: '结算归档', desc: '查看归档说明、账单结果和服务闭环。', icon: '🗂️', tone: 'green', category: 'assist', linkText: '查看说明', route: '/pages/mall/consumer/home-service/settlement-archive?id=case-001' }
+]
+
+const headerCategories = computed((): Array<ServiceHomeCategoryItem | CategoryItem> => {
+	return activeTopModule.value == 'home' ? categoryList.value : serviceCategories
+})
+
+const headerSearchPlaceholder = computed((): string => {
+	if (activeTopModule.value == 'service') {
+		return '居家护理 / 康复照护 / 血压计 / 助餐服务'
+	}
+	return currentPlaceholderKeyword.value != '' ? currentPlaceholderKeyword.value : '感冒药 / 康复护理 / 居家护理 / 血压计'
+})
 
 // 分类标签栏相关
 type CategoryItem = {
@@ -442,6 +310,61 @@ const handleHomeSearchClick = () => {
 	}
 }
 
+function handleSearchKeywordUpdate(keyword: string) {
+	searchKeyword.value = keyword
+}
+
+function handleSearchFocus() {
+	if (searchKeyword.value == '' && activeTopModule.value == 'home') {
+		searchKeyword.value = currentPlaceholderKeyword.value
+	}
+}
+
+function handleHeaderSearch(keyword: string) {
+	const inputKeyword = keyword != '' ? keyword : searchKeyword.value
+	const fallbackKeyword = headerSearchPlaceholder.value != '' ? headerSearchPlaceholder.value : '居家护理'
+	const finalKeyword = inputKeyword != '' ? inputKeyword : fallbackKeyword
+	searchKeyword.value = finalKeyword
+	try {
+		uni.navigateTo({ url: `/pages/mall/consumer/search?keyword=${encodeURIComponent(finalKeyword)}&source=home_header` })
+	} catch (error) {
+		console.error('首页搜索跳转失败', error)
+	}
+}
+
+function handleTopModuleChange(moduleKey: string) {
+	activeTopModule.value = moduleKey
+	if (moduleKey == 'home') {
+		activeCategory.value = currentCategory.value
+	} else {
+		activeCategory.value = serviceCategories.length > 0 ? serviceCategories[0].id : 'all'
+	}
+}
+
+function handleHeaderCategoryChange(categoryId: string) {
+	activeCategory.value = categoryId
+	if (activeTopModule.value == 'home') {
+		const matchedItem = categoryList.value.find((item: CategoryItem): boolean => item.id == categoryId)
+		if (matchedItem != null) {
+			handleCategoryTabClick(matchedItem)
+		}
+	}
+}
+
+function handleServiceEntrySelect(entry: ServiceEntryItem) {
+	if (entry.route == '') {
+		uni.showToast({ title: '该入口下一步补页面', icon: 'none' })
+		return
+	}
+	uni.navigateTo({ url: entry.route })
+}
+
+function handleMainScrollToLower() {
+	if (activeTopModule.value == 'home') {
+		void loadMore()
+	}
+}
+
 function toEventJsonObject(value: any | null): UTSJSONObject | null {
 	if (value == null) {
 		return null
@@ -1356,9 +1279,11 @@ const familyItems = [
 // 初始化页面
 const initPage = () => {
 	const systemInfo = uni.getSystemInfoSync()
-	statusBarHeight.value = systemInfo.statusBarHeight
-	const searchContentHeight = Math.round(60 * systemInfo.screenWidth / 750)
-	const searchRowVerticalPadding = Math.round(12 * systemInfo.screenWidth / 750)
+	statusBarHeight.value = systemInfo.statusBarHeight != null ? systemInfo.statusBarHeight : 20
+	const searchContentHeight = Math.round(68 * systemInfo.screenWidth / 750)
+	const searchRowVerticalPadding = Math.round(18 * systemInfo.screenWidth / 750)
+	const moduleRowHeight = Math.round(78 * systemInfo.screenWidth / 750)
+	const categoryRowHeight = Math.round(56 * systemInfo.screenWidth / 750)
 	
 	let menuInfo: CapsuleButtonInfo | null = null
 	// #ifdef MP-WEIXIN || MP-ALIPAY
@@ -1377,20 +1302,22 @@ const initPage = () => {
 		// 计算右边距避让
 		const rightReserve = systemInfo.screenWidth - menuInfo.left + 8
 		navBarRight.value = rightReserve
-		const searchRowTotalH = statusBarHeight.value + Math.max(navHeight, searchContentHeight + searchRowVerticalPadding)
+		const searchRowTotalH = statusBarHeight.value + Math.max(navHeight, moduleRowHeight) + searchContentHeight + searchRowVerticalPadding + categoryRowHeight + Math.round(18 * systemInfo.screenWidth / 750)
 		searchRowStyle.value = `padding-top:${statusBarHeight.value}px;height:${searchRowTotalH}px;padding-right:${rightReserve}px;`
 		navbarTotalHeight.value = searchRowTotalH
 	} else {
 		navBarHeight.value = 44
 		navBarRight.value = 0
-		const searchRowTotalH = statusBarHeight.value + Math.max(44, searchContentHeight + searchRowVerticalPadding)
+		const searchRowTotalH = statusBarHeight.value + Math.max(44, moduleRowHeight) + searchContentHeight + searchRowVerticalPadding + categoryRowHeight + Math.round(18 * systemInfo.screenWidth / 750)
 		searchRowStyle.value = `padding-top:${statusBarHeight.value}px;height:${searchRowTotalH}px;`
 		navbarTotalHeight.value = searchRowTotalH
 	}
 	
 	headerStyle.value = ``
-	categoryBarHeightPx.value = Math.round(64 * systemInfo.screenWidth / 750)
-	headerPlaceholderHeight.value = navbarTotalHeight.value + categoryBarHeightPx.value
+	categoryBarHeightPx.value = categoryRowHeight
+	headerPlaceholderHeight.value = navbarTotalHeight.value
+	const safeBottom = systemInfo.safeArea != null ? systemInfo.screenHeight - systemInfo.safeArea.bottom : 20
+	bottomSafeArea.value = safeBottom > 0 ? safeBottom : 20
 
 	const screenWidth = systemInfo.screenWidth
 	isMobile.value = screenWidth < 768
@@ -1798,6 +1725,20 @@ const navigateToReminders = () => uni.navigateTo({ url: '/pages/user/reminders'
 	flex-direction: column;
 }
 
+.jd-header-fixed {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	z-index: 1000;
+	background: #ffffff;
+}
+
+.jd-header-placeholder {
+	width: 100%;
+	flex-shrink: 0;
+}
+
 .main-scroll {
 	flex: 1;
 	min-height: 0;

pages/mall/admin/home-service/application-management/index.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="服务申请管理">
 		<ServicePanel title="服务申请管理" subtitle="沿用后台列表 + 状态标签 + 操作按钮的组织方式。">
 			<view class="overview-row">
 				<view v-for="item in overview" :key="item.id" class="overview-card" :class="'overview-' + item.tone">
@@ -39,12 +39,13 @@
 			</view>
 			<view class="jump-btn" @click="goDispatch">进入派单调度</view>
 		</ServicePanel>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServiceActionRow from '@/components/homeService/ServiceActionRow.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'

pages/mall/admin/home-service/assessment-form/index.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="上门评估" fallback-url="/pages/mall/admin/home-service/application-management/index">
 		<view v-if="detail == null" class="empty-box">
 			<text class="empty-text">未找到评估信息</text>
 		</view>
@@ -43,12 +43,13 @@
 				<view class="submit-btn" @click="submitAssessment">提交评估</view>
 			</ServicePanel>
 		</view>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServiceInfoList from '@/components/homeService/ServiceInfoList.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import { fetchAdminAssessmentDetail, submitAdminAssessment } from '@/services/homeServiceService.uts'

pages/mall/admin/home-service/dispatch-center/index.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="派单调度中心" fallback-url="/pages/mall/admin/home-service/application-management/index">
 		<ServicePanel title="派单调度中心" subtitle="首批只做调度总览和待派单清单，后续再补排班与改派。">
 			<view v-for="item in applications" :key="item.id" class="dispatch-card">
 				<view class="dispatch-row">
@@ -18,12 +18,13 @@
 				</view>
 			</view>
 		</ServicePanel>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
 import { fetchAdminHomeServiceApplications } from '@/services/homeServiceService.uts'

pages/mall/admin/home-service/rectification/index.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="整改处理" fallback-url="/pages/mall/admin/home-service/application-management/index">
 		<view v-if="detail == null" class="empty-box">
 			<text class="empty-text">未找到整改信息</text>
 		</view>
@@ -29,12 +29,13 @@
 				<view class="submit-btn" @click="submitRectification">提交整改结果</view>
 			</ServicePanel>
 		</view>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServiceInfoCard from '@/components/homeService/ServiceInfoCard.uvue'
 import ServiceInfoList from '@/components/homeService/ServiceInfoList.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'

pages/mall/admin/home-service/service-plan/index.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="服务方案" fallback-url="/pages/mall/admin/home-service/application-management/index">
 		<view v-if="detail == null" class="empty-box">
 			<text class="empty-text">未找到服务方案</text>
 		</view>
@@ -46,12 +46,13 @@
 				<view class="submit-btn" @click="submitPlan">提交方案</view>
 			</ServicePanel>
 		</view>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServiceInfoList from '@/components/homeService/ServiceInfoList.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import { fetchAdminServicePlanDetail, submitAdminServicePlan } from '@/services/homeServiceService.uts'

pages/mall/admin/home-service/settlement-archive/index.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="结算归档" fallback-url="/pages/mall/admin/home-service/application-management/index">
 		<view v-if="detail == null" class="empty-box">
 			<text class="empty-text">未找到结算信息</text>
 		</view>
@@ -32,12 +32,13 @@
 				<view class="submit-btn" @click="submitArchive">确认归档</view>
 			</ServicePanel>
 		</view>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServiceInfoCard from '@/components/homeService/ServiceInfoCard.uvue'
 import ServiceInfoList from '@/components/homeService/ServiceInfoList.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'

pages/mall/consumer/home-service/apply.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="提交服务申请" fallback-url="/pages/mall/consumer/home-service/index">
 		<ServicePanel title="提交服务申请" subtitle="先使用 mock 数据模拟申请受理流程。">
 			<view class="form-item">
 				<text class="label">选择服务</text>
@@ -48,12 +48,13 @@
 
 			<view class="submit-btn" @click="submitApplication">提交申请</view>
 		</ServicePanel>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { reactive, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import { createHomeServiceApplication, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
 import { HomeServiceApplicationDraftType, HomeServiceCatalogType } from '@/types/home-service.uts'
@@ -105,13 +106,6 @@ onLoad(() => {
 </script>
 
 <style scoped>
-.page {
-	min-height: 100vh;
-	background: #f3f7f9;
-	padding: 24rpx;
-	box-sizing: border-box;
-}
-
 .form-item {
 	margin-bottom: 24rpx;
 }
@@ -128,13 +122,18 @@ onLoad(() => {
 	width: 100%;
 	background: #f8fbfc;
 	border-radius: 18rpx;
-	padding: 22rpx 24rpx;
 	font-size: 28rpx;
 	color: #23384d;
 	box-sizing: border-box;
 }
 
+.input {
+	height: 84rpx;
+	padding: 0 24rpx;
+}
+
 .textarea {
+	padding: 22rpx 24rpx;
 	height: 160rpx;
 }
 

pages/mall/consumer/home-service/assessment.uvue

@@ -0,0 +1,95 @@
+<template>
+	<ServicePageScaffold title="上门评估" fallback-url="/pages/mall/consumer/home-service/index">
+		<view v-if="detail == null" class="empty-box">
+			<text class="empty-text">未找到评估信息</text>
+		</view>
+		<view v-else>
+			<ServicePanel title="上门评估" subtitle="展示评估前准备、风险等级和护理建议。">
+				<ServiceInfoList
+					:items="[
+						{ label: '服务单号：', value: detail.caseNo },
+						{ label: '服务对象：', value: detail.elderName },
+						{ label: '申请服务：', value: detail.serviceName },
+						{ label: '预约上门：', value: detail.visitTime }
+					]"
+				></ServiceInfoList>
+			</ServicePanel>
+
+			<ServicePanel title="评估结果摘要">
+				<view class="summary-card">
+					<text class="summary-line">风险等级：{{ detail.riskLevel }}</text>
+					<text class="summary-line">护理等级：{{ detail.careLevel }}</text>
+					<text class="summary-line">结论摘要：{{ detail.assessmentSummary }}</text>
+				</view>
+			</ServicePanel>
+
+			<ServicePanel title="评估标签">
+				<view class="tag-row">
+					<view v-for="item in detail.requirementTags" :key="item" class="tag-item">{{ item }}</view>
+				</view>
+			</ServicePanel>
+		</view>
+	</ServicePageScaffold>
+</template>
+
+<script setup lang="uts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import ServiceInfoList from '@/components/homeService/ServiceInfoList.uvue'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
+import ServicePanel from '@/components/homeService/ServicePanel.uvue'
+import { fetchAdminAssessmentDetail } from '@/services/homeServiceService.uts'
+import { HomeServiceAssessmentType } from '@/types/home-service.uts'
+
+const caseId = ref('case-001')
+const detail = ref<HomeServiceAssessmentType | null>(null)
+
+async function loadData() {
+	detail.value = await fetchAdminAssessmentDetail(caseId.value)
+}
+
+onLoad((options) => {
+	const id = options['id']
+	if (id != null && id != '') {
+		caseId.value = id as string
+	}
+	loadData()
+})
+</script>
+
+<style scoped>
+.empty-box {
+	padding: 120rpx 0;
+	align-items: center;
+}
+
+.empty-text,
+.summary-line,
+.tag-item {
+	font-size: 28rpx;
+	line-height: 40rpx;
+	color: #16324f;
+}
+
+.summary-card {
+	padding: 24rpx;
+	border-radius: 20rpx;
+	background: #f8fbfc;
+}
+
+.summary-line + .summary-line {
+	margin-top: 12rpx;
+}
+
+.tag-row {
+	flex-direction: row;
+	flex-wrap: wrap;
+	gap: 16rpx;
+}
+
+.tag-item {
+	padding: 14rpx 20rpx;
+	border-radius: 999rpx;
+	background: #eef2f6;
+}
+</style>

pages/mall/consumer/home-service/feedback.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="验收反馈" fallback-url="/pages/mall/consumer/home-service/index">
 		<view v-if="detail == null" class="empty-box">
 			<text class="empty-text">未找到验收信息</text>
 		</view>
@@ -43,12 +43,13 @@
 				</view>
 			</ServicePanel>
 		</view>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import { fetchConsumerAcceptanceDetail, submitConsumerAcceptance } from '@/services/homeServiceService.uts'
 import { HomeServiceAcceptanceType } from '@/types/home-service.uts'

pages/mall/consumer/home-service/index.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="居家上门服务" fallback-url="/pages/main/index">
 		<view class="hero-card">
 			<text class="hero-title">居家上门服务</text>
 			<text class="hero-desc">覆盖服务申请、上门评估、执行跟踪与验收反馈，先用 mock 数据跑通前端闭环。</text>
@@ -39,12 +39,13 @@
 				<text class="case-info">服务地址：{{ item.address }}</text>
 			</view>
 		</ServicePanel>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
 import { fetchConsumerHomeServiceCases, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'

pages/mall/consumer/home-service/order-detail.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="服务单详情" fallback-url="/pages/mall/consumer/home-service/index">
 		<view v-if="detail == null" class="empty-box">
 			<text class="empty-text">未找到对应服务单</text>
 		</view>
@@ -35,12 +35,13 @@
 				<ServiceTimeline :items="detail.timeline"></ServiceTimeline>
 			</ServicePanel>
 		</view>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServiceInfoCard from '@/components/homeService/ServiceInfoCard.uvue'
 import ServiceInfoList from '@/components/homeService/ServiceInfoList.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'

pages/mall/consumer/home-service/service-plan.uvue

@@ -0,0 +1,87 @@
+<template>
+	<ServicePageScaffold title="服务方案" fallback-url="/pages/mall/consumer/home-service/index">
+		<view v-if="detail == null" class="empty-box">
+			<text class="empty-text">未找到服务方案</text>
+		</view>
+		<view v-else>
+			<ServicePanel title="服务方案" subtitle="查看服务频次、服务周期和执行建议。">
+				<ServiceInfoList
+					:items="[
+						{ label: '服务单号：', value: detail.caseNo },
+						{ label: '服务对象：', value: detail.elderName },
+						{ label: '服务类型：', value: detail.serviceName },
+						{ label: '方案标题：', value: detail.planTitle }
+					]"
+				></ServiceInfoList>
+			</ServicePanel>
+
+			<ServicePanel title="执行安排">
+				<view class="summary-card">
+					<text class="summary-line">服务频次：{{ detail.serviceFrequency }}</text>
+					<text class="summary-line">服务周期：{{ detail.serviceCycle }}</text>
+					<text class="summary-line">方案摘要：{{ detail.planSummary }}</text>
+				</view>
+			</ServicePanel>
+
+			<ServicePanel title="补充说明">
+				<view class="summary-card muted-card">
+					<text class="summary-line">执行建议：{{ detail.executorAdvice }}</text>
+					<text class="summary-line">收费说明：{{ detail.billingSummary }}</text>
+				</view>
+			</ServicePanel>
+		</view>
+	</ServicePageScaffold>
+</template>
+
+<script setup lang="uts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import ServiceInfoList from '@/components/homeService/ServiceInfoList.uvue'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
+import ServicePanel from '@/components/homeService/ServicePanel.uvue'
+import { fetchAdminServicePlanDetail } from '@/services/homeServiceService.uts'
+import { HomeServicePlanType } from '@/types/home-service.uts'
+
+const caseId = ref('case-001')
+const detail = ref<HomeServicePlanType | null>(null)
+
+async function loadData() {
+	detail.value = await fetchAdminServicePlanDetail(caseId.value)
+}
+
+onLoad((options) => {
+	const id = options['id']
+	if (id != null && id != '') {
+		caseId.value = id as string
+	}
+	loadData()
+})
+</script>
+
+<style scoped>
+.empty-box {
+	padding: 120rpx 0;
+	align-items: center;
+}
+
+.empty-text,
+.summary-line {
+	font-size: 28rpx;
+	line-height: 40rpx;
+	color: #16324f;
+}
+
+.summary-card {
+	padding: 24rpx;
+	border-radius: 20rpx;
+	background: #f8fbfc;
+}
+
+.muted-card {
+	background: #eef5fb;
+}
+
+.summary-line + .summary-line {
+	margin-top: 12rpx;
+}
+</style>

pages/mall/consumer/home-service/settlement-archive.uvue

@@ -0,0 +1,88 @@
+<template>
+	<ServicePageScaffold title="结算归档" fallback-url="/pages/mall/consumer/home-service/index">
+		<view v-if="detail == null" class="empty-box">
+			<text class="empty-text">未找到结算信息</text>
+		</view>
+		<view v-else>
+			<ServicePanel title="结算归档" subtitle="查看服务账单和归档状态。">
+				<ServiceInfoList
+					:items="[
+						{ label: '服务单号：', value: detail.caseNo },
+						{ label: '服务对象：', value: detail.elderName },
+						{ label: '账期：', value: detail.billingPeriod },
+						{ label: '归档状态：', value: detail.archiveStatusText }
+					]"
+				></ServiceInfoList>
+			</ServicePanel>
+
+			<ServicePanel title="费用明细">
+				<view class="amount-card">
+					<text class="amount-line">服务总额：{{ detail.totalAmount }}</text>
+					<text class="amount-line">长护险 / 补贴：{{ detail.insuranceAmount }}</text>
+					<text class="amount-line">个人自付：{{ detail.selfPayAmount }}</text>
+				</view>
+			</ServicePanel>
+
+			<ServicePanel title="归档说明">
+				<view class="archive-box">
+					<text class="archive-text">已包含执行记录、验收反馈、结算单与电子档案索引，方便家属追踪服务闭环。</text>
+				</view>
+			</ServicePanel>
+		</view>
+	</ServicePageScaffold>
+</template>
+
+<script setup lang="uts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import ServiceInfoList from '@/components/homeService/ServiceInfoList.uvue'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
+import ServicePanel from '@/components/homeService/ServicePanel.uvue'
+import { fetchAdminSettlementDetail } from '@/services/homeServiceService.uts'
+import { HomeServiceSettlementType } from '@/types/home-service.uts'
+
+const caseId = ref('case-001')
+const detail = ref<HomeServiceSettlementType | null>(null)
+
+async function loadData() {
+	detail.value = await fetchAdminSettlementDetail(caseId.value)
+}
+
+onLoad((options) => {
+	const id = options['id']
+	if (id != null && id != '') {
+		caseId.value = id as string
+	}
+	loadData()
+})
+</script>
+
+<style scoped>
+.empty-box {
+	padding: 120rpx 0;
+	align-items: center;
+}
+
+.empty-text,
+.amount-line,
+.archive-text {
+	font-size: 28rpx;
+	line-height: 40rpx;
+	color: #16324f;
+}
+
+.amount-card,
+.archive-box {
+	padding: 24rpx;
+	border-radius: 20rpx;
+	background: #f8fbfc;
+}
+
+.amount-line + .amount-line {
+	margin-top: 12rpx;
+}
+
+.archive-text {
+	color: #66788a;
+}
+</style>

pages/mall/merchant/home-service/check-in.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="到岗签到" fallback-url="/pages/mall/merchant/home-service/tasks">
 		<ServicePanel title="到岗签到" subtitle="先用 mock 方式记录签到结果、到岗说明和留痕提示。">
 			<text class="info">任务编号：{{ taskNo }}</text>
 			<text class="info">当前状态：{{ taskStatus }}</text>
@@ -17,12 +17,13 @@
 			</view>
 			<view class="submit-btn" @click="submitCheckIn">确认签到</view>
 		</ServicePanel>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import { fetchWorkerTaskDetail, submitWorkerCheckIn } from '@/services/homeServiceService.uts'
 

pages/mall/merchant/home-service/exception-report.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="异常上报" fallback-url="/pages/mall/merchant/home-service/tasks">
 		<ServicePanel title="异常上报" subtitle="先完成异常类型、说明和调度通知的 mock 处理。">
 			<text class="info">任务编号：{{ taskNo }}</text>
 			<view class="block">
@@ -26,12 +26,13 @@
 			</view>
 			<view class="submit-btn warn" @click="submitException">提交异常</view>
 		</ServicePanel>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import { fetchWorkerTaskDetail, submitWorkerException } from '@/services/homeServiceService.uts'
 

pages/mall/merchant/home-service/service-record.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="服务记录" fallback-url="/pages/mall/merchant/home-service/tasks">
 		<ServicePanel title="服务记录" subtitle="本页先记录执行摘要、服务步骤和后续待上传凭证占位。">
 			<text class="info">任务编号：{{ taskNo }}</text>
 			<view class="block">
@@ -16,12 +16,13 @@
 			</view>
 			<view class="submit-btn" @click="submitRecord">保存记录</view>
 		</ServicePanel>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import { fetchWorkerTaskDetail, submitWorkerServiceRecord } from '@/services/homeServiceService.uts'
 

pages/mall/merchant/home-service/task-detail.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="任务详情" fallback-url="/pages/mall/merchant/home-service/tasks">
 		<view v-if="detail == null" class="empty-box">
 			<text class="empty-text">未找到任务详情</text>
 		</view>
@@ -38,12 +38,13 @@
 				<ServiceTimeline :items="detail.timeline"></ServiceTimeline>
 			</ServicePanel>
 		</view>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServiceActionRow from '@/components/homeService/ServiceActionRow.uvue'
 import ServiceInfoCard from '@/components/homeService/ServiceInfoCard.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'

pages/mall/merchant/home-service/tasks.uvue

@@ -1,5 +1,5 @@
 <template>
-	<scroll-view class="page" scroll-y="true">
+	<ServicePageScaffold title="执行任务">
 		<ServicePanel title="执行任务" subtitle="按移动执行页风格，先做任务卡片与状态动作。">
 			<view v-for="item in tasks" :key="item.id" class="task-card" @click="goDetail(item.id)">
 				<view class="task-top">
@@ -15,12 +15,13 @@
 				<view class="action-btn">{{ item.actionText }}</view>
 			</view>
 		</ServicePanel>
-	</scroll-view>
+	</ServicePageScaffold>
 </template>
 
 <script setup lang="uts">
 import { ref } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
+import ServicePageScaffold from '@/components/homeService/ServicePageScaffold.uvue'
 import ServicePanel from '@/components/homeService/ServicePanel.uvue'
 import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
 import { fetchWorkerTasks } from '@/services/homeServiceService.uts'