医院预约挂号系统微信小程序项目分享

这个是一个医院预约挂号的小程序系统，这个项目比较简易理解，很适合做计算机期末作业或者毕业设计。

对该系统进行分析与设计，有以下几个主要的功能模块：

（1）添加科室：通过后台管理系统新增对应的科室，可以对科室数据进行增删改查。

（2）添加医生：在后台管理系统录入医生相关信息，绑定所属科室，可以对医生进行增删改查。

（4）预约记录和用户列表管理：在后台管理系统可以查看相关用户数据，以及用户的预约记录。

（6）用户挂号预约：小程序端用户可以查看医生详情信息进行预约挂号。

下面是小程序首页的部分代码

<!--index.wxml-->
<view class="indexCon">
  <view class="search">
    <view class="searchCon">
      <image src="../../images/searchIcon.png"></image>
      <input type="text" placeholder="请输入你要搜索的医生姓名" bindinput="getSearchVal" bindconfirm="searchFun"/>
    </view>
  </view>
  <view class="bannner" wx:if="{
         
  {swiperImgs.length>0}}">
    <swiper class=bannner_swiper indicator-dots="true" indicator-color="#f4f4f4" indicator-active-color="#0D6EFF" autoplay="true"
      interval=2000 circular=true>
      <block wx:for="{
         
  {swiperImgs}}">
        <swiper-item>
          <image class="bannnerImg" src={
         
  {imgHost+item.bannerpic}} mode=aspectFill></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
  <view class="doctorCon" wx:if="{
         
  {doctorArr.length>0}}">
    <view class="doctorTitle">
      <view class="doctorText">
        相关医生
      </view>
      <view class="more" bindtap="goDoctorList">
        更多<image src="../../images/jian.png"></image>
      </view>
    </view>
    <view class="doctorList">
      <view class="doctorItem" wx:for="{
         
  {doctorArr}}" bindtap="goDoctorDetail" data-id="{
         
  {item.id}}">
        <view class="imgCon">
          <image wx:if="{
         
  {item.img}}" src="{
         
  {imgHost+item.img}}"></image>
        </view>
        <view class="doctorInfo">
          <view class="nameCon">
            <text class="name">{
         
  {item.name}}</text>
            <text class="title">{
         
  {item.level}}</text>
          </view>
          <view class="classifyAndprice">
            <view class="classify">
              <text>{
         
  {item.department}}</text>
            </view>
            <view class="price">
              <text>￥{
         
  {item.cost}}</text>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    swiperImgs:[],  //轮播图
    bannerCurrentSwiper: 0,
    imgHost:,  //用于存放图片的主机名前缀
    searchVal:,  //搜索
    doctorArr:[]
  },
  //获取搜索输入框值
  getSearchVal:function(e){
    this.setData({
      searchVal:e.detail.value
    });
  },
  //点击搜索进行搜索操作
  searchFun:function(e){
    wx.navigateTo({
      url: ../doctorList/doctorList?searchval=+e.detail.value
    })
  },
  //轮播图滚动事件
  bannerSwiperChange: function (event) {
    this.setData({
      bannerCurrentSwiper:event.detail.current
    })
  },
  //获取轮播图图片
  getbanner:function(){
    var that=this;
    app.requestFun(
      app.globalData.apiConfig.getbanner,
      GET,
      {},
      function (res) {
        if(res.statusCode==200){
          if(res.data.code==1){
            that.setData({
              swiperImgs: res.data.data
            })
          }
        }
      }
    )
  },
  //获取轮播图图片
  getdoctor:function(){
    var that=this;
    app.requestFun(
      app.globalData.apiConfig.getdoctor,
      GET,
      {},
      function (res) {
        if(res.statusCode==200){
          if(res.data.code==1){
            that.setData({
              doctorArr: res.data.data
            })
          }
        }
      }
    )
  },
  onLoad: function () {
    var that=this;
    wx.setNavigationBarTitle({ title: 首页 });
    that.getbanner();
    that.getdoctor();
    that.setData({
      imgHost: app.globalData.apiConfig.imgHost
    })
  },
  goDoctorList:function(){
    wx.navigateTo({
      url:../doctorList/doctorList?type=+0
    })
  },
  goDoctorDetail:function(ev){
    var id=ev.currentTarget.dataset.id;
    wx.navigateTo({
      url: ../doctorDetail/doctorDetail?id=+id
    })
  }
})

以上是我项目的相关界面和代码，如果你有什么技术上的难题，开发时遇到的问题，欢迎随时交流