初学小程序制作各种选择器并吐司条件

//subscribe.js

var util = require ( '../../utils/util.js' );

var feedbackApi = require ( '../showToast/showToast.js' ); //引入消息提醒暴露的接口

Page ({

data : {

name : '' ,

phone : '' ,

selectYiYuan : '' ,

selectPinJi : '' ,

selectDate : '' ,

selectTime : '' ,

addressInput : '' ,

//date: '2018-01-01', //实时日期

//time: '12:01',//实时时间

aaa : true , //服务地址input隐藏

bbb : false , //服务地址picker显示

//定点医院地址数据

address : [ '妇幼院' , '解放军医院' ],

//服务品级数据

array : [ '优享级' , '豪华级' ],

//服务类型种类

items : [

{ name : '0' , value : '定点服务' , checked : 'true' },

{ name : '1' , value : '上门服务' },

]

},

//获取当前日期和时间

onLoad : function () {

// 调用函数时，传入new Date()参数，返回值是日期和时间

var date = util .formatTime ( new Date ());

// 再通过setData更改Page()里面的data，动态更新页面的数据

this .setData ({

date : date

});

var time = util .formatDate ( new Date ());

this .setData ({

time : time

})

},

nameInput : function (e ) {

console .log (e .detail .value )

this .setData ({

name : e .detail .value

})

},

phoneInput : function (e ) {

this .setData ({

phone : e .detail .value

})

},

//预约日期picker事件

bindDateChange : function (e ) {

console .log ( 'picker发送选择改变，携带值为' , e .detail .value )

this .setData ({

selectDate : e .detail .value ,

})

},

//预约时间picker事件

bindTimeChange : function (e ) {

console .log ( 'picker发送选择改变，携带值为' , e .detail .value )

this .setData ({

selectTime : e .detail .value

})

},

//服务品级picker事件

bindPickerChange : function (e ) {

console .log ( 'picker发送选择改变，携带值为' , e .detail .value )

this .setData ({

selectPinJi : this .data .array [e .detail .value ]

})

},

//服务地址picker事件

bindPickeraddress : function (e ) {

console .log ( 'picker发送选择改变，携带值为' , e .detail .value )

this .setData ({

selectYiYuan : this .data .address [e .detail .value ]

})

},

//服务地址input事件

bindaddress : function (e ) {

this .setData ({

addressInput : e .detail .value

})

},

//服务类型切换事件

radioChange : function (e ) {

console .log (e )

console .log ( 'radio发生change事件，携带value值为：' , e .detail .value )

if (e .detail .value == "0" ) {

console .log ( '7777' )

this .setData ({

aaa : true ,

bbb : false

})

} else {

console .log ( '8888' )

this .setData ({

aaa : false ,

bbb : true ,

})

}

},

//预约点击事件

btnChange : function () {

console .log ( '6666' )

var myreg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/ ;

if ( this .data .name .length == 0 ) {

feedbackApi .showToast ({ title : '请填写联系人姓名' })

} else if (!myreg .test ( this .data .phone )) {

feedbackApi .showToast ({ title : '请填写正确的联系方式' })

} else if ( this .data .aaa && this .data .selectYiYuan == 0 ) {

feedbackApi .showToast ({ title : '请选择医院地址' })

} else if ( this .data .bbb && this .data .addressInput == 0 ) {

feedbackApi .showToast ({ title : '请填写服务地址' })

} else if ( this .data .selectPinJi == 0 ) {

feedbackApi .showToast ({ title : '请选择服务品级' })

} else if ( this .data .selectDate == 0 ) {

feedbackApi .showToast ({ title : '请选择服务日期' })

} else if ( this .data .selectTime == 0 ) {

feedbackApi .showToast ({ title : '请选择服务时间' })

} else {

feedbackApi .showToast ({ title : '预约完成' })

}

}

})

<!--subscribe.wxml-->

< import src= "../showToast/showToast.wxml" / >

< template is= "showToast" data= "{{showToast: showToast}}" / >

< view class= "container" >

<!--第一部分-->

< view class= "top" >

< view class= 'topname' >

< text class= 'toptext' >联 系 人 ： </ text >

< input class= 'topinput' bindinput= 'nameInput' type= 'text' placeholder= '请输入您的姓名' / >

</ view >

< view class= 'line-css' ></ view >

< view class= 'topname' >

< text class= 'toptext' >联系电话： </ text >

< input class= 'topinput' bindinput= 'phoneInput' type= 'text' placeholder= '请输入您的联系电话' / >

</ view >

< view class= 'line-rude' ></ view >

</ view >

<!--第二部分-->

< view class= "center" >

< view class= 'centername' >

< text class= 'toptext' >服务类型： </ text >

< radio-group class= "radio-group" bindchange= "radioChange" >

< label class= "radio" wx:for= "{{items}}" wx:key= 'key' >

< radio class= 'dian' value= "{{item.name}}" checked= "{{item.checked}}" / >{{item.value}}

</ label >

</ radio-group >

</ view >

< view class= 'line-css' ></ view >

< view class= 'centername' >

< text class= 'toptext' >服务地址： </ text >

< picker class= 'pickers' bindchange= "bindPickeraddress" range= "{{address}}" >

< input class= "picker" placeholder= "请选择医院" value= "{{selectYiYuan}}" disabled= "ture" hidden= '{{bbb}}' >

</ input >

</ picker >

< input class= 'topinput1' bindinput= 'bindaddress' type= 'text' placeholder= '请填写您的地址' hidden= '{{aaa}}' / >

</ view >

< view class= 'line-css' ></ view >

< view class= 'centername' >

< text class= 'toptext' >服务品级： </ text >

< picker bindchange= "bindPickerChange" range= "{{array}}" >

< input class= "picker" placeholder= "请选择品级" value= "{{selectPinJi}}" disabled= "ture" >

</ input >

</ picker >

</ view >

< view class= 'line-css' ></ view >

< view class= 'centername' >

< text class= 'toptext' >服务日期： </ text >

< picker mode= "date" value= "{{selectDate}}" start= "{{date}}" end= "2028-01-01" bindchange= "bindDateChange" >

< input class= "picker" placeholder= "请选择日期" value= "{{selectDate}}" disabled= "ture" >

</ input >

</ picker >

</ view >

< view class= 'line-css' ></ view >

< view class= 'centername' >

< text class= 'toptext' >预约时间： </ text >

< picker mode= "time" value= "{{selectTime}}" start= "{{time}}" bindchange= "bindTimeChange" >

< input class= "picker" placeholder= "请选择时间" value= "{{selectTime}}" disabled= "ture" >

</ input >

</ picker >

</ view >

< view class= 'line-rude' ></ view >

</ view >

<!--第三部分-->

< view class= 'bottom' >

< view class= 'bottomname' >

< text class= 'bottomtext1' >温馨提示\n </ text >

< text class= 'bottomtext2' >-请如实填写服务享用着的联系方式和预约地址\n </ text >

< text class= 'bottomtext2' >-快速预约时将由系统自动为您制定合适的服务技师\n </ text >

< text class= 'bottomtext2' >-预约后请在15分钟内完成预约押金支付（金额的20%），否则预约订单无法进行 </ text >

</ view >

</ view >

< button class= 'btn_subscribe' bindtap= 'btnChange' >立即预约 </ button >

</ view >

@import '.. / showToast / showToast. wxss' ;

.topname {

padding-top: 8pt ;

padding-bottom: 8pt ;

margin-left: 15pt ;

display: flex ;

align-items: center ;

}

.centername {

padding-top: 8pt ;

padding-bottom: 8pt ;

margin-left: 15pt ;

display: flex ;

align-items: center ;

}

.toptext {

font-size: 18px ;

}

.topinput {

font-size: 16px ;

}

.topinput1 {

font-size: 16px ;

}

.line-css {

height: 1px ;

background: #eee ;

}

.line-rude {

height: 10px ;

background: #eee ;

}

.bottomname {

margin-top: 10pt ;

margin-left: 15pt ;

display: block ;

}

.bottomtext2 {

font-size: 14px ;

}

.bottom {

padding-bottom: 148 rpx ;

}

.btn_subscribe {

margin-top: 30 rpx ;

margin-left: 30 rpx ;

margin-right: 30 rpx ;

margin-bottom: 30 rpx ;

width: calc( 100vw - 60 rpx) ;

height: 88 rpx ;

background-color: #ff8ab4 ;

color: white ;

position: fixed ;

bottom: 0 ;

}

.picker {

font-size: 16px ;

}

.radio {

font-size: 16px ;

}