完成consumer端同步

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

@@ -0,0 +1,182 @@
+<template>
+	<scroll-view class="page" scroll-y="true">
+		<ServicePanel title="提交服务申请" subtitle="先使用 mock 数据模拟申请受理流程。">
+			<view class="form-item">
+				<text class="label">选择服务</text>
+				<view class="choice-wrap">
+					<view
+						v-for="item in services"
+						:key="item.id"
+						class="choice-card"
+						:class="selectedServiceId == item.id ? 'choice-active' : ''"
+						@click="selectService(item.id, item.name)"
+					>
+						<text class="choice-title">{{ item.name }}</text>
+						<text class="choice-desc">{{ item.durationText }} · ¥{{ item.price }}</text>
+					</view>
+				</view>
+			</view>
+
+			<view class="form-item">
+				<text class="label">申请人</text>
+				<input v-model="form.applicantName" class="input" placeholder="请输入申请人姓名" />
+			</view>
+			<view class="form-item">
+				<text class="label">服务对象</text>
+				<input v-model="form.elderName" class="input" placeholder="请输入老人姓名" />
+			</view>
+			<view class="form-item">
+				<text class="label">年龄</text>
+				<input v-model="ageText" class="input" type="number" placeholder="请输入老人年龄" />
+			</view>
+			<view class="form-item">
+				<text class="label">联系电话</text>
+				<input v-model="form.phone" class="input" type="number" placeholder="请输入联系电话" />
+			</view>
+			<view class="form-item">
+				<text class="label">服务地址</text>
+				<textarea v-model="form.address" class="textarea" placeholder="请输入详细上门地址"></textarea>
+			</view>
+			<view class="form-item">
+				<text class="label">期望时间</text>
+				<input v-model="form.preferredTime" class="input" placeholder="例如 2026-05-14 上午" />
+			</view>
+			<view class="form-item">
+				<text class="label">需求说明</text>
+				<textarea v-model="form.demandSummary" class="textarea" placeholder="简要描述照护需求、病情重点、注意事项"></textarea>
+			</view>
+
+			<view class="submit-btn" @click="submitApplication">提交申请</view>
+		</ServicePanel>
+	</scroll-view>
+</template>
+
+<script setup lang="uts">
+import { reactive, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import ServicePanel from '@/components/homeService/ServicePanel.uvue'
+import { createHomeServiceApplication, fetchHomeServiceCatalog } from '@/services/homeServiceService.uts'
+import { HomeServiceApplicationDraftType, HomeServiceCatalogType } from '@/types/home-service.uts'
+
+const services = ref<Array<HomeServiceCatalogType>>([])
+const selectedServiceId = ref('svc-001')
+const selectedServiceName = ref('基础上门护理')
+const ageText = ref('78')
+
+const form = reactive({
+	serviceId: 'svc-001',
+	serviceName: '基础上门护理',
+	applicantName: '李晓兰',
+	elderName: '李奶奶',
+	age: 78,
+	phone: '13800138000',
+	address: '梅州市梅江区学海路 18 号 2 栋 602',
+	preferredTime: '2026-05-14 上午',
+	demandSummary: '老人需要基础照护、血压监测和跌倒风险提醒。'
+} as HomeServiceApplicationDraftType)
+
+async function loadData() {
+	services.value = await fetchHomeServiceCatalog()
+}
+
+function selectService(serviceId: string, serviceName: string) {
+	selectedServiceId.value = serviceId
+	selectedServiceName.value = serviceName
+	form.serviceId = serviceId
+	form.serviceName = serviceName
+}
+
+async function submitApplication() {
+	if (form.applicantName == '' || form.elderName == '' || form.phone == '' || form.address == '' || form.preferredTime == '') {
+		uni.showToast({ title: '请补全申请信息', icon: 'none' })
+		return
+	}
+
+	const parsedAge = parseInt(ageText.value)
+	form.age = isNaN(parsedAge) ? 0 : parsedAge
+	const created = await createHomeServiceApplication(form)
+	uni.showToast({ title: '申请已提交', icon: 'success' })
+	uni.navigateTo({ url: '/pages/mall/consumer/home-service/order-detail?id=' + created.id })
+}
+
+onLoad(() => {
+	loadData()
+})
+</script>
+
+<style scoped>
+.page {
+	min-height: 100vh;
+	background: #f3f7f9;
+	padding: 24rpx;
+	box-sizing: border-box;
+}
+
+.form-item {
+	margin-bottom: 24rpx;
+}
+
+.label {
+	font-size: 28rpx;
+	font-weight: 700;
+	color: #16324f;
+	margin-bottom: 12rpx;
+}
+
+.input,
+.textarea {
+	width: 100%;
+	background: #f8fbfc;
+	border-radius: 18rpx;
+	padding: 22rpx 24rpx;
+	font-size: 28rpx;
+	color: #23384d;
+	box-sizing: border-box;
+}
+
+.textarea {
+	height: 160rpx;
+}
+
+.choice-wrap {
+	gap: 16rpx;
+}
+
+.choice-card {
+	padding: 22rpx;
+	background: #f8fbfc;
+	border-radius: 18rpx;
+	margin-bottom: 16rpx;
+	border-width: 2rpx;
+	border-style: solid;
+	border-color: transparent;
+}
+
+.choice-active {
+	border-color: #0f766e;
+	background: #effcf8;
+}
+
+.choice-title {
+	font-size: 30rpx;
+	font-weight: 700;
+	color: #16324f;
+}
+
+.choice-desc {
+	margin-top: 8rpx;
+	font-size: 24rpx;
+	color: #66788a;
+}
+
+.submit-btn {
+	margin-top: 16rpx;
+	padding: 26rpx 0;
+	border-radius: 20rpx;
+	background: #0f766e;
+	text-align: center;
+	font-size: 30rpx;
+	font-weight: 700;
+	color: #ffffff;
+}
+</style>