<template>
|
<view class="doctor-container">
|
<!-- 医院信息 -->
|
<view class="hospital-info card">
|
<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="department-info card">
|
<view class="title-wrap">
|
<image :src="department.icon" mode="aspectFit" class="icon" />
|
<text class="title">{{ department.name }}</text>
|
</view>
|
<text class="desc">{{ department.description }}</text>
|
</view>
|
|
<!-- 医生列表 -->
|
<view class="doctor-list">
|
<view
|
class="doctor-item card"
|
v-for="(doctor, index) in doctors"
|
:key="index"
|
@tap="selectDoctor(doctor)"
|
>
|
<view class="basic-info">
|
<image :src="doctor.avatar" mode="aspectFill" class="avatar" />
|
<view class="info">
|
<view class="name-title">
|
<text class="name">{{ doctor.name }}</text>
|
<text class="title">{{ doctor.title }}</text>
|
</view>
|
<text class="hospital">{{ hospital.name }}</text>
|
<text class="specialty">{{ doctor.specialty }}</text>
|
<view class="tags">
|
<text v-for="(tag, idx) in doctor.tags" :key="idx">{{ tag }}</text>
|
</view>
|
</view>
|
<view class="rating">
|
<text class="score">{{ doctor.rating }}</text>
|
<text class="count">{{ doctor.ratingCount }}条评价</text>
|
</view>
|
</view>
|
<view class="schedule-info">
|
<view class="available-time">
|
<text class="label">近期可约：</text>
|
<view class="time-list">
|
<view
|
class="time-item"
|
v-for="(time, idx) in doctor.availableTimes"
|
:key="idx"
|
>
|
<text class="date">{{ time.date }}</text>
|
<text class="count">余{{ time.count }}个</text>
|
</view>
|
</view>
|
</view>
|
<view class="action">
|
<view class="fee-info">
|
<text class="label">挂号费</text>
|
<text class="fee">¥{{ doctor.fee }}</text>
|
</view>
|
<button class="book-btn primary-btn">预约挂号</button>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
|
// 医院信息
|
const hospital = ref({
|
id: 1,
|
name: '青岛镜湖医院',
|
logo: '/static/hospital/kiang-wu.jpg',
|
address: '青岛连胜马路33号',
|
tags: ['综合医院', '24小时急诊', '特需门诊'],
|
rating: 4.8,
|
distance: 2.5
|
})
|
|
// 科室信息
|
const department = ref({
|
name: '心内科',
|
icon: '/static/department/cardiology.png',
|
description: '主要诊治心血管疾病，包括冠心病、高血压等'
|
})
|
|
// 医生列表
|
const doctors = ref([
|
{
|
id: 1,
|
name: '张医生',
|
title: '主任医师',
|
avatar: '/static/doctor/doctor1.jpg',
|
specialty: '擅长：冠心病、心律失常、高血压等心血管疾病的诊治',
|
tags: ['专家门诊', '手术专家'],
|
rating: 4.9,
|
ratingCount: 2381,
|
fee: 100,
|
availableTimes: [
|
{ date: '今天', count: 5 },
|
{ date: '明天', count: 8 },
|
{ date: '后天', count: 12 }
|
]
|
},
|
// ... 其他医生数据
|
])
|
|
// 选择医生
|
const selectDoctor = (doctor) => {
|
uni.navigateTo({
|
url: `/pages/appointment/schedule?doctorId=${doctor.id}`
|
})
|
}
|
|
// 获取科室ID并加载数据
|
onMounted(() => {
|
const pages = getCurrentPages()
|
const page = pages[pages.length - 1]
|
const departmentId = page.$page?.options?.departmentId
|
const hospitalId = page.$page?.options?.hospitalId
|
|
// 加载数据
|
loadHospitalInfo(hospitalId)
|
loadDepartmentInfo(departmentId)
|
loadDoctors(departmentId)
|
})
|
|
// 加载医院信息
|
const loadHospitalInfo = (hospitalId) => {
|
// 这里应该是从API获取医院信息
|
console.log('加载医院信息:', hospitalId)
|
}
|
</script>
|
|
<style lang="scss">
|
.doctor-container {
|
min-height: 100vh;
|
background: $bg-color;
|
padding: 20rpx;
|
|
.hospital-info {
|
margin-bottom: 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;
|
}
|
}
|
}
|
}
|
|
.department-info {
|
margin-bottom: 20rpx;
|
|
.title-wrap {
|
display: flex;
|
align-items: center;
|
margin-bottom: 16rpx;
|
|
.icon {
|
width: 40rpx;
|
height: 40rpx;
|
margin-right: 10rpx;
|
}
|
|
.title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
}
|
|
.desc {
|
font-size: 26rpx;
|
color: $text-regular;
|
line-height: 1.6;
|
}
|
}
|
|
.doctor-list {
|
.doctor-item {
|
margin-bottom: 20rpx;
|
|
.basic-info {
|
display: flex;
|
margin-bottom: 20rpx;
|
|
.avatar {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 60rpx;
|
margin-right: 20rpx;
|
}
|
|
.info {
|
flex: 1;
|
|
.name-title {
|
margin-bottom: 8rpx;
|
|
.name {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-right: 16rpx;
|
}
|
|
.title {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
}
|
|
.specialty {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-bottom: 12rpx;
|
display: block;
|
}
|
|
.tags {
|
text {
|
@extend .tag;
|
}
|
}
|
|
.hospital {
|
font-size: 26rpx;
|
color: $primary-color;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
}
|
|
.rating {
|
text-align: right;
|
|
.score {
|
font-size: 36rpx;
|
color: $primary-color;
|
font-weight: bold;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.count {
|
font-size: 22rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
|
.schedule-info {
|
padding-top: 20rpx;
|
border-top: 1rpx solid #eee;
|
|
.available-time {
|
margin-bottom: 20rpx;
|
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-bottom: 12rpx;
|
display: block;
|
}
|
|
.time-list {
|
display: flex;
|
|
.time-item {
|
margin-right: 30rpx;
|
|
.date {
|
font-size: 26rpx;
|
color: $primary-color;
|
margin-right: 8rpx;
|
}
|
|
.count {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
}
|
|
.action {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
|
.fee-info {
|
.label {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-right: 8rpx;
|
}
|
|
.fee {
|
font-size: 32rpx;
|
color: $danger;
|
font-weight: bold;
|
}
|
}
|
|
.book-btn {
|
width: 160rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
font-size: 26rpx;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
