@cqmcui/cqmcui
Version:
轻量级移动端 Vue2、Vue3 组件库（支持小程序开发）
517 lines (516 loc) • 18 kB
JavaScript
import { ref, computed, reactive, watch, toRefs, nextTick, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, renderSlot, withDirectives, createVNode, vShow, toDisplayString, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, normalizeStyle, createTextVNode } from "vue";
import { c as createComponent } from "./component-81a4c1d0.js";
import { P as Popup, p as popupProps } from "./index-c55ad69e.js";
import Elevator from "./Elevator.js";
import { Location, Location2, Check, Close, Left } from "@cqmcui/icons-vue";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
import "../locale/lang";
import "./Overlay.js";
import "./index-79c5dc33.js";
const { componentName, create, translate } = createComponent("address");
const _sfc_main = create({
components: {
Location,
Location2,
Check,
Close,
Left,
[Popup.name]: Popup,
[Elevator.name]: Elevator
},
inheritAttrs: false,
props: {
...popupProps,
modelValue: {
type: Array,
default: () => []
},
type: {
type: String,
default: "custom"
},
customAddressTitle: {
type: String,
default: ""
},
province: {
type: Array,
default: () => []
},
city: {
type: Array,
default: () => []
},
// 市
country: {
type: Array,
default: () => []
},
// 县
town: {
type: Array,
default: () => []
},
// 镇
isShowCustomAddress: {
type: Boolean,
default: true
},
existAddress: {
type: Array,
default: () => []
},
existAddressTitle: {
type: String,
default: ""
},
customAndExistTitle: {
type: String,
default: ""
},
height: {
type: [String, Number],
default: "200px"
},
columnsPlaceholder: {
type: [String, Array],
default: ""
}
},
emits: ["update:visible", "update:modelValue", "type", "change", "selected", "close", "close-mask", "switch-module"],
setup(props, { emit }) {
const regionLine = ref(null);
const tabRegion = ref(null);
const showPopup = ref(props.visible);
const privateType = ref(props.type);
const tabIndex = ref(0);
const prevTabIndex = ref(0);
const tabName = ref(["province", "city", "country", "town"]);
const scrollDom = ref(null);
const scrollDis = ref([0, 0, 0, 0]);
const regionList = computed(() => {
switch (tabIndex.value) {
case 0:
return props.province;
case 1:
return props.city;
case 2:
return props.country;
default:
return props.town;
}
});
const transformData = (data) => {
if (!Array.isArray(data))
throw new TypeError("params muse be array.");
if (!data.length)
return [];
data.forEach((item) => {
if (!item.title) {
console.warn("[cqmcui] <Address> 请检查数组选项的 title 值是否有设置 ,title 为必填项 .");
return;
}
});
const newData = [];
data = data.sort((a, b) => a.title.localeCompare(b.title));
data.forEach((item) => {
const index2 = newData.findIndex((value) => value.title === item.title);
if (index2 <= -1) {
newData.push({
title: item.title,
list: [].concat(item)
});
} else {
newData[index2].list.push(item);
}
});
return newData;
};
let selectedRegion = ref([]);
let selectedExistAddress = reactive({});
const closeWay = ref("self");
const lineDistance = ref(20);
const initCustomSelected = () => {
const defaultValue = props.modelValue;
const num = defaultValue.length;
if (num > 0) {
tabIndex.value = num - 1;
if (regionList.value.length == 0) {
tabIndex.value = 0;
return;
}
for (let index2 = 0; index2 < num; index2++) {
let arr = [];
switch (index2) {
case 0:
arr = props.province;
break;
case 1:
arr = props.city;
break;
case 2:
arr = props.country;
break;
default:
arr = props.town;
}
selectedRegion.value[index2] = arr.filter((item) => item.id == defaultValue[index2])[0];
}
lineAnimation();
}
};
const getTabName = (item, index2) => {
if (item && item.name)
return item.name;
if (tabIndex.value < index2 && item) {
return item.name;
} else {
return props.columnsPlaceholder[index2] || translate("select");
}
};
const lineAnimation = () => {
scrollTo();
nextTick(() => {
const name = tabRegion.value && tabRegion.value.getElementsByClassName("active")[0];
if (name) {
const distance = name.offsetLeft;
lineDistance.value = distance ? distance : 20;
}
});
};
const nextAreaList = (item) => {
const tab = tabIndex.value;
prevTabIndex.value = tabIndex.value;
const callBackParams = {
custom: tabName.value[tab]
};
selectedRegion.value[tab] = item;
for (let i = tab + 2; i < 4; i++) {
selectedRegion.value.splice(i, 1);
}
if (tab < 3) {
tabIndex.value = tab + 1;
lineAnimation();
callBackParams.next = tabName.value[tabIndex.value];
callBackParams.value = item;
emit("change", callBackParams);
} else {
handClose();
emit("update:modelValue");
}
};
const changeRegionTab = (item, index2) => {
prevTabIndex.value = tabIndex.value;
if (getTabName(item, index2)) {
tabIndex.value = index2;
lineAnimation();
}
};
const scrollTo = () => {
const dom = scrollDom.value;
const prev = prevTabIndex.value;
const cur = scrollDis.value[tabIndex.value];
(dom == null ? void 0 : dom.scrollTop) && (scrollDis.value[prev] = dom == null ? void 0 : dom.scrollTop);
nextTick(() => {
dom == null ? void 0 : dom.scrollTo({
top: cur,
behavior: "auto"
});
});
};
const selectedExist = (item) => {
const copyExistAdd = props.existAddress;
let prevExistAdd = {};
copyExistAdd.forEach((list) => {
if (list && list.selectedAddress)
prevExistAdd = list;
list.selectedAddress = false;
});
item.selectedAddress = true;
selectedExistAddress = item;
emit("selected", prevExistAdd, item, copyExistAdd);
handClose();
};
const initAddress = () => {
selectedRegion.value = [];
tabIndex.value = 0;
lineAnimation();
};
const handClose = (type = "self") => {
closeWay.value = type == "cross" ? "cross" : "self";
showPopup.value = false;
};
const clickOverlay = () => {
closeWay.value = "mask";
};
const close = () => {
const data = {
addressIdStr: "",
addressStr: "",
province: selectedRegion.value[0],
city: selectedRegion.value[1],
country: selectedRegion.value[2],
town: selectedRegion.value[3]
};
const callBackParams = {
data: {},
type: privateType.value
};
if (["custom", "custom2"].includes(privateType.value)) {
[0, 1, 2, 3].forEach((i) => {
const item = selectedRegion.value[i];
data.addressIdStr += `${i ? "_" : ""}${item && item.id || 0}`;
data.addressStr += item && item.name || "";
});
callBackParams.data = data;
} else {
callBackParams.data = selectedExistAddress;
}
initAddress();
if (closeWay.value == "self") {
emit("close", callBackParams);
} else {
emit("close-mask", { closeWay });
}
emit("update:visible", false);
};
const switchModule = () => {
const type = privateType.value;
privateType.value = type == "exist" ? "custom" : "exist";
initAddress();
emit("switch-module", { type: privateType.value });
};
const handleElevatorItem = (key, item) => {
nextAreaList(item);
};
watch(
() => props.visible,
(value) => {
showPopup.value = value;
}
);
watch(
() => showPopup.value,
(value) => {
if (value) {
initCustomSelected();
}
}
);
return {
showPopup,
privateType,
tabIndex,
tabName,
selectedRegion,
switchModule,
closeWay,
close,
getTabName,
nextAreaList,
regionLine,
tabRegion,
lineDistance,
changeRegionTab,
selectedExist,
clickOverlay,
handClose,
handleElevatorItem,
initCustomSelected,
...toRefs(props),
translate,
regionList,
transformData,
scrollDom
};
}
});
const _hoisted_1 = { class: "cqmc-address" };
const _hoisted_2 = { class: "cqmc-address__header" };
const _hoisted_3 = { class: "cqmc-address__header__title" };
const _hoisted_4 = {
key: 0,
class: "cqmc-address__custom"
};
const _hoisted_5 = {
class: "cqmc-address__region",
ref: "tabRegion"
};
const _hoisted_6 = ["onClick"];
const _hoisted_7 = {
key: 0,
class: "active cqmc-address__region-item"
};
const _hoisted_8 = {
key: 0,
class: "cqmc-address__detail"
};
const _hoisted_9 = {
class: "cqmc-address__detail-list",
ref: "scrollDom"
};
const _hoisted_10 = ["onClick"];
const _hoisted_11 = {
key: 1,
class: "cqmc-address__elevator-group"
};
const _hoisted_12 = {
key: 1,
class: "cqmc-address__exist"
};
const _hoisted_13 = { class: "cqmc-address__exist-group" };
const _hoisted_14 = { class: "cqmc-address__exist-group-list" };
const _hoisted_15 = ["onClick"];
const _hoisted_16 = { class: "cqmc-address__exist-item-info" };
const _hoisted_17 = {
key: 0,
class: "cqmc-address__exist-item-info-name"
};
const _hoisted_18 = {
key: 1,
class: "cqmc-address__exist-item-info-phone"
};
const _hoisted_19 = { class: "cqmc-address__exist-item-info-bottom" };
const _hoisted_20 = { class: "cqmc-address__exist-choose-btn" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_Left = resolveComponent("Left");
const _component_Close = resolveComponent("Close");
const _component_Check = resolveComponent("Check");
const _component_nut_elevator = resolveComponent("cqmc-elevator");
const _component_Location2 = resolveComponent("Location2");
const _component_nut_popup = resolveComponent("cqmc-popup");
return openBlock(), createBlock(_component_nut_popup, {
position: "bottom",
"lock-scroll": _ctx.lockScroll,
onClose: _ctx.close,
onClickOverlay: _ctx.clickOverlay,
onOpen: _cache[3] || (_cache[3] = ($event) => _ctx.closeWay = "self"),
visible: _ctx.showPopup,
"onUpdate:visible": _cache[4] || (_cache[4] = ($event) => _ctx.showPopup = $event),
teleportDisable: _ctx.teleportDisable,
teleport: _ctx.teleport
}, {
default: withCtx(() => [
createElementVNode("view", _hoisted_1, [
createElementVNode("view", _hoisted_2, [
createElementVNode("view", {
class: "cqmc-address__header-back",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.switchModule && _ctx.switchModule(...args))
}, [
renderSlot(_ctx.$slots, "back-icon", {}, () => [
withDirectives(createVNode(_component_Left, { size: "14px" }, null, 512), [
[vShow, _ctx.type == "exist" && _ctx.privateType == "custom"]
])
])
]),
createElementVNode("view", _hoisted_3, toDisplayString(_ctx.privateType == "custom" ? _ctx.customAddressTitle || _ctx.translate("selectRegion") : _ctx.existAddressTitle || _ctx.translate("deliveryTo")), 1),
createElementVNode("view", {
class: "cqmc-address__header-close",
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handClose("cross"))
}, [
renderSlot(_ctx.$slots, "close-icon", {}, () => [
createVNode(_component_Close, {
color: "#cccccc",
size: "14px"
})
])
])
]),
["custom", "custom2"].includes(_ctx.privateType) ? (openBlock(), createElementBlock("view", _hoisted_4, [
createElementVNode("view", _hoisted_5, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.selectedRegion, (item, index2) => {
return openBlock(), createElementBlock("view", {
class: normalizeClass(["cqmc-address__region-item", index2 == _ctx.tabIndex ? "active" : ""]),
key: index2,
onClick: ($event) => _ctx.changeRegionTab(item, index2)
}, [
createElementVNode("view", null, toDisplayString(_ctx.getTabName(item, index2)), 1)
], 10, _hoisted_6);
}), 128)),
_ctx.tabIndex == _ctx.selectedRegion.length ? (openBlock(), createElementBlock("view", _hoisted_7, [
createElementVNode("view", null, toDisplayString(_ctx.getTabName(null, _ctx.selectedRegion.length)), 1)
])) : createCommentVNode("", true),
createElementVNode("view", {
class: "cqmc-address__region-line",
ref: "regionLine",
style: normalizeStyle({ left: _ctx.lineDistance + "px" })
}, null, 4)
], 512),
_ctx.privateType == "custom" ? (openBlock(), createElementBlock("view", _hoisted_8, [
createElementVNode("ul", _hoisted_9, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.regionList, (item, index2) => {
var _a, _b;
return openBlock(), createElementBlock("li", {
key: index2,
class: normalizeClass(["cqmc-address__detail-item", ((_a = _ctx.selectedRegion[_ctx.tabIndex]) == null ? void 0 : _a.id) == item.id ? "active" : ""]),
onClick: ($event) => _ctx.nextAreaList(item)
}, [
createElementVNode("div", null, [
((_b = _ctx.selectedRegion[_ctx.tabIndex]) == null ? void 0 : _b.id) == item.id ? renderSlot(_ctx.$slots, "icon", { key: 0 }, () => [
createVNode(_component_Check, {
class: "cqmc-address-select-icon",
size: "13px"
})
]) : createCommentVNode("", true),
createTextVNode(toDisplayString(item.name), 1)
])
], 10, _hoisted_10);
}), 128))
], 512)
])) : (openBlock(), createElementBlock("view", _hoisted_11, [
createVNode(_component_nut_elevator, {
height: _ctx.height,
"index-list": _ctx.transformData(_ctx.regionList),
onClickItem: _ctx.handleElevatorItem
}, null, 8, ["height", "index-list", "onClickItem"])
]))
])) : (openBlock(), createElementBlock("view", _hoisted_12, [
createElementVNode("div", _hoisted_13, [
createElementVNode("ul", _hoisted_14, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.existAddress, (item, index2) => {
return openBlock(), createElementBlock("li", {
class: normalizeClass(["cqmc-address__exist-group-item", item.selectedAddress ? "active" : ""]),
key: index2,
onClick: ($event) => _ctx.selectedExist(item)
}, [
!item.selectedAddress ? renderSlot(_ctx.$slots, "unselected-icon", { key: 0 }, () => [
createVNode(_component_Location2, {
class: "cqmc-address-select-icon",
size: "13px"
})
]) : createCommentVNode("", true),
item.selectedAddress ? renderSlot(_ctx.$slots, "icon", { key: 1 }, () => [
createVNode(_component_Check, {
class: "cqmc-address-select-icon",
size: "13px"
})
]) : createCommentVNode("", true),
createElementVNode("div", _hoisted_16, [
item.name ? (openBlock(), createElementBlock("div", _hoisted_17, toDisplayString(item.name), 1)) : createCommentVNode("", true),
item.phone ? (openBlock(), createElementBlock("div", _hoisted_18, toDisplayString(item.phone), 1)) : createCommentVNode("", true),
createElementVNode("div", _hoisted_19, [
createElementVNode("view", null, toDisplayString(item.provinceName + item.cityName + item.countyName + item.townName + item.addressDetail), 1)
])
])
], 10, _hoisted_15);
}), 128))
])
]),
_ctx.isShowCustomAddress ? (openBlock(), createElementBlock("div", {
key: 0,
class: "cqmc-address__exist-choose",
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.switchModule && _ctx.switchModule(...args))
}, [
createElementVNode("div", _hoisted_20, toDisplayString(_ctx.customAndExistTitle || _ctx.translate("chooseAnotherAddress")), 1)
])) : createCommentVNode("", true)
])),
renderSlot(_ctx.$slots, "bottom")
])
]),
_: 3
}, 8, ["lock-scroll", "onClose", "onClickOverlay", "visible", "teleportDisable", "teleport"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
index as default
};