+ {props.tag === "canvas" ? (
+
+ ) : (
+ ![]()
+ )}
+ {props.disabled && (
+
+
+ );
+ }
+});
diff --git a/src/components/ReTypeit/index.ts b/src/components/ReTypeit/index.ts
new file mode 100644
index 0000000..4c34bae
--- /dev/null
+++ b/src/components/ReTypeit/index.ts
@@ -0,0 +1,44 @@
+import { h, defineComponent } from "vue";
+import TypeIt from "typeit";
+
+// 打字机效果组件（只是简单的封装下，更多配置项参考 https://www.typeitjs.com/docs/vanilla/usage#options）
+export default defineComponent({
+ name: "TypeIt",
+ props: {
+ /** 打字速度，以每一步之间的毫秒数为单位，默认`200` */
+ speed: {
+ type: Number,
+ default: 200
+ },
+ values: {
+ type: Array,
+ defalut: []
+ },
+ className: {
+ type: String,
+ default: "type-it"
+ },
+ cursor: {
+ type: Boolean,
+ default: true
+ }
+ },
+ render() {
+ return h(
+ "span",
+ {
+ class: this.className
+ },
+ {
+ default: () => []
+ }
+ );
+ },
+ mounted() {
+ new TypeIt(`.${this.className}`, {
+ strings: this.values,
+ speed: this.speed,
+ cursor: this.cursor
+ }).go();
+ }
+});
diff --git a/src/store/modules/types.ts b/src/store/modules/types.ts
index be63f00..c681b81 100644
--- a/src/store/modules/types.ts
+++ b/src/store/modules/types.ts
@@ -39,4 +39,5 @@ export type setType = {
export type userType = {
username?: string;
roles?: Array
+
+ )}
+
+
+ {props.disabledText}
+
+
+ {{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
+
+
+ {{ '扫码后点击"确认",即可完成登录' }}
+
+
+ {{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
+
+
+
+
+ {{ text.length > 0 ? text + "秒后重新获取" : "获取验证码" }}
+
+
+
+
{
@@ -167,4 +268,20 @@ onBeforeUnmount(() => {
:deep(.el-input-group__append, .el-input-group__prepend) {
padding: 0;
}
+
+.translation {
+ ::v-deep(.el-dropdown-menu__item) {
+ padding: 5px 40px;
+ }
+
+ .check-zh {
+ position: absolute;
+ left: 20px;
+ }
+
+ .check-en {
+ position: absolute;
+ left: 20px;
+ }
+}
diff --git a/src/views/login/utils/enums.ts b/src/views/login/utils/enums.ts
new file mode 100644
index 0000000..63d15db
--- /dev/null
+++ b/src/views/login/utils/enums.ts
@@ -0,0 +1,32 @@
+const operates = [
+ {
+ title: "手机登录"
+ },
+ {
+ title: "二维码登录"
+ },
+ {
+ title: "注册"
+ }
+];
+
+const thirdParty = [
+ {
+ title: "微信登录",
+ icon: "wechat"
+ },
+ {
+ title: "支付宝登录",
+ icon: "alipay"
+ },
+ {
+ title: "QQ登录",
+ icon: "qq"
+ },
+ {
+ title: "微博登录",
+ icon: "weibo"
+ }
+];
+
+export { operates, thirdParty };
diff --git a/src/views/login/utils/rule.ts b/src/views/login/utils/rule.ts
index 6b73d5a..5a0eb45 100644
--- a/src/views/login/utils/rule.ts
+++ b/src/views/login/utils/rule.ts
@@ -1,12 +1,111 @@
import { reactive } from "vue";
+import { isPhone } from "@pureadmin/utils";
import type { FormRules } from "element-plus";
+import { useUserStoreHook } from "@/store/modules/user";
+
+/** 6位数字验证码正则 */
+export const REGEXP_SIX = /^\d{6}$/;
/** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
export const REGEXP_PWD =
/^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
/** 登录校验 */
-const loginRules = reactive({
+const loginRules = reactive({
+ password: [
+ {
+ validator: (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("请输入密码"));
+ } else if (!REGEXP_PWD.test(value)) {
+ callback(
+ new Error("密码格式应为8-18位数字、字母、符号的任意两种组合")
+ );
+ } else {
+ callback();
+ }
+ },
+ trigger: "blur"
+ }
+ ],
+ verifyCode: [
+ {
+ validator: (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("请输入验证码"));
+ } else if (useUserStoreHook().verifyCode !== value) {
+ callback(new Error("请输入正确的验证码"));
+ } else {
+ callback();
+ }
+ },
+ trigger: "blur"
+ }
+ ]
+});
+
+/** 手机登录校验 */
+const phoneRules = reactive({
+ phone: [
+ {
+ validator: (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("请输入手机号码"));
+ } else if (!isPhone(value)) {
+ callback(new Error("请输入正确的手机号码格式"));
+ } else {
+ callback();
+ }
+ },
+ trigger: "blur"
+ }
+ ],
+ verifyCode: [
+ {
+ validator: (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("请输入验证码"));
+ } else if (!REGEXP_SIX.test(value)) {
+ callback(new Error("请输入6位数字验证码"));
+ } else {
+ callback();
+ }
+ },
+ trigger: "blur"
+ }
+ ]
+});
+
+/** 忘记密码校验 */
+const updateRules = reactive({
+ phone: [
+ {
+ validator: (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("请输入手机号码"));
+ } else if (!isPhone(value)) {
+ callback(new Error("请输入正确的手机号码格式"));
+ } else {
+ callback();
+ }
+ },
+ trigger: "blur"
+ }
+ ],
+ verifyCode: [
+ {
+ validator: (rule, value, callback) => {
+ if (value === "") {
+ callback(new Error("请输入验证码"));
+ } else if (!REGEXP_SIX.test(value)) {
+ callback(new Error("请输入6位数字验证码"));
+ } else {
+ callback();
+ }
+ },
+ trigger: "blur"
+ }
+ ],
password: [
{
validator: (rule, value, callback) => {
@@ -25,4 +124,4 @@ const loginRules = reactive({
]
});
-export { loginRules };
+export { loginRules, phoneRules, updateRules };
diff --git a/src/views/login/utils/verifyCode.ts b/src/views/login/utils/verifyCode.ts
new file mode 100644
index 0000000..b6d89a7
--- /dev/null
+++ b/src/views/login/utils/verifyCode.ts
@@ -0,0 +1,50 @@
+import type { FormInstance, FormItemProp } from "element-plus";
+import { clone } from "@pureadmin/utils";
+import { ref } from "vue";
+
+const isDisabled = ref(false);
+const timer = ref(null);
+const text = ref("");
+
+export const useVerifyCode = () => {
+ const start = async (
+ formEl: FormInstance | undefined,
+ props: FormItemProp,
+ time = 60
+ ) => {
+ if (!formEl) return;
+ const initTime = clone(time, true);
+ await formEl.validateField(props, isValid => {
+ if (isValid) {
+ clearInterval(timer.value);
+ isDisabled.value = true;
+ text.value = `${time}`;
+ timer.value = setInterval(() => {
+ if (time > 0) {
+ time -= 1;
+ text.value = `${time}`;
+ } else {
+ text.value = "";
+ isDisabled.value = false;
+ clearInterval(timer.value);
+ time = initTime;
+ }
+ }, 1000);
+ }
+ });
+ };
+
+ const end = () => {
+ text.value = "";
+ isDisabled.value = false;
+ clearInterval(timer.value);
+ };
+
+ return {
+ isDisabled,
+ timer,
+ text,
+ start,
+ end
+ };
+};
+
+
-
+
{
+
+
+
+
+
+
+
+
-
- 登录
-
+
+
+ {{ "登录" }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
{{ title }}
+
+
+
+ {{ "记住密码" }}
+
+
+ {{ "忘记密码" }}
+
+
+
+
+ {{ item.title }}
+
+
+ {{ "第三方登录" }}
+
+
+
+