uniapp实现省市区三级级联选择功能(含地区json文件)
更新时间：2024年06月05日 09:02:48 作者：骛曲玛黑
这篇文章主要给大家介绍了关于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省市区三级级联选择内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
跨域是指当一个资源去访问另一个不同域名或者同域名不同端口的资源时,就会发出跨域请求,下面这篇文章主要给大家介绍了关于vue使用vite配置跨域以及环境配置的相关资料,需要的朋友可以参考下2022-07-07
这篇文章主要介绍了详解VUE单页应用骨架屏方案，详细的介绍了什么是骨架屏以及是宪法方案，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
最近接了一个移动端的项目，实现微信扫码功能，今天小编利用这个平台给大家分享vue实现二维码扫描功能的实现代码，需要的朋友参考下吧2021-08-08
这篇文章主要介绍了vue异步加载高德地图的实现，详细的介绍了异步加载的实现方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-06-06
这篇文章主要介绍了element-ui实现表格边框的动态切换并防抖方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
Vue Easytable是一个基于Vue.js的数据表格组件库,它提供丰富的功能和灵活的配置,帮助开发者快速搭建复杂的数据表格界面,这篇文章主要介绍了vue easytable组件使用,需要的朋友可以参考下2023-09-09
这篇文章主要为大家详细介绍了vue实现表格过滤功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-09-09
element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选功能
这篇文章主要介绍了element-ui tree 异步树实现勾选自动展开、指定展开、指定勾选,项目中用到了vue的element-ui框架，用到了el-tree组件，由于数据量很大，使用了数据懒加载模式，即异步树，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了vue-router 路由传参用法,结合实例形式分析了vue-router 路由传参基本使用方法及操作注意事项,需要的朋友可以参考下2020-03-03
这篇文章主要介绍了使用vue自定义如何实现Tree组件和拖拽功能，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-12-12
最新评论