html
<view>
<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm" labelWidth="174">
<u-form-item label="身份选择" prop="userInfo.sex" borderBottom @click="showSex = true; " ref="item1">
<u--input v-model="model1.userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择身份"
border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="真实姓名" prop="userInfo.name" borderBottom ref="item1">
<u--input v-model="model1.userInfo.name" border="none" placeholder="请输入您的姓名"></u--input>
</u-form-item>
<u-form-item label="所在城市" prop="userInfo.city" borderBottom @click="show1 = true; " ref="item1">
<u--input v-model="model1.userInfo.city" disabled disabledColor="#ffffff" placeholder="请选择所在城市"
border="none"></u--input>
<u-icon slot="right" name="arrow-right"></u-icon>
</u-form-item>
<u-form-item label="执业机构" prop="userInfo.jigou" borderBottom ref="item1">
<u--input v-model="model1.userInfo.jigou" border="none" placeholder="请输入您的所在机构"></u--input>
</u-form-item>
</u--form>
<u-action-sheet :show="showSex" :actions="actions" @close="showSex = false"
@select="sexSelect">
</u-action-sheet>
<view class="">
<u-picker :show="show1" ref="uPicker" :columns="cityList" @confirm="cityConfirm" @cancel="cancel()" itemHeight="70"
@change="changeHandler"></u-picker>
</view>
</view>
javascript
<script>
import cityData from '@/utils/city.js'
export default {
data() {
return {
showSex: false,
model1: {
userInfo: {
name: '',
sex: '',
city: '',
jigou:''
},
},
actions: [{
name: '医生',
},
{
name: '员工',
},
],
cityList: [],
cityLevel1: [],
cityLevel2: [],
cityLevel3: [],
areaname:'',
show1: false,
rules: {
'userInfo.name': {
type: 'string',
required: true,
message: '请填写姓名',
trigger: ['blur', 'change']
},
'userInfo.sex': {
type: 'string',
max: 2,
required: true,
message: '请选择身份',
trigger: ['blur', 'change']
},
'userInfo.jigou': {
type: 'string',
required: true,
message: '请填写机构',
trigger: ['blur', 'change']
},
},
radio: '',
switchVal: false
};
},
onReady() {
//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
this.$refs.uForm.setRules(this.rules)
},
onLoad() {
// 城市选择器初始化
this.initCityData();
},
methods: {
sexSelect(e) {
console.log(e)
this.model1.userInfo.sex = e.name
this.$refs.uForm.validateField('userInfo.sex')
},
citySelect(e) {
console.log(e)
this.model1.userInfo.city = e.name
this.$refs.uForm.validateField('userInfo.city')
},
// 城市选择器
initCityData() {
// 遍历城市js
cityData.forEach((item1, index1) => {
let temp2 = [];
this.cityLevel1.push(item1.provinceName);
let temp4 = [];
let temp3 = [];
// 遍历市
item1.cities.forEach((item2, index2) => {
temp2.push(item2.cityName);
// 遍历区
item2.counties.forEach((item3, index3) => {
temp3.push(item3.countyName);
})
temp4[index2] = temp3;
temp3 = [];
})
this.cityLevel3[index1] = temp4;
this.cityLevel2[index1] = temp2;
})
// 选择器默认城市
this.cityList.push(this.cityLevel1, this.cityLevel2[0], this.cityLevel3[0][0]);
console.log(this.cityList)
}, // 选中时执行
changeHandler(e) {
const {
columnIndex,
index,
indexs,
value,
values,
// 微信小程序无法将picker实例传出来，只能通过ref操作
picker = this.$refs.uPicker
} = e;
if (columnIndex === 0) { // 选择第一列数据时
// 设置第二列关联数据
picker.setColumnValues(1, this.cityLevel2[index]);
// 设置第三列关联数据
picker.setColumnValues(2, this.cityLevel3[index][columnIndex]);
} else if (columnIndex === 1) { // 选择第二列数据时
// 设置第三列关联数据
picker.setColumnValues(2, this.cityLevel3[indexs[0]][index]);
}
},
// 单击确认按钮时执行
cityConfirm(e) {
// 输出数组 [省, 市, 区]
console.log(e.value);
this.areaname = e.value
this.cityName = e.value.join("-");
// 隐藏城市选择器
console.log(this.cityName);
this.show1 = false;
this.model1.userInfo.city = this.cityName
},
cancel() {
this.show1 = false
},
},
}
</script>
html
/deep/ .u-popup__content {
width: 100%;
height: 800rpx;
}
/deep/.u-icon__icon {
color: #1FCFC9 !important;
font-size: 32rpx !important;
}
/deep/ .u-action-sheet__item-wrap button {
background: #fff !important;
}
/deep/ .u-action-sheet__item-wrap button::after {
border: none;
}
/deep/.u-form {
display: flex;
flex-direction: column;
align-items: center;
width: 690rpx;
margin: auto;
margin-top: 48rpx;
.u-form-item {
width: 100%;
}
}
/deep/ .u-form-item__body {
width: 100%;
height: 120rpx !important;
display: flex;
align-items: center;
justify-content: space-between;
}
/deep/ .u-input__content__field-wrapper__field {
color: #333 !important;
font-family: YouSheShaYuFeiTeJianKangTi !important;
font-size: 28rpx !important;
}
/deep/ .u-form-item__body__left__content__label {
color: #333 !important;
font-family: YouSheShaYuFeiTeJianKangTi !important;
font-size: 28rpx !important;
}
city.js资源已上传