qxk-app-component
Version:
489 lines (488 loc) • 15.5 kB
JavaScript
import "./index-sfc.css";
import {
defineComponent,
ref,
computed,
watchEffect,
onUnmounted,
onDeactivated
} from "vue";
import { areaOptions, engKeyBoardOptions } from "./config";
const __vue_sfc__ = defineComponent({
name: "Keyboard",
props: {
length: {
type: Number,
default: 8
},
licenseList: {
type: Array,
default: () => []
},
city: {
type: String,
default: "\u4EAC"
},
defaultLicense: {
type: String,
default: ""
},
show: {
type: Boolean,
default: false
}
},
emits: ["confirm", "close"],
setup(props, { emit }) {
const carNolist = ref(Array(props.length).fill(""));
const visible = ref(true);
const keyboardActive = ref("");
const defaultCity = ref(props.city);
const carActive = ref(0);
const isInit = ref(false);
const provinceList = computed(() => {
const tmp = [];
tmp[0] = areaOptions.slice(0, 10);
tmp[1] = areaOptions.slice(10, 20);
tmp[2] = areaOptions.slice(20, 30);
tmp[3] = areaOptions.slice(30, 36);
return tmp;
});
const letterList = computed(() => {
const tmp = [];
tmp[0] = engKeyBoardOptions.slice(0, 10);
tmp[1] = engKeyBoardOptions.slice(10, 19);
tmp[2] = engKeyBoardOptions.slice(19, 28);
tmp[3] = engKeyBoardOptions.slice(28, 36);
return tmp;
});
const keyboardType = computed(() => carActive.value === 0 ? "cn" : "en");
const list = computed(() => {
let tempData = [];
if (keyboardType.value === "cn") {
tempData = provinceList.value;
} else {
tempData = letterList.value;
if (carActive.value === 1) {
tempData = tempData.map(
(item) => item.map((sub) => {
if (typeof sub.text === "number") {
sub.disabled = true;
}
if (sub.text === "O") {
sub.disabled = false;
}
return sub;
})
);
} else {
tempData = tempData.map(
(item) => item.map((sub) => {
if (typeof sub.text === "number") {
sub.disabled = false;
}
if (sub.text === "O") {
sub.disabled = true;
}
return sub;
})
);
}
}
return tempData;
});
const isNull = (value) => value !== "";
const isPass = computed(() => {
let flag = true;
carNolist.value.forEach((value, idx) => {
if (!isNull(value) && idx < carNolist.value.length - 1) {
flag = false;
}
});
return flag;
});
watchEffect(() => {
if (props.city && !isInit.value) {
carNolist.value[0] = props.city;
list.value.forEach((item, idx) => {
item.forEach((sub, subIdx) => {
if (sub.text === props.city) {
keyboardActive.value = `${idx}-${subIdx}`;
}
});
});
isInit.value = true;
}
if (props.defaultLicense && props.show) {
handleTag(props.defaultLicense);
}
});
const handleTag = (item) => {
const temArr = item.split("");
temArr.forEach((element, idx) => {
carNolist.value[idx] = element;
});
carActive.value = temArr.length;
keyboardActive.value = "";
};
const handleLicense = (idx) => {
visible.value = true;
carActive.value = idx;
if (!idx) {
keyboardActive.value = "";
}
};
const onTouchStart = (index, subIdx, subItem) => {
if (subItem.disabled) {
return;
}
keyboardActive.value = `${index}-${subIdx}`;
};
const onTouchEnd = () => {
keyboardActive.value = "";
};
const hideKeyboard = (event) => {
event.preventDefault();
event.stopPropagation();
visible.value = false;
};
const handleClick = (item) => {
if (item.disabled) {
return;
}
if (carActive.value === props.length) {
return;
}
carNolist.value.splice(carActive.value, 1, item.text);
if (carActive.value < props.length) {
carActive.value++;
}
};
const deleteCard = () => {
if (carActive.value < 0) {
return;
}
keyboardActive.value = "";
if (!carNolist.value[carActive.value]) {
if (carActive.value > 0) {
carActive.value--;
}
}
carNolist.value.splice(carActive.value, 1, "");
};
const reset = () => {
carNolist.value = Array(props.length).fill("");
carActive.value = 0;
isInit.value = false;
};
const close = () => {
reset();
emit("close");
};
const ok = () => {
if (!isPass.value) {
return;
}
emit("confirm", carNolist.value.join(""));
reset();
};
onUnmounted(() => {
visible.value = true;
});
onDeactivated(() => {
visible.value = true;
});
return {
defaultCity,
visible,
list,
keyboardType,
carNolist,
isPass,
keyboardActive,
carActive,
handleTag,
handleClick,
deleteCard,
close,
ok,
onTouchStart,
onTouchEnd,
hideKeyboard,
handleLicense
};
}
});
import { createElementVNode as _createElementVNode, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, normalizeClass as _normalizeClass } from "vue";
import _imports_0 from "./images/icon_close.png";
import _imports_1 from "./images/icon_del.png";
const _hoisted_1 = { class: "gwm-popup-header van-hairline--bottom" };
const _hoisted_2 = /* @__PURE__ */ _createElementVNode(
"span",
null,
"\u6DFB\u52A0\u8F66\u724C\u53F7",
-1
/* HOISTED */
);
const _hoisted_3 = /* @__PURE__ */ _createElementVNode(
"img",
{
src: _imports_0,
alt: ""
},
null,
-1
/* HOISTED */
);
const _hoisted_4 = [
_hoisted_3
];
const _hoisted_5 = { class: "gwm-popup-body" };
const _hoisted_6 = { class: "gwm-car-container" };
const _hoisted_7 = { class: "gwm-car-input" };
const _hoisted_8 = ["onClick"];
const _hoisted_9 = { class: "gwm-cat-title" };
const _hoisted_10 = {
key: 0,
class: "gwm-car-input-item-cursor"
};
const _hoisted_11 = { class: "gwm-cat-title" };
const _hoisted_12 = {
key: 0,
class: "gwm-car-new"
};
const _hoisted_13 = {
key: 1,
class: "gwm-car-input-item-cursor"
};
const _hoisted_14 = { class: "gwm-car-input-item" };
const _hoisted_15 = { class: "gwm-cat-title" };
const _hoisted_16 = {
key: 0,
class: "gwm-car-input-item-cursor"
};
const _hoisted_17 = {
key: 0,
class: "gwm-car-tags"
};
const _hoisted_18 = ["onClick"];
const _hoisted_19 = { class: "gwm-btn-container" };
const _hoisted_20 = {
key: 0,
class: "gwm-keyboard"
};
const _hoisted_21 = ["onTouchstartPassive", "onClick"];
const _hoisted_22 = /* @__PURE__ */ _createElementVNode(
"img",
{
src: _imports_1,
alt: "",
class: "icon-del"
},
null,
-1
/* HOISTED */
);
const _hoisted_23 = [
_hoisted_22
];
function __vue_render__(_ctx, _cache) {
return _openBlock(), _createElementBlock(
"div",
{
class: _normalizeClass(["gwm-popup", !_ctx.visible ? "safe-area-inset-light" : "safe-area-inset-dark"])
},
[
_createElementVNode("div", _hoisted_1, [
_hoisted_2,
_createElementVNode("div", {
class: "icon-close",
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.close && _ctx.close(...args))
}, _hoisted_4)
]),
_createElementVNode("div", _hoisted_5, [
_createElementVNode("div", _hoisted_6, [
_createElementVNode("div", _hoisted_7, [
(_openBlock(true), _createElementBlock(
_Fragment,
null,
_renderList(_ctx.length, (_, idx) => {
return _openBlock(), _createElementBlock("div", {
key: idx,
onClick: ($event) => _ctx.handleLicense(idx)
}, [
_createCommentVNode(" \u7701\u4EFD "),
idx === 0 ? (_openBlock(), _createElementBlock(
"div",
{
key: 0,
class: _normalizeClass([
"gwm-car-input-item gwm-car-input-item-city",
_ctx.carNolist.length > 0 || _ctx.defaultCity ? "gwm-car-input-item-lignt" : ""
])
},
[
_createElementVNode(
"span",
_hoisted_9,
_toDisplayString(_ctx.carNolist[idx]),
1
/* TEXT */
),
_ctx.carActive === idx ? (_openBlock(), _createElementBlock("i", _hoisted_10)) : _createCommentVNode("v-if", true)
],
2
/* CLASS */
)) : idx === _ctx.length - 1 ? (_openBlock(), _createElementBlock(
_Fragment,
{ key: 1 },
[
_createCommentVNode(" \u65B0\u80FD\u6E90\u8F66\u724C "),
_createElementVNode(
"div",
{
class: _normalizeClass([
"gwm-car-input-item",
_ctx.carActive < _ctx.length - 1 ? "gwm-car-input-item-focus" : ""
])
},
[
_createElementVNode(
"span",
_hoisted_11,
_toDisplayString(_ctx.carNolist[idx]),
1
/* TEXT */
),
!_ctx.carNolist[idx] && _ctx.carActive < _ctx.length - 1 ? (_openBlock(), _createElementBlock("span", _hoisted_12, "\u65B0\u80FD\u6E90")) : _createCommentVNode("v-if", true),
_ctx.carActive === idx ? (_openBlock(), _createElementBlock("i", _hoisted_13)) : _createCommentVNode("v-if", true)
],
2
/* CLASS */
)
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
)) : (_openBlock(), _createElementBlock(
_Fragment,
{ key: 2 },
[
_createCommentVNode(" \u666E\u901A "),
_createElementVNode("div", _hoisted_14, [
_createElementVNode(
"span",
_hoisted_15,
_toDisplayString(_ctx.carNolist[idx]),
1
/* TEXT */
),
_ctx.carActive === idx ? (_openBlock(), _createElementBlock("i", _hoisted_16)) : _createCommentVNode("v-if", true)
])
],
2112
/* STABLE_FRAGMENT, DEV_ROOT_FRAGMENT */
))
], 8, _hoisted_8);
}),
128
/* KEYED_FRAGMENT */
))
]),
_ctx.licenseList.length ? (_openBlock(), _createElementBlock("div", _hoisted_17, [
(_openBlock(true), _createElementBlock(
_Fragment,
null,
_renderList(_ctx.licenseList, (item, idx) => {
return _openBlock(), _createElementBlock("div", {
class: "gwm-car-tag",
onClick: ($event) => _ctx.handleTag(item),
key: idx
}, _toDisplayString(item), 9, _hoisted_18);
}),
128
/* KEYED_FRAGMENT */
))
])) : _createCommentVNode("v-if", true),
_createElementVNode("div", _hoisted_19, [
_createElementVNode(
"div",
{
class: _normalizeClass(["gwm-btn", _ctx.isPass ? "gwm-btn-active" : ""]),
onClick: _cache[1] || (_cache[1] = (...args) => _ctx.ok && _ctx.ok(...args))
},
" \u786E\u8BA4\u6DFB\u52A0 ",
2
/* CLASS */
)
])
]),
_ctx.visible ? (_openBlock(), _createElementBlock("div", _hoisted_20, [
_createElementVNode("div", {
class: "gwm-keyboard-tooltip",
onClick: _cache[3] || (_cache[3] = (e) => {
e.stopPropagation();
})
}, [
_createElementVNode("span", {
onClick: _cache[2] || (_cache[2] = (...args) => _ctx.hideKeyboard && _ctx.hideKeyboard(...args))
}, "\u6536\u8D77")
]),
(_openBlock(true), _createElementBlock(
_Fragment,
null,
_renderList(_ctx.list, (item, index) => {
return _openBlock(), _createElementBlock(
"div",
{
class: _normalizeClass([
"gwm-keyboard-items",
_ctx.keyboardType === "en" && index !== 0 ? "gwm-keyboard-en" : ""
]),
key: index
},
[
(_openBlock(true), _createElementBlock(
_Fragment,
null,
_renderList(item, (subItem, key) => {
return _openBlock(), _createElementBlock("div", {
class: _normalizeClass([
"gwm-keyboard-item",
_ctx.keyboardActive === index + "-" + key ? "gwm-keyboard-item-active" : "",
subItem.disabled ? "gwm-keyboard-item-disabled" : ""
]),
onTouchstartPassive: ($event) => _ctx.onTouchStart(index, key, subItem),
onTouchendPassive: _cache[4] || (_cache[4] = (...args) => _ctx.onTouchEnd && _ctx.onTouchEnd(...args)),
key,
onClick: ($event) => _ctx.handleClick(subItem)
}, _toDisplayString(subItem.text), 43, _hoisted_21);
}),
128
/* KEYED_FRAGMENT */
)),
index === 3 ? (_openBlock(), _createElementBlock("div", {
key: 0,
class: "gwm-keyboard-item gwm-keyboard-right",
onClick: _cache[5] || (_cache[5] = (...args) => _ctx.deleteCard && _ctx.deleteCard(...args))
}, _hoisted_23)) : _createCommentVNode("v-if", true)
],
2
/* CLASS */
);
}),
128
/* KEYED_FRAGMENT */
))
])) : _createCommentVNode("v-if", true)
])
],
2
/* CLASS */
);
}
__vue_sfc__.render = __vue_render__;
__vue_sfc__._scopeId = "data-v-5f7cbc6a";
var stdin_default = __vue_sfc__;
export {
stdin_default as default
};