<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: "",
|
// 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>
|
