<template>
|
<view class="list-container">
|
<!-- 医院信息 -->
|
<view class="hospital-info card" @tap="navigateToHospital">
|
<image :src="hospital.logo" mode="aspectFit" class="logo" />
|
<view class="info">
|
<text class="name">{{ hospital.name }}</text>
|
<text class="address">{{ hospital.address }}</text>
|
<view class="tags">
|
<text v-for="(tag, idx) in hospital.tags" :key="idx">{{ tag }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 分类标题 -->
|
<view class="category-header">
|
<text class="title">{{ categoryName }}</text>
|
<text class="count">共{{ departments.length }}个科室</text>
|
</view>
|
|
<!-- 科室列表 -->
|
<view class="department-list">
|
<view
|
class="department-item card"
|
v-for="(dept, index) in departments"
|
:key="index"
|
@tap="navigateToDetail(dept)"
|
>
|
<view class="header">
|
<view class="hospital-tag">
|
<image :src="hospital.logo" mode="aspectFit" class="logo" />
|
<text class="name">{{ hospital.name }}</text>
|
</view>
|
<view class="left">
|
<image :src="dept.icon" mode="aspectFit" class="icon" />
|
<view class="title-wrap">
|
<text class="name">{{ dept.name }}</text>
|
<text class="desc">{{ dept.description }}</text>
|
</view>
|
</view>
|
<text class="status" :class="dept.status">{{ dept.statusText }}</text>
|
</view>
|
|
<view class="info-grid">
|
<view class="info-item">
|
<text class="label">挂号费</text>
|
<text class="value" :class="{ free: dept.fee === 0 }">
|
{{ dept.fee === 0 ? '免费' : `¥${dept.fee}` }}
|
</text>
|
</view>
|
<view class="info-item">
|
<text class="label">医生数量</text>
|
<text class="value">{{ dept.doctorCount }}人</text>
|
</view>
|
<view class="info-item">
|
<text class="label">今日号源</text>
|
<text class="value">{{ dept.availableCount }}个</text>
|
</view>
|
<view class="info-item">
|
<text class="label">综合评分</text>
|
<text class="value rating">{{ dept.rating }}分</text>
|
</view>
|
</view>
|
|
<view class="doctors">
|
<view class="doctor" v-for="(doctor, idx) in dept.doctors" :key="idx">
|
<image :src="doctor.avatar" mode="aspectFill" />
|
<view class="info">
|
<text class="name">{{ doctor.name }}</text>
|
<text class="title">{{ doctor.title }}</text>
|
</view>
|
</view>
|
</view>
|
|
<button class="book-btn primary-btn" @tap.stop="bookDepartment(dept)">
|
立即预约
|
</button>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
|
const categoryName = ref('')
|
const departments = ref([
|
{
|
id: 1,
|
name: '心内科',
|
icon: '/static/department/cardiology.png',
|
description: '心血管疾病诊治',
|
status: 'available',
|
statusText: '可预约',
|
fee: 60,
|
doctorCount: 8,
|
availableCount: 25,
|
rating: 4.9,
|
doctors: [
|
{
|
name: '张医生',
|
title: '主任医师',
|
avatar: '/static/doctor/doctor1.jpg'
|
},
|
{
|
name: '李医生',
|
title: '副主任医师',
|
avatar: '/static/doctor/doctor2.jpg'
|
}
|
]
|
},
|
// ... 更多科室数据
|
])
|
|
// 医院信息
|
const hospital = ref({
|
id: 1,
|
name: '青岛镜湖医院',
|
logo: '/static/hospital/kiang-wu.jpg',
|
address: '青岛连胜马路33号',
|
tags: ['综合医院', '24小时急诊', '特需门诊'],
|
rating: 4.8,
|
distance: 2.5
|
})
|
|
onMounted(() => {
|
const pages = getCurrentPages()
|
const page = pages[pages.length - 1]
|
const category = page.$page?.options?.category || '全部科室'
|
const hospitalId = page.$page?.options?.hospitalId
|
categoryName.value = category
|
|
// 加载数据
|
loadHospitalInfo(hospitalId)
|
loadDepartments(category)
|
})
|
|
// 加载医院信息
|
const loadHospitalInfo = (hospitalId) => {
|
// 这里应该是从API获取医院信息
|
console.log('加载医院信息:', hospitalId)
|
}
|
|
const navigateToDetail = (dept) => {
|
uni.navigateTo({
|
url: `/pages/department/detail?id=${dept.id}&hospitalId=${hospital.value.id}`
|
})
|
}
|
|
const bookDepartment = (dept) => {
|
uni.navigateTo({
|
url: `/pages/appointment/doctor?departmentId=${dept.id}`
|
})
|
}
|
|
const loadDepartments = (category) => {
|
// 加载科室数据的逻辑
|
}
|
|
const navigateToHospital = () => {
|
uni.navigateTo({
|
url: `/pages/hospital/detail?id=${hospital.value.id}`
|
})
|
}
|
</script>
|
|
<style lang="scss">
|
.list-container {
|
min-height: 100vh;
|
background: $bg-color;
|
padding-bottom: 20rpx;
|
|
.hospital-info {
|
margin: 20rpx;
|
display: flex;
|
align-items: center;
|
|
.logo {
|
width: 100rpx;
|
height: 100rpx;
|
border-radius: $radius-md;
|
margin-right: 20rpx;
|
}
|
|
.info {
|
flex: 1;
|
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.address {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-bottom: 12rpx;
|
display: block;
|
}
|
|
.tags {
|
text {
|
display: inline-block;
|
font-size: 22rpx;
|
color: $primary-color;
|
background: $primary-light;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
margin-right: 10rpx;
|
margin-bottom: 10rpx;
|
}
|
}
|
}
|
}
|
|
.category-header {
|
background: #fff;
|
padding: 30rpx;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
box-shadow: $shadow-sm;
|
|
.title {
|
font-size: 34rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
|
.count {
|
font-size: 26rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.department-list {
|
padding: 20rpx;
|
|
.department-item {
|
margin-bottom: 20rpx;
|
|
.header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.hospital-tag {
|
display: flex;
|
align-items: center;
|
padding-bottom: 16rpx;
|
margin-bottom: 16rpx;
|
border-bottom: 1rpx solid #eee;
|
|
.logo {
|
width: 32rpx;
|
height: 32rpx;
|
border-radius: $radius-sm;
|
margin-right: 8rpx;
|
}
|
|
.name {
|
font-size: 24rpx;
|
color: $text-regular;
|
}
|
}
|
|
.left {
|
display: flex;
|
align-items: center;
|
|
.icon {
|
width: 60rpx;
|
height: 60rpx;
|
margin-right: 16rpx;
|
}
|
|
.title-wrap {
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 6rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 26rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.status {
|
font-size: 24rpx;
|
padding: 4rpx 12rpx;
|
border-radius: $radius-sm;
|
|
&.available {
|
color: $success;
|
background: rgba($success, 0.1);
|
}
|
|
&.busy {
|
color: $warning;
|
background: rgba($warning, 0.1);
|
}
|
|
&.full {
|
color: $danger;
|
background: rgba($danger, 0.1);
|
}
|
}
|
}
|
|
.info-grid {
|
display: grid;
|
grid-template-columns: repeat(4, 1fr);
|
gap: 20rpx;
|
margin-bottom: 20rpx;
|
|
.info-item {
|
text-align: center;
|
|
.label {
|
font-size: 24rpx;
|
color: $text-secondary;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.value {
|
font-size: 28rpx;
|
color: $text-primary;
|
font-weight: bold;
|
|
&.free {
|
color: $success;
|
}
|
|
&.rating {
|
color: $warning;
|
}
|
}
|
}
|
}
|
|
.doctors {
|
display: flex;
|
margin-bottom: 20rpx;
|
overflow-x: auto;
|
|
&::-webkit-scrollbar {
|
display: none;
|
}
|
|
.doctor {
|
display: flex;
|
align-items: center;
|
margin-right: 30rpx;
|
flex-shrink: 0;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
|
image {
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 40rpx;
|
margin-right: 12rpx;
|
border: 2rpx solid rgba($primary-color, 0.1);
|
}
|
|
.info {
|
.name {
|
font-size: 26rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.title {
|
font-size: 22rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
}
|
|
.book-btn {
|
width: 100%;
|
margin-top: 20rpx;
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
}
|
}
|
</style>
|
