<template>
|
<view class="patient-form">
|
<!-- 基本信息表单 -->
|
<view class="form-card">
|
<view class="section-title">基本信息</view>
|
<view class="form-item">
|
<text class="label required">姓名</text>
|
<input
|
type="text"
|
v-model="form.name"
|
placeholder="请输入就诊人姓名"
|
maxlength="20"
|
/>
|
</view>
|
|
<view class="form-item">
|
<text class="label">证件类型</text>
|
<view class="value-text">{{ getIdTypeLabel(form.idType) }}</view>
|
</view>
|
|
<view class="form-item">
|
<text class="label">证件号码</text>
|
<view class="value-text">{{ maskIdNumber(form.idNumber) }}</view>
|
</view>
|
|
<view class="form-item">
|
<text class="label required">与本人关系</text>
|
<picker
|
mode="selector"
|
:range="relations"
|
range-key="label"
|
@change="onRelationChange"
|
>
|
<view class="picker">
|
<text>{{ selectedRelation?.label || '请选择关系' }}</text>
|
<text class="iconfont icon-arrow-right"></text>
|
</view>
|
</picker>
|
</view>
|
</view>
|
|
<!-- 就诊卡信息 -->
|
<view class="form-card">
|
<view class="section-title">就诊卡信息</view>
|
<view class="form-item">
|
<text class="label">就诊卡号</text>
|
<view class="value-text">{{ form.cardNo || '暂未绑定就诊卡' }}</view>
|
</view>
|
<view class="form-item">
|
<text class="label required">手机号码</text>
|
<input
|
type="number"
|
v-model="form.phone"
|
placeholder="请输入手机号码"
|
maxlength="11"
|
/>
|
</view>
|
</view>
|
|
<!-- 其他设置 -->
|
<view class="form-card">
|
<view class="switch-item">
|
<text>设为默认就诊人</text>
|
<switch
|
:checked="form.isDefault"
|
@change="e => form.isDefault = e.detail.value"
|
color="#0f95b0"
|
:disabled="form.isDefault"
|
/>
|
</view>
|
</view>
|
|
<!-- 底部按钮 -->
|
<view class="bottom-bar">
|
<button
|
class="submit-btn primary-btn"
|
:disabled="!canSubmit"
|
@tap="submitForm"
|
>保存</button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, computed, onMounted } from 'vue'
|
|
// 关系选项
|
const relations = [
|
{ value: 'self', label: '本人' },
|
{ value: 'parent', label: '父母' },
|
{ value: 'child', label: '子女' },
|
{ value: 'spouse', label: '配偶' },
|
{ value: 'other', label: '其他' }
|
]
|
const selectedRelation = ref(null)
|
|
// 表单数据
|
const form = ref({
|
id: '',
|
name: '',
|
idType: '',
|
idNumber: '',
|
relation: '',
|
cardNo: '',
|
phone: '',
|
isDefault: false
|
})
|
|
// 获取证件类型标签
|
const getIdTypeLabel = (type) => {
|
const types = {
|
id: '身份证',
|
passport: '护照',
|
hkm: '港澳居民来往内地通行证'
|
}
|
return types[type] || type
|
}
|
|
// 隐藏证件号码中间部分
|
const maskIdNumber = (number) => {
|
if (!number) return ''
|
if (number.length <= 8) return number
|
return number.replace(/(?<=.{4}).(?=.{4})/g, '*')
|
}
|
|
// 关系变更
|
const onRelationChange = (e) => {
|
selectedRelation.value = relations[e.detail.value]
|
form.value.relation = selectedRelation.value.value
|
}
|
|
// 是否可以提交
|
const canSubmit = computed(() => {
|
const { name, relation, phone } = form.value
|
return name && relation && phone
|
})
|
|
// 提交表单
|
const submitForm = () => {
|
if (!canSubmit.value) return
|
|
uni.showLoading({
|
title: '保存中...'
|
})
|
|
// 这里调用保存API
|
console.log('提交表单:', form.value)
|
|
setTimeout(() => {
|
uni.hideLoading()
|
uni.showToast({
|
title: '保存成功',
|
icon: 'success'
|
})
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1500)
|
}, 1000)
|
}
|
|
onMounted(() => {
|
const pages = getCurrentPages()
|
const page = pages[pages.length - 1]
|
const id = page.$page?.options?.id
|
|
// 加载就诊人数据
|
loadPatient(id)
|
})
|
|
// 加载就诊人数据
|
const loadPatient = (id) => {
|
// 这里调用API获取数据
|
// 模拟数据
|
form.value = {
|
id,
|
name: '张三',
|
idType: 'id',
|
idNumber: '440123199001011234',
|
relation: 'self',
|
cardNo: '1234567890',
|
phone: '13800138000',
|
isDefault: true
|
}
|
|
// 设置选中的关系
|
selectedRelation.value = relations.find(r => r.value === form.value.relation)
|
}
|
</script>
|
|
<style lang="scss">
|
.patient-form {
|
min-height: 100vh;
|
background: $bg-color;
|
padding: 20rpx 20rpx 120rpx;
|
|
.form-card {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
|
.form-item {
|
margin-bottom: 30rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.label {
|
font-size: 28rpx;
|
color: $text-primary;
|
margin-bottom: 16rpx;
|
display: block;
|
|
&.required::before {
|
content: '*';
|
color: $danger;
|
margin-right: 4rpx;
|
}
|
}
|
|
.value-text {
|
font-size: 28rpx;
|
color: $text-primary;
|
padding: 24rpx 30rpx;
|
background: $bg-color;
|
border-radius: $radius-lg;
|
}
|
|
input {
|
width: 100%;
|
height: 88rpx;
|
background: $bg-color;
|
border-radius: $radius-lg;
|
padding: 0 30rpx;
|
font-size: 28rpx;
|
color: $text-primary;
|
}
|
|
.picker {
|
height: 88rpx;
|
background: $bg-color;
|
border-radius: $radius-lg;
|
padding: 0 30rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
|
text {
|
font-size: 28rpx;
|
color: $text-primary;
|
|
&.icon-arrow-right {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
}
|
|
.switch-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
text {
|
font-size: 28rpx;
|
color: $text-primary;
|
}
|
}
|
}
|
|
.bottom-bar {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 20rpx 30rpx;
|
background: #fff;
|
box-shadow: $shadow-lg;
|
|
.submit-btn {
|
width: 100%;
|
|
&[disabled] {
|
opacity: 0.6;
|
}
|
}
|
}
|
}
|
</style>
|
