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

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 : mvar d = dd.getDate()d = d < 10 ? '0' + d : dreturn 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'})}},

总结

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

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

微信小程序实现时间预约功能
微信小程序实现时间预约功能类似这样 1.wxml  <view class='containt'>&l ...
微信小程序中苹果iOS手机显示时间格式NaN不正确的问题
项目场景: 实现安卓Android和苹果iOS中微信小程序显示订单时间信息问题描述微信小程序中苹果iOS手机显示时间格式NaN不正确的问题原因分析: 安卓微信小程序显示正常,苹果按格式YYYY- ...
微信小程序中IOS获取不到时间（年、月）
微信小程序中获取时间戳IOS不兼容 new Date("2017-06-16") 在IOS会出现NAN的情况所以对于时间转换需要另行封装,解决方案如下把"-" ...
基于微信小程序图书馆座位预约系统设计与实现
摘要在面对当今培育人才计划的压力,人们需要汲取更多的不同领域的知识来不断扩充自己的知识层面,因此他们对学习的欲望不断扩大,图书馆作为高校的学习宝地,有着不可替代的地位.但是在信息化时代,传统模式下的 ...
场地预约小程序,场地预约微信小程序,运动场地预约小程序
项目背景和意义目的:本课题主要目标是设计并能够实现一个基于微信小程序运动场地预约系统,前台用户使用小程序,后台管理使用基PHP+MySql的B/S架构:通过后台添加开放的场地类型(比如羽毛球.篮球. ...
【计算机毕业文章】基于微信小程序的健身房预约系统
摘要伴随着我国整体经济的快速发展,在人们享受幸福生活的同时,也会花大量的时间在运动健身上.由于人们的对健康的要求不断提高,一大批健身房涌现出来,为人们提供基本的运动健身相关的配套服务.目前大多数健 ...
Canvas绘图在微信小程序中的应用:生成个性化海报
Canvas绘图在微信小程序中的应用:生成个性化海报如极客时间的一些实现案例: 基础语法 Canvas本质是一个可以使用脚本(通常为JavaScript)来绘制图形的 HTML 元素,默认大小为30 ...
在微信小程序中绘制图表（part3）
本期大纲 1.饼图绘制 2.如何添加动画效果 3.使用rollup构建项目相关阅读: 在微信小程序中绘制图表(part1) 在微信小程序中绘制图表(part2) 关注我的 github 项目查看完 ...
微信小程序中使用JSAPI支付
微信小程序中使用JSAPI支付在微信小程序中使用微信支付api[wx.requestPayment]需要传递以下字段如何获取支付所需要的值在微信小程序中使用微信支付api[wx.requestP ...

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

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

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

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

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

4. wxml展示

5. 页面监控函数onShow

6. 预约提交

总结

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

最新文章

热门文章