关于微信小程序中时间预约的简单实现
在平时小程序的学习中遇到一个需求,就是要预约未来一星期内的某段时间,并自动返回是否可以预约的状态。
![选中教师进入预约界面](https://i-blog.csdnimg.cn/blog_migrate/aa4381d66d20327d56b44f12db73af1e.png)
![选择预约时间段](https://i-blog.csdnimg.cn/blog_migrate/9c29ab4ec9e97d242b7dae1399e2642d.png)
那么本人尝试过的解决的思路可以是如下的几个步骤:(在下初出茅庐、技拙请多多海涵,觉得啰嗦请直接跳目录看代码)
- 在小程序对应Page的js文件中定义获取未来某天的方法getDate(day)(比如我的命名是appointment.js,下面的命名同理),再将其封装为获取连续几天的方法getDates(days)。
- 接着在生命周期函数onLoad中调用上面方法,放在data的自己创建的二维数组datetimeArray:[[],[]]中,定义初始选中时间chooseTime为二维数组中的第一项,方便动态显示已选时间和状态。
- 定义选择时间的点击事件,每当选中一个时间段就将选中的二维数组的下标索引放在定义的multiIndex数组中,将选中的时间保存在chooseTime变量,只要触发点击事件就自动设置更新值并通过this.setData保存到data中。
- 选中时间段后点击提交预约,判断是否可选、有无填写联系方式等。
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'
})
}
},
总结
在下技拙,用的是原生的小程序以及传统的后台管理系统,样式做得并不美观,代码也缺乏优化,有大神用的云开发或者云服务器云数据库,学习成本会相对较低一些。所以本人仅是展示在一次需求中的预约界面实现步骤,希望能帮助到有需要的人。有更好的解决方案,欢迎指教!