用 Vue2 构建高效的医生预约系统：现代风格页面设计与实现 Vue2 项目实战：从零实现卡片式医生预约系统 如何用 Vue2 构建交互性强的预约页面？（附完整代码） Vue2 医生预约平台开发指南：
发布时间
阅读量：
阅读量
效果图
🌟【定制化开发服务，让您的项目领先一步】🌟
如有需求，直接私信留下您的联系方式。谢谢。
我的邮箱：2351598671@qq.com
完整代码
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>医生预约系统</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f5f5f5;
}
.container {
max-width: 800px;
margin: 20px auto;
background: white;
border-radius: 15px;
padding: 20px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.doctor-card {
display: flex;
align-items: center;
margin-bottom: 20px;
}
.doctor-card img {
width: 100px;
height: 100px;
border-radius: 50%;
margin-right: 20px;
}
.doctor-info {
flex: 1;
}
.doctor-info h2 {
margin: 0;
font-size: 1.5rem;
}
.doctor-info p {
color: #666;
margin: 5px 0;
}
.stats {
display: flex;
justify-content: space-around;
margin-top: 20px;
}
.stats div {
text-align: center;
}
.stats div p {
margin: 5px 0;
}
.tabs {
display: flex;
justify-content: space-around;
border-bottom: 2px solid #ddd;
margin-bottom: 20px;
}
.tab {
padding: 10px 20px;
cursor: pointer;
font-weight: bold;
}
.tab.active {
border-bottom: 2px solid #52c41a;
color: #52c41a;
}
.schedule {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.appointment-card {
flex: 1 1 calc(50% - 20px);
background: #f9f9f9;
padding: 15px;
border-radius: 10px;
text-align: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.appointment-card button {
margin-top: 10px;
padding: 8px 15px;
background: #52c41a;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
.appointment-card button:disabled {
background: #ccc;
cursor: not-allowed;
}
.reviews {
margin-top: 30px;
}
.reviews h2 {
font-size: 1.2rem;
}
.reviews ul {
list-style: none;
padding: 0;
}
.reviews li {
padding: 10px;
border-bottom: 1px solid #ddd;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<!-- 医生卡片 -->
<div class="doctor-card">
<img :src="doctor.avatar" alt="Doctor">
<div class="doctor-info">
<h2>{{ doctor.name }} {{ doctor.title }}</h2>
<p>{{ doctor.languages }}</p>
<p>{{ doctor.description }}</p>
</div>
<button @click="toggleFollow" :class="{ followed: doctor.followed }">
{{ doctor.followed ? '已关注' : '+ 关注' }}
</button>
</div>
<!-- 数据统计 -->
<div class="stats">
<div>
<p>服务人次</p>
<strong>{{ doctor.serviceCount }}</strong>
</div>
<div>
<p>好评率</p>
<strong>{{ doctor.rating }}%</strong>
</div>
<div>
<p>回复率</p>
<strong>{{ doctor.replyRate }}</strong>
</div>
</div>
<!-- 选项卡 -->
<div class="tabs">
<div
class="tab"
:class="{ active: activeTab === 'schedule' }"
@click="activeTab = 'schedule'"
>
排班信息
</div>
<div
class="tab"
:class="{ active: activeTab === 'reviews' }"
@click="activeTab = 'reviews'"
>
患者评价
</div>
</div>
<!-- 内容区域 -->
<div v-if="activeTab === 'schedule'" class="schedule">
<div
class="appointment-card"
v-for="(schedule, index) in schedules"
:key="index"
>
<p><strong>{{ schedule.date }}</strong></p>
<p>{{ schedule.weekday }}</p>
<button :disabled="!schedule.available" @click="bookAppointment(schedule)">
{{ schedule.available ? '预约' : '无号' }}
</button>
</div>
</div>
<div v-if="activeTab === 'reviews'" class="reviews">
<h2>患者评价</h2>
<ul>
<li v-for="(review, index) in reviews" :key="index">
<p><strong>{{ review.user }}</strong> {{ review.date }}</p>
<p>{{ review.comment }}</p>
</li>
</ul>
</div>
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
doctor: {
name: '张丽君',
title: '副主任医师',
languages: '中文、English',
description: '擅长呼吸内科、慢性病诊治',
serviceCount: 5289,
rating: 97,
replyRate: '高',
followed: false,
avatar: 'https://via.placeholder.com/100'
},
activeTab: 'schedule',
schedules: [
{ date: '2023-11-25', weekday: '周六', available: true },
{ date: '2023-11-26', weekday: '周日', available: false },
{ date: '2023-11-27', weekday: '周一', available: true },
{ date: '2023-11-28', weekday: '周二', available: true },
],
reviews: [
{ user: '李**', date: '2023-11-20', comment: '医生非常有耐心，解释很清楚！' },
{ user: '张**', date: '2023-11-18', comment: '医院环境很好，医生诊疗效率很高。' }
]
},
methods: {
toggleFollow() {
this.doctor.followed = !this.doctor.followed;
},
bookAppointment(schedule) {
alert(`预约成功：${schedule.date} ${schedule.weekday}`);
}
}
});
</script>
</body>
</html>全部评论 (0)
还没有任何评论哟~