<template>
|
<view class="department-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>
|
|
<!-- 科室列表 -->
|
<view class="department-list">
|
<!-- 常用科室 -->
|
<view class="section">
|
<view class="section-title">常用科室</view>
|
<view class="grid-list">
|
<view
|
class="grid-item"
|
v-for="(item, index) in commonDepartments"
|
:key="index"
|
@tap="selectDepartment(item)"
|
>
|
<image :src="item.icon" mode="aspectFit" class="icon" />
|
<text class="name">{{ item.name }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 全部科室 -->
|
<view class="section">
|
<view class="section-title">全部科室</view>
|
<view class="category-list">
|
<view
|
class="category-item"
|
v-for="(category, index) in departments"
|
:key="index"
|
>
|
<view class="category-name">{{ category.name }}</view>
|
<view class="department-grid">
|
<view
|
class="grid-item"
|
v-for="(dept, idx) in category.departments"
|
:key="idx"
|
@tap="selectDepartment(dept)"
|
>
|
<text class="name">{{ dept.name }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
|
// 搜索关键词
|
const keyword = ref('')
|
const disease = ref('')
|
|
// 常用科室
|
const commonDepartments = ref([
|
{
|
id: 1,
|
name: '内科',
|
icon: '/static/department/internal.png'
|
},
|
{
|
id: 2,
|
name: '外科',
|
icon: '/static/department/surgery.png'
|
},
|
{
|
id: 3,
|
name: '儿科',
|
icon: '/static/department/pediatrics.png'
|
},
|
{
|
id: 4,
|
name: '妇产科',
|
icon: '/static/department/obstetrics.png'
|
},
|
{
|
id: 5,
|
name: '眼科',
|
icon: '/static/department/ophthalmology.png'
|
},
|
{
|
id: 6,
|
name: '口腔科',
|
icon: '/static/department/dentistry.png'
|
}
|
])
|
|
// 全部科室
|
const departments = ref([
|
{
|
name: '内科',
|
departments: [
|
{ id: 101, name: '心内科' },
|
{ id: 102, name: '呼吸内科' },
|
{ id: 103, name: '消化内科' },
|
{ id: 104, name: '神经内科' },
|
{ id: 105, name: '内分泌科' }
|
]
|
},
|
{
|
name: '外科',
|
departments: [
|
{ id: 201, name: '普外科' },
|
{ id: 202, name: '骨科' },
|
{ id: 203, name: '神经外科' },
|
{ id: 204, name: '心胸外科' },
|
{ id: 205, name: '泌尿外科' }
|
]
|
},
|
{
|
name: '专科',
|
departments: [
|
{ id: 301, name: '眼科' },
|
{ id: 302, name: '耳鼻喉科' },
|
{ id: 303, name: '口腔科' },
|
{ id: 304, name: '皮肤科' },
|
{ id: 305, name: '精神科' }
|
]
|
}
|
])
|
|
// 搜索科室
|
const onSearch = (e) => {
|
const value = e.detail.value.trim()
|
// 这里处理搜索逻辑
|
}
|
|
// 选择科室
|
const selectDepartment = (department) => {
|
uni.navigateTo({
|
url: `/pages/appointment/doctor?departmentId=${department.id}&disease=${disease.value}`
|
})
|
}
|
|
onMounted(() => {
|
const pages = getCurrentPages()
|
const page = pages[pages.length - 1]
|
const { disease: diseaseName } = page.$page?.options || {}
|
|
if (diseaseName) {
|
disease.value = decodeURIComponent(diseaseName)
|
// 这里可以根据疾病名称推荐科室
|
}
|
})
|
</script>
|
|
<style lang="scss">
|
.department-container {
|
min-height: 100vh;
|
background: $bg-color;
|
|
.search-bar {
|
padding: 20rpx;
|
background: #fff;
|
|
.search-box {
|
height: 72rpx;
|
background: $bg-color;
|
border-radius: $radius-xl;
|
display: flex;
|
align-items: center;
|
padding: 0 20rpx;
|
|
.iconfont {
|
font-size: 32rpx;
|
color: $text-secondary;
|
margin-right: 12rpx;
|
}
|
|
input {
|
flex: 1;
|
height: 100%;
|
font-size: 28rpx;
|
}
|
}
|
}
|
|
.department-list {
|
padding: 20rpx;
|
|
.section {
|
background: #fff;
|
border-radius: $radius-lg;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
|
.section-title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
}
|
}
|
|
.grid-list {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 30rpx;
|
|
.grid-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
|
.icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-bottom: 12rpx;
|
}
|
|
.name {
|
font-size: 28rpx;
|
color: $text-primary;
|
}
|
|
&:active {
|
opacity: 0.8;
|
}
|
}
|
}
|
|
.category-list {
|
.category-item {
|
margin-bottom: 30rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.category-name {
|
font-size: 30rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
}
|
|
.department-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 20rpx;
|
|
.grid-item {
|
height: 88rpx;
|
background: $bg-color;
|
border-radius: $radius-lg;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
|
.name {
|
font-size: 28rpx;
|
color: $text-regular;
|
}
|
|
&:active {
|
background: $primary-light;
|
|
.name {
|
color: $primary-color;
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
