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"><
·
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=true
console.log(e[0],'cui')
uni.setStorageSync('productName1', e[0].label)
this.form.productName = e[0].label
this.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 = true
console.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.rows
this.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>
`
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
0
0- 0
已为社区贡献4条内容
所有评论(0)