UNPKG

qxk-app-component

Version:
489 lines (488 loc) 15.5 kB
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 };