comclib
c02029a5f3
- Spring Boot 后端服务 (hss-home-service) - delivery-miniapp 配送小程序 - website 官网 (Nuxt) - docs 架构设计文档 - Docker 容器化部署配置 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
55 lines
3.7 KiB
Vue
55 lines
3.7 KiB
Vue
<script setup lang="ts">
|
||
import { useLeadForm } from '~/composables/useLeadForm'
|
||
const { form, loading, success, error, submit } = useLeadForm('demo')
|
||
|
||
const focusAreas = ['政府监管', '医院延续护理', '养老机构上门服务', '社区居家照护', '长护险管理', '其他']
|
||
</script>
|
||
|
||
<template>
|
||
<div class="max-w-lg mx-auto">
|
||
<form v-if="!success" @submit.prevent="submit" class="space-y-5">
|
||
<div>
|
||
<label class="block text-sm font-medium mb-1 text-left">姓名 <span class="text-red-500">*</span></label>
|
||
<input v-model="form.name" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all" placeholder="您的姓名" />
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-1 text-left">单位名称 <span class="text-red-500">*</span></label>
|
||
<input v-model="form.orgName" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all" placeholder="您所在的单位" />
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-1 text-left">职务</label>
|
||
<input v-model="form.position" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all" placeholder="您的职务/角色" />
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-1 text-left">手机号 <span class="text-red-500">*</span></label>
|
||
<input v-model="form.phone" type="tel" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all" placeholder="您的手机号" />
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-1 text-left">所在城市</label>
|
||
<input v-model="form.city" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all" placeholder="城市" />
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-1 text-left">关注方向</label>
|
||
<select v-model="form.focusArea" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all">
|
||
<option value="">请选择</option>
|
||
<option v-for="a in focusAreas" :key="a" :value="a">{{ a }}</option>
|
||
</select>
|
||
</div>
|
||
<div>
|
||
<label class="block text-sm font-medium mb-1 text-left">留言需求</label>
|
||
<textarea v-model="form.message" rows="3" class="w-full px-4 py-3 rounded-xl border border-gray-200 focus:border-primary focus:ring-2 focus:ring-primary-50 outline-none transition-all resize-none" placeholder="请简要描述您的需求"></textarea>
|
||
</div>
|
||
<p v-if="error" class="text-red-500 text-sm">{{ error }}</p>
|
||
<button type="submit" :disabled="loading"
|
||
class="w-full px-6 py-3 bg-cta text-white rounded-xl font-semibold hover:bg-cta-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed">
|
||
{{ loading ? '提交中...' : '提交预约' }}
|
||
</button>
|
||
</form>
|
||
<div v-else class="text-center py-12">
|
||
<div class="w-16 h-16 mx-auto mb-4 rounded-full bg-green-100 text-green-500 flex items-center justify-center"><svg class="w-10 h-10" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path d="M5 13l4 4L19 7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
||
<h3 class="text-2xl font-bold mb-2">提交成功</h3>
|
||
<p class="text-text-secondary">感谢您的关注，我们将尽快与您联系。</p>
|
||
</div>
|
||
</div>
|
||
</template>
|