<template>
|
<view class="expert-container">
|
<!-- 顶部搜索 -->
|
<view class="search-bar">
|
<view class="search-box">
|
<text class="iconfont icon-search"></text>
|
<input
|
type="text"
|
v-model="keyword"
|
placeholder="搜索专家姓名/科室/疾病"
|
@input="onSearch"
|
/>
|
</view>
|
<view class="filter-btn" @tap="showFilter">
|
<text class="iconfont icon-filter"></text>
|
筛选
|
</view>
|
</view>
|
|
<!-- 科室分类 -->
|
<scroll-view
|
scroll-x
|
class="department-bar"
|
:show-scrollbar="false"
|
>
|
<view
|
class="department-item"
|
v-for="(item, index) in departments"
|
:key="index"
|
:class="{ active: currentDepartment === item.id }"
|
@tap="selectDepartment(item)"
|
>
|
<text>{{ item.name }}</text>
|
</view>
|
</scroll-view>
|
|
<!-- 专家列表 -->
|
<scroll-view
|
scroll-y
|
class="expert-list"
|
refresher-enabled
|
:refresher-triggered="refreshing"
|
@refresherrefresh="onRefresh"
|
@scrolltolower="loadMore"
|
>
|
<view
|
class="expert-item"
|
v-for="(item, index) in experts"
|
:key="index"
|
@tap="viewDoctor(item)"
|
>
|
<image :src="item.avatar" mode="aspectFill" class="avatar" />
|
<view class="info">
|
<view class="basic">
|
<view class="name-title">
|
<text class="name">{{ item.name }}</text>
|
<text class="title">{{ item.title }}</text>
|
</view>
|
<view class="tags">
|
<text v-for="(tag, idx) in item.tags" :key="idx">{{ tag }}</text>
|
</view>
|
</view>
|
<view class="hospital">{{ item.hospital }}</view>
|
<view class="specialty">
|
<text class="label">擅长：</text>
|
<text class="content">{{ item.specialty }}</text>
|
</view>
|
<view class="schedule" v-if="item.schedule">
|
<view class="time">
|
<text class="date">{{ item.schedule.date }}</text>
|
<text class="period">{{ item.schedule.period }}</text>
|
</view>
|
<view class="action">
|
<text class="price">¥{{ item.schedule.price }}</text>
|
<text class="status" :class="{ full: !item.schedule.available }">
|
{{ item.schedule.available ? '可预约' : '约满' }}
|
</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 加载更多 -->
|
<uni-load-more
|
:status="loadMoreStatus"
|
:content-text="{
|
contentdown: '上拉加载更多',
|
contentrefresh: '加载中...',
|
contentnomore: '没有更多了'
|
}"
|
/>
|
</scroll-view>
|
|
<!-- 筛选抽屉 -->
|
<uni-drawer ref="filterDrawer" mode="right">
|
<view class="filter-drawer">
|
<view class="drawer-header">
|
<text class="title">筛选条件</text>
|
<text class="reset" @tap="resetFilter">重置</text>
|
</view>
|
|
<!-- 职称 -->
|
<view class="filter-section">
|
<text class="section-title">职称</text>
|
<view class="tag-list">
|
<text
|
v-for="(item, index) in titles"
|
:key="index"
|
:class="{ active: filter.title === item.value }"
|
@tap="selectTitle(item.value)"
|
>{{ item.label }}</text>
|
</view>
|
</view>
|
|
<!-- 医院 -->
|
<view class="filter-section">
|
<text class="section-title">医院</text>
|
<view class="tag-list">
|
<text
|
v-for="(item, index) in hospitals"
|
:key="index"
|
:class="{ active: filter.hospital === item.value }"
|
@tap="selectHospital(item.value)"
|
>{{ item.label }}</text>
|
</view>
|
</view>
|
|
<!-- 问诊方式 -->
|
<view class="filter-section">
|
<text class="section-title">问诊方式</text>
|
<view class="tag-list">
|
<text
|
v-for="(item, index) in consultTypes"
|
:key="index"
|
:class="{ active: filter.consultType === item.value }"
|
@tap="selectConsultType(item.value)"
|
>{{ item.label }}</text>
|
</view>
|
</view>
|
|
<!-- 排序方式 -->
|
<view class="filter-section">
|
<text class="section-title">排序方式</text>
|
<view class="sort-list">
|
<view
|
class="sort-item"
|
v-for="(item, index) in sortOptions"
|
:key="index"
|
:class="{ active: filter.sort === item.value }"
|
@tap="selectSort(item.value)"
|
>
|
<text>{{ item.label }}</text>
|
<text class="iconfont icon-check"></text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 底部按钮 -->
|
<view class="drawer-footer">
|
<button
|
class="confirm-btn primary-btn"
|
@tap="applyFilter"
|
>确定</button>
|
</view>
|
</view>
|
</uni-drawer>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
// 搜索关键词
|
const keyword = ref('')
|
|
// 当前科室
|
const currentDepartment = ref(0)
|
|
// 科室列表
|
const departments = ref([
|
{ id: 0, name: '全部' },
|
{ id: 1, name: '内科' },
|
{ id: 2, name: '外科' },
|
{ id: 3, name: '妇产科' },
|
{ id: 4, name: '儿科' },
|
{ id: 5, name: '中医科' }
|
])
|
|
// 专家列表
|
const experts = ref([
|
{
|
id: 1,
|
name: '张医生',
|
title: '主任医师',
|
avatar: '/static/doctor/expert1.jpg',
|
hospital: '青岛镜湖医院',
|
tags: ['专家门诊', '视频问诊'],
|
specialty: '冠心病、高血压、心律失常等心血管疾病',
|
schedule: {
|
date: '今天',
|
period: '上午 9:00-11:30',
|
price: 500,
|
available: true
|
}
|
},
|
{
|
id: 2,
|
name: '李医生',
|
title: '副主任医师',
|
avatar: '/static/doctor/expert2.jpg',
|
hospital: '青岛科大医院',
|
tags: ['专家门诊'],
|
specialty: '糖尿病、内分泌疾病',
|
schedule: {
|
date: '明天',
|
period: '下午 14:00-16:30',
|
price: 300,
|
available: false
|
}
|
}
|
])
|
|
// 筛选条件
|
const filter = ref({
|
title: '',
|
hospital: '',
|
consultType: '',
|
sort: 'default'
|
})
|
|
// 职称选项
|
const titles = [
|
{ value: 'chief', label: '主任医师' },
|
{ value: 'deputy', label: '副主任医师' },
|
{ value: 'attending', label: '主治医师' }
|
]
|
|
// 医院选项
|
const hospitals = [
|
{ value: 'jh', label: '镜湖医院' },
|
{ value: 'kd', label: '科大医院' }
|
]
|
|
// 问诊方式
|
const consultTypes = [
|
{ value: 'expert', label: '专家门诊' },
|
{ value: 'video', label: '视频问诊' },
|
{ value: 'phone', label: '电话问诊' }
|
]
|
|
// 排序选项
|
const sortOptions = [
|
{ value: 'default', label: '综合排序' },
|
{ value: 'rating', label: '评分最高' },
|
{ value: 'price', label: '价格排序' }
|
]
|
|
// 加载状态
|
const refreshing = ref(false)
|
const loadMoreStatus = ref('more')
|
|
// 搜索
|
const onSearch = (e) => {
|
const value = e.detail.value.trim()
|
// 这里处理搜索逻辑
|
}
|
|
// 选择科室
|
const selectDepartment = (department) => {
|
currentDepartment.value = department.id
|
// 这里加载对应科室的专家列表
|
}
|
|
// 查看医生详情
|
const viewDoctor = (doctor) => {
|
uni.navigateTo({
|
url: `/pages/doctor/detail?id=${doctor.id}`
|
})
|
}
|
|
// 显示筛选抽屉
|
const filterDrawer = ref(null)
|
const showFilter = () => {
|
filterDrawer.value.open()
|
}
|
|
// 重置筛选
|
const resetFilter = () => {
|
filter.value = {
|
title: '',
|
hospital: '',
|
consultType: '',
|
sort: 'default'
|
}
|
}
|
|
// 选择职称
|
const selectTitle = (value) => {
|
filter.value.title = value
|
}
|
|
// 选择医院
|
const selectHospital = (value) => {
|
filter.value.hospital = value
|
}
|
|
// 选择问诊方式
|
const selectConsultType = (value) => {
|
filter.value.consultType = value
|
}
|
|
// 选择排序方式
|
const selectSort = (value) => {
|
filter.value.sort = value
|
}
|
|
// 应用筛选
|
const applyFilter = () => {
|
filterDrawer.value.close()
|
// 这里处理筛选逻辑
|
}
|
|
// 下拉刷新
|
const onRefresh = () => {
|
// 这里处理刷新逻辑
|
setTimeout(() => {
|
refreshing.value = false
|
}, 1000)
|
}
|
|
// 加载更多
|
const loadMore = () => {
|
if (loadMoreStatus.value !== 'more') return
|
loadMoreStatus.value = 'loading'
|
|
// 这里处理加载更多逻辑
|
setTimeout(() => {
|
loadMoreStatus.value = 'noMore'
|
}, 1000)
|
}
|
</script>
|
|
<style lang="scss">
|
.expert-container {
|
min-height: 100vh;
|
background: $bg-color;
|
|
.search-bar {
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
display: flex;
|
align-items: center;
|
padding: 20rpx;
|
background: #fff;
|
|
.search-box {
|
flex: 1;
|
height: 72rpx;
|
background: $bg-color;
|
border-radius: $radius-xl;
|
display: flex;
|
align-items: center;
|
padding: 0 20rpx;
|
margin-right: 20rpx;
|
|
.iconfont {
|
font-size: 32rpx;
|
color: $text-secondary;
|
margin-right: 12rpx;
|
}
|
|
input {
|
flex: 1;
|
height: 100%;
|
font-size: 28rpx;
|
}
|
}
|
|
.filter-btn {
|
display: flex;
|
align-items: center;
|
font-size: 28rpx;
|
color: $text-regular;
|
|
.iconfont {
|
font-size: 32rpx;
|
margin-right: 4rpx;
|
}
|
}
|
}
|
|
.department-bar {
|
background: #fff;
|
white-space: nowrap;
|
padding: 20rpx;
|
|
.department-item {
|
display: inline-block;
|
padding: 12rpx 30rpx;
|
margin-right: 20rpx;
|
font-size: 28rpx;
|
color: $text-regular;
|
background: $bg-color;
|
border-radius: $radius-lg;
|
|
&.active {
|
color: #fff;
|
background: $primary-gradient;
|
}
|
|
&:last-child {
|
margin-right: 0;
|
}
|
}
|
}
|
|
.expert-list {
|
height: calc(100vh - 184rpx);
|
padding: 20rpx;
|
|
.expert-item {
|
display: flex;
|
padding: 30rpx;
|
background: #fff;
|
border-radius: $radius-lg;
|
margin-bottom: 20rpx;
|
|
.avatar {
|
width: 140rpx;
|
height: 140rpx;
|
border-radius: 50%;
|
margin-right: 20rpx;
|
}
|
|
.info {
|
flex: 1;
|
|
.basic {
|
display: flex;
|
justify-content: space-between;
|
margin-bottom: 12rpx;
|
|
.name-title {
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-right: 12rpx;
|
}
|
|
.title {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
}
|
|
.tags {
|
text {
|
display: inline-block;
|
font-size: 22rpx;
|
color: $primary-color;
|
background: $primary-light;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
margin-left: 12rpx;
|
}
|
}
|
}
|
|
.hospital {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-bottom: 12rpx;
|
}
|
|
.specialty {
|
display: flex;
|
margin-bottom: 16rpx;
|
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
|
.content {
|
flex: 1;
|
font-size: 26rpx;
|
color: $text-primary;
|
}
|
}
|
|
.schedule {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.time {
|
.date {
|
font-size: 26rpx;
|
color: $success;
|
margin-right: 12rpx;
|
}
|
|
.period {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
}
|
|
.action {
|
display: flex;
|
align-items: center;
|
|
.price {
|
font-size: 32rpx;
|
color: $warning;
|
font-weight: bold;
|
margin-right: 16rpx;
|
}
|
|
.status {
|
font-size: 24rpx;
|
color: $success;
|
background: rgba($success, 0.1);
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
|
&.full {
|
color: $text-secondary;
|
background: $bg-color;
|
}
|
}
|
}
|
}
|
}
|
|
&:active {
|
transform: scale(0.99);
|
}
|
}
|
}
|
|
.filter-drawer {
|
height: 100%;
|
background: #fff;
|
padding: 30rpx;
|
|
.drawer-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 30rpx;
|
|
.title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
|
.reset {
|
font-size: 28rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.filter-section {
|
margin-bottom: 30rpx;
|
|
.section-title {
|
font-size: 30rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
}
|
|
.tag-list {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20rpx;
|
|
text {
|
font-size: 26rpx;
|
color: $text-regular;
|
background: $bg-color;
|
padding: 12rpx 30rpx;
|
border-radius: $radius-lg;
|
|
&.active {
|
color: #fff;
|
background: $primary-gradient;
|
}
|
}
|
}
|
|
.sort-list {
|
.sort-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
height: 88rpx;
|
padding: 0 20rpx;
|
font-size: 28rpx;
|
color: $text-regular;
|
|
.iconfont {
|
font-size: 32rpx;
|
color: $primary-color;
|
opacity: 0;
|
}
|
|
&.active {
|
color: $primary-color;
|
|
.iconfont {
|
opacity: 1;
|
}
|
}
|
}
|
}
|
}
|
|
.drawer-footer {
|
position: absolute;
|
left: 30rpx;
|
right: 30rpx;
|
bottom: 30rpx;
|
|
.confirm-btn {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 30rpx;
|
color: #fff;
|
background: $primary-gradient;
|
border-radius: $radius-xl;
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
