基于微信小程序的医院预约挂号系统的设计与实现

hello hello~ ，这里是 code袁~💖💖 ，欢迎大家点赞🥳🥳关注💥💥收藏🌹🌹🌹

🦁作者简介：一名喜欢分享和记录学习的在校大学生
💥个人主页：code袁的博客
💥 个人QQ：2647996100
🐯 个人wechat：code8896
code袁系列专栏导航
1.《毕业设计与课程设计》本专栏分享一些毕业设计的源码以及项目成果。🥰🥰🥰
2.《微信小程序开发》本专栏从基础到入门的一系开发流程，并且分享了自己在开发中遇到的一系列问题。🤹🤹🤹
3.《vue开发系列全程线路》本专栏分享自己的vue的学习历程。

非常期待和您一起在这个小小的互联网世界里共同探索、学习和成长。💝💝💝 ✨✨ 欢迎订阅本专栏 ✨✨ 

基于微信小程序的医院预约挂号小程序

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.valuewx.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.keyif (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=thiswx.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.usernameuserInfo.password=this.data.passworduserInfo.imgUrl=this.data.userInfo.imgUrlwx.setStorageSync('userInfo', userInfo)wx.showToast({title: res.msg,icon:'none'})}})},

<template><div class="messge"><el-dialog title="提示" :visible.sync="dialogVisible" width="40%"><!-- 弹窗信息 --><el-formref="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-optionv-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-optionv-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"stripeheight="90%"borderstyle="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-imagestyle="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-ratev-model="scope.row.garden"disabledshow-scoretext-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-buttontype="primary "size="mini"@click="handleEdit(scope.row)">编辑</el-button><el-buttontype="danger"size="mini"@click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table><!-- 分页组件 --><el-paginationclass="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.基于微信小程序的在线答题小程序设计与实现

8、源码获取

大家点赞、收藏、关注、评论啦 、查看👇🏻获取联系方式👇🏻