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

<template>
	<ServicePageScaffold title="提交服务申请" fallback-url="/pages/mall/consumer/home-service/index">
		<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>
	</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'

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>
.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;
	font-size: 28rpx;
	color: #23384d;
	box-sizing: border-box;
}

.input {
	height: 84rpx;
	padding: 0 24rpx;
}

.textarea {
	padding: 22rpx 24rpx;
	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>