uniapp实现省市区三级级联选择功能(含地区json文件)
作者：骛曲玛黑
这篇文章主要给大家介绍了关于uniapp实现省市区三级级联选择功能(含地区json文件)的相关资料,级级联是一种常见的网页交互设计,用于省市区选择,它的目的是方便用户在一系列选项中进行选择,并且确保所选选项的正确性和完整性,需要的朋友可以参考下
前言
最近被安排做小程序用uniapp进行项目开发，有点惨啊。很烦。
遇到一个需求需要选择地址，还是省市区级联选择，这里经过调查思考，最终做出来了，太不容易了。直接上代码
一.项目结构
二.相关代码
引入
import provinceData from '../../static/js/area-full.json';
oldpProvinceDataList: provinceData,
newProvinceDataList: [
[],
[],
[]
],
multiIndex: [0, 0, 0],
select: '请选择省市区',
addressData: {
name: '',
phone: '',
address: ''
},
binhao: '1', onLoad() {
let savedInfo = uni.getStorageSync('vehicleInfo');
console.log('savedInfo', savedInfo)
if (savedInfo) {
this.saveInfo = savedInfo
}
// console.log('area', provinceData)
// console.log(this.oldpProvinceDataList);
for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
// console.log(this.oldpProvinceDataList[i].name);
this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
}
for (let i = 0; i < this.oldpProvinceDataList[0].districts.length; i++) {
// console.log(this.oldpProvinceDataList[0].city[i].name)
this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].districts[i].name);
}
for (let i = 0; i < this.oldpProvinceDataList[0].districts[0].districts.length; i++) {
// console.log(this.oldpProvinceDataList[0].city[0].area)
this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].districts[0].districts[i].name);
}
}, // 省市区确认事件
pickerChange(e) {
this.multiIndex = e.detail.value;
this.select =
`${this.newProvinceDataList[0][this.multiIndex[0]]},${this.newProvinceDataList[1][this.multiIndex[1]]},${this.newProvinceDataList[2][this.multiIndex[2]]}`
// console.log('666',this.newProvinceDataList[2][this.multiIndex[2]])
if (this.addressType == 1) {
this.saveInfo.vehicleLocation = this.select
} else if (this.addressType == 2) {
this.saveInfo.placeOfBelonging = this.select
}
// this.$forceUpdate()
},
pickerColumnchange(e) {
// 第几列滑动
// console.log(e.detail.column);
// 第几列滑动的下标
// console.log(e.detail.value)
// 第一列滑动
if (e.detail.column === 0) {
this.multiIndex[0] = e.detail.value
// console.log('第一列滑动');
// this.newProvinceDataList[1] = [];
this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].districts.map((item,
index) => {
// console.log('1',item)
return item.name
})
// console.log(this.multiIndex)
if (this.oldpProvinceDataList[this.multiIndex[0]].districts.length === 1) {
this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].districts[0].districts
.map((item, index) => {
// console.log('2',item)
return item.name
})
} else {
// console.log('444',this.oldpProvinceDataList[this.multiIndex[0]].districts[this.multiIndex[1]].districts);
this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].districts[this
.multiIndex[1]].districts.map((item, index) => {
// console.log('3',item)
return item.name
})
}
// 第一列滑动 第二列 和第三列 都变为第一个
this.multiIndex.splice(1, 1, 0)
this.multiIndex.splice(2, 1, 0)
}
// 第二列滑动
if (e.detail.column === 1) {
this.multiIndex[1] = e.detail.value
// console.log('第二列滑动');
// console.log(this.multiIndex)
this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].districts[this.multiIndex[
1]].districts.map((item, index) => {
// console.log(item)
return item.name
})
// 第二列 滑动 第三列 变成第一个
this.multiIndex.splice(2, 1, 0)
}
// 第三列滑动
if (e.detail.column === 2) {
this.multiIndex[2] = e.detail.value
// console.log('第三列滑动')
// console.log(this.multiIndex)
}
},
openSelectItems(type) {
this.addressType = type
if (type == 1) {
this.select = this.saveInfo.vehicleLocation
} else if (type == 2) {
this.select = this.saveInfo.placeOfBelonging
}
this.$refs.popup2.open()
},
模板代码
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">车辆停放地区</view>
<view class="input-content" @click="openSelectItems(1)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.vehicleLocation?saveInfo.vehicleLocation:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">车辆停放详细地址</view>
<view class="input-content">
<uni-easyinput :inputBorder="false" :clearable="false" v-model="saveInfo.detailAddress"
placeholderStyle="text-align:right" placeholder="请输入" cursorSpacing="60px" />
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">归属地区</view>
<view class="input-content" @click="openSelectItems(2)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.placeOfBelonging?saveInfo.placeOfBelonging:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
</view>三.完整代码实现
里面包含一些其它代码，看重点即可
<template>
<view class="veh-info-container">
<view class="page-content">
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">车辆类型</view>
<view class="input-content" @click="openSelect(1)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.modelName?saveInfo.modelName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">车辆品牌</view>
<view class="input-content" @click="openSelect(2)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.brandName?saveInfo.brandName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">车辆车系</view>
<view class="input-content" @click="openSelect(3)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.serieName?saveInfo.serieName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666" :disabled="true"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">水淹等级</view>
<view class="input-content" @click="openSelect(4)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.waterName?saveInfo.waterName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">交强险至</view>
<view class="input-content" @click="openDate(1)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.jqxName?saveInfo.jqxName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">年审至</view>
<view class="input-content" @click="openDate(2)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.nsName?saveInfo.nsName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">车辆登记日期</view>
<view class="input-content" @click="openDate(3)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.djName?saveInfo.djName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0">过户次数</view>
<view class="input-content">
<uni-easyinput :inputBorder="false" :clearable="false" v-model="saveInfo.numberOfTransfers"
placeholderStyle="text-align:right" placeholder="请输入" cursorSpacing="60px" />
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">是否有二次事故</view>
<view class="input-content" @click="openSelect(5)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.esgName?saveInfo.esgName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">是否有登记证书</view>
<view class="input-content" @click="openSelect(6)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.djzName?saveInfo.djzName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">是否有行驶证</view>
<view class="input-content" @click="openSelect(7)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.xszName?saveInfo.xszName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0">行驶公里数</view>
<view class="input-content">
<uni-easyinput :inputBorder="false" :clearable="false" type="number"
v-model="saveInfo.kilometersTraveled" placeholderStyle="text-align:right" placeholder="请输入"
cursorSpacing="60px" />
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0">排量</view>
<view class="input-content">
<uni-easyinput :inputBorder="false" :clearable="false" v-model="saveInfo.displacement"
placeholderStyle="text-align:right" placeholder="请输入" cursorSpacing="60px" />
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">变速方式</view>
<view class="input-content" @click="openSelect(8)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.bsName?saveInfo.bsName:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">联系电话</view>
<view class="input-content">
<uni-easyinput :inputBorder="false" :clearable="false" v-model="saveInfo.phone"
placeholderStyle="text-align:right" placeholder="请输入" cursorSpacing="60px" />
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">车辆停放地区</view>
<view class="input-content" @click="openSelectItems(1)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.vehicleLocation?saveInfo.vehicleLocation:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">车辆停放详细地址</view>
<view class="input-content">
<uni-easyinput :inputBorder="false" :clearable="false" v-model="saveInfo.detailAddress"
placeholderStyle="text-align:right" placeholder="请输入" cursorSpacing="60px" />
</view>
</view>
<view class="row-item fx-spt">
<view class="fs-16 fw-500 color-0 ">归属地区</view>
<view class="input-content" @click="openSelectItems(2)">
<text class="fs-16 fw-500 mr-6 color-6 op-8">{{saveInfo.placeOfBelonging?saveInfo.placeOfBelonging:'请选择'}}</text>
<uni-icons type="right" size="16" color="#666"></uni-icons>
</view>
</view>
</view>
<view class="save-btn">
<view class="save" @click="save">保存</view>
</view>
<uni-calendar ref="calendar" :insert="false" @confirm="confirm" />
<uni-popup ref="popup" type="bottom" background-color="#fff">
<view class="pop-content">
<view class="list" v-if="current==1">
<view class="txt-cnter fs-16 fw-500 mb-12" v-for="(item,index) in rangeModels" :key="index"
@click="closeSelect(item,1)">{{item.text}}</view>
</view>
<view class="list" v-if="current==2">
<view class="txt-cnter fs-16 fw-500 mb-12" v-for="(item,index) in rangeBrands" :key="index"
@click="closeSelect(item,2)">{{item.text}}</view>
</view>
<view class="list" v-if="current==3">
<view class="txt-cnter fs-16 fw-500 mb-12" v-for="(item,index) in rangeSeries" :key="index"
@click="closeSelect(item,3)">{{item.text}}</view>
</view>
<view class="list" v-if="current==4">
<view class="txt-cnter fs-16 fw-500 mb-12" v-for="(item,index) in rangeWater" :key="index"
@click="closeSelect(item,4)">{{item.text}}</view>
</view>
<view class="list" v-if="current==5">
<view class="txt-cnter fs-16 fw-500 mb-12" v-for="(item,index) in rangeSg" :key="index"
@click="closeSelect(item,5)">{{item.text}}</view>
</view>
<view class="list" v-if="current==6">
<view class="txt-cnter fs-16 fw-500 mb-12" v-for="(item,index) in rangeSg" :key="index"
@click="closeSelect(item,6)">{{item.text}}</view>
</view>
<view class="list" v-if="current==7">
<view class="txt-cnter fs-16 fw-500 mb-12" v-for="(item,index) in rangeSg" :key="index"
@click="closeSelect(item,7)">{{item.text}}</view>
</view>
<view class="list" v-if="current==8">
<view class="txt-cnter fs-16 fw-500 mb-12" v-for="(item,index) in rangeBs" :key="index"
@click="closeSelect(item,8)">{{item.text}}</view>
</view>
</view>
</uni-popup>
<uni-popup ref="popup2" type="bottom" background-color="#fff">
<view class="pop-content">
<view class="goods-type-content">
<view class="fs-16 fw-700 color-0 txt-cnter pd-18">地区</view>
<view class="pop-list">
<picker class="picker-view" mode="multiSelector" :range="newProvinceDataList"
:value="multiIndex" @change="pickerChange" @columnchange="pickerColumnchange">
<view style="text-align: center;">{{select}}</view>
</picker>
</view>
</view>
</view>
</uni-popup>
</view>
</template>
<script>
import provinceData from '../../static/js/area-full.json';
export default {
data() {
return {
oldpProvinceDataList: provinceData,
newProvinceDataList: [
[],
[],
[]
],
multiIndex: [0, 0, 0],
select: '请选择省市区',
addressData: {
name: '',
phone: '',
address: ''
},
binhao: '1',
// ..........
current: 0,
// waterName: null,
// modelName: null,
// brandName: null,
// serieName: null,
// djName: null,
// jqxName: null,
// nsName: null,
// esgName: null,
// bsName: null,
// tfName: null,
// xszName: null,
// djzName: null,
// gsName: null,
addressType: null,
saveInfo: {
waterName: null,
modelName: null,
brandName: null,
serieName: null,
djName: null,
jqxName: null,
nsName: null,
esgName: null,
bsName: null,
tfName: null,
xszName: null,
djzName: null,
gsName: null,
compulsoryTrafficInsuranceExpirationDate: null,
annualReviewExpirationDate: null,
modelId: null,
vehiclesBrandId: null,
seriesId: null,
waterLevel: null,
secondaryAccident: null,
numberOfTransfers: null,
phone: null,
detailAddress: null,
addressArea: null,
placeOfBelonging: '请选择',
vehicleLocation: '请选择',
},
rangeBrands: [],
rangeModels: [],
rangeSeries: [],
rangeSg: [{
text: '是',
value: 1
},
{
text: '否',
value: 2
},
],
rangeBs: [{
text: '手动',
value: '手动'
},
{
text: '自动',
value: '自动'
},
],
rangeWater: [{
text: '一级',
value: 0
},
{
text: '二级',
value: 1
},
{
text: '三级',
value: 2
},
],
}
},
onLoad() {
let savedInfo = uni.getStorageSync('vehicleInfo');
console.log('savedInfo', savedInfo)
if (savedInfo) {
this.saveInfo = savedInfo
}
// console.log('area', provinceData)
// console.log(this.oldpProvinceDataList);
for (let i = 0; i < this.oldpProvinceDataList.length; i++) {
// console.log(this.oldpProvinceDataList[i].name);
this.newProvinceDataList[0].push(this.oldpProvinceDataList[i].name);
}
for (let i = 0; i < this.oldpProvinceDataList[0].districts.length; i++) {
// console.log(this.oldpProvinceDataList[0].city[i].name)
this.newProvinceDataList[1].push(this.oldpProvinceDataList[0].districts[i].name);
}
for (let i = 0; i < this.oldpProvinceDataList[0].districts[0].districts.length; i++) {
// console.log(this.oldpProvinceDataList[0].city[0].area)
this.newProvinceDataList[2].push(this.oldpProvinceDataList[0].districts[0].districts[i].name);
}
// console.log(this.newProvinceDataList)
//''''''''''''
this.getBrands();
this.getModels();
},
onShow() {
},
methods: {
// 省市区确认事件
pickerChange(e) {
this.multiIndex = e.detail.value;
this.select =
`${this.newProvinceDataList[0][this.multiIndex[0]]},${this.newProvinceDataList[1][this.multiIndex[1]]},${this.newProvinceDataList[2][this.multiIndex[2]]}`
// console.log('666',this.newProvinceDataList[2][this.multiIndex[2]])
if (this.addressType == 1) {
this.saveInfo.vehicleLocation = this.select
} else if (this.addressType == 2) {
this.saveInfo.placeOfBelonging = this.select
}
// this.$forceUpdate()
},
pickerColumnchange(e) {
// 第几列滑动
// console.log(e.detail.column);
// 第几列滑动的下标
// console.log(e.detail.value)
// 第一列滑动
if (e.detail.column === 0) {
this.multiIndex[0] = e.detail.value
// console.log('第一列滑动');
// this.newProvinceDataList[1] = [];
this.newProvinceDataList[1] = this.oldpProvinceDataList[this.multiIndex[0]].districts.map((item,
index) => {
// console.log('1',item)
return item.name
})
// console.log(this.multiIndex)
if (this.oldpProvinceDataList[this.multiIndex[0]].districts.length === 1) {
this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].districts[0].districts
.map((item, index) => {
// console.log('2',item)
return item.name
})
} else {
// console.log('444',this.oldpProvinceDataList[this.multiIndex[0]].districts[this.multiIndex[1]].districts);
this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].districts[this
.multiIndex[1]].districts.map((item, index) => {
// console.log('3',item)
return item.name
})
}
// 第一列滑动 第二列 和第三列 都变为第一个
this.multiIndex.splice(1, 1, 0)
this.multiIndex.splice(2, 1, 0)
}
// 第二列滑动
if (e.detail.column === 1) {
this.multiIndex[1] = e.detail.value
// console.log('第二列滑动');
// console.log(this.multiIndex)
this.newProvinceDataList[2] = this.oldpProvinceDataList[this.multiIndex[0]].districts[this.multiIndex[
1]].districts.map((item, index) => {
// console.log(item)
return item.name
})
// 第二列 滑动 第三列 变成第一个
this.multiIndex.splice(2, 1, 0)
}
// 第三列滑动
if (e.detail.column === 2) {
this.multiIndex[2] = e.detail.value
// console.log('第三列滑动')
// console.log(this.multiIndex)
}
},
//''''''''''
openSelectItems(type) {
this.addressType = type
if (type == 1) {
this.select = this.saveInfo.vehicleLocation
} else if (type == 2) {
this.select = this.saveInfo.placeOfBelonging
}
this.$refs.popup2.open()
},
openSelect(i) {
this.current = i
this.$refs.popup.open()
},
//获取品牌
async getBrands() {
const url = '/vehiclesManagement/brand'
const res = await this.$api.postKeyValue(url, {})
if (res.code == 200) {
this.rangeBrands = res.data.map(item => ({
text: item.name,
value: item.vehiclesBrandId,
}));
}
},
//获取车型
async getModels() {
const url = '/vehiclesManagement/model'
const res = await this.$api.postKeyValue(url, {})
if (res.code == 200) {
this.rangeModels = res.data.map(item => ({
text: item.name,
value: item.modelId,
}));
}
},
openDate(e) {
console.log(e)
this.currentType = e
this.$refs.calendar.open();
},
confirm(e) {
console.log(e);
switch (this.currentType) {
case 1:
this.saveInfo.compulsoryTrafficInsuranceExpirationDate = e.fulldate;
this.saveInfo.jqxName = e.fulldate;
break;
case 2:
this.saveInfo.annualReviewExpirationDate = e.fulldate;
this.saveInfo.nsName = e.fulldate;
break;
case 3:
this.saveInfo.vehicleRegistrationDate = e.fulldate;
this.saveInfo.djName = e.fulldate;
break;
default:
break;
}
},
closeSelect(item, i) {
//current
console.log(item)
switch (i) {
case 1:
this.saveInfo.modelId = item.value;
this.saveInfo.modelName = item.text;
break;
case 2:
this.saveInfo.vehiclesBrandId = item.value;
this.saveInfo.brandName = item.text;
//查询对应系列
this.getSeriesById(item.value);
break;
case 3:
this.saveInfo.seriesId = item.value
this.saveInfo.serieName = item.text;
break;
case 4:
this.saveInfo.waterLevel = item.value;
this.saveInfo.waterName = item.text;
break;
case 5:
this.saveInfo.secondaryAccident = item.value;
this.saveInfo.esgName = item.text;
break;
case 6:
this.saveInfo.certificate = item.value;
this.saveInfo.djzName = item.text;
break;
case 7:
this.saveInfo.drivingLicense = item.value;
this.saveInfo.xszName = item.text;
break;
case 8:
this.saveInfo.gearsType = item.value;
this.saveInfo.bsName = item.text;
break;
default:
break;
}
this.$forceUpdate()
this.$refs.popup.close()
},
async getSeriesById(id) {
const url = '/vehiclesManagement/series'
const res = await await this.$api.postKeyValue(url, {
id: id
})
if (res.code == 200) {
this.rangeSeries = res.data.map(item => ({
text: item.name,
value: item.seriesId,
}));;
}
},
save() {
//字段非空
if (!this.judgeInfoNull()) {
return;
}
//请求接口
uni.navigateTo({
url: "/pages/PublishCar/index"
})
},
judgeInfoNull() {
if (!this.saveInfo.vehicleLocation) {
uni.showToast({
title: '请选择车辆停放区域',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.placeOfBelonging) {
uni.showToast({
title: '请选择车辆归属地',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.annualReviewExpirationDate) {
uni.showToast({
title: '请选择年审截至日期',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.compulsoryTrafficInsuranceExpirationDate) {
uni.showToast({
title: '请选择交强险截至日期',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.detailAddress) {
uni.showToast({
title: '请输入车辆停放详细地址',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.modelId) {
uni.showToast({
title: '请选择车辆类型',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.numberOfTransfers) {
uni.showToast({
title: '请输入过户次数',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.phone) {
uni.showToast({
title: '请输入联系电话',
icon: 'none',
duration: 2000
});
return false;
}
if (this.saveInfo.secondaryAccident == null) {
uni.showToast({
title: '请选择是否有二次事故',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.seriesId) {
uni.showToast({
title: '请选择车系',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.vehiclesBrandId) {
uni.showToast({
title: '请选择品牌',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.waterLevel) {
uni.showToast({
title: '请选择水淹等级',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.vehicleRegistrationDate) {
uni.showToast({
title: '请选择登记日期',
icon: 'none',
duration: 2000
});
return false;
}
if (this.saveInfo.drivingLicense == null) {
uni.showToast({
title: '请选择是否有行驶证',
icon: 'none',
duration: 2000
});
return false;
}
if (this.saveInfo.certificate == null) {
uni.showToast({
title: '请选择是否有登记证书',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.kilometersTraveled) {
uni.showToast({
title: '请输入行驶公里数',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.displacement) {
uni.showToast({
title: '请输入排量',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.gearsType) {
uni.showToast({
title: '请选择变速方式',
icon: 'none',
duration: 2000
});
return false;
}
//先存在本地
uni.setStorageSync('vehicleInfo', this.saveInfo);
console.log('vehicleInfo', uni.getStorageSync('saveInfoKey'))
return true;
}
}
}
</script>
<style scoped>
.pop-btns {
padding: 24rpx 60rpx;
}
.btn {
height: 64rpx;
width: 300rpx;
line-height: 64rpx;
text-align: center;
border-radius: 16rpx;
font-size: 14px;
font-weight: 500;
background: #F4701F;
color: #fff;
}
.picker-view {
width: 100%;
height: 480rpx;
margin-top: 20rpx;
}
.pk-item {
line-height: 100rpx;
text-align: center;
}
.cancel {
background: #fff;
border: 1px solid #eee;
color: #000;
}
.veh-info-container {
width: 100%;
height: 100%;
background: #fff;
display: flex;
flex-direction: column;
}
.page-content {
flex: 1;
box-sizing: border-box;
padding: 24rpx 32rpx;
overflow-y: auto;
}
.row-item {
padding: 18rpx 0;
}
.input-content {
flex: 1;
max-width: 55%;
text-align: right;
}
.input-content>>>.uni-easyinput__content-input {
text-align: right;
}
.save-btn {
flex-shrink: 0;
padding: 24rpx 0 48rpx;
background: #fff;
border-top: 1px solid #eee;
}
.save {
width: 400rpx;
height: 64rpx;
text-align: center;
line-height: 64rpx;
border-radius: 16rpx;
background-color: #F4701F;
margin: 0 auto;
color: #fff;
font-size: 14px;
font-weight: 500;
}
.pop-content {
padding: 36rpx 0 36rpx;
background: #fff;
max-height: 30vh;
overflow-y: scroll;
}
</style>四，效果展示
五.总结
到此这篇关于uniapp实现省市区三级级联选择功能的文章就介绍到这了,更多相关uniapp省市区三级级联选择内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！