You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
275 lines
8.2 KiB
275 lines
8.2 KiB
"use strict";
|
|
const components_cityselect_utils_province = require("./utils/province.js");
|
|
const components_cityselect_utils_city = require("./utils/city.js");
|
|
const components_cityselect_utils_area = require("./utils/area.js");
|
|
const common_vendor = require("../../common/vendor.js");
|
|
const _sfc_main = {
|
|
props: {
|
|
// 通过双向绑定控制组件的弹出与收起
|
|
value: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
|
|
defaultRegion: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
|
|
areaCode: {
|
|
type: Array,
|
|
default() {
|
|
return [];
|
|
}
|
|
},
|
|
// 是否允许通过点击遮罩关闭Picker
|
|
maskCloseAble: {
|
|
type: Boolean,
|
|
default: true
|
|
},
|
|
// 弹出的z-index值
|
|
zIndex: {
|
|
type: [String, Number],
|
|
default: 0
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
cityValue: "",
|
|
isChooseP: false,
|
|
//是否已经选择了省
|
|
province: 0,
|
|
//省级下标
|
|
provinces: components_cityselect_utils_province.provinceData,
|
|
isChooseC: false,
|
|
//是否已经选择了市
|
|
city: 0,
|
|
//市级下标
|
|
citys: components_cityselect_utils_city.cityData[0],
|
|
isChooseA: false,
|
|
//是否已经选择了区
|
|
area: 0,
|
|
//区级下标
|
|
areas: components_cityselect_utils_area.areaData[0][0],
|
|
tabsIndex: 0
|
|
};
|
|
},
|
|
mounted() {
|
|
this.init();
|
|
},
|
|
computed: {
|
|
isChange() {
|
|
return this.tabsIndex > 1;
|
|
},
|
|
genTabsList() {
|
|
let tabsList = [{
|
|
name: "请选择"
|
|
}];
|
|
if (this.isChooseP) {
|
|
tabsList[0]["name"] = this.provinces[this.province]["label"];
|
|
tabsList[1] = {
|
|
name: "请选择"
|
|
};
|
|
}
|
|
if (this.isChooseC) {
|
|
tabsList[1]["name"] = this.citys[this.city]["label"];
|
|
tabsList[2] = {
|
|
name: "请选择"
|
|
};
|
|
}
|
|
if (this.isChooseA) {
|
|
tabsList[2]["name"] = this.areas[this.area]["label"];
|
|
}
|
|
return tabsList;
|
|
},
|
|
uZIndex() {
|
|
return this.zIndex ? this.zIndex : 99;
|
|
}
|
|
},
|
|
methods: {
|
|
open() {
|
|
this.$refs.popup.open();
|
|
},
|
|
init() {
|
|
if (this.areaCode.length == 3) {
|
|
this.setProvince("", this.areaCode[0]);
|
|
this.setCity("", this.areaCode[1]);
|
|
this.setArea("", this.areaCode[2]);
|
|
} else if (this.defaultRegion.length == 3) {
|
|
this.setProvince(this.defaultRegion[0], "");
|
|
this.setCity(this.defaultRegion[1], "");
|
|
this.setArea(this.defaultRegion[2], "");
|
|
}
|
|
},
|
|
setProvince(label = "", value = "") {
|
|
this.provinces.map((v, k) => {
|
|
if (value ? v.value == value : v.label == label) {
|
|
this.provinceChange(k);
|
|
}
|
|
});
|
|
},
|
|
setCity(label = "", value = "") {
|
|
this.citys.map((v, k) => {
|
|
if (value ? v.value == value : v.label == label) {
|
|
this.cityChange(k);
|
|
}
|
|
});
|
|
},
|
|
setArea(label = "", value = "") {
|
|
this.areas.map((v, k) => {
|
|
if (value ? v.value == value : v.label == label) {
|
|
this.isChooseA = true;
|
|
this.area = k;
|
|
}
|
|
});
|
|
},
|
|
close() {
|
|
this.$refs.popup.close();
|
|
},
|
|
tabsChange(index) {
|
|
this.tabsIndex = index;
|
|
},
|
|
provinceChange(param) {
|
|
this.isChooseP = true;
|
|
this.isChooseC = false;
|
|
this.isChooseA = false;
|
|
this.province = param.name;
|
|
this.citys = components_cityselect_utils_city.cityData[param.name];
|
|
this.tabsIndex = 1;
|
|
},
|
|
cityChange(param) {
|
|
this.isChooseC = true;
|
|
this.isChooseA = false;
|
|
this.city = param.name;
|
|
this.areas = components_cityselect_utils_area.areaData[this.province][param.name];
|
|
this.tabsIndex = 2;
|
|
},
|
|
areaChange(param) {
|
|
this.isChooseA = true;
|
|
this.area = param.name;
|
|
let result = {};
|
|
result.province = this.provinces[this.province];
|
|
result.city = this.citys[this.city];
|
|
result.area = this.areas[this.area];
|
|
this.$emit("city-change", result);
|
|
this.close();
|
|
}
|
|
}
|
|
};
|
|
if (!Array) {
|
|
const _easycom_uv_tabs2 = common_vendor.resolveComponent("uv-tabs");
|
|
const _easycom_uv_icon2 = common_vendor.resolveComponent("uv-icon");
|
|
const _easycom_uv_cell2 = common_vendor.resolveComponent("uv-cell");
|
|
const _easycom_uv_cell_group2 = common_vendor.resolveComponent("uv-cell-group");
|
|
const _easycom_uv_popup2 = common_vendor.resolveComponent("uv-popup");
|
|
(_easycom_uv_tabs2 + _easycom_uv_icon2 + _easycom_uv_cell2 + _easycom_uv_cell_group2 + _easycom_uv_popup2)();
|
|
}
|
|
const _easycom_uv_tabs = () => "../../uni_modules/uv-tabs/components/uv-tabs/uv-tabs.js";
|
|
const _easycom_uv_icon = () => "../../uni_modules/uv-icon/components/uv-icon/uv-icon.js";
|
|
const _easycom_uv_cell = () => "../../uni_modules/uv-cell/components/uv-cell/uv-cell.js";
|
|
const _easycom_uv_cell_group = () => "../../uni_modules/uv-cell/components/uv-cell-group/uv-cell-group.js";
|
|
const _easycom_uv_popup = () => "../../uni_modules/uv-popup/components/uv-popup/uv-popup.js";
|
|
if (!Math) {
|
|
(_easycom_uv_tabs + _easycom_uv_icon + _easycom_uv_cell + _easycom_uv_cell_group + _easycom_uv_popup)();
|
|
}
|
|
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
return common_vendor.e({
|
|
a: $props.value
|
|
}, $props.value ? {
|
|
b: common_vendor.sr("tabs", "6511adfd-1,6511adfd-0"),
|
|
c: common_vendor.o($options.tabsChange),
|
|
d: common_vendor.p({
|
|
lineColor: "#a0cd63",
|
|
list: $options.genTabsList,
|
|
scrollable: true,
|
|
current: $data.tabsIndex
|
|
})
|
|
} : {}, {
|
|
e: common_vendor.f($data.provinces, (item, index, i0) => {
|
|
return common_vendor.e({
|
|
a: $data.isChooseP && $data.province === index
|
|
}, $data.isChooseP && $data.province === index ? {
|
|
b: "6511adfd-4-" + i0 + "," + ("6511adfd-3-" + i0),
|
|
c: common_vendor.p({
|
|
size: "34",
|
|
color: "#a0cd63",
|
|
name: "checkbox-mark"
|
|
})
|
|
} : {}, {
|
|
d: index,
|
|
e: common_vendor.o($options.provinceChange, index),
|
|
f: "6511adfd-3-" + i0 + ",6511adfd-2",
|
|
g: common_vendor.p({
|
|
title: item.label,
|
|
arrow: false,
|
|
name: index
|
|
})
|
|
});
|
|
}),
|
|
f: $data.isChooseP
|
|
}, $data.isChooseP ? {
|
|
g: common_vendor.f($data.citys, (item, index, i0) => {
|
|
return common_vendor.e({
|
|
a: $data.isChooseC && $data.city === index
|
|
}, $data.isChooseC && $data.city === index ? {
|
|
b: "6511adfd-7-" + i0 + "," + ("6511adfd-6-" + i0),
|
|
c: common_vendor.p({
|
|
size: "34",
|
|
color: "#a0cd63",
|
|
name: "checkbox-mark"
|
|
})
|
|
} : {}, {
|
|
d: index,
|
|
e: common_vendor.o($options.cityChange, index),
|
|
f: "6511adfd-6-" + i0 + ",6511adfd-5",
|
|
g: common_vendor.p({
|
|
title: item.label,
|
|
arrow: false,
|
|
name: index
|
|
})
|
|
});
|
|
})
|
|
} : {}, {
|
|
h: $data.isChooseC
|
|
}, $data.isChooseC ? {
|
|
i: common_vendor.f($data.areas, (item, index, i0) => {
|
|
return common_vendor.e({
|
|
a: $data.isChooseA && $data.area === index
|
|
}, $data.isChooseA && $data.area === index ? {
|
|
b: "6511adfd-10-" + i0 + "," + ("6511adfd-9-" + i0),
|
|
c: common_vendor.p({
|
|
size: "34",
|
|
color: "#a0cd63",
|
|
name: "checkbox-mark"
|
|
})
|
|
} : {}, {
|
|
d: index,
|
|
e: common_vendor.o($options.areaChange, index),
|
|
f: "6511adfd-9-" + i0 + ",6511adfd-8",
|
|
g: common_vendor.p({
|
|
title: item.label,
|
|
arrow: false,
|
|
name: index
|
|
})
|
|
});
|
|
})
|
|
} : {}, {
|
|
j: $options.isChange ? 1 : "",
|
|
k: common_vendor.sr("popup", "6511adfd-0"),
|
|
l: common_vendor.o($options.close),
|
|
m: common_vendor.p({
|
|
mode: "bottom",
|
|
popup: false,
|
|
mask: true,
|
|
closeable: true,
|
|
["safe-area-inset-bottom"]: true,
|
|
["close-icon-color"]: "#ffffff",
|
|
["z-index"]: $options.uZIndex,
|
|
maskCloseAble: $props.maskCloseAble
|
|
})
|
|
});
|
|
}
|
|
const Component = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
|
|
wx.createComponent(Component);
|