完成consumer端同步

.consumer-sync-backup/20260514-093851/pages/mall/consumer/home-service/index.uvue

@@ -0,0 +1,161 @@
+<template>
+	<scroll-view class="page" scroll-y="true">
+		<view class="hero-card">
+			<text class="hero-title">居家上门服务</text>
+			<text class="hero-desc">覆盖服务申请、上门评估、执行跟踪与验收反馈，先用 mock 数据跑通前端闭环。</text>
+			<view class="hero-actions">
+				<view class="primary-btn" @click="goApply">立即申请</view>
+			</view>
+		</view>
+
+		<ServicePanel title="推荐服务" subtitle="适老化信息更清晰，入口更聚焦。">
+			<view v-for="item in services" :key="item.id" class="service-card">
+				<view class="service-top">
+					<view>
+						<text class="service-name">{{ item.name }}</text>
+						<text class="service-meta">{{ item.category }} · {{ item.durationText }}</text>
+					</view>
+					<text class="service-price">¥{{ item.price }}</text>
+				</view>
+				<text class="service-summary">{{ item.summary }}</text>
+				<text class="service-suitable">适用对象：{{ item.suitableFor }}</text>
+			</view>
+		</ServicePanel>
+
+		<ServicePanel title="我的服务单" subtitle="先展示待派单和服务中的 mock 单据。">
+			<view v-if="cases.length == 0" class="empty-box">
+				<text class="empty-text">当前没有服务单</text>
+			</view>
+			<view v-for="item in cases" :key="item.id" class="case-card" @click="goDetail(item.id)">
+				<view class="case-row">
+					<view>
+						<text class="case-title">{{ item.serviceName }}</text>
+						<text class="case-no">{{ item.caseNo }}</text>
+					</view>
+					<ServiceStatusTag :text="item.statusText" :tone="item.statusTone"></ServiceStatusTag>
+				</view>
+				<text class="case-info">服务对象：{{ item.elderName }}，{{ item.age }} 岁</text>
+				<text class="case-info">上门时间：{{ item.serviceTime }}</text>
+				<text class="case-info">服务地址：{{ item.address }}</text>
+			</view>
+		</ServicePanel>
+	</scroll-view>
+</template>
+
+<script setup lang="uts">
+import { ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import ServicePanel from '@/components/homeService/ServicePanel.uvue'
+import ServiceStatusTag from '@/components/homeService/ServiceStatusTag.uvue'
+import { fetchConsumerHomeServiceCases, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
+import { HomeServiceCatalogType, HomeServiceCaseType } from '@/types/home-service.uts'
+
+const services = ref<Array<HomeServiceCatalogType>>([])
+const cases = ref<Array<HomeServiceCaseType>>([])
+
+async function loadData() {
+	services.value = await fetchHomeServiceCatalog()
+	cases.value = await fetchConsumerHomeServiceCases()
+}
+
+function goApply() {
+	uni.navigateTo({ url: '/pages/mall/consumer/home-service/apply' })
+}
+
+function goDetail(caseId: string) {
+	uni.navigateTo({ url: '/pages/mall/consumer/home-service/order-detail?id=' + caseId })
+}
+
+onLoad(() => {
+	loadData()
+})
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	background: #f3f7f9;
+	padding: 24rpx;
+	box-sizing: border-box;
+}
+
+.hero-card {
+	background: linear-gradient(135deg, #0f766e, #1d4ed8);
+	border-radius: 28rpx;
+	padding: 32rpx;
+	margin-bottom: 24rpx;
+}
+
+.hero-title {
+	font-size: 40rpx;
+	font-weight: 700;
+	color: #ffffff;
+	line-height: 56rpx;
+}
+
+.hero-desc {
+	margin-top: 16rpx;
+	font-size: 28rpx;
+	line-height: 40rpx;
+	color: rgba(255, 255, 255, 0.9);
+}
+
+.hero-actions {
+	margin-top: 28rpx;
+}
+
+.primary-btn {
+	background: #ffffff;
+	color: #0f3d66;
+	font-size: 30rpx;
+	font-weight: 700;
+	text-align: center;
+	padding: 24rpx 0;
+	border-radius: 18rpx;
+}
+
+.service-card,
+.case-card {
+	padding: 24rpx;
+	border-radius: 20rpx;
+	background: #f8fbfc;
+	margin-bottom: 20rpx;
+}
+
+.service-top,
+.case-row {
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+
+.service-name,
+.case-title {
+	font-size: 32rpx;
+	font-weight: 700;
+	color: #16324f;
+}
+
+.service-meta,
+.case-no,
+.case-info,
+.service-summary,
+.service-suitable,
+.empty-text {
+	margin-top: 10rpx;
+	font-size: 26rpx;
+	line-height: 38rpx;
+	color: #66788a;
+}
+
+.service-price {
+	font-size: 34rpx;
+	font-weight: 700;
+	color: #0f766e;
+}
+
+.empty-box {
+	padding: 40rpx 0;
+	align-items: center;
+}
+</style>