效果图
代码
仅展示前端页面
wxml代码
<!--pages/dingzuo/dingzuo.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条数据,所有搭建后台的时候要考虑分页策略
可以看我之前的一篇文章: