uni-app——picker组件的用法、时间、日期、地区选择器等

1、uniapp–picker组件

<template><view class="signUp"><view class="signUp_dv1"><u-form :model="form" ref="uForm" label-width="95px"><u-form-item label="日期" :required="true"><u-input v-model="form.applicantDate"  @click="applicantDate" placeholder="请输入日期"/><image src="../../static/tabbar/jianyou1.png" class="imgs"  mode=""></image></u-form-item><u-form-item label="车型" :required="true"><view class="uni-list-cell-db" v-if="carList.length>0"><picker @change="bindPickercarType" :value="index1" :range="carList" range-key="name"><view>{{carList[index1].name}}</view></picker></view><image src="../../static/tabbar/jianyou1.png" class="imgs" mode=""></image></u-form-item><u-form-item label="出发地" :required="true"><view class="uni-list-cell-db"><u-input v-model="form.departure" @click="departureardess"  placeholder="请输入出发地"/></view><image src="../../static/tabbar/jianyou1.png" class="imgs" mode=""></image></u-form-item><u-form-item label="目的地" :required="true"><view class="uni-list-cell-db"><u-input v-model="form.destination" @click="destinationardess"  placeholder="请输入出发地"/></view><image src="../../static/tabbar/jianyou1.png" class="imgs" mode=""></image></u-form-item><u-form-item label="计划用车时间" :required="true"><u-input v-model="form.startDate" @click="cstarttime"  placeholder="请输入计划用车时间"/><image src="../../static/tabbar/jianyou1.png" class="imgs" mode=""></image></u-form-item><u-form-item label="预计返回时间" :required="true"><u-input v-model="form.endDate" @click="cendtime"  placeholder="请输入预计返回时间"/><image src="../../static/tabbar/jianyou1.png" class="imgs" mode=""></image></u-form-item><view class=""><u-picker mode="time" default-time="" v-model="show" :params="params" @confirm="confirm"></u-picker><u-picker mode="time" default-time="" v-model="show1" :params="params" @confirm="confirm1"></u-picker><u-picker mode="time" default-time="" v-model="show2" :params="params" @confirm="confirm2"></u-picker><u-picker mode="region"  v-model="show3" :params="ardessparams" @confirm="confirm3"></u-picker><u-picker mode="region"  v-model="show4" :params="departureparams" @confirm="confirm4"></u-picker></view><u-form-item label="事由" :required="true"></u-form-item><u-form-item  prop="usageReason" style="padding: 0 8px;" class="sss"><u-input class="JTxtArea lg" :maxlength="300" :data-maxnum="form.usageReason.length+'/300'" auto-height v-model="form.usageReason" placeholder="描述要求在300字符以内" @input="cuiinput" style="padding: 0 8px;"/></u-form-item></u-form></view></view>
</template><script>export default {data() {return {page: 1,pageSize:9999,indexR1:0,carList:[],//车辆类型departureList:[],//出发地destinationList:[],//目的地pictures:[],videos:'',fileList:[],index:0,index1:0,index2:0,index3:0,index4:0,form: {title: "",//标题applicantName: "",//申请人vehicleDept:'',//申请人部门phone:'',//联系电话applicantDate:'',//申请日期leader:'',//带车人follower:'',//随行人员type:'',//申请车型departure:"",//出发地destination:'',//目的地startDate:'',//计划用车时间endDate:'',//预计返回时间usageReason:'',//用车事由applicantCode:'',//申请单号},deviceid:'',code:'',indexR: 0,rules: {// 可以单个或者同时写两个触发验证方式title: [{required: true,message: '请输入标题',trigger: 'blur'}],applicantName:[{ required: true,message: '请输入申请人',trigger: 'blur'}],vehicleDept:[{ required: true,message: '请输入申请部门',trigger: ['blur', 'change']	}],applicantDate:[{ required: true,message: '请输入申请日期',trigger: ['blur', 'change']	}],leader:[{ required: true,message: '请输入带车人',trigger: ['blur', 'change']	}],follower:[{ required: true,message: '请输入随行人员',trigger: ['blur', 'change']	}],type:[{ required: true,message: '请选择车型',trigger: ['blur', 'change']	}],departure:[{ required: true,message: '请选择出发地',trigger: ['blur', 'change']	}],destination:[{ required: true,message: '请选择目的地',trigger: ['blur', 'change']	}],startDate:[{ required: true,message: '请选择计划用车时间',trigger: ['blur', 'change']	}],endDate:[{ required: true,message: '请选择预计返回时间',trigger: ['blur', 'change']	}],usageReason:[{ required: true,message: '请输入用车事由',trigger: ['blur', 'change']	}],phone:[{ required: true,message: '请输入手机号',trigger: ['blur', 'change']	}],applicantCode:[{ required: true,message: '请输入申请单号',trigger: ['blur', 'change']	}],},setFocus:false,params: {year: true,month: true,day: true,},ardessparams:{province: true,city: true,area: true},departureparams:{province: true,city: true,area: true},show: false,show1: false,show2: false,show3: false,show4: false,showSelect:false,showList:[],subjectAarr:[0], };},mounted(){this.getCarList();this.getPickerCar();},onReady() {this.$refs.uForm.setRules(this.rules);},onLoad(e) {},onNavigationBarButtonTap(e) {this.submit()},methods: {setBlur(){this.setFocus=false;  }, selectClick(e) {this.setFocus=trueconsole.log(e[0],'cui')uni.setStorageSync('productName1',  e[0].label)this.form.productName = e[0].labelthis.deviceid = e[0].value},// 模糊搜索searchProduct(){//首先判断输入框是否为空if(this.form.productName === ''){//this.showList是下拉框显示的内容，如果为空就展示全部数据this.showList = this.listdata  //否则执行下面内容}else{//先清空展示的数据this.showList = []//1.前端匹配if(uni.getStorageSync('productName1') == this.form.productName){this.showList = this.listdata}else {this.showList = this.listdata.filter((item)=>{return item.deviceName.indexOf(this.form.productName)>=0})}}this.showSelect = true},cstarttime(){this.show = trueconsole.log('123')},cendtime(){this.show1 = true},applicantDate(){this.show2 = true},//出发地departureardess(){this.show3 = true},//目的地destinationardess(){this.show4 = true},confirm(e){this.form.startDate = `${e.year}-${e.month}-${e.day} `console.log(this.$refs.uForm,'this.strattime')//this.$refs.uForm.clearValidate('startDate')//${e.hour}:${e.minute}},confirm1(e){console.log(e,'e')this.form.endDate = `${e.year}-${e.month}-${e.day} `//this.$refs.uForm.clearValidate('endDate')//${e.hour}:${e.minute}},confirm2(e){console.log(e,'e')this.form.applicantDate = `${e.year}-${e.month}-${e.day} `//this.$refs.uForm.clearValidate('applicantDate')//${e.hour}:${e.minute}},confirm3(e){console.log(e,'e')this.form.departure = `${e.province.label},${e.city.label},${e.area.label} `//this.$refs.uForm.clearValidate('departure')},confirm4(e){console.log(e,'e')this.form.destination = `${e.province.label},${e.city.label},${e.area.label} `},cuiinput(){},getPickerCar(){this.httptool.vGet(this.constApis.leader.URL+"?pageNum="+this.page+"&pageSize="+this.pageSize, {},(res) => {if (res.data.code == 200) {this.leadercarList = res.data.rowsthis.total = res.data.total}//console.log(this.leadercarList,'this.leadercarList')})},bindPickerCar(e){this.index2 = e.target.value//this.getPickerCar(this.leadercarList[this.index].userName)},getCarList(){this.httptool.vGet(this.constApis.vehiclecar.URL+"?pageNum="+this.page+"&pageSize="+this.pageSize, {},(res) => {if (res.data.code == 200) {this.carList = res.data.data}})},bindPickercarType(e){this.index1 = e.target.value//this.getCarList(this.carList[this.index1].name)},submit() {this.$refs.uForm.validate(valid => {if (valid) {this.postsignup()} else {console.log('验证失败');}});},postsignup(){let obj = {title:this.form.title,applicantName:this.form.applicantName,vehicleDept:this.form.vehicleDept,phone:this.form.phone,applicantDate:this.form.applicantDate,leader:this.leadercarList[this.index2].userName,follower:this.form.follower,type:this.carList[this.index1].name,departure:this.form.departure,destination:this.form.destination,startDate:this.form.startDate,endDate:this.form.endDate,applicantCode:this.form.applicantCode,usageReason:this.form.usageReason}this.httptool.vPost(this.constApis.vehicleadd.URL, obj,(res) => {if (res.data.code == 200) {uni.showToast({icon: 'none',title: '提交成功'});}})},}}
</script><style lang="scss" scoped >.signUp{// background-color: #F9F9F9;//    height: 100%;// overflow: hidden;padding-bottom: 15px;.signUp_dv1{background-color: #fff;// height: calc(100% - 100upx);border-radius: 16upx;margin: 20upx;padding: 20upx 20upx;padding-bottom: 40px;// /deep/ .u-form-item{// 	padding-top: 0 !important;// }/deep/ .u-form-item__message{padding-left: 95px !important;}.sss{/deep/ .u-form-item__message{padding-left: 0px !important;}}/deep/ .u-form-item--left__content--required{left: -6px !important;}.imgs{width: 14px;height: 12px;}.fileList{display: flex;flex-wrap: wrap;padding: 0;.fileList_dv{width:23%;position: relative;display: inline-block;margin-right: 15upx;}}.uploader_video{position: relative;z-index: 1;margin-top: 15px;padding:1rpx;background:#000;border-radius: 10rpx;height: 140px;.video{width: 100%;height: 100%;}.photodel{width: 50upx;height: 50upx;position: absolute;right: 0px;top: 0px;background-color: rgba(0,0,0,0.4);.imgs{width: 50upx;height: 50upx;}}}.certif_dv{// margin: 0 auto;width: 180upx;height: 150upx;background: #FFFFFF;border-radius: 16upx;border: 1px dashed #979797;// margin-top: 30upx;.imgs_dv{// width: 88upx;// height: 88upx;// // background: #F1F1F1;// box-shadow: 0px 0px 12px 0px rgba(185, 185, 185, 0.2);// border-radius: 50%;margin: auto;margin-top: 8upx;.imgs{width: 80upx;height: 80upx;margin: 18px auto;display: block;}}.text_dv{font-size: 26upx;font-family: PingFangSC-Regular, PingFang SC;color: #666666;text-align: center;display: block;// margin-top: 10upx;}}.Photo{width: 180upx;height: 150upx;// border-radius: 16upx;display: inline-block;}.photodel{width: 40upx;height: 40upx;position: absolute;right: 0px;top: 0px;background-color: rgba(0,0,0,0.4);.imgs{width: 40upx;height: 40upx;}}.flex_s{justify-content: space-between;}.JTxtArea {background-color: #F9F9F9;border-radius: 5px;width: 100%;// box-sizing: border-box;padding: 8px;min-height: 60px;line-height: 20px;color: #666666;position: relative;.uni-textarea-placeholder{font-size: 28upx;color:#afabab;}&.sm{min-height: 30px;}&.lg{min-height: 100px;}&:after{content: attr(data-maxnum);position: absolute;right: 5px;bottom: 0px;font-size: 12px;color: #B9B9B9;}}}}.u-form-view{padding: 20upx;}.u-form-item{padding: 16upx;}.warning-item{padding: 15upx 0 5upx 0;margin: 0 40upx;border-bottom: 1px solid #eaeaea;}.warning-item-row{display: flex;font-size: 26upx;}.warning-item-row:nth-child(1){color: #0099ff;}.warning-item-row.text-color-red{color: #ff480b;}.item-row-icon{width: 30upx;}
</style>

  `