做一个购物网站多少钱,广州互联网,电商网站建设基本流程图,网站配置域名解析接口数据如上图
省市区多级联动#xff0c;都是使用的一个接口通过传参父类的code。返回我们想要的数据
比如获取省就直接不要参数。市就把省得code传给接口#xff0c;区就把市的code作为参数。
picker modemultiSelector :rangemulSelect1 …
接口数据如上图
省市区多级联动都是使用的一个接口通过传参父类的code。返回我们想要的数据
比如获取省就直接不要参数。市就把省得code传给接口区就把市的code作为参数。
picker modemultiSelector :rangemulSelect1 :range-keyregionName :valueaddressIndex changepickerChange1 columnchangecolChangeview classpickerview classright-uni-iconsuni-icons size18 typeright color#A8ABB2//viewinput v-modeladdress1 disabled placeholder请选择 placeholder-classaddress-placeholder v-if!address1/view v-else classchosed-address{{ address1 }}/view/view
/picker
import {ref} from vue;
const province ref([]) //省数组
const city ref([]) //市数组
const district ref([]) //区数组
const street ref([]) //街道数组const mulSelect1 ref([]) //四级联动显示数组[[province],[city],[district],[street]]
const addressIndex ref([]);//省市区街道数组的下标[0,1,0,0]
const addressCode ref([]);省市区街道数组的编码[11,1111,111444,12220232]
const address1 ref();//选中省市区街道的文字组成部分
import {regionList} from /http/my;//接口onLoad(() {getProvince()
})
const getProvince async () {//获取1级省
let {data: province1} await regionList({})
province.value province1;
mulSelect1.value.push(province.value);
//获取2级
// 默认省份选择河南省.如果你不需要这里就不需要加上
let indexprovince.value.findIndex(res{return res.regionName河南省
})
let chosedProvinceprovince.value[index].code;
addressIndex.value.push(index)
let {data: city1} await regionList({parentCode: chosedProvince});let {data: city1} await regionList({parentCode: province.value[0].code});//默认选中省的第一个去取市的数据
city.value city1;
mulSelect1.value.push(city.value);
addressIndex.value.push(0)
//获取3级
let {data: district1} await regionList({parentCode: city.value[0].code});//默认选中市的第一个去取区的数据
district.value district1;
mulSelect1.value.push(district.value);
addressIndex.value.push(0)
//获取4级
let {data: street1} await regionList({parentCode: district.value[0].code});//默认选中区的第一个去取街道的数据
street.value street1;
mulSelect1.value.push(street.value);
addressIndex.value.push(0)
}
//有数据的变动就重新获取下级。并且下级默认选择第一个.避免出现上一次选择的第二个。切换了上级之后下级还是选的第二个的情况。
const colChange async (e) {console.log(change,e)if (e.detail.column 0) {//省变化let {data: city1} await regionList({parentCode: province.value[e.detail.value].code});city.value city1;let {data: district1} await regionList({parentCode: city.value[0].code});district.value district1;let {data: street1} await regionList({parentCode: district.value[0].code});street.value street1;addressIndex.value[0]e.detail.value;addressIndex.value[1]0;addressIndex.value[2]0;addressIndex.value[3]0;}if (e.detail.column 1) {//市变化let {data: district1} await regionList({parentCode: city.value[e.detail.value].code});district.value district1;let {data: street1} await regionList({parentCode: district.value[0].code});street.value street1;addressIndex.value[1]e.detail.value;addressIndex.value[2]0;addressIndex.value[3]0;}if (e.detail.column 2) {//区变化let {data: street1} await regionList({parentCode: district.value[e.detail.value].code});street.value street1;addressIndex.value[2]e.detail.value;addressIndex.value[3]0;}mulSelect1.value [province.value, city.value, district.value,street.value];// console.log(选中的数组下标,addressIndex.value)
}
//获取选择的全部内容
const pickerChange1 (e) {console.log(pickerChange, province.value)let provice1 province.value[e.detail.value[0]];let city1 city.value[e.detail.value[1]]let district1 district.value[e.detail.value[2]];let street1 street.value[e.detail.value[3]];address1.value (provice1.regionName) (city1.regionName) (district1.regionName)(street1.regionName);addressCode.value [provice1.code, city1.code, district1.code,street1.code];//let address{allName: address1.value,//省市区街道的中文code:addressCode.value,//省市区街道的code值数组}console.log(getCurrentAddressAll, address)
}
