微信小程序云开发：预约上门简单案例

效果图

代码

仅展示前端页面

wxml代码

<view class="indexTop">
    <view class="topLeft">
        <image src="/static/品铄.png">image>
    view>
    <view class="topMiddle">消防维保,消防评估,消防检测view>
view>
<view class="row">
    <view>您的姓名view>
    <input type="text" placeholder="请输入姓名" value="{{oderName}}" bindinput="bindName"/>
view>
<view style="width: 95%;border-top: solid #D3D3D3 1rpx;margin:0 auto;border-radius: 20rpx;">view>
<view class="row">
    <view>联系电话view>
    <input type="text" placeholder="输入手机号" value="{{oderPhone}}" bindinput="bindPhone"/>
view>
<view style="width: 95%;border-top: solid #D3D3D3 1rpx;margin:0 auto;border-radius: 20rpx;">view>
<view class="row">
    <view>您的地址view>
    <input type="text" placeholder="输入具体地址" value="{{orderAddress}}" bindinput="bindAdress"/>
view>
<view style="width: 95%;border-top: solid #D3D3D3 1rpx;margin:0 auto;border-radius: 20rpx;">view>
<view class="row dataSelect">
    <view>到店日期view>
    <picker style="margin-left: 20rpx;" mode="date" bindchange="handleDateChange">
        <view class="time-picker">{{selectedDateTime}}view>
    picker>
view>
<view style="width: 95%;border-top: solid #D3D3D3 1rpx;margin:20rpx auto;border-radius: 20rpx;">view>
<view class="row dataSelect">
    <view>到店时间段view>
    <picker mode="time" style="margin-left: 20rpx;"  bindchange="handleTimePickerChange">
        <view class="time-picker">{{selectedTime}}view>
    picker>
view>

<button style="width: 95%;margin:40rpx auto;background-color: #66CC00;color: white;" bindtap="bindSubmit">立刻预约button>

wcss代码

/* pages/dingzuo/dingzuo.wxss */
.indexTop{
    width: 100%;
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: space-between;
    margin-top: 15rpx;
    padding-bottom: 20rpx;
}
.topLeft{
    width: 30%;
    display: flex;
    flex-direction:row;
    align-items: center;
    justify-content: space-between;
    margin-left: 20rpx;
}
.topLeft>image{
    height:70rpx;
}
.topMiddle{
    color: #ff6700;
    font-weight: 550;
    margin-right: 10rpx;
    font-size: 35rpx;
    padding-bottom:5rpx;
    border-bottom: 5rpx solid #ccc;
}
.row{
    width: 95%;
    display: flex;
    flex-direction: row;
    align-items: center;
    margin: 20rpx auto;
   height: 60rpx;
}
.row>input{
    margin-left: 20rpx;
}
.time-picker{
    color: rgb(107, 107, 107);
}
.row_fenge{
    width: 35%;
    border-top: #D3D3D3 solid 2rpx;
}
.row_lr_fenge{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-top: 40rpx;
}
.orderNumInfo{
    width: 90%;
    margin: 20rpx auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-self: start;
}
.orderNumInfoRow{
    width: 40%;
    height: 100rpx;
    margin: 20rpx 20rpx;
    justify-content: center;
    align-items: center;
    border: #C0C0C0 solid 2rpx;
    text-align: center;
    line-height: 2.5;
    font-size: 37rpx;
    border-radius: 20rpx;
}
.selectQueding{
    color: seagreen;
    border: seagreen solid 2rpx;
    font-weight: 550;
}

js部分

// pages/yuyue/yuyue.js
var timestamp=Date.parse(new Date())
var date=new Date(timestamp)
Page({

    /**
     * 页面的初始数据
     */
    data: {
        selectedDateTime: '点击选择日期',
        selectedTime:'点击选择时间段',
        selectIndex:0,
        oderName:'',
        oderPhone:'',
        oderNum:'',
        orderAddress:''
    },
    handleDateChange(event) {
        const selectedDateTime = event.detail.value;
        this.setData({
          selectedDateTime: selectedDateTime
        });
      },
      handleTimePickerChange(event) {
        const selectedTime = event.detail.value;
        // 在这里执行你的业务逻辑，比如将选择的时间存储起来或者展示在页面上
        this.setData({
            selectedTime: selectedTime
        });
    
      },
      /* 手机号 */
      bindPhone(e){
          console.log(e.detail.value);
          this.setData({
              oderPhone:e.detail.value
          })
      },
      /*姓名*/
      bindName(e){
        console.log(e.detail.value);
        this.setData({
            oderName:e.detail.value
        })
      },
      /* 地址 */
      bindAdress(e){
        console.log(e.detail.value);
        this.setData({
            orderAddress:e.detail.value
        })
      },
    bindSubmit(e){
    //先判单用户是否登录
        if(wx.getStorageSync('userInfo').loginFlag){
        //判断信息是否完整
            if(this.data.oderName.length!=0 && this.data.oderPhone.length!=0 && this.data.orderAddress.length!=0 && this.data.selectedTime!='点击选择时间段' && this.data.selectedDateTime!='点击选择日期'){
                wx.showLoading({
                    title:'立刻预约'
                })
                //加入到数据库中
                wx.cloud.database().collection('yuyue').add({
                    data:{
                        name:this.data.oderName,
                        phone:this.data.oderPhone,
                        address:this.data.orderAddress,
                        date:this.data.selectedDateTime,
                        time:this.data.selectedTime,
                        status:'未受理',
                        subTime:date.getFullYear()+'-'+(date.getMonth()+1)+'-'+(date.getDate())+' '+(date.getHours())+':'+(date.getMinutes())+':'+(date.getSeconds()),
                    },success:(res)=>{
                        wx.hideLoading()
                        this.setData({
                            selectedDateTime: '点击选择日期',
                            selectedTime:'点击选择时间段',
                            oderName:'',
                            oderPhone:'',
                            oderNum:'',
                            orderAddress:''
                        })
                        wx.showModal({
                            title:'预约成功',
                            content:'稍后工作人员与您进行联系'
                        })
                        
                    }
                })
            }else{
            
                wx.showToast({
                  title: '请填写完整',
                  icon:'none'
                })
            }
        }else{
            wx.showModal({
                title:'未登录',
                content:'点击确定登录',
                success(res){
                    if(res.confirm){
                        wx.switchTab({
                          url: '/pages/user/user',
                        })
                    }
                }
            })
        }
    }
})

搭建后台注意事项

小程序云开发在js中每次只能最多读取20条数据
在云函数中最多读取100条数据，所有搭建后台的时候要考虑分页策略
可以看我之前的一篇文章：