yuang-framework-ui-pc
Version:
yuang-framework-ui-pc Library
208 lines (207 loc) • 7.89 kB
JavaScript
;
const vue = require("vue");
const elementPlus = require("element-plus");
const CaptchaIcon = require("./components/CaptchaIcon");
const httpConfig = require("yuang-framework-ui-common/lib/config/httpConfig");
const EleDialog = require("../ele-dialog/index");
const _hoisted_1 = { class: "captcha-container" };
const _hoisted_2 = { class: "captcha-card" };
const _hoisted_3 = ["src"];
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
...{ name: "YuFrameworkShortMessageCaptchaInput" },
__name: "index",
props: {
modelValue: { default: "" },
param: { default: {} }
},
emits: ["update:modelValue", "initSuccess", "change"],
setup(__props, { expose: __expose, emit: __emit }) {
const props = __props;
const emit = __emit;
const componentParam = vue.computed(() => ({
inputSize: "medium",
isShowIcon: true,
...props.param
}));
const captchaRules = vue.ref([{ required: true, message: "请输入验证码" }]);
const isShowCaptcha = vue.ref(false);
const imageCaptchaSrc = vue.ref("");
const captchaTimes = vue.ref(0);
const captchaInput = vue.ref("");
const imageCaptchaForm = vue.ref({
key: "",
captcha: ""
});
vue.onMounted(() => {
init();
});
vue.watch(captchaInput, (val) => {
emit("update:modelValue", val);
});
const init = () => {
if (!["large", "medium"].includes(componentParam.value.inputSize)) {
elementPlus.ElMessage.error(`参数[inputSize]值[${componentParam.value.inputSize}]未知`);
return;
}
emit("initSuccess", {});
};
const showImageCaptcha = () => {
captchaInput.value = "";
imageCaptchaForm.value.captcha = "";
const mobile = componentParam.value.mobile;
if (!mobile) {
return elementPlus.ElMessage.error("请输入手机号码");
}
if (mobile.trim().length !== 11) {
return elementPlus.ElMessage.error("手机号码格式不正确");
}
changeImageCaptcha();
isShowCaptcha.value = true;
};
const changeImageCaptcha = () => {
imageCaptchaForm.value.captcha = "";
imageCaptchaSrc.value = "";
httpConfig.http.post("/framework-api/core/framework-captcha/createImageCaptcha").then((res) => {
imageCaptchaForm.value.key = res.data.data.key;
imageCaptchaSrc.value = res.data.data.imageSrc;
}).catch((ex) => {
console.error(ex.message);
});
};
const callCaptchaTimes = () => {
if (captchaTimes.value !== 0) return;
captchaTimes.value = 60;
startCaptchaTimes();
};
const startCaptchaTimes = () => {
if (captchaTimes.value > 0) {
captchaTimes.value--;
setTimeout(startCaptchaTimes, 1e3);
}
};
const changeShortMessageCaptcha = () => {
changeImageCaptcha();
captchaInput.value = "";
};
const sendShortMessageCaptcha = () => {
if (!imageCaptchaForm.value.captcha) {
return elementPlus.ElMessage.error("请输入图形验证码");
}
let data = {
mobile: componentParam.value.mobile,
imageCaptcha: imageCaptchaForm.value
};
httpConfig.http.post(`/framework-api/core/framework-captcha/createShortMessageCaptcha`, data).then((res) => {
callCaptchaTimes();
emit("change", { key: res.data.data.key });
elementPlus.ElMessage.success(res.data.message);
isShowCaptcha.value = false;
}).catch((ex) => {
imageCaptchaForm.value.captcha = "";
changeImageCaptcha();
console.error(ex.message);
});
};
__expose({
changeShortMessageCaptcha
});
return (_ctx, _cache) => {
const _component_el_input = vue.resolveComponent("el-input");
const _component_el_button = vue.resolveComponent("el-button");
return vue.openBlock(), vue.createElementBlock("div", null, [
vue.createElementVNode("div", {
class: vue.normalizeClass(`yu-form-item-${componentParam.value.inputSize}-wrapper`)
}, [
vue.createVNode(_component_el_input, {
name: "验证码",
modelValue: captchaInput.value,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => captchaInput.value = $event),
size: componentParam.value.inputSize,
"prefix-icon": componentParam.value.isShowIcon ? CaptchaIcon : "",
rules: captchaRules.value,
placeholder: "请输入验证码",
autocomplete: "off"
}, null, 8, ["modelValue", "size", "prefix-icon", "rules"]),
captchaTimes.value === 0 ? (vue.openBlock(), vue.createBlock(_component_el_button, {
key: 0,
type: "primary",
size: componentParam.value.inputSize,
class: vue.normalizeClass(`show-captcha-${componentParam.value.inputSize}`),
onClick: showImageCaptcha
}, {
default: vue.withCtx(() => _cache[4] || (_cache[4] = [
vue.createTextVNode(" 发送验证码 ")
])),
_: 1,
__: [4]
}, 8, ["size", "class"])) : (vue.openBlock(), vue.createBlock(_component_el_button, {
key: 1,
type: "primary",
size: componentParam.value.inputSize,
disabled: "",
class: vue.normalizeClass(`show-captcha-times-${componentParam.value.inputSize}`)
}, {
default: vue.withCtx(() => [
vue.createTextVNode(vue.toDisplayString(captchaTimes.value) + "秒后再次发送 ", 1)
]),
_: 1
}, 8, ["size", "class"]))
], 2),
vue.createVNode(EleDialog, {
modelValue: isShowCaptcha.value,
"onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => isShowCaptcha.value = $event),
title: "发送验证码",
width: "400px"
}, {
footer: vue.withCtx(() => [
vue.createVNode(_component_el_button, {
onClick: _cache[2] || (_cache[2] = ($event) => isShowCaptcha.value = false)
}, {
default: vue.withCtx(() => _cache[5] || (_cache[5] = [
vue.createTextVNode("取消")
])),
_: 1,
__: [5]
}),
vue.createVNode(_component_el_button, {
type: "primary",
onClick: sendShortMessageCaptcha
}, {
default: vue.withCtx(() => _cache[6] || (_cache[6] = [
vue.createTextVNode("立即发送")
])),
_: 1,
__: [6]
})
]),
default: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createElementVNode("div", _hoisted_2, [
vue.withDirectives(vue.createElementVNode("img", {
src: imageCaptchaSrc.value,
onClick: changeImageCaptcha,
class: "captcha-image",
alt: "验证码加载中"
}, null, 8, _hoisted_3), [
[vue.vShow, imageCaptchaSrc.value]
])
]),
vue.createVNode(_component_el_input, {
modelValue: imageCaptchaForm.value.captcha,
"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => imageCaptchaForm.value.captcha = $event),
class: "captcha-input",
label: "图形验证码",
clearable: "",
placeholder: "请输入图形验证码",
required: "",
onKeyup: vue.withKeys(changeImageCaptcha, ["enter"])
}, null, 8, ["modelValue"])
])
]),
_: 1
}, 8, ["modelValue"])
]);
};
}
});
module.exports = _sfc_main;