<template>
|
<view class="guide-container">
|
<!-- 搜索栏 -->
|
<view class="search-bar">
|
<view class="search-box">
|
<text class="iconfont icon-search"></text>
|
<input
|
type="text"
|
v-model="searchKey"
|
placeholder="搜索科室名称、疾病名称"
|
/>
|
</view>
|
</view>
|
|
<!-- 科室分类导航 -->
|
<view class="category-section">
|
<view class="section-title">按科室查找</view>
|
<view class="category-grid">
|
<view
|
class="category-item"
|
v-for="(category, index) in categories"
|
:key="index"
|
@tap="selectCategory(category)"
|
>
|
<image :src="category.icon" mode="aspectFit" class="icon" />
|
<text class="name">{{ category.name }}</text>
|
<text class="count">{{ category.count }}个科室</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 常见病症 -->
|
<view class="disease-section">
|
<view class="section-title">常见病症</view>
|
<view class="disease-tags">
|
<view
|
class="tag"
|
v-for="(disease, index) in commonDiseases"
|
:key="index"
|
@tap="searchDisease(disease)"
|
>
|
{{ disease }}
|
</view>
|
</view>
|
</view>
|
|
<!-- 热门科室 -->
|
<view class="hot-section">
|
<view class="section-title">热门科室</view>
|
<view class="hot-list">
|
<view
|
class="hot-item"
|
v-for="(dept, index) in hotDepartments"
|
:key="index"
|
@tap="navigateToDepartment(dept)"
|
>
|
<view class="rank-num" :class="{ top: index < 3 }">{{ index + 1 }}</view>
|
<view class="info">
|
<text class="name">{{ dept.name }}</text>
|
<text class="desc">{{ dept.description }}</text>
|
</view>
|
<view class="stats">
|
<text class="count">{{ dept.appointmentCount }}人预约</text>
|
<text class="rating">{{ dept.rating }}分</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref } from 'vue'
|
|
const searchKey = ref('')
|
|
// 科室分类
|
const categories = [
|
{
|
name: '内科',
|
icon: '/static/department/internal.png',
|
count: 8,
|
departments: ['心内科', '消化内科', '呼吸内科', '神经内科']
|
},
|
{
|
name: '外科',
|
icon: '/static/department/surgery.png',
|
count: 6,
|
departments: ['普通外科', '骨科', '神经外科']
|
},
|
{
|
name: '儿科',
|
icon: '/static/department/pediatrics.png',
|
count: 4,
|
departments: ['儿科门诊', '儿童保健科']
|
},
|
{
|
name: '妇产科',
|
icon: '/static/department/gynecology.png',
|
count: 3,
|
departments: ['妇科', '产科', '计划生育']
|
},
|
{
|
name: '五官科',
|
icon: '/static/department/ent.png',
|
count: 5,
|
departments: ['耳鼻喉科', '眼科', '口腔科']
|
},
|
{
|
name: '中医科',
|
icon: '/static/department/tcm.png',
|
count: 4,
|
departments: ['中医内科', '针灸科', '推拿科']
|
}
|
]
|
|
// 常见病症
|
const commonDiseases = [
|
'感冒发烧', '高血压', '糖尿病', '颈椎病',
|
'胃炎', '失眠', '头痛', '咳嗽'
|
]
|
|
// 热门科室
|
const hotDepartments = [
|
{
|
name: '心内科',
|
description: '心血管疾病诊治',
|
appointmentCount: 2580,
|
rating: 4.9
|
},
|
{
|
name: '儿科门诊',
|
description: '儿童疾病诊治',
|
appointmentCount: 2145,
|
rating: 4.8
|
},
|
{
|
name: '骨科',
|
description: '骨关节疾病诊治',
|
appointmentCount: 1980,
|
rating: 4.8
|
},
|
{
|
name: '消化内科',
|
description: '消化系统疾病诊治',
|
appointmentCount: 1860,
|
rating: 4.7
|
},
|
{
|
name: '妇产科',
|
description: '妇科疾病诊治',
|
appointmentCount: 1750,
|
rating: 4.7
|
}
|
]
|
|
// 选择科室分类
|
const selectCategory = (category) => {
|
uni.navigateTo({
|
url: `/pages/department/list?category=${category.name}`
|
})
|
}
|
|
// 搜索疾病
|
const searchDisease = (disease) => {
|
searchKey.value = disease
|
// 执行搜索逻辑
|
}
|
|
// 跳转到科室详情
|
const navigateToDepartment = (dept) => {
|
uni.navigateTo({
|
url: `/pages/department/detail?name=${dept.name}`
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.guide-container {
|
min-height: 100vh;
|
background: $bg-color;
|
|
.search-bar {
|
position: sticky;
|
top: 0;
|
z-index: 100;
|
background: #fff;
|
padding: 20rpx 30rpx;
|
box-shadow: $shadow-sm;
|
}
|
|
.category-section {
|
background: #fff;
|
margin: 20rpx;
|
padding: 30rpx;
|
border-radius: $radius-lg;
|
box-shadow: $shadow-sm;
|
|
.category-grid {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 30rpx;
|
|
.category-item {
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
padding: 20rpx;
|
background: $bg-color;
|
border-radius: $radius-md;
|
transition: all 0.3s;
|
|
&:active {
|
transform: scale(0.95);
|
}
|
|
.icon {
|
width: 80rpx;
|
height: 80rpx;
|
margin-bottom: 16rpx;
|
}
|
|
.name {
|
font-size: 28rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
}
|
|
.count {
|
font-size: 22rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
}
|
|
.disease-section {
|
background: #fff;
|
margin: 20rpx;
|
padding: 30rpx;
|
border-radius: $radius-lg;
|
box-shadow: $shadow-sm;
|
|
.disease-tags {
|
display: flex;
|
flex-wrap: wrap;
|
gap: 20rpx;
|
|
.tag {
|
font-size: 26rpx;
|
color: $text-regular;
|
padding: 12rpx 24rpx;
|
background: $bg-color;
|
border-radius: $radius-xl;
|
transition: all 0.3s;
|
|
&:active {
|
transform: scale(0.95);
|
background: $primary-light;
|
color: $primary-color;
|
}
|
}
|
}
|
}
|
|
.hot-section {
|
background: #fff;
|
margin: 20rpx;
|
padding: 30rpx;
|
border-radius: $radius-lg;
|
box-shadow: $shadow-sm;
|
|
.hot-list {
|
.hot-item {
|
display: flex;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.rank-num {
|
width: 40rpx;
|
height: 40rpx;
|
line-height: 40rpx;
|
text-align: center;
|
font-size: 24rpx;
|
color: $text-secondary;
|
margin-right: 20rpx;
|
|
&.top {
|
background: $primary-gradient;
|
color: #fff;
|
border-radius: 8rpx;
|
font-weight: bold;
|
}
|
}
|
|
.info {
|
flex: 1;
|
|
.name {
|
font-size: 28rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 6rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.stats {
|
text-align: right;
|
|
.count {
|
font-size: 24rpx;
|
color: $primary-color;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.rating {
|
font-size: 24rpx;
|
color: $warning;
|
}
|
}
|
}
|
}
|
}
|
|
.section-title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
display: flex;
|
align-items: center;
|
|
&::before {
|
content: '';
|
width: 6rpx;
|
height: 30rpx;
|
background: $primary-color;
|
border-radius: 3rpx;
|
margin-right: 16rpx;
|
}
|
}
|
}
|
</style>
|
