99 lines
3.4 KiB
Vue
99 lines
3.4 KiB
Vue
<template>
|
|
<view class="select-page">
|
|
|
|
<navBar title="搜索患者" />
|
|
|
|
<!-- 搜索框 -->
|
|
<view class="search-bar">
|
|
<view class="input-wrap">
|
|
<input class="search-input" v-model.trim="keyword" placeholder="搜索患者的备注名、昵称或手机号" placeholder-class="ph" @input="$u.debounce(onSearch, 500)" />
|
|
</view>
|
|
<view class="search-btn" @click="onSearch">
|
|
<uni-icons type="search" size="50rpx" color="#999" />
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 列表 -->
|
|
<scroll-view class="list" scroll-y>
|
|
<view class="item" @click="goDetail(p.uuid)" v-for="p in availablePatientList" :key="p.uuid">
|
|
<image class="avatar" :src="docUrl + (p.photo || '')" mode="aspectFill" />
|
|
<view class="name">{{ p.nickname || p.realName }}</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
import docUrl from '@/utils/docUrl.js'
|
|
import { onShow,onLoad} from "@dcloudio/uni-app";
|
|
import api from '@/api/api.js'
|
|
import navTo from '@/utils/navTo.js'
|
|
import navBar from '@/components/navBar/navBar.vue'
|
|
const from = ref('');
|
|
const keyword = ref('')
|
|
const patientList = ref([])
|
|
// 计算属性：显示所有患者，但标记已选中的状态
|
|
const availablePatientList = computed(() => {
|
|
return patientList.value
|
|
})
|
|
const patientListByGBK = async () => {
|
|
|
|
const res = await api.patientListByGBK();
|
|
if(res.code == 1){
|
|
patientList.value = res.data;
|
|
}
|
|
};
|
|
onLoad((options) => {
|
|
if(options.from == 'chatMsg'){
|
|
from.value = 'chatMsg';
|
|
}
|
|
|
|
})
|
|
onShow(() => {
|
|
patientListByGBK();
|
|
|
|
});
|
|
|
|
|
|
|
|
const goDetail = (uuid) => {
|
|
navTo({ url: `/pages_app/patientDetail/patientDetail?uuid=${uuid}` })
|
|
}
|
|
|
|
const onSearch = () => {
|
|
patientList.value = patientList.value.filter(p => p.realName.indexOf(keyword.value) !== -1 || (p.nickname && p.nickname.indexOf(keyword.value) !== -1) || p.mobile.indexOf(keyword.value) !== -1)
|
|
}
|
|
const goBack = () => uni.navigateBack()
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.select-page{
|
|
min-height: 100vh; background:#fefefe;
|
|
}
|
|
.confirm-text{ color:#fff; font-size: 28rpx;white-space: nowrap; }
|
|
.confirm-btn{ background:#7f7f7f; padding: 10rpx 18rpx; border-radius: 26rpx; }
|
|
.confirm-btn.active{ background:#8B2316; }
|
|
.search-bar{
|
|
border: 2rpx solid #eee;
|
|
margin: 20rpx 30rpx; display:flex; align-items:center; gap: 16rpx;
|
|
.input-wrap{ flex:1; background:#fff; border-radius: 12rpx; padding: 16rpx 20rpx; }
|
|
.search-input{ font-size: 28rpx; color:#333; }
|
|
.ph{ color:#bfbfbf; }
|
|
.search-btn{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 88rpx; height: 72rpx; background:#fff;
|
|
}
|
|
}
|
|
.list{ border-radius: 12rpx; }
|
|
.item{background:#fff; display:flex; align-items:center;padding: 24rpx 30rpx; border-bottom: 2rpx solid #eee; }
|
|
.avatar{ width: 96rpx; height:96rpx; border-radius: 16rpx; background:#ffe; }
|
|
.name{ flex:1; margin-left: 20rpx; font-size: 32rpx; color:#333; }
|
|
.check{ padding-left: 12rpx; }
|
|
.circle{ width: 40rpx; height: 40rpx; border-radius: 50%; border: 2rpx solid #cfcfcf; }
|
|
.circle.active{ background:#8B2316; border-color:#8B2316; position: relative; }
|
|
.circle.active::after{ content:''; position:absolute; left: 14rpx; top: 6rpx; width: 10rpx; height: 18rpx; border: 4rpx solid #fff; border-top: 0; border-left: 0; transform: rotate(45deg); }
|
|
</style>
|