最近被安排做小程序用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>
四，效果展示
五.总结
功能实现没啥好说的，直接上代码，如有疑问，可私信我。同时json文件我正在想办法上传。也可以私信我要，看到会回的。
