<template>
|
<view class="detail-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>
|
<text class="iconfont icon-arrow-right"></text>
|
</view>
|
|
<!-- 科室基本信息 -->
|
<view class="basic-info card">
|
<view class="header">
|
<image :src="department.icon" mode="aspectFit" class="icon" />
|
<view class="info">
|
<text class="name">{{ department.name }}</text>
|
<text class="desc">{{ department.description }}</text>
|
</view>
|
</view>
|
<view class="stats">
|
<view class="stat-item">
|
<view class="icon-wrap">
|
<text class="iconfont icon-team"></text>
|
</view>
|
<text class="value">{{ department.doctorCount }}人</text>
|
<text class="label">医生团队</text>
|
</view>
|
<view class="stat-item">
|
<view class="icon-wrap">
|
<text class="iconfont icon-star"></text>
|
</view>
|
<text class="value">{{ department.rating }}分</text>
|
<text class="label">综合评分</text>
|
</view>
|
<view class="stat-item">
|
<view class="icon-wrap">
|
<text class="iconfont icon-user"></text>
|
</view>
|
<text class="value">{{ department.appointmentCount }}人</text>
|
<text class="label">已预约</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 医生团队 -->
|
<view class="doctors-section card">
|
<view class="section-header">
|
<view class="section-title">医生团队</view>
|
<text class="more">查看全部</text>
|
</view>
|
<scroll-view
|
scroll-x
|
class="doctor-list"
|
enhanced
|
:show-scrollbar="false"
|
:bounces="false"
|
>
|
<view
|
class="doctor-item"
|
v-for="(doctor, index) in department.doctors"
|
:key="index"
|
@tap="selectDoctor(doctor)"
|
>
|
<image :src="doctor.avatar" mode="aspectFill" class="avatar" />
|
<text class="name">{{ doctor.name }}</text>
|
<text class="title">{{ doctor.title }}</text>
|
<text class="specialty">{{ doctor.specialty }}</text>
|
<view class="rating">
|
<text class="score">{{ doctor.rating }}分</text>
|
<text class="count">{{ doctor.ratingCount }}评价</text>
|
</view>
|
<button class="book-btn primary-btn">预约</button>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 诊疗项目 -->
|
<view class="services-section card">
|
<view class="section-title">诊疗项目</view>
|
<view class="service-list">
|
<view
|
class="service-item"
|
v-for="(service, index) in department.services"
|
:key="index"
|
>
|
<view class="service-info">
|
<text class="iconfont icon-service"></text>
|
<text class="name">{{ service.name }}</text>
|
</view>
|
<text class="price">¥{{ service.price }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 就医指南 -->
|
<view class="guide-section card">
|
<view class="section-title">就医指南</view>
|
<view class="guide-steps">
|
<view
|
class="step-item"
|
v-for="(step, index) in department.guide"
|
:key="index"
|
>
|
<view class="step-num" :style="{ background: `linear-gradient(135deg, ${getStepColor(index)})` }">
|
{{ index + 1 }}
|
</view>
|
<view class="step-info">
|
<text class="title">{{ step.title }}</text>
|
<text class="desc">{{ step.description }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 患者评价 -->
|
<view class="reviews-section card">
|
<view class="section-header">
|
<view class="section-title">患者评价</view>
|
<text class="total">共{{ department.reviews.length }}条评价</text>
|
</view>
|
<view class="review-list">
|
<view
|
class="review-item"
|
v-for="(review, index) in department.reviews"
|
:key="index"
|
>
|
<view class="user-info">
|
<image :src="review.avatar" mode="aspectFill" class="avatar" />
|
<text class="name">{{ review.name }}</text>
|
<text class="time">{{ review.time }}</text>
|
</view>
|
<text class="content">{{ review.content }}</text>
|
<view class="doctor-reply" v-if="review.reply">
|
<text class="label">医生回复：</text>
|
<text class="reply-content">{{ review.reply }}</text>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- 底部预约按钮 -->
|
<view class="bottom-bar">
|
<button class="submit-btn primary-btn" @tap="bookDepartment" hover-class="button-hover">
|
立即预约
|
</button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
|
// 科室详情数据
|
const department = ref({
|
id: 1,
|
name: '心内科',
|
icon: '/static/department/cardiology.png',
|
description: '主要诊治心血管疾病，包括冠心病、高血压等',
|
doctorCount: 8,
|
rating: 4.9,
|
appointmentCount: 2580,
|
doctors: [
|
{
|
id: 1,
|
name: '张医生',
|
title: '主任医师',
|
avatar: '/static/doctor/doctor1.jpg',
|
specialty: '冠心病、心律失常',
|
rating: 4.9,
|
ratingCount: 1280
|
},
|
// ... 更多医生数据
|
],
|
services: [
|
{
|
name: '普通门诊',
|
price: 60
|
},
|
{
|
name: '专家门诊',
|
price: 120
|
},
|
{
|
name: '心电图检查',
|
price: 80
|
}
|
],
|
guide: [
|
{
|
title: '预约挂号',
|
description: '在线选择医生和就诊时间进行预约'
|
},
|
{
|
title: '取号就诊',
|
description: '就诊当天提前半小时到医院取号'
|
},
|
{
|
title: '医生诊疗',
|
description: '按时到诊室就医，出示预约信息'
|
}
|
],
|
reviews: [
|
{
|
avatar: '/static/avatar/user1.jpg',
|
name: '张**',
|
time: '2024-03-20',
|
content: '医生很专业，态度也很好，解答很详细',
|
reply: '感谢您的信任，祝您身体健康！'
|
}
|
]
|
})
|
|
// 选择医生
|
const selectDoctor = (doctor) => {
|
uni.navigateTo({
|
url: `/pages/appointment/doctor?doctorId=${doctor.id}`
|
})
|
}
|
|
// 预约科室
|
const bookDepartment = () => {
|
uni.navigateTo({
|
url: `/pages/appointment/doctor?departmentId=${department.value.id}&hospitalId=${hospital.value.id}`
|
})
|
}
|
|
// 医院信息
|
const hospital = ref({
|
id: 1,
|
name: '青岛镜湖医院',
|
logo: '/static/hospital/kiang-wu.jpg',
|
address: '青岛连胜马路33号',
|
tags: ['综合医院', '24小时急诊', '特需门诊'],
|
rating: 4.8,
|
distance: 2.5
|
})
|
|
const navigateToHospital = () => {
|
uni.navigateTo({
|
url: `/pages/hospital/detail?id=${hospital.value.id}`
|
})
|
}
|
|
onMounted(() => {
|
const pages = getCurrentPages()
|
const page = pages[pages.length - 1]
|
const departmentId = page.$page?.options?.id
|
const hospitalId = page.$page?.options?.hospitalId
|
|
// 加载数据
|
loadHospitalInfo(hospitalId)
|
loadDepartmentDetail(departmentId)
|
})
|
|
// 加载医院信息
|
const loadHospitalInfo = (hospitalId) => {
|
// 这里应该是从API获取医院信息
|
console.log('加载医院信息:', hospitalId)
|
}
|
|
const loadDepartmentDetail = (id) => {
|
// 加载科室详情数据的逻辑
|
}
|
|
// 获取步骤颜色
|
const getStepColor = (index) => {
|
const colors = [
|
'#0f95b0, #89C4C1',
|
'#747CF9, #9B7CF9',
|
'#FF9B6A, #FF6B8B',
|
'#4DCEA5, #2FB4AE'
|
]
|
return colors[index % colors.length]
|
}
|
</script>
|
|
<style lang="scss">
|
.detail-container {
|
min-height: 100vh;
|
background: $bg-color;
|
padding-bottom: 120rpx;
|
|
.hospital-info {
|
margin: 20rpx;
|
display: flex;
|
align-items: center;
|
position: relative;
|
|
&:active {
|
transform: scale(0.98);
|
}
|
|
&::after {
|
content: '>';
|
position: absolute;
|
right: 30rpx;
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
|
.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;
|
}
|
}
|
}
|
|
.icon-arrow-right {
|
position: absolute;
|
right: 30rpx;
|
top: 50%;
|
transform: translateY(-50%);
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.basic-info {
|
margin: 20rpx;
|
|
.header {
|
display: flex;
|
align-items: center;
|
margin-bottom: 40rpx;
|
|
.icon {
|
width: 100rpx;
|
height: 100rpx;
|
padding: 20rpx;
|
background: $primary-light;
|
border-radius: $radius-lg;
|
}
|
|
.info {
|
flex: 1;
|
|
.name {
|
font-size: 36rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
}
|
}
|
|
.stats {
|
display: grid;
|
grid-template-columns: repeat(3, 1fr);
|
gap: 20rpx;
|
padding: 30rpx 0;
|
border-top: 1rpx solid #eee;
|
|
.stat-item {
|
text-align: center;
|
|
.icon-wrap {
|
width: 80rpx;
|
height: 80rpx;
|
margin: 0 auto 16rpx;
|
background: $primary-light;
|
border-radius: 50%;
|
@include flex-center;
|
|
.iconfont {
|
font-size: 40rpx;
|
color: $primary-color;
|
}
|
}
|
|
.value {
|
font-size: 36rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.label {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
}
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 30rpx;
|
|
.more {
|
font-size: 26rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.doctors-section {
|
margin: 20rpx;
|
|
.doctor-list {
|
white-space: nowrap;
|
margin: 0 -30rpx;
|
padding: 0 30rpx;
|
|
.doctor-item {
|
display: inline-block;
|
width: 300rpx;
|
margin-right: 20rpx;
|
text-align: center;
|
|
&:last-child {
|
margin-right: 0;
|
}
|
|
.avatar {
|
width: 120rpx;
|
height: 120rpx;
|
border-radius: 60rpx;
|
margin-bottom: 16rpx;
|
border: 2rpx solid rgba($primary-color, 0.1);
|
}
|
|
.name {
|
font-size: 28rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.title {
|
font-size: 24rpx;
|
color: $text-regular;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.specialty {
|
font-size: 24rpx;
|
color: $text-secondary;
|
margin-bottom: 12rpx;
|
display: block;
|
}
|
|
.rating {
|
margin-bottom: 16rpx;
|
|
.score {
|
font-size: 26rpx;
|
color: $warning;
|
font-weight: bold;
|
margin-right: 8rpx;
|
}
|
|
.count {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.book-btn {
|
width: 160rpx;
|
height: 60rpx;
|
line-height: 60rpx;
|
font-size: 26rpx;
|
margin: 0 auto;
|
}
|
}
|
}
|
}
|
|
.services-section {
|
margin: 20rpx;
|
|
.service-list {
|
.service-item {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
padding-bottom: 0;
|
}
|
|
.service-info {
|
display: flex;
|
align-items: center;
|
|
.iconfont {
|
font-size: 40rpx;
|
color: $primary-color;
|
margin-right: 16rpx;
|
}
|
}
|
|
.price {
|
font-size: 32rpx;
|
color: $danger;
|
font-weight: bold;
|
}
|
}
|
}
|
}
|
|
.guide-section {
|
margin: 20rpx;
|
|
.guide-steps {
|
.step-item {
|
display: flex;
|
margin-bottom: 30rpx;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
|
.step-num {
|
width: 60rpx;
|
height: 60rpx;
|
border-radius: 30rpx;
|
color: #fff;
|
font-size: 28rpx;
|
font-weight: bold;
|
margin-right: 20rpx;
|
flex-shrink: 0;
|
@include flex-center;
|
}
|
|
.step-info {
|
flex: 1;
|
|
.title {
|
font-size: 28rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.desc {
|
font-size: 26rpx;
|
color: $text-regular;
|
}
|
}
|
}
|
}
|
}
|
|
.reviews-section {
|
margin: 20rpx;
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.total {
|
font-size: 26rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.review-list {
|
.review-item {
|
padding: 20rpx 0;
|
border-bottom: 1rpx solid #eee;
|
|
&:last-child {
|
border-bottom: none;
|
}
|
|
.user-info {
|
display: flex;
|
align-items: center;
|
margin-bottom: 16rpx;
|
|
.avatar {
|
width: 60rpx;
|
height: 60rpx;
|
border-radius: 30rpx;
|
margin-right: 16rpx;
|
}
|
|
.name {
|
font-size: 26rpx;
|
color: $text-primary;
|
margin-right: 16rpx;
|
}
|
|
.time {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.content {
|
font-size: 26rpx;
|
color: $text-regular;
|
line-height: 1.6;
|
margin-bottom: 16rpx;
|
display: block;
|
}
|
|
.doctor-reply {
|
background: $bg-color;
|
padding: 20rpx;
|
border-radius: $radius-sm;
|
|
.label {
|
font-size: 26rpx;
|
color: $primary-color;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.reply-content {
|
font-size: 26rpx;
|
color: $text-regular;
|
line-height: 1.6;
|
}
|
}
|
}
|
}
|
}
|
|
.bottom-bar {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
padding: 20rpx 30rpx;
|
background: #fff;
|
box-shadow: $shadow-lg;
|
|
.submit-btn {
|
width: 100%;
|
|
&.button-hover {
|
transform: scale(0.98);
|
opacity: 0.9;
|
}
|
}
|
}
|
}
|
</style>
|
