<template>
|
<view class="book-container">
|
<!-- 疫苗信息卡片 -->
|
<view class="vaccine-card card">
|
<image :src="vaccine.image" mode="aspectFill" class="vaccine-image" />
|
<view class="info">
|
<text class="name">{{ $t(vaccine.nameKey) }}</text>
|
<text class="desc">{{ $t(vaccine.descKey) }}</text>
|
<view class="price-info">
|
<text class="price" v-if="vaccine.price > 0">MOP {{ vaccine.price }}</text>
|
<text class="free" v-else>{{ $t('vaccine.free') }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 预约信息表单 -->
|
<view class="book-form card">
|
<view class="section-title">预约信息</view>
|
|
<!-- 接种人信息 -->
|
<view class="form-item">
|
<text class="label">接种人</text>
|
<view class="patient-select" @tap="showPatientSelect">
|
<text>{{ selectedPatient ? selectedPatient.name : '请选择接种人' }}</text>
|
<text class="iconfont icon-arrow-right"></text>
|
</view>
|
</view>
|
|
<!-- 接种日期 -->
|
<view class="form-item">
|
<text class="label">接种日期</text>
|
<view class="date-list">
|
<scroll-view scroll-x class="scroll-view" show-scrollbar="false">
|
<view
|
class="date-item"
|
v-for="(date, index) in availableDates"
|
:key="index"
|
:class="{ active: selectedDate === date.value }"
|
@tap="selectDate(date.value)"
|
>
|
<text class="week">{{ date.week }}</text>
|
<text class="day">{{ date.day }}</text>
|
<text class="month">{{ date.month }}月</text>
|
</view>
|
</scroll-view>
|
</view>
|
</view>
|
|
<!-- 接种时间段 -->
|
<view class="form-item">
|
<text class="label">接种时间</text>
|
<view class="time-grid">
|
<view
|
class="time-item"
|
v-for="(time, index) in availableTimes"
|
:key="index"
|
:class="{
|
active: selectedTime === time.value,
|
disabled: time.disabled
|
}"
|
@tap="selectTime(time)"
|
>
|
<text class="time-text">{{ time.label }}</text>
|
<text class="count" v-if="!time.disabled">剩余{{ time.count }}个</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 备注信息 -->
|
<view class="form-item">
|
<text class="label">备注信息</text>
|
<textarea
|
v-model="remark"
|
placeholder="请填写备注信息（选填）"
|
maxlength="200"
|
class="remark-input"
|
/>
|
<text class="word-count">{{ remark.length }}/200</text>
|
</view>
|
</view>
|
|
<!-- 接种须知 -->
|
<view class="notice-card card">
|
<view class="section-title">接种须知</view>
|
<view class="notice-list">
|
<view class="notice-item" v-for="(notice, index) in notices" :key="index">
|
<text class="dot">·</text>
|
<text class="text">{{ notice }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 底部操作栏 -->
|
<view class="bottom-bar">
|
<view class="price-info">
|
<text class="label">费用：</text>
|
<text class="price" v-if="vaccine.price > 0">MOP {{ vaccine.price }}</text>
|
<text class="free" v-else>{{ $t('vaccine.free') }}</text>
|
</view>
|
<button
|
class="submit-btn primary-btn"
|
:disabled="!canSubmit"
|
@tap="submitBooking"
|
>
|
确认预约
|
</button>
|
</view>
|
|
<!-- 选择接种人弹窗 -->
|
<uni-popup ref="patientPopup" type="bottom">
|
<view class="patient-popup">
|
<view class="popup-header">
|
<text class="title">选择接种人</text>
|
<text class="close" @tap="closePatientPopup">×</text>
|
</view>
|
<view class="patient-list">
|
<view
|
class="patient-item"
|
v-for="(patient, index) in patients"
|
:key="index"
|
:class="{ active: selectedPatientId === patient.id }"
|
@tap="selectPatient(patient)"
|
>
|
<view class="patient-info">
|
<text class="name">{{ patient.name }}</text>
|
<text class="id-card">{{ patient.idCard }}</text>
|
</view>
|
<text class="relation">{{ patient.relation }}</text>
|
</view>
|
<view class="add-patient" @tap="addNewPatient">
|
<text class="iconfont icon-add"></text>
|
<text>添加接种人</text>
|
</view>
|
</view>
|
<view class="popup-footer">
|
<button class="confirm-btn primary-btn" @tap="confirmPatient">
|
确认选择
|
</button>
|
</view>
|
</view>
|
</uni-popup>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, computed } from 'vue'
|
|
// 疫苗信息
|
const vaccine = ref({
|
id: 1,
|
nameKey: 'vaccine.list.covid.name',
|
descKey: 'vaccine.list.covid.desc',
|
image: '/static/vaccine/covid.jpg',
|
price: 0
|
})
|
|
// 可选日期
|
const availableDates = [
|
{ value: '2024-03-21', week: '周四', day: '21', month: '3' },
|
{ value: '2024-03-22', week: '周五', day: '22', month: '3' },
|
{ value: '2024-03-23', week: '周六', day: '23', month: '3' },
|
{ value: '2024-03-24', week: '周日', day: '24', month: '3' },
|
{ value: '2024-03-25', week: '周一', day: '25', month: '3' }
|
]
|
|
// 可选时间
|
const availableTimes = [
|
{ value: '0900', label: '09:00', count: 10 },
|
{ value: '0930', label: '09:30', count: 8 },
|
{ value: '1000', label: '10:00', count: 5 },
|
{ value: '1030', label: '10:30', disabled: true },
|
{ value: '1100', label: '11:00', count: 3 }
|
]
|
|
// 接种人列表
|
const patients = [
|
{ id: 1, name: '张三', idCard: '1234567890', relation: '本人' },
|
{ id: 2, name: '张小明', idCard: '0987654321', relation: '子女' }
|
]
|
|
// 接种须知
|
const notices = [
|
'请携带身份证件准时到达接种点',
|
'接种前请确保身体状况良好，无发热等症状',
|
'接种后需要留观30分钟',
|
'如有特殊情况请提前与工作人员沟通'
|
]
|
|
// 表单数据
|
const selectedDate = ref('')
|
const selectedTime = ref('')
|
const selectedPatient = ref(null)
|
const selectedPatientId = ref(null)
|
const remark = ref('')
|
|
// 弹窗引用
|
const patientPopup = ref(null)
|
|
// 是否可以提交
|
const canSubmit = computed(() => {
|
return selectedDate.value && selectedTime.value && selectedPatient.value
|
})
|
|
// 选择日期
|
const selectDate = (date) => {
|
selectedDate.value = date
|
}
|
|
// 选择时间
|
const selectTime = (time) => {
|
if (!time.disabled) {
|
selectedTime.value = time.value
|
}
|
}
|
|
// 显示选择接种人弹窗
|
const showPatientSelect = () => {
|
patientPopup.value?.open()
|
}
|
|
// 关闭选择接种人弹窗
|
const closePatientPopup = () => {
|
patientPopup.value?.close()
|
}
|
|
// 选择接种人
|
const selectPatient = (patient) => {
|
selectedPatientId.value = patient.id
|
}
|
|
// 确认选择接种人
|
const confirmPatient = () => {
|
if (selectedPatientId.value) {
|
selectedPatient.value = patients.find(p => p.id === selectedPatientId.value)
|
closePatientPopup()
|
}
|
}
|
|
// 添加新接种人
|
const addNewPatient = () => {
|
uni.navigateTo({
|
url: '/pages/patient/add'
|
})
|
}
|
|
// 提交预约
|
const submitBooking = () => {
|
if (!canSubmit.value) return
|
|
uni.showLoading({
|
title: '提交中...'
|
})
|
|
// 模拟提交
|
setTimeout(() => {
|
uni.hideLoading()
|
uni.showModal({
|
title: '预约成功',
|
content: '您的疫苗预约已提交成功',
|
showCancel: false,
|
success: () => {
|
uni.navigateBack()
|
}
|
})
|
}, 1500)
|
}
|
</script>
|
|
<style lang="scss">
|
.book-container {
|
min-height: 100vh;
|
padding-bottom: 120rpx;
|
|
.vaccine-card {
|
display: flex;
|
margin: 20rpx;
|
|
.vaccine-image {
|
width: 160rpx;
|
height: 120rpx;
|
border-radius: $radius-md;
|
margin-right: 20rpx;
|
object-fit: cover;
|
}
|
|
.info {
|
flex: 1;
|
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 10rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-bottom: 16rpx;
|
display: block;
|
}
|
|
.price-info {
|
.price {
|
font-size: 32rpx;
|
color: $danger;
|
font-weight: bold;
|
}
|
|
.free {
|
font-size: 32rpx;
|
color: $success;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
|
.book-form {
|
margin: 20rpx;
|
|
.form-item {
|
margin-bottom: 30rpx;
|
|
.label {
|
font-size: 28rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 16rpx;
|
display: block;
|
}
|
|
.patient-select {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 88rpx;
|
padding: 0 30rpx;
|
background: $bg-color;
|
border-radius: $radius-md;
|
|
text {
|
font-size: 28rpx;
|
color: $text-regular;
|
|
&.icon-arrow-right {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.date-list {
|
.scroll-view {
|
white-space: nowrap;
|
margin: 0 -30rpx;
|
padding: 0 30rpx;
|
}
|
|
.date-item {
|
display: inline-flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 20rpx 30rpx;
|
margin-right: 20rpx;
|
background: $bg-color;
|
border-radius: $radius-md;
|
transition: all 0.3s;
|
|
&.active {
|
background: $primary-color;
|
|
text {
|
color: #fff;
|
}
|
}
|
|
.week {
|
font-size: 24rpx;
|
color: $text-regular;
|
margin-bottom: 8rpx;
|
}
|
|
.day {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 4rpx;
|
}
|
|
.month {
|
font-size: 22rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.time-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 20rpx;
|
|
.time-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 20rpx;
|
background: $bg-color;
|
border-radius: $radius-md;
|
transition: all 0.3s;
|
|
&.active {
|
background: $primary-color;
|
|
text {
|
color: #fff;
|
}
|
}
|
|
&.disabled {
|
opacity: 0.5;
|
|
text {
|
color: $text-secondary;
|
}
|
}
|
|
.time-text {
|
font-size: 28rpx;
|
color: $text-primary;
|
margin-bottom: 8rpx;
|
}
|
|
.count {
|
font-size: 22rpx;
|
color: $text-regular;
|
}
|
}
|
}
|
|
.remark-input {
|
width: 100%;
|
height: 160rpx;
|
padding: 20rpx;
|
background: $bg-color;
|
border-radius: $radius-md;
|
font-size: 28rpx;
|
color: $text-primary;
|
}
|
|
.word-count {
|
font-size: 24rpx;
|
color: $text-secondary;
|
text-align: right;
|
margin-top: 8rpx;
|
display: block;
|
}
|
}
|
}
|
|
.notice-card {
|
margin: 20rpx;
|
|
.notice-list {
|
.notice-item {
|
display: flex;
|
margin-bottom: 16rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.dot {
|
margin-right: 8rpx;
|
color: $primary-color;
|
}
|
|
.text {
|
flex: 1;
|
font-size: 26rpx;
|
color: $text-regular;
|
line-height: 1.6;
|
}
|
}
|
}
|
}
|
|
.bottom-bar {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 30rpx;
|
background: #fff;
|
box-shadow: $shadow-lg;
|
|
.price-info {
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-right: 10rpx;
|
}
|
|
.price {
|
font-size: 32rpx;
|
color: $danger;
|
font-weight: bold;
|
}
|
|
.free {
|
font-size: 32rpx;
|
color: $success;
|
font-weight: bold;
|
}
|
}
|
|
.submit-btn {
|
width: 240rpx;
|
}
|
}
|
}
|
|
.patient-popup {
|
background: #fff;
|
border-radius: $radius-lg $radius-lg 0 0;
|
|
.popup-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 30rpx;
|
border-bottom: 1rpx solid #eee;
|
|
.title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
|
.close {
|
font-size: 40rpx;
|
color: $text-secondary;
|
padding: 0 20rpx;
|
}
|
}
|
|
.patient-list {
|
padding: 20rpx 30rpx;
|
max-height: 60vh;
|
overflow-y: auto;
|
|
.patient-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx;
|
margin-bottom: 20rpx;
|
background: $bg-color;
|
border-radius: $radius-md;
|
transition: all 0.3s;
|
|
&.active {
|
background: $primary-light;
|
|
.patient-info {
|
.name {
|
color: $primary-color;
|
}
|
}
|
}
|
|
.patient-info {
|
.name {
|
font-size: 30rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.id-card {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.relation {
|
font-size: 26rpx;
|
color: $text-regular;
|
background: #fff;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
}
|
}
|
|
.add-patient {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
padding: 30rpx;
|
background: $bg-color;
|
border-radius: $radius-md;
|
border: 2rpx dashed $text-secondary;
|
|
.icon-add {
|
font-size: 32rpx;
|
color: $text-secondary;
|
margin-right: 8rpx;
|
}
|
|
text {
|
font-size: 28rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.popup-footer {
|
padding: 20rpx 30rpx;
|
border-top: 1rpx solid #eee;
|
|
.confirm-btn {
|
width: 100%;
|
}
|
}
|
}
|
</style>
|
