flamingo-ui
Version:
火烈鸟UI组件库
252 lines (251 loc) • 8.71 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var stdin_exports = {};
__export(stdin_exports, {
default: () => stdin_default
});
module.exports = __toCommonJS(stdin_exports);
var import_PhoneVerified_sfc = require("./PhoneVerified-sfc.css");
var import_vue = require("vue");
var import_utils = require("../utils/index");
var import_vant = require("vant");
var import_vue2 = require("vue");
const __vue_sfc__ = {
name: "PhoneVerified",
components: {
[import_vant.CountDown.name]: import_vant.CountDown
},
props: {
// 允许触碰遮罩层关闭
closeOnClickOverlay: {
type: Boolean,
default: false
},
phone: {
type: String,
default: "13268089583"
},
time: {
type: [Number, String],
default: 6e4
},
submit: Function,
getcode: Function,
// 移除弹窗方法
remove: Function
},
setup(props, ctx) {
const data = (0, import_vue.reactive)({
// 组件显示
show: true,
canGetCode: false
});
(0, import_vue.watch)(() => data.show, () => {
if (data.show == false) {
props.remove();
}
});
const close = () => {
props.closeOnClickOverlay ? data.show = false : "";
};
const confirm = () => {
data.show = false;
};
const verificationCodes = (0, import_vue.ref)(["", "", "", "", "", ""]);
const handlePhone = (phone) => {
return phone.slice(0, 3) + "****" + phone.slice(-4);
};
const handleInput = (index, event) => {
const value = event.target.value;
verificationCodes.value[index] = value;
if (verificationCodes.value.join("").length === 6) {
event.target.blur();
props.submit(verificationCodes.value.join(""), data);
}
if (value && index < verificationCodes.value.length - 1) {
const nextInput = event.target.nextElementSibling;
if (nextInput) {
(0, import_vue.nextTick)(() => {
nextInput.focus();
});
}
}
};
const handleKeyDown = (index, event) => {
if (event.key === "Backspace" && !event.target.value && index > 0) {
const prevInput = event.target.previousElementSibling;
if (prevInput) {
(0, import_vue.nextTick)(() => {
prevInput.focus();
});
}
}
};
const countDownDom = (0, import_vue.ref)(null);
const countDownFinished = () => {
data.canGetCode = true;
};
const reset = () => {
data.canGetCode = false;
countDownDom.value.reset();
};
const handleGetCode = (0, import_utils.debounce)(() => {
props.getcode(reset);
});
return __spreadProps(__spreadValues({}, (0, import_vue.toRefs)(data)), {
close,
confirm,
handlePhone,
verificationCodes,
handleInput,
handleKeyDown,
countDownDom,
countDownFinished,
handleGetCode,
reset
});
}
};
const _hoisted_1 = /* @__PURE__ */ (0, import_vue2.createElementVNode)(
"p",
{ class: "fmg-phone-verified-title" },
"\u8F93\u5165\u9A8C\u8BC1\u7801",
-1
/* HOISTED */
);
const _hoisted_2 = /* @__PURE__ */ (0, import_vue2.createElementVNode)(
"p",
{ class: "fmg-phone-verified-tip" },
"\u9A8C\u8BC1\u7801\u5DF2\u53D1\u9001\u5230\u624B\u673A\u53F7",
-1
/* HOISTED */
);
const _hoisted_3 = { class: "fmg-phone-verified-phone" };
const _hoisted_4 = { class: "fmg-phone-verified-code" };
const _hoisted_5 = ["onUpdate:modelValue", "onInput", "onKeydown"];
const _hoisted_6 = { class: "fmg-phone-verified-getcode" };
function __vue_render__(_ctx, _cache) {
const _component_van_count_down = (0, import_vue2.resolveComponent)("van-count-down");
return (0, import_vue2.openBlock)(), (0, import_vue2.createElementBlock)(
"div",
{
class: (0, import_vue2.normalizeClass)(["fmg-phone-verified", { "fmg-phone-verified-hide": !_ctx.show }]),
onClick: _cache[3] || (_cache[3] = (...args) => _ctx.close && _ctx.close(...args)),
onTouchmove: _cache[4] || (_cache[4] = (0, import_vue2.withModifiers)(() => {
}, ["prevent"]))
},
[
(0, import_vue2.createElementVNode)("div", {
class: "fmg-phone-verified-wrapper",
onClick: _cache[2] || (_cache[2] = (0, import_vue2.withModifiers)(() => {
}, ["stop"]))
}, [
_hoisted_1,
(0, import_vue2.createElementVNode)("img", {
onClick: _cache[0] || (_cache[0] = (...args) => _ctx.confirm && _ctx.confirm(...args)),
class: "fmg-phone-verified-icon",
src: "https://gres.guopan.cn/png/20230313/payment-close.png",
alt: ""
}),
_hoisted_2,
(0, import_vue2.createElementVNode)(
"p",
_hoisted_3,
(0, import_vue2.toDisplayString)(_ctx.handlePhone(_ctx.phone)),
1
/* TEXT */
),
(0, import_vue2.createElementVNode)("div", _hoisted_4, [
((0, import_vue2.openBlock)(true), (0, import_vue2.createElementBlock)(
import_vue2.Fragment,
null,
(0, import_vue2.renderList)(_ctx.verificationCodes, (code, index) => {
return (0, import_vue2.withDirectives)(((0, import_vue2.openBlock)(), (0, import_vue2.createElementBlock)("input", {
type: "number",
key: index,
"onUpdate:modelValue": ($event) => _ctx.verificationCodes[index] = $event,
onInput: ($event) => _ctx.handleInput(index, $event),
onKeydown: ($event) => _ctx.handleKeyDown(index, $event),
maxlength: "1",
class: "verification-input"
}, null, 40, _hoisted_5)), [
[import_vue2.vModelText, _ctx.verificationCodes[index]]
]);
}),
128
/* KEYED_FRAGMENT */
))
]),
(0, import_vue2.withDirectives)((0, import_vue2.createElementVNode)(
"p",
{
class: "fmg-phone-verified-getcode",
style: { "color": "#3CA0E6" },
onClick: _cache[1] || (_cache[1] = ($event) => _ctx.handleGetCode())
},
"\u91CD\u65B0\u83B7\u53D6\u9A8C\u8BC1\u7801 ",
512
/* NEED_PATCH */
), [
[import_vue2.vShow, _ctx.canGetCode]
]),
(0, import_vue2.withDirectives)((0, import_vue2.createElementVNode)(
"p",
_hoisted_6,
[
(0, import_vue2.createTextVNode)("\u518D\u6B21\u53D1\u9001\u9A8C\u8BC1\u7801\uFF08"),
(0, import_vue2.createVNode)(_component_van_count_down, {
ref: "countDownDom",
time: _ctx.time,
format: "ss\u79D2",
"auto-start": true,
onFinish: _ctx.countDownFinished
}, null, 8, ["time", "onFinish"]),
(0, import_vue2.createTextVNode)("\uFF09 ")
],
512
/* NEED_PATCH */
), [
[import_vue2.vShow, !_ctx.canGetCode]
])
])
],
34
/* CLASS, HYDRATE_EVENTS */
);
}
__vue_sfc__.render = __vue_render__;
__vue_sfc__._scopeId = "data-v-5af7ccff";
var stdin_default = __vue_sfc__;