关于微信小程序中时间预约的简单实现

在平时小程序的学习中遇到一个需求，就是要预约未来一星期内的某段时间，并自动返回是否可以预约的状态。

那么本人尝试过的解决的思路可以是如下的几个步骤：（在下初出茅庐、技拙请多多海涵，觉得啰嗦请直接跳目录看代码）

1. 在小程序对应Page的js文件中定义获取未来某天的方法getDate(day)（比如我的命名是appointment.js，下面的命名同理），再将其封装为获取连续几天的方法getDates(days)。
2. 接着在生命周期函数onLoad中调用上面方法，放在data的自己创建的二维数组datetimeArray:[[],[]]中，定义初始选中时间chooseTime为二维数组中的第一项，方便动态显示已选时间和状态。
3. 定义选择时间的点击事件，每当选中一个时间段就将选中的二维数组的下标索引放在定义的multiIndex数组中，将选中的时间保存在chooseTime变量，只要触发点击事件就自动设置更新值并通过this.setData保存到data中。
4. 选中时间段后点击提交预约，判断是否可选、有无填写联系方式等。

1. js中定义获取日期函数、日期点击事件

 //获取未来某天的方法
  getDate(day) {
    var dd = new Date()
    dd.setDate(dd.getDate() + day);//获取AddDayCount天后的日期 
    var y = dd.getFullYear()
    var m = dd.getMonth() + 1//获取当前月份的日期 
    m = m < 10 ? '0' + m : m
    var d = dd.getDate()
    d = d < 10 ? '0' + d : d
    return y + "-" + m + "-" + d
  },
  
  //获取未来几天的数组
  getDates(days){
    let datas =this.data.datetimeArray[0]
    // datas.push('---')
    for(var i = 1;i <= days;i++){
      datas.push(this.getDate(i))
    }
    return datas;
  }

   bindMultiPickerChange(e) {
		// console.log(e);
    var arr = e.detail.value;
    // console.log(arr);  
		var one = this.data.datetimeArray[0][arr[0]];
		var two = this.data.datetimeArray[1][arr[1]];
		this.setData({
			multiIndex: e.detail.value,
			chooseTime: one + " " + two
    })
    // console.log(this.data.chooseTime);
		this.getflag(this.data.teacherId,this.data.chooseTime);
	},

2. 在data中定义数组等变量

/**
   * 页面的初始数据
   */
  data: {
    datetimeArray:[[],[]],
    times:['8:00-9:50','10:00-11:50','12:00-13:50','14:00-15:50','16:00-17:50','18:00-19:50','20:00-21:50'],
    multiIndex:[0,0],
    teacherId:0,
    teacherInfo:{},
    flag:true,
    chooseTime:"",
    address:{},
  },

3. onLoad调用函数并保存回data

获取是否可选，本人用的是传统后台，写的接口大概就是根据该教师id+时间段查询预约表有无该记录，这里就不详细拓展。

 onLoad: function (options) { 
    const address = wx.getStorageSync("address")
    var datas = this.getDates(7)
    this.setData({
      datetimeArray:[datas,this.data.times],
      address
    })
    console.log(this.data.datetimeArray);
    let chooseTime = this.data.datetimeArray[0][0]+" "+this.data.datetimeArray[1][0]
    this.setData({
      chooseTime
    })
    this.getflag(this.data.teacherId,this.data.chooseTime);
  },

4. wxml展示

附上wxml上关于时间选择的展示，这里用到的是picker组件，根据multiIndex展示datetimeArray二维数组，下标0指的是数组中的第一个元素，跟java数组差距不大。

<view class="choosetime">
  <text>选择时间：</text>
  <picker mode="multiSelector" bindchange="bindMultiPickerChange" value="{{multiIndex}}" range="{{datetimeArray}}">
    <view class="chosen">
      <text>{{datetimeArray[0][multiIndex[0]]}} {{datetimeArray[1][multiIndex[1]]}}</text>
    </view>
  </picker>
</view>
<view class="teacher">
  选择教师：<text>{{teacherInfo.name}}</text>
</view>
<view class="canchoose">
  状态：<text class="state">{{flag===true?"不可选":"可选"}}</text>
</view>
<view class="submit">
  <button type="primary" plain  bindtap="submitAppointment">提交预约</button>
</view>

5. 页面监控函数onShow

每选一次时间，通过点击事件改变其在wxml的显示，并未查询其状态，所以要在这里调用方法获取状态是否可选。

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let pages = getCurrentPages();
    let currentPage =  pages[pages.length-1];
    let options = currentPage.options;
    const {id} = options;
    // console.log(id);
    this.setData({
      teacherId :id
    })
    this.getTeacherById(id);
    this.getflag(this.data.teacherId,this.data.chooseTime);
  },

6. 预约提交

通过绑定点击事件，触发方法，先判断状态，再判断有无联系方式，最后通过后台添加相关记录。

async submitAppointment(e){
    console.log(e);
    if(this.data.flag){
      await showToast({ title: "该时间已被预约，请重新选择" }) 
    }else if(this.data.address.phone==''){
      await showToast({ title: "未填写联系方式或收货地址" })
      wx.navigateTo({
        url: '/pages/address/address',
      }) 
    }else{
      await request({url:"/appointmentApi/addAppointment",
      data:{"time":this.data.chooseTime,"address":this.data.address.address,"phone":this.data.address.phone,"username":this.data.address.userName,"sex":this.data.address.sex,"teacherId":this.data.teacherId}});
      await showToast({ title: "预约成功" }) 
      wx.switchTab({
        url: '/pages/teacherplus/teacherplus'
      })
    }
  },

总结

	在下技拙，用的是原生的小程序以及传统的后台管理系统，样式做得并不美观，代码也缺乏优化，有大神用的云开发或者云服务器云数据库，学习成本会相对较低一些。所以本人仅是展示在一次需求中的预约界面实现步骤，希望能帮助到有需要的人。有更好的解决方案，欢迎指教！