<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">
|
<view class="name-wrap">
|
<text class="name">{{ patient.name }}</text>
|
<text class="tag default" v-if="patient.isDefault">默认</text>
|
<text class="tag" :class="patient.relation">{{ patient.relationText }}</text>
|
</view>
|
<view class="id-info">
|
<text class="id-type">{{ patient.idType }}：</text>
|
<text class="id-number">{{ patient.idNumber }}</text>
|
</view>
|
<view class="card-info" v-if="patient.cardNo">
|
<text class="label">就诊卡号：</text>
|
<text class="value">{{ patient.cardNo }}</text>
|
</view>
|
</view>
|
|
<view class="actions">
|
<view
|
class="action-btn"
|
@tap.stop="editPatient(patient)"
|
>
|
<text class="iconfont icon-edit"></text>
|
<text>编辑</text>
|
</view>
|
<view
|
class="action-btn"
|
@tap.stop="deletePatient(patient)"
|
v-if="!patient.isDefault"
|
>
|
<text class="iconfont icon-delete"></text>
|
<text>删除</text>
|
</view>
|
<view
|
class="action-btn"
|
@tap.stop="setDefault(patient)"
|
v-if="!patient.isDefault"
|
>
|
<text class="iconfont icon-star"></text>
|
<text>设为默认</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 添加就诊人按钮 -->
|
<view class="add-btn" @tap="addPatient">
|
<text class="iconfont icon-add"></text>
|
<text>添加就诊人</text>
|
</view>
|
|
<!-- 温馨提示 -->
|
<view class="notice-card">
|
<view class="section-title">温馨提示</view>
|
<view class="notice-list">
|
<view class="notice-item">
|
<text class="dot"></text>
|
<text class="content">每个用户最多可添加5个就诊人</text>
|
</view>
|
<view class="notice-item">
|
<text class="dot"></text>
|
<text class="content">请确保就诊人信息真实准确，以免影响就医</text>
|
</view>
|
<view class="notice-item">
|
<text class="dot"></text>
|
<text class="content">身份证号码用于实名认证，请谨慎填写</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
// 就诊人列表数据
|
const patients = ref([
|
{
|
id: 1,
|
name: '张三',
|
idType: '身份证',
|
idNumber: '440************123',
|
cardNo: '1234567890',
|
relation: 'self',
|
relationText: '本人',
|
isDefault: true
|
},
|
{
|
id: 2,
|
name: '张小明',
|
idType: '身份证',
|
idNumber: '440************456',
|
cardNo: '0987654321',
|
relation: 'child',
|
relationText: '子女',
|
isDefault: false
|
}
|
])
|
|
// 选择就诊人
|
const selectPatient = (patient) => {
|
// 如果是从其他页面跳转来的，返回并传值
|
const pages = getCurrentPages()
|
const prevPage = pages[pages.length - 2]
|
if (prevPage?.$page?.path?.includes('/appointment/')) {
|
uni.$emit('selectPatient', patient)
|
uni.navigateBack()
|
}
|
}
|
|
// 添加就诊人
|
const addPatient = () => {
|
if (patients.value.length >= 5) {
|
uni.showToast({
|
title: '最多添加5个就诊人',
|
icon: 'none'
|
})
|
return
|
}
|
|
uni.navigateTo({
|
url: '/pages/patient/add'
|
})
|
}
|
|
// 编辑就诊人
|
const editPatient = (patient) => {
|
uni.navigateTo({
|
url: `/pages/patient/edit?id=${patient.id}`
|
})
|
}
|
|
// 删除就诊人
|
const deletePatient = (patient) => {
|
uni.showModal({
|
title: '提示',
|
content: '确定要删除该就诊人吗？',
|
success: (res) => {
|
if (res.confirm) {
|
// 这里调用删除API
|
const index = patients.value.findIndex(p => p.id === patient.id)
|
if (index > -1) {
|
patients.value.splice(index, 1)
|
uni.showToast({
|
title: '删除成功',
|
icon: 'success'
|
})
|
}
|
}
|
}
|
})
|
}
|
|
// 设为默认就诊人
|
const setDefault = (patient) => {
|
// 这里调用设置默认API
|
patients.value.forEach(p => {
|
p.isDefault = p.id === patient.id
|
})
|
uni.showToast({
|
title: '设置成功',
|
icon: 'success'
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.patient-container {
|
min-height: 100vh;
|
background: $bg-color;
|
padding: 20rpx;
|
|
.patient-list {
|
.patient-item {
|
margin-bottom: 20rpx;
|
|
.info {
|
padding-bottom: 20rpx;
|
border-bottom: 1rpx solid #eee;
|
|
.name-wrap {
|
display: flex;
|
align-items: center;
|
margin-bottom: 16rpx;
|
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-right: 16rpx;
|
}
|
|
.tag {
|
font-size: 22rpx;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
margin-right: 12rpx;
|
|
&.default {
|
color: $primary-color;
|
background: $primary-light;
|
}
|
|
&.self {
|
color: $success;
|
background: rgba($success, 0.1);
|
}
|
|
&.child {
|
color: $warning;
|
background: rgba($warning, 0.1);
|
}
|
|
&.parent {
|
color: $info;
|
background: rgba($info, 0.1);
|
}
|
}
|
}
|
|
.id-info {
|
margin-bottom: 12rpx;
|
|
.id-type {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
|
.id-number {
|
font-size: 26rpx;
|
color: $text-primary;
|
}
|
}
|
|
.card-info {
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
|
.value {
|
font-size: 26rpx;
|
color: $text-primary;
|
}
|
}
|
}
|
|
.actions {
|
display: flex;
|
padding-top: 20rpx;
|
|
.action-btn {
|
display: flex;
|
align-items: center;
|
margin-right: 30rpx;
|
|
.iconfont {
|
font-size: 32rpx;
|
color: $text-regular;
|
margin-right: 8rpx;
|
}
|
|
text {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
}
|
}
|
|
.add-btn {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
height: 88rpx;
|
background: #fff;
|
border-radius: $radius-lg;
|
margin-bottom: 30rpx;
|
|
.iconfont {
|
font-size: 32rpx;
|
color: $primary-color;
|
margin-right: 8rpx;
|
}
|
|
text {
|
font-size: 28rpx;
|
color: $primary-color;
|
}
|
|
&:active {
|
background: darken(#fff, 2%);
|
}
|
}
|
|
.notice-card {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
|
.notice-list {
|
.notice-item {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 16rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.dot {
|
width: 12rpx;
|
height: 12rpx;
|
background: $primary-color;
|
border-radius: 50%;
|
margin-top: 12rpx;
|
margin-right: 12rpx;
|
flex-shrink: 0;
|
}
|
|
.content {
|
flex: 1;
|
font-size: 26rpx;
|
color: $text-regular;
|
line-height: 1.6;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
