<template>
|
<view class="patient-container">
|
<!-- 就诊人列表 -->
|
<view class="patient-list">
|
<view
|
class="patient-item card"
|
v-for="(patient, index) in patients"
|
:key="index"
|
@tap="selectPatient(patient)"
|
>
|
<view class="info">
|
<text class="name">{{ patient.name }}</text>
|
<text class="tag" v-if="patient.isDefault">默认</text>
|
</view>
|
<view class="details">
|
<text>{{ patient.gender }} {{ patient.age }}岁</text>
|
<text class="divider">|</text>
|
<text>{{ patient.idType }}：{{ patient.idNo }}</text>
|
</view>
|
<view class="card-info" v-if="patient.cardNo">
|
<text class="label">就诊卡号：</text>
|
<text class="value">{{ patient.cardNo }}</text>
|
</view>
|
<text class="iconfont icon-arrow-right"></text>
|
</view>
|
</view>
|
|
<!-- 添加就诊人按钮 -->
|
<view class="add-btn" @tap="addPatient">
|
<text class="iconfont icon-add"></text>
|
<text>添加就诊人</text>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
// 就诊人列表
|
const patients = ref([
|
{
|
id: 1,
|
name: '张三',
|
gender: '男',
|
age: 45,
|
idType: '身份证',
|
idNo: '440***********1234',
|
cardNo: '1234567890',
|
isDefault: true
|
},
|
{
|
id: 2,
|
name: '张小明',
|
gender: '男',
|
age: 12,
|
idType: '身份证',
|
idNo: '440***********5678',
|
cardNo: '0987654321',
|
isDefault: false
|
}
|
])
|
|
// 选择就诊人
|
const selectPatient = (patient) => {
|
// 获取预约信息
|
const pages = getCurrentPages()
|
const prevPage = pages[pages.length - 2]
|
const { departmentId, hospitalId, doctorId, scheduleId } = prevPage.$page?.options || {}
|
|
// 跳转到确认页面
|
uni.navigateTo({
|
url: `/pages/appointment/confirm?patientId=${patient.id}&departmentId=${departmentId}&hospitalId=${hospitalId}&doctorId=${doctorId}&scheduleId=${scheduleId}`
|
})
|
}
|
|
// 添加就诊人
|
const addPatient = () => {
|
uni.navigateTo({
|
url: '/pages/my/patient-edit'
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.patient-container {
|
min-height: 100vh;
|
background: $bg-color;
|
padding: 20rpx;
|
|
.patient-list {
|
.patient-item {
|
position: relative;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
background: #fff;
|
border-radius: $radius-lg;
|
box-shadow: $shadow-sm;
|
|
.info {
|
display: flex;
|
align-items: center;
|
margin-bottom: 12rpx;
|
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-right: 12rpx;
|
}
|
|
.tag {
|
font-size: 22rpx;
|
color: $primary-color;
|
background: $primary-light;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
}
|
}
|
|
.details {
|
margin-bottom: 12rpx;
|
|
text {
|
font-size: 26rpx;
|
color: $text-regular;
|
|
&.divider {
|
margin: 0 16rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.card-info {
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
|
.value {
|
font-size: 26rpx;
|
color: $primary-color;
|
}
|
}
|
|
.icon-arrow-right {
|
position: absolute;
|
right: 30rpx;
|
top: 50%;
|
transform: translateY(-50%);
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
|
&:active {
|
transform: scale(0.99);
|
}
|
}
|
}
|
|
.add-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 100rpx;
|
background: #fff;
|
border-radius: $radius-lg;
|
margin-top: 40rpx;
|
box-shadow: $shadow-sm;
|
|
.iconfont {
|
font-size: 32rpx;
|
color: $primary-color;
|
margin-right: 8rpx;
|
}
|
|
text {
|
font-size: 30rpx;
|
color: $primary-color;
|
}
|
|
&:active {
|
background: darken(#fff, 2%);
|
}
|
}
|
}
|
</style>
|
|
