304 lines
14 KiB
Vue
304 lines
14 KiB
Vue
<template>
|
||
<PageContainer>
|
||
<div class="project-quotes-page">
|
||
<PageHeader title="项目报价" description="选择报价类型并填写表单获取报价" />
|
||
<div class="page-body">
|
||
<section class="section">
|
||
<div class="quotes-cards-grid">
|
||
<!-- PV报价卡片 -->
|
||
<div class="quote-card" :class="{ expanded: expandedCard === 'pv' }">
|
||
<div class="quote-card-header" @click="toggleCard('pv')">
|
||
<div class="quote-card-icon">📊</div>
|
||
<div class="quote-card-title-wrap">
|
||
<h3>PV报价</h3>
|
||
<p>药物警戒服务报价咨询</p>
|
||
</div>
|
||
<span class="quote-card-arrow">{{ expandedCard === 'pv' ? '▼' : '▶' }}</span>
|
||
</div>
|
||
<div v-show="expandedCard === 'pv'" class="quote-card-body">
|
||
<form class="quote-form" @submit.prevent="handlePvSubmit">
|
||
<div class="form-group">
|
||
<label for="pv-name">姓名 <span class="required">*</span></label>
|
||
<input id="pv-name" v-model="pvForm.name" type="text" placeholder="请输入姓名" required />
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="pv-email">电子邮箱 <span class="required">*</span></label>
|
||
<input id="pv-email" v-model="pvForm.email" type="email" placeholder="请输入电子邮箱" required />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pv-phone">联系电话 <span class="required">*</span></label>
|
||
<input id="pv-phone" v-model="pvForm.phone" type="tel" placeholder="请输入联系电话" required />
|
||
</div>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="pv-company">公司 <span class="required">*</span></label>
|
||
<input id="pv-company" v-model="pvForm.company" type="text" placeholder="请输入公司名称" required />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pv-position">职位</label>
|
||
<input id="pv-position" v-model="pvForm.position" type="text" placeholder="请输入职位" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pv-question">业务相关问题 <span class="required">*</span></label>
|
||
<textarea id="pv-question" v-model="pvForm.question" placeholder="请描述您的业务问题或需求" rows="4" required></textarea>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="pv-captcha">验证码 <span class="required">*</span></label>
|
||
<div class="captcha-row">
|
||
<input id="pv-captcha" v-model="pvForm.captcha" type="text" placeholder="请输入验证码" maxlength="4" required />
|
||
<span class="captcha-code">{{ captchaCode }}</span>
|
||
<button type="button" class="btn-captcha-refresh" @click="refreshCaptcha">刷新</button>
|
||
</div>
|
||
</div>
|
||
<div class="privacy-commitment">
|
||
<label class="privacy-checkbox-label">
|
||
<input type="checkbox" v-model="pvPrivacyAgreed" required />
|
||
<span>我已阅读并理解该承诺、声明</span>
|
||
</label>
|
||
<p>达诺/华泰经纪及RMO生态成员承诺对您在本网页下提供的任何信息，包括您的个人信息将按照相关的法律法规及泰格医药《隐私政策》的规定进行严格保密。更多信息，详见<RouterLink to="/privacy-policy" target="_blank">《隐私政策》</RouterLink></p>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary" :disabled="pvSubmitting || !pvPrivacyAgreed">
|
||
{{ pvSubmitting ? '提交中...' : '提交' }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 临床试验保险报价卡片 -->
|
||
<div class="quote-card" :class="{ expanded: expandedCard === 'clinical' }">
|
||
<div class="quote-card-header" @click="toggleCard('clinical')">
|
||
<div class="quote-card-icon">🛡️</div>
|
||
<div class="quote-card-title-wrap">
|
||
<h3>临床试验保险报价</h3>
|
||
<p>临床试验责任保险报价咨询</p>
|
||
</div>
|
||
<span class="quote-card-arrow">{{ expandedCard === 'clinical' ? '▼' : '▶' }}</span>
|
||
</div>
|
||
<div v-show="expandedCard === 'clinical'" class="quote-card-body">
|
||
<form class="quote-form" @submit.prevent="handleClinicalSubmit">
|
||
<div class="form-group">
|
||
<label for="clinical-projectType">项目类型</label>
|
||
<select id="clinical-projectType" v-model="clinicalForm.projectType">
|
||
<option value="">请选择</option>
|
||
<option value="phase1">I期临床试验</option>
|
||
<option value="phase2">II期临床试验</option>
|
||
<option value="phase3">III期临床试验</option>
|
||
<option value="phase4">IV期临床试验</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="clinical-riskLevel">风险等级</label>
|
||
<select id="clinical-riskLevel" v-model="clinicalForm.riskLevel">
|
||
<option value="">请选择</option>
|
||
<option value="low">低风险</option>
|
||
<option value="medium">中风险</option>
|
||
<option value="high">高风险</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="clinical-coverage">保障金额（元）</label>
|
||
<input id="clinical-coverage" v-model="clinicalForm.coverageAmount" type="number" placeholder="请输入保障金额" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="clinical-participants">受试者人数</label>
|
||
<input id="clinical-participants" v-model="clinicalForm.participantCount" type="number" placeholder="请输入受试者人数" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="clinical-duration">试验周期（月）</label>
|
||
<input id="clinical-duration" v-model="clinicalForm.duration" type="number" placeholder="请输入试验周期" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="clinical-remark">备注说明</label>
|
||
<textarea id="clinical-remark" v-model="clinicalForm.remark" placeholder="请输入其他需求说明" rows="3"></textarea>
|
||
</div>
|
||
<div class="privacy-commitment">
|
||
<label class="privacy-checkbox-label">
|
||
<input type="checkbox" v-model="clinicalPrivacyAgreed" required />
|
||
<span>我已阅读并理解该承诺、声明</span>
|
||
</label>
|
||
<p>达诺/华泰经纪及RMO生态成员承诺对您在本网页下提供的任何信息，包括您的个人信息将按照相关的法律法规及泰格医药《隐私政策》的规定进行严格保密。更多信息，详见<RouterLink to="/privacy-policy" target="_blank">《隐私政策》</RouterLink></p>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary" :disabled="clinicalSubmitting || !clinicalPrivacyAgreed">
|
||
{{ clinicalSubmitting ? '提交中...' : '提交' }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 产品责任保险报价卡片 -->
|
||
<div class="quote-card" :class="{ expanded: expandedCard === 'product' }">
|
||
<div class="quote-card-header" @click="toggleCard('product')">
|
||
<div class="quote-card-icon">💼</div>
|
||
<div class="quote-card-title-wrap">
|
||
<h3>产品责任保险报价</h3>
|
||
<p>上市后产品责任保险报价咨询</p>
|
||
</div>
|
||
<span class="quote-card-arrow">{{ expandedCard === 'product' ? '▼' : '▶' }}</span>
|
||
</div>
|
||
<div v-show="expandedCard === 'product'" class="quote-card-body">
|
||
<form class="quote-form" @submit.prevent="handleProductSubmit">
|
||
<div class="form-group">
|
||
<label for="product-productName">产品名称</label>
|
||
<input id="product-productName" v-model="productForm.productName" type="text" placeholder="请输入产品名称" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="product-productType">产品类型</label>
|
||
<select id="product-productType" v-model="productForm.productType">
|
||
<option value="">请选择</option>
|
||
<option value="drug">药品</option>
|
||
<option value="device">医疗器械</option>
|
||
<option value="other">其他</option>
|
||
</select>
|
||
</div>
|
||
<div class="form-row">
|
||
<div class="form-group">
|
||
<label for="product-coverage">保障金额（元）</label>
|
||
<input id="product-coverage" v-model="productForm.coverageAmount" type="number" placeholder="请输入保障金额" />
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="product-sales">年销售额（元）</label>
|
||
<input id="product-sales" v-model="productForm.annualSales" type="number" placeholder="请输入年销售额" />
|
||
</div>
|
||
</div>
|
||
<div class="form-group">
|
||
<label for="product-remark">备注说明</label>
|
||
<textarea id="product-remark" v-model="productForm.remark" placeholder="请输入其他需求说明" rows="3"></textarea>
|
||
</div>
|
||
<div class="privacy-commitment">
|
||
<label class="privacy-checkbox-label">
|
||
<input type="checkbox" v-model="productPrivacyAgreed" required />
|
||
<span>我已阅读并理解该承诺、声明</span>
|
||
</label>
|
||
<p>达诺/华泰经纪及RMO生态成员承诺对您在本网页下提供的任何信息，包括您的个人信息将按照相关的法律法规及泰格医药《隐私政策》的规定进行严格保密。更多信息，详见<RouterLink to="/privacy-policy" target="_blank">《隐私政策》</RouterLink></p>
|
||
</div>
|
||
<div class="form-actions">
|
||
<button type="submit" class="btn btn-primary" :disabled="productSubmitting || !productPrivacyAgreed">
|
||
{{ productSubmitting ? '提交中...' : '提交' }}
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</PageContainer>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted } from 'vue'
|
||
import PageContainer from '@/components/PageContainer.vue'
|
||
import PageHeader from '@/components/PageHeader.vue'
|
||
|
||
type ExpandedCard = 'pv' | 'clinical' | 'product' | null
|
||
|
||
const expandedCard = ref<ExpandedCard>('pv')
|
||
|
||
const pvForm = ref({
|
||
name: '',
|
||
email: '',
|
||
phone: '',
|
||
company: '',
|
||
position: '',
|
||
question: '',
|
||
captcha: ''
|
||
})
|
||
|
||
const clinicalForm = ref({
|
||
projectType: '',
|
||
riskLevel: '',
|
||
coverageAmount: '',
|
||
participantCount: '',
|
||
duration: '',
|
||
remark: ''
|
||
})
|
||
|
||
const productForm = ref({
|
||
productName: '',
|
||
productType: '',
|
||
coverageAmount: '',
|
||
annualSales: '',
|
||
remark: ''
|
||
})
|
||
|
||
const captchaCode = ref('')
|
||
const pvPrivacyAgreed = ref(false)
|
||
const clinicalPrivacyAgreed = ref(false)
|
||
const productPrivacyAgreed = ref(false)
|
||
const pvSubmitting = ref(false)
|
||
const clinicalSubmitting = ref(false)
|
||
const productSubmitting = ref(false)
|
||
|
||
function generateCaptcha() {
|
||
captchaCode.value = Math.random().toString(36).slice(2, 6).toUpperCase()
|
||
}
|
||
|
||
function refreshCaptcha() {
|
||
generateCaptcha()
|
||
}
|
||
|
||
onMounted(() => {
|
||
generateCaptcha()
|
||
})
|
||
|
||
function toggleCard(card: ExpandedCard) {
|
||
expandedCard.value = expandedCard.value === card ? null : card
|
||
}
|
||
|
||
async function handlePvSubmit() {
|
||
if (pvForm.value.captcha.toUpperCase() !== captchaCode.value) {
|
||
alert('验证码错误，请重新输入')
|
||
refreshCaptcha()
|
||
return
|
||
}
|
||
pvSubmitting.value = true
|
||
try {
|
||
await new Promise(r => setTimeout(r, 800))
|
||
alert('PV报价提交成功！我们会尽快与您联系。')
|
||
pvForm.value = { name: '', email: '', phone: '', company: '', position: '', question: '', captcha: '' }
|
||
pvPrivacyAgreed.value = false
|
||
refreshCaptcha()
|
||
} finally {
|
||
pvSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
async function handleClinicalSubmit() {
|
||
clinicalSubmitting.value = true
|
||
try {
|
||
await new Promise(r => setTimeout(r, 800))
|
||
alert('临床试验保险报价提交成功！我们会尽快与您联系。')
|
||
clinicalForm.value = { projectType: '', riskLevel: '', coverageAmount: '', participantCount: '', duration: '', remark: '' }
|
||
clinicalPrivacyAgreed.value = false
|
||
} finally {
|
||
clinicalSubmitting.value = false
|
||
}
|
||
}
|
||
|
||
async function handleProductSubmit() {
|
||
productSubmitting.value = true
|
||
try {
|
||
await new Promise(r => setTimeout(r, 800))
|
||
alert('产品责任保险报价提交成功！我们会尽快与您联系。')
|
||
productForm.value = { productName: '', productType: '', coverageAmount: '', annualSales: '', remark: '' }
|
||
productPrivacyAgreed.value = false
|
||
} finally {
|
||
productSubmitting.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
@import '@/pages/dashboard/ProjectQuotes.css';
|
||
</style>
|