关于微信小程序中时间预约的简单实现
- 1. js中定义获取日期函数、日期点击事件
- 2. 在data中定义数组等变量
- 3. onLoad调用函数并保存回data
- 4. wxml展示
- 5. 页面监控函数onShow
- 6. 预约提交
- 总结
在平时小程序的学习中遇到一个需求，就是要预约未来一星期内的某段时间，并自动返回是否可以预约的状态。
那么本人尝试过的解决的思路可以是如下的几个步骤：（在下初出茅庐、技拙请多多海涵，觉得啰嗦请直接跳目录看代码）
- 在小程序对应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'
})
}
},总结
在下技拙，用的是原生的小程序以及传统的后台管理系统，样式做得并不美观，代码也缺乏优化，有大神用的云开发或者云服务器云数据库，学习成本会相对较低一些。所以本人仅是展示在一次需求中的预约界面实现步骤，希望能帮助到有需要的人。有更好的解决方案，欢迎指教！
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
