uniapp實現(xiàn)省市區(qū)三級級聯(lián)選擇功能(含地區(qū)json文件)
更新時間：2024年06月05日 09:02:48 作者：騖曲瑪黑
這篇文章主要給大家介紹了關(guān)于uniapp實現(xiàn)省市區(qū)三級級聯(lián)選擇功能(含地區(qū)json文件)的相關(guān)資料,級級聯(lián)是一種常見的網(wǎng)頁交互設(shè)計,用于省市區(qū)選擇,它的目的是方便用戶在一系列選項中進(jìn)行選擇,并且確保所選選項的正確性和完整性,需要的朋友可以參考下
前言
最近被安排做小程序用uniapp進(jìn)行項目開發(fā)，有點慘啊。很煩。
遇到一個需求需要選擇地址，還是省市區(qū)級聯(lián)選擇，這里經(jīng)過調(diào)查思考，最終做出來了，太不容易了。直接上代碼
一.項目結(jié)構(gòu)
二.相關(guān)代碼
引入
import provinceData from '../../static/js/area-full.json';
oldpProvinceDataList: provinceData,
newProvinceDataList: [
[],
[],
[]
],
multiIndex: [0, 0, 0],
select: '請選擇省市區(qū)',
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);
}
}, // 省市區(qū)確認(rèn)事件
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);
// 第幾列滑動的下標(biāo)
// 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
})
}
// 第一列滑動 第二列 和第三列 都變?yōu)榈谝粋€
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 ">車輛停放地區(qū)</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 ">車輛停放詳細(xì)地址</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 ">歸屬地區(qū)</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>三.完整代碼實現(xiàn)
里面包含一些其它代碼，看重點即可
<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 ">交強(qiáng)險至</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">過戶次數(shù)</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">行駛公里數(shù)</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 ">聯(lián)系電話</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 ">車輛停放地區(qū)</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 ">車輛停放詳細(xì)地址</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 ">歸屬地區(qū)</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">地區(qū)</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: '請選擇省市區(qū)',
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: {
// 省市區(qū)確認(rèn)事件
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);
// 第幾列滑動的下標(biāo)
// 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
})
}
// 第一列滑動 第二列 和第三列 都變?yōu)榈谝粋€
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;
//查詢對應(yīng)系列
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: '請選擇車輛停放區(qū)域',
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: '請選擇交強(qiáng)險截至日期',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.detailAddress) {
uni.showToast({
title: '請輸入車輛停放詳細(xì)地址',
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: '請輸入過戶次數(shù)',
icon: 'none',
duration: 2000
});
return false;
}
if (!this.saveInfo.phone) {
uni.showToast({
title: '請輸入聯(lián)系電話',
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: '請輸入行駛公里數(shù)',
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>四，效果展示
五.總結(jié)
到此這篇關(guān)于uniapp實現(xiàn)省市區(qū)三級級聯(lián)選擇功能的文章就介紹到這了,更多相關(guān)uniapp省市區(qū)三級級聯(lián)選擇內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
watch?的本質(zhì)就是觀測一個響應(yīng)式數(shù)據(jù)，當(dāng)數(shù)據(jù)發(fā)生變化時通知并執(zhí)行相應(yīng)的回調(diào)函數(shù)。watch的實現(xiàn)利用了effect?和?options.scheduler?選項，這篇文章主要介紹了Vue3源碼分析偵聽器watch的實現(xiàn)原理,需要的朋友可以參考下2022-08-08
vue中手機(jī)號,郵箱正則驗證以及60s發(fā)送驗證碼的實例
下面小編就為大家分享一篇vue中手機(jī)號,郵箱正則驗證以及60s發(fā)送驗證碼的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
創(chuàng)建vue項目沒有router、view的解決辦法
在學(xué)習(xí)vue的時候遇到很多問題,這里做一些總結(jié),下面這篇文章主要給大家介紹了關(guān)于創(chuàng)建vue項目沒有router、view文件夾的解決辦法,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
Vue實現(xiàn)父子組件之間的數(shù)據(jù)傳遞
在前端開發(fā)中,Vue.js 是一個非常流行的框架,因其易學(xué)易用而受到許多開發(fā)者的青睞,其中,組件是 Vue 的核心概念之一,組件之間的數(shù)據(jù)傳遞是開發(fā)中的常見需求,本文將探討如何在 Vue 中實現(xiàn)父子組件之間的數(shù)據(jù)傳遞,需要的朋友可以參考下2024-11-11
vue-quill-editor二次封裝,實現(xiàn)自定義文件上傳方式
這篇文章主要介紹了vue-quill-editor二次封裝,實現(xiàn)自定義文件上傳方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vue+Axios實現(xiàn)文件上傳自定義進(jìn)度條
這篇文章主要為大家詳細(xì)介紹了Vue+Axios實現(xiàn)文件上傳自定義進(jìn)度條，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
對于vue來說，組件之間的消息傳遞是非常重要的，用vue可以是要組件復(fù)用的，而組件實例的作用域是相互獨立，這意味著不同組件之間的數(shù)據(jù)無法互相引用，一般來說，組件之間可以有幾種關(guān)系，下面是我對組件之間消息傳遞的常用方式的總結(jié)2022-08-08
這篇文章主要介紹了Vue引入部分element.ui組件的一些小坑記錄,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
通過Element ui往頁面上加一個分頁導(dǎo)航條的方法
這篇文章主要介紹了通過Element ui往頁面上加一個分頁導(dǎo)航條的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要給大家介紹了在vue.js中抽出公共代碼的方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06