基于微信小程序的医院预约挂号系统的设计与实现
hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹
🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁的博客
💥 个人QQ：2647996100
🐯 个人wechat：code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨
文章目录
- 1.前言介绍
- 2.功能设计
- 3、功能实现
- 4、开发技术简介
- 5、系统物理架构
- 6、库表设计
- 7、关键代码
- 优质作品集
- 8、源码获取
1.前言介绍
在这个争分夺秒的时代，健康需求与便捷就医的渴望从未如此强烈，挂号预约小程序应需而生，承载着革新就医体验的使命。
过往，就医挂号常常令人头疼不已。上班族忙碌于工作，请假排队挂号难上加难，宝贵的时间在等待中悄然流逝；老年人身体不便，还要在医院的长龙中艰难站立，疲惫不堪。挂号预约小程序的出现，彻底改变了这一困境。
它仿若一条无形却高效的纽带，紧密连接起患者与医疗机构。轻点手机屏幕，海量医疗资源尽在掌握。各大医院的科室介绍细致入微，让患者能依据自身病症精准定位所需；医生排班一目了然，专家号不再遥不可及，可按需预约心仪时段。不仅节省了现场排队的时间，还避免了盲目就医，使诊疗过程更具针对性。
同时，小程序背后依托强大的技术支撑，实时整合更新号源信息，确保数据精准无误。从挂号到就诊提醒，全程贴心服务，无缝对接每一个就医环节。它致力于优化就医流程，让医疗服务触手可及，真正为每一位使用者开启轻松、高效、有序的就医新篇章，成为守护健康之路的得力助手。
2.功能设计
挂号预约小程序功能设计聚焦用户就医痛点，旨在打造一站式便捷就医平台。
用户注册登录后，进入简洁直观的主界面。顶部搜索栏支持模糊搜索，输入常见病症，如 “胃痛”“发热”，即刻弹出关联科室与推荐医生，精准匹配就医需求。下方分类导航栏清晰划分 “综合医院”“专科医院”“社区诊所” 等板块，方便用户按需求筛选。每家医院详情页展示科室分布、设备设施、交通路线，还设有患者口碑评分，助力用户全方位了解。
挂号板块独具匠心，日历视图直观呈现医生一周出诊安排，绿色标识空闲时段，点击即可选择。支持分时段精确预约，精细到 15 分钟间隔，满足不同用户时间规划。预约时，系统自动关联医保信息，实现线上医保结算，减轻费用负担。
个人中心功能完备，“我的预约” 实时跟踪挂号状态，临近就诊推送提醒，可一键查看详细就诊信息，包括诊室位置、医生介绍。“病历管理” 允许用户上传过往病历，方便医生快速查阅病史，做出精准诊断。此外，设有 “健康资讯” 专栏，定期推送疾病预防、康复护理知识，提升用户健康素养。互动社区供患者交流就医心得，为小程序持续优化提供反馈，各功能协同发力，让就医轻松无忧。
3、功能实现
系统登录功能是程序必不可少的功能，在登录页面必填的数据有两项，一项就是账号，另一项数据就是密码，当管理员正确填写并提交这二者数据之后，管理员就可以进入系统后台功能操作区。下图就是管理员登录页面。
目管理页面提供的功能操作有：科室管理，职位管理，医生管理，用户管理等
下面是医生管理端
小程端部分页面展示
4、开发技术简介
本节介绍场馆预约平台用到的一些技术和开发环境的简介，用到开发技术主要包括：
（1）前端用到Element UI组件库和Vue框架
（2）后端用到Node
（3）包管理器Npm
（4）中间件Express
（5）数据库MySQL
系统开发环境主要是：前端开发工具Vscode，Hbuilder、操作系统Win10、CPU i5-9300H、内存8G。
5、系统物理架构
自习室系统的物理架构主要有：管理端和用户端，其中管理端主要是基于Vue和Element UI，用户端主要基于安卓、微信小程序和H5自习室系统的物理建构图
6、库表设计
7、关键代码
// pages/pay/payList.js
const {getUserReservation,updateRservation} =require('../../api/user')
Page({
/**
* 页面的初始数据
*/
data: {
list:[],
stars: [0, 1, 2, 3, 4],
normalSrc: '../../image/index/ZS1.png',//未选中状态
selectedSrc: '../../image/index/ZS.png',//选中状态
key: 0,//评分
qrImg:[]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getList()
},
getList(){
getUserReservation({phone:wx.getStorageSync('userInfo').phone}).then(res=>{
this.setData({
list:res.data
})
})
},
godetail(e){
let value=e.currentTarget.dataset.value
wx.navigateTo({
url: './registrationDetail?value='+JSON.stringify(value),
})
},
gocomment(){
wx.showModal({
title: '评价',
editable:true,
placeholderText:'请输入评价',
complete: (res) => {
if (res.confirm) {
let data={
}
}
}
})
},
selectServer: function (e) {
console.log(e)
var key = e.currentTarget.dataset.key
if (this.data.key == 1 && e.currentTarget.dataset.key == 1) {//当有一颗星的时候再次点击取消选中
key = 0;
}
console.log("得" + key + "分")
this.setData({
key: key
})
},
// pages/userInfo/userInfo.js
const {updataUser} =require('../../api/user')
Page({
/**
* 页面的初始数据
*/
data: {
username:"",
imgUrl:"",
password:"",
userInfo:{},
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.setData({
userInfo:wx.getStorageSync('userInfo'),
username:wx.getStorageSync('userInfo').username,
password:wx.getStorageSync('userInfo').password,
imgUrl:wx.getStorageSync('userInfo').imgUrl
})
},
username(e){
this.setData({
username:e.detail.value
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow(){
this.setData({
userInfo:wx.getStorageSync('userInfo'),
status:wx.getStorageSync('status'),
})
},
updataPassword(){
wx.showModal({
title: '修改密码',
editable:true,
placeholderText:"输入新密码",
complete: (res) => {
if (res.confirm) {
if(res.content){
this.setData({
password:res.content
})
}else{
wx.showToast({
title: '密码不能为空哦',
icon:'none'
})
}
}
}
})
},
changImg(res){
let that=this
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success (res) {
var imgsFile = res.tempFilePaths[0];
that.setData({
imgUrl:imgsFile
})
wx.uploadFile({
filePath: imgsFile,
name: 'file',
url: 'http://localhost:3000/upload/upload',
success: res => {
that.data.userInfo.imgUrl=JSON.parse(res.data).url
}
})
}
})
},
gosubmit(){
let data={
id:this.data.userInfo.id,
username:this.data.username,
password:this.data.password,
imgUrl:this.data.userInfo.imgUrl
}
updataUser(data).then(res=>{
if(res.code==200){
let userInfo=wx.getStorageSync('userInfo')
userInfo.username=this.data.username
userInfo.password=this.data.password
userInfo.imgUrl=this.data.userInfo.imgUrl
wx.setStorageSync('userInfo', userInfo)
wx.showToast({
title: res.msg,
icon:'none'
})
}
})
},
<template>
<div class="messge">
<el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
<!-- 弹窗信息 -->
<el-form
ref="form"
:model="form"
:rules="rules"
:inline="true"
:before-close="handleClose"
label-width="80px"
>
<el-form-item label="名称" prop="username">
<el-input v-model="form.username" placeholder="医生名称"></el-input>
</el-form-item>
<el-form-item label="擅长领域" prop="skill">
<el-input v-model="form.skill" placeholder="擅长领域"></el-input>
</el-form-item>
<el-form-item label="挂号费" prop="price">
<el-input v-model="form.price" placeholder="挂号费"></el-input>
</el-form-item>
<el-form-item label="简介" prop="desc">
<el-input v-model="form.desc" placeholder="医生简介"></el-input>
</el-form-item>
<el-form-item label="所属科室" prop="id">
<el-select v-model="form.office_id" placeholder="请选择">
<span></span>
<el-option
v-for="item in options"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="所属职称" prop="id">
<el-select v-model="form.work_id" placeholder="请选择">
<span></span>
<el-option
v-for="item in optionswork"
:key="item.id"
:label="item.name"
:value="item.id"
>
</el-option>
</el-select>
</el-form-item>
<el-form-item label="医生肖像">
<commonUpload :initial-image-url="form.imgUrl"></commonUpload>
</el-form-item>
</el-form>
<!-- 表单提交 -->
<span slot="footer" class="dialog-footer">
<el-button @click="cancle">取 消</el-button>
<el-button type="primary" @click="submit">确 定</el-button>
</span>
</el-dialog>
<div class="manage-hander">
<!-- 添加按钮 -->
<el-button type="primary" @click="handleAdd">+ 新增</el-button>
</div>
<!-- 表格 -->
<div class="common-table">
<el-table
:data="tableData"
stripe
height="90%"
border
style="width: 100%"
>
<el-table-column prop="username" label="医生名称" align="center">
</el-table-column>
<el-table-column prop="imgUrl" label="肖像" align="center">
<template slot-scope="scope">
<el-image
style="width: 150px; height: 100px"
:src="scope.row.imgUrl"
:preview-src-list="[scope.row.imgUrl]"
>
</el-image>
</template>
</el-table-column>
<el-table-column prop="skill" label="擅长领域" align="center">
<template slot-scope="scope">
<span class="content">{{ scope.row.skill }}</span>
</template>
</el-table-column>
<el-table-column prop="price" label="挂号费" align="center">
</el-table-column>
<el-table-column label="所属科室" prop="office_id">
<template slot-scope="scope">
<span v-for="item in options" :key="item.id">
<span v-if="scope.row.office_id === item.id">
{{ item.name }}
</span>
</span>
</template>
</el-table-column>
<el-table-column label="所属职称" prop="office_id">
<template slot-scope="scope">
<span v-for="item in optionswork" :key="item.id">
<span v-if="scope.row.work_id === item.id">
{{ item.name }}
</span>
</span>
</template>
</el-table-column>
<el-table-column label="评级" align="center">
<template slot-scope="scope">
<el-rate
v-model="scope.row.garden"
disabled
show-score
text-color="#ff9900"
>
</el-rate>
</template>
</el-table-column>
<el-form-item label="简介" prop="desc" align="center">
<el-input v-model="form.desc" placeholder="医生简介"></el-input>
</el-form-item>
<el-table-column prop="addr" label="操作" align="center">
<template slot-scope="scope">
<el-button
type="primary "
size="mini"
@click="handleEdit(scope.row)"
>编辑</el-button
>
<el-button
type="danger"
size="mini"
@click="handleDelete(scope.row)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<el-pagination
class="page"
layout="prev, pager, next"
:total="total"
@current-change="handlePage"
>
</el-pagination>
</div>
</div>
</template>
<script>
import commonUpload from "@/components/commonUpload.vue";
import {
getOffice,
getDoctor,
addDoctor,
detelDoctor,
updateDoctor,
getWork,
} from "@/api/index";
// import { allAdmin } from "@/api/reservation";
export default {
name: "User",
data() {
return {
dialogVisible: false,
// 表单字段
form: {
username: "",
skill: "",
imgUrl: "",
desc: "",
garden: "",
price: "",
office_id: "",
},
value: "3",
// 表單校驗
rules: {
username: [{ required: true, message: "请输入医生名称" }],
openTime: [{ required: true, message: "请输入实验室开发时间" }],
address: [{ required: true, message: "请输入实验室地址" }],
desc: [{ required: true, message: "请输入实验室简介" }],
},
options: [
{
id: "",
name: "",
},
],
optionswork: [
{
id: "",
name: "",
},
],
// 表单数据
tableData: [],
total: 0, //页面的总条数
modelType: 0, //0表示是新增的弹窗 ，1表示的是编辑
userFrom: {
username: "",
},
};
},
components: {
commonUpload,
},
methods: {
// 提交
submit() {
if (this.modelType == 0) {
this.$refs.form.validate((value) => {
// 校验为真
if (value) {
this.form.imgUrl = this.$store.state.upload.imgUrl;
addDoctor(this.form).then((res) => {
// console.log(res);
this.$message.success("添加成功");
});
this.$refs.form.resetFields();
this.dialogVisible = false;
this.getList();
}
});
} else {
this.$refs.form.validate((value) => {
// 校验为真
if (value) {
updateDoctor(this.form).then((res) => {
this.$message.success("修改成功");
});
this.$refs.form.resetFields();
this.dialogVisible = false;
this.getList();
}
});
}
},
handle(e) {
console.log();
// let id = res.id;
this.$confirm("要修改用户权限吗？", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
}).then((res) => {
privalUser(e).then((res1) => {
console.log(res1.data.data);
this.$message.success(res1.data.data.msg);
});
});
},
// 关闭弹窗
handleClose() {
this.$refs.form.resetFields();
this.dialogVisible = false;
},
// 点击取消按钮
cancle() {
this.handleClose();
},
// 表单的编辑
handleEdit(res) {
this.modelType = 1;
this.dialogVisible = true;
// 注意到对当前的数据进行深度拷贝
this.form = JSON.parse(JSON.stringify(res));
},
//表单的删除
handleDelete(res) {
// let id = res.id;
this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(() => {
// 调用删除接口
var that = this;
detelDoctor(res).then((res) => {
that.$message({
type: "success",
message: res.data.data.msg,
});
});
this.getList();
})
.catch(() => {
this.$message({
type: "info",
message: "已取消删除",
});
});
},
// 新增数
handleAdd() {
(this.modelType = 0), (this.dialogVisible = true);
this.form = {};
},
getOpstions() {
getOffice().then((res) => {
this.options = res.data.data;
});
getWork().then((res) => {
this.optionswork = res.data.data;
});
},
// 查询数据
handleSearch() {
searchUser(this.userFrom).then((res) => {
console.log(res.data.data);
this.tableData = res.data.data.data;
// this.getList();
});
},
//分页
handlePage(val) {
console.log(val);
},
// 获取数据
getList() {
// 采用封装的api接口方法
getDoctor().then((res) => {
this.tableData = res.data.data;
});
},
},
// 挂载
mounted() {
this.getList();
this.getOpstions();
},
};
</script>
<style lang="less">
.messge {
height: 90%;
.common-table {
position: relative;
height: calc(100% - 62px);
.page {
position: absolute;
bottom: 0;
right: 20px;
}
.content {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
overflow: hidden;
}
}
.manage-hander {
display: flex;
justify-content: space-between;
align-items: center;
}
}
.el-table .cell {
img {
height: 50rpx;
}
}
</style>
**
优质作品集
1.基于微信小程序的图书馆预约系统的设计与实现
2.基于微信小程序的实验室预约系统的设计与开发
3.基于微信小程序的番茄时钟的设计与实现（课设&毕设）
4.基于微信小程序的自习室预约系统的设计与实现
5.基于Uni-app的体育场馆预约系统的设计与实现
6.基于微信小程序的在线答题小程序设计与实现
7.基于微信小程序的医院预约挂号系统的设计与实现
8、源码获取
大家点赞、收藏、关注、评论啦 、查看👇🏻获取联系方式👇🏻
