<template>
|
<view class="doctor-detail">
|
<!-- 医生信息卡片 -->
|
<view class="doctor-card">
|
<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">{{ doctor.hospital }}</text>
|
<view class="tags">
|
<text v-for="(tag, index) in doctor.tags" :key="index">{{ tag }}</text>
|
</view>
|
</view>
|
</view>
|
<view class="statistics">
|
<view class="stat-item">
|
<text class="value">{{ doctor.experience }}年</text>
|
<text class="label">从医经验</text>
|
</view>
|
<view class="stat-item">
|
<text class="value">{{ doctor.rating }}</text>
|
<text class="label">综合评分</text>
|
</view>
|
<view class="stat-item">
|
<text class="value">{{ doctor.patients }}</text>
|
<text class="label">接诊人数</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 擅长领域 -->
|
<view class="section-card">
|
<view class="section-title">擅长领域</view>
|
<text class="specialty">{{ doctor.specialty }}</text>
|
</view>
|
|
<!-- 医生简介 -->
|
<view class="section-card">
|
<view class="section-title">医生简介</view>
|
<text class="introduction">{{ doctor.introduction }}</text>
|
</view>
|
|
<!-- 出诊时间 -->
|
<view class="section-card">
|
<view class="section-title">出诊时间</view>
|
<scroll-view
|
scroll-x
|
class="schedule-list"
|
:show-scrollbar="false"
|
>
|
<view
|
class="schedule-item"
|
v-for="(item, index) in doctor.schedules"
|
:key="index"
|
:class="{ active: selectedSchedule === index }"
|
@tap="selectSchedule(index)"
|
>
|
<text class="date">{{ item.date }}</text>
|
<text class="day">{{ item.day }}</text>
|
<text class="period">{{ item.period }}</text>
|
<text class="price">¥{{ item.price }}</text>
|
<text class="remain">剩余{{ item.remain }}号</text>
|
</view>
|
</scroll-view>
|
</view>
|
|
<!-- 患者评价 -->
|
<view class="section-card">
|
<view class="section-header">
|
<text class="title">患者评价</text>
|
<text class="more">查看全部</text>
|
</view>
|
<view class="review-list">
|
<view
|
class="review-item"
|
v-for="(item, index) in doctor.reviews"
|
:key="index"
|
>
|
<view class="user-info">
|
<image :src="item.avatar" mode="aspectFill" class="avatar" />
|
<view class="info">
|
<text class="name">{{ item.name }}</text>
|
<text class="time">{{ item.time }}</text>
|
</view>
|
<view class="rating">
|
<text class="iconfont icon-star" v-for="n in 5" :key="n"></text>
|
</view>
|
</view>
|
<text class="content">{{ item.content }}</text>
|
</view>
|
</view>
|
</view>
|
|
<!-- 底部按钮 -->
|
<view class="bottom-bar">
|
<button class="action-btn outline" @tap="showConsult">在线咨询</button>
|
<button class="action-btn primary" @tap="makeAppointment">立即预约</button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import { ref, onMounted } from 'vue'
|
|
// 医生信息
|
const doctor = ref({
|
id: 1,
|
name: '张医生',
|
title: '主任医师',
|
avatar: '/static/doctor/avatar1.jpg',
|
hospital: '青岛镜湖医院',
|
department: '心内科',
|
tags: ['专家门诊', '视频问诊'],
|
experience: 20,
|
rating: 4.9,
|
patients: 12580,
|
specialty: '擅长冠心病、高血压、心律失常等心血管疾病的诊治，在心血管疾病的预防、诊断和治疗方面有丰富经验。',
|
introduction: '张医生从事心血管专业20余年，曾在北京协和医院进修学习。现任青岛镜湖医院心内科主任医师，青岛心血管病学会会员。在心血管疾病的诊治方面积累了丰富的临床经验，尤其在冠心病、高血压、心律失常等方面有较深造诣。',
|
schedules: [
|
{
|
date: '03-25',
|
day: '今天',
|
period: '上午',
|
price: 300,
|
remain: 2
|
},
|
{
|
date: '03-26',
|
day: '明天',
|
period: '下午',
|
price: 300,
|
remain: 5
|
},
|
{
|
date: '03-27',
|
day: '周三',
|
period: '上午',
|
price: 300,
|
remain: 8
|
}
|
],
|
reviews: [
|
{
|
id: 1,
|
name: '张**',
|
avatar: '/static/avatar/user1.jpg',
|
time: '2024-03-20',
|
rating: 5,
|
content: '张医生很专业，态度也很好，详细解答了我的问题，让我对病情有了更清晰的认识。'
|
},
|
{
|
id: 2,
|
name: '李**',
|
avatar: '/static/avatar/user2.jpg',
|
time: '2024-03-19',
|
rating: 5,
|
content: '医术精湛，服务周到，值得信赖的好医生。'
|
}
|
]
|
})
|
|
// 选中的排班
|
const selectedSchedule = ref(0)
|
|
// 选择排班
|
const selectSchedule = (index) => {
|
selectedSchedule.value = index
|
}
|
|
// 在线咨询
|
const showConsult = () => {
|
uni.showModal({
|
title: '提示',
|
content: '是否开始在线咨询？',
|
success: (res) => {
|
if (res.confirm) {
|
// 这里处理在线咨询逻辑
|
}
|
}
|
})
|
}
|
|
// 立即预约
|
const makeAppointment = () => {
|
const schedule = doctor.value.schedules[selectedSchedule.value]
|
uni.navigateTo({
|
url: `/pages/appointment/confirm?doctorId=${doctor.value.id}&date=${schedule.date}&period=${schedule.period}`
|
})
|
}
|
|
onMounted(() => {
|
const pages = getCurrentPages()
|
const page = pages[pages.length - 1]
|
const { id, name, hospital } = page.$page?.options || {}
|
|
// 这里根据ID加载医生详情
|
console.log('加载医生详情:', id, name, hospital)
|
})
|
</script>
|
|
<style lang="scss">
|
.doctor-detail {
|
min-height: 100vh;
|
background: $bg-color;
|
padding-bottom: 120rpx;
|
|
.doctor-card {
|
background: #fff;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
|
.basic-info {
|
display: flex;
|
margin-bottom: 30rpx;
|
|
.avatar {
|
width: 160rpx;
|
height: 160rpx;
|
border-radius: 50%;
|
margin-right: 30rpx;
|
}
|
|
.info {
|
flex: 1;
|
|
.name-title {
|
margin-bottom: 12rpx;
|
|
.name {
|
font-size: 36rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-right: 16rpx;
|
}
|
|
.title {
|
font-size: 28rpx;
|
color: $text-regular;
|
}
|
}
|
|
.hospital {
|
font-size: 28rpx;
|
color: $text-regular;
|
margin-bottom: 16rpx;
|
display: block;
|
}
|
|
.tags {
|
text {
|
display: inline-block;
|
font-size: 24rpx;
|
color: $primary-color;
|
background: $primary-light;
|
padding: 4rpx 16rpx;
|
border-radius: $radius-sm;
|
margin-right: 16rpx;
|
}
|
}
|
}
|
}
|
|
.statistics {
|
display: flex;
|
border-top: 1rpx solid #eee;
|
padding-top: 30rpx;
|
|
.stat-item {
|
flex: 1;
|
text-align: center;
|
|
.value {
|
font-size: 36rpx;
|
color: $primary-color;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
display: block;
|
}
|
|
.label {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
}
|
}
|
|
.section-card {
|
background: #fff;
|
padding: 30rpx;
|
margin-bottom: 20rpx;
|
|
.section-title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
margin-bottom: 20rpx;
|
}
|
|
.section-header {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 20rpx;
|
|
.title {
|
font-size: 32rpx;
|
color: $text-primary;
|
font-weight: bold;
|
}
|
|
.more {
|
font-size: 28rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.specialty,
|
.introduction {
|
font-size: 28rpx;
|
color: $text-regular;
|
line-height: 1.6;
|
}
|
|
.schedule-list {
|
white-space: nowrap;
|
|
.schedule-item {
|
display: inline-flex;
|
flex-direction: column;
|
align-items: center;
|
width: 200rpx;
|
padding: 20rpx;
|
margin-right: 20rpx;
|
background: $bg-color;
|
border-radius: $radius-lg;
|
|
.date {
|
font-size: 28rpx;
|
color: $text-primary;
|
margin-bottom: 8rpx;
|
}
|
|
.day {
|
font-size: 24rpx;
|
color: $text-secondary;
|
margin-bottom: 8rpx;
|
}
|
|
.period {
|
font-size: 26rpx;
|
color: $text-regular;
|
margin-bottom: 8rpx;
|
}
|
|
.price {
|
font-size: 28rpx;
|
color: $warning;
|
font-weight: bold;
|
margin-bottom: 8rpx;
|
}
|
|
.remain {
|
font-size: 24rpx;
|
color: $success;
|
}
|
|
&.active {
|
background: $primary-light;
|
|
.date,
|
.day,
|
.period {
|
color: $primary-color;
|
}
|
}
|
}
|
}
|
|
.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: 64rpx;
|
height: 64rpx;
|
border-radius: 50%;
|
margin-right: 16rpx;
|
}
|
|
.info {
|
flex: 1;
|
|
.name {
|
font-size: 28rpx;
|
color: $text-primary;
|
margin-bottom: 4rpx;
|
display: block;
|
}
|
|
.time {
|
font-size: 24rpx;
|
color: $text-secondary;
|
}
|
}
|
|
.rating {
|
.iconfont {
|
font-size: 24rpx;
|
color: $warning;
|
margin-left: 4rpx;
|
}
|
}
|
}
|
|
.content {
|
font-size: 28rpx;
|
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;
|
display: flex;
|
gap: 20rpx;
|
|
.action-btn {
|
flex: 1;
|
height: 88rpx;
|
line-height: 88rpx;
|
font-size: 30rpx;
|
border-radius: $radius-xl;
|
|
&.outline {
|
color: $primary-color;
|
background: #fff;
|
border: 2rpx solid $primary-color;
|
}
|
|
&.primary {
|
color: #fff;
|
background: $primary-gradient;
|
}
|
|
&:active {
|
transform: scale(0.98);
|
}
|
}
|
}
|
}
|
</style>
|
