<template>
|
<view class="form-info">
|
<u-form :model="form" ref="uForm">
|
<u-form-item label="证件类型" :label-width="lableWidth">
|
<picker @change="typeClassSelect" :range="typeClassArray" class="typeClass-select">
|
<label :style="{color:typeClassArrayTypeColor}" v-model="form.type">{{ typeClassArrayType }}</label>
|
</picker>
|
</u-form-item>
|
<u-form-item label="姓名" :label-width="lableWidth">
|
<u-input v-model="form.name" placeholder="请输入姓名"/>
|
</u-form-item>
|
<u-form-item label="身份证号码" :label-width="lableWidth">
|
<u-input v-model="form.idCardNo" placeholder="请输入身份证号码"/>
|
</u-form-item>
|
<u-form-item label="手机号" :label-width="lableWidth">
|
<u-input v-model="form.phone" placeholder="请输入手机号"/>
|
</u-form-item>
|
<u-form-item label="联系地址" :label-width="lableWidth">
|
<u-input v-model="form.address" placeholder="请输入联系地址" />
|
</u-form-item>
|
<u-form-item label="有效时间" :label-width="lableWidth">
|
<!-- <u-input v-model="form.sex" type="select" placeholder="请选择有效时间"/> -->
|
<picker @change="timeClassSelect" :range="timeClassArray" class="timeClass-select">
|
<label :style="{color:timeClassArrayTypeColor}" v-model="durationTime">{{ timeClassArrayType }}</label>
|
</picker>
|
</u-form-item>
|
<u-form-item label="备注" :label-width="lableWidth">
|
<u-input v-model="form.remark" placeholder="请输入备注"/>
|
</u-form-item>
|
|
<u-button class="btn" type="primary">提交</u-button>
|
</u-form>
|
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
form: {
|
name: '',
|
idCardNo: '',
|
type: '',
|
phone:'',
|
address:'',
|
durationTime:'',
|
remark:'',
|
},
|
lableWidth:160,
|
typeClassArrayTypeColor:"#C0C4CC",
|
typeClassArray:['通行证','寄养证'],
|
typeClassArrayIndex:0,
|
typeClassArrayType:'请选择证件类型',
|
timeClassArrayTypeColor:"#C0C4CC",
|
timeClassArray:["1个月","2个月","3个月","6个月","1年","2年"],
|
timeClassArrayIndex:0,
|
timeClassArrayType:'请选择有效时长',
|
}
|
},
|
methods:{
|
//证件类型下拉改变事件
|
typeClassSelect(e){
|
var that = this;
|
this.typeClassArrayIndex = e.target.value;
|
this.typeClassArrayType=this.typeClassArray[this.typeClassArrayIndex];
|
//修改样式
|
this.typeClassArrayTypeColor ="#000000";
|
},
|
//有效时长下拉改变事件
|
timeClassSelect(e){
|
var that = this;
|
this.timeClassArrayIndex = e.target.value;
|
this.timeClassArrayType=this.timeClassArray[this.timeClassArrayIndex];
|
//修改样式
|
this.timeClassArrayTypeColor ="#000000";
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.form-info{
|
width: 92%;
|
margin: 0 auto;
|
}
|
|
.btn{
|
margin-top: 1.5rem;
|
}
|
</style>
|
