feat: 🚀 图片上传按顺序回显
This commit is contained in:
291
src/views/login/index2.vue
Normal file
291
src/views/login/index2.vue
Normal file
@@ -0,0 +1,291 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="container">
|
||||
<div class="left">
|
||||
<div class="left-logo-box"></div>
|
||||
</div>
|
||||
<!-- 登录 -->
|
||||
<div class="right" v-if="dataStore.type === 1">
|
||||
<div class="right-logo-box">
|
||||
<div>
|
||||
<div class="right-logo-font">登录</div>
|
||||
<div class="sign-in">Sign in</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-left: 100px">
|
||||
<el-form
|
||||
ref="ruleFormRef"
|
||||
style="width: 300px"
|
||||
:model="dataStore.ruleForm"
|
||||
:rules="dataStore.rules"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
class="demo-ruleForm"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item label="账号" prop="username">
|
||||
<el-input v-model="dataStore.ruleForm.username" :prefix-icon="Iphone" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" prop="password">
|
||||
<el-input
|
||||
v-model="dataStore.ruleForm.password"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
<!-- <div
|
||||
style="
|
||||
width: 350px;
|
||||
font-size: 12px;
|
||||
line-height: 1;
|
||||
color: #4178d5;
|
||||
text-align: right;
|
||||
cursor: pointer;
|
||||
"
|
||||
@click="handleTabClick(2)"
|
||||
>
|
||||
忘记密码?
|
||||
</div> -->
|
||||
</el-form-item>
|
||||
<!-- <el-form-item prop="captcha">
|
||||
<span style="margin-right: 10px; color: #606266">验证码</span>
|
||||
<el-input v-model="dataStore.ruleForm.captcha" style="width: 80px" autocomplete="off" />
|
||||
<img :src="dataStore.base64" style="width: 150px; height: 60px; margin: 0 6px" />
|
||||
<el-button type="primary" v-debounce="getLoginCodeImg">刷新</el-button>
|
||||
</el-form-item> -->
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="large"
|
||||
type="primary"
|
||||
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
||||
v-debounce="submitForm"
|
||||
>登录</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<!--忘记密码 -->
|
||||
<div class="right" v-if="dataStore.type === 2">
|
||||
<div style="margin-left: 100px">
|
||||
<el-button
|
||||
type="primary"
|
||||
:icon="ArrowLeftBold"
|
||||
circle
|
||||
style="margin: 60px 0 20px"
|
||||
@click="handleTabClick(1)"
|
||||
/>
|
||||
<el-form
|
||||
ref="resetRuleFormRef"
|
||||
:model="dataStore.resetRuleForm"
|
||||
:rules="dataStore.resetRules"
|
||||
label-width="auto"
|
||||
label-position="top"
|
||||
class="demo-ruleForm"
|
||||
hide-required-asterisk
|
||||
>
|
||||
<el-form-item label="手机号" prop="iphone">
|
||||
<el-input v-model="dataStore.resetRuleForm.iphone" :prefix-icon="Iphone" autocomplete="off" />
|
||||
</el-form-item>
|
||||
<el-form-item prop="code" label="验证码">
|
||||
<el-input v-model="dataStore.resetRuleForm.code" autocomplete="off">
|
||||
<template #append>
|
||||
<div style="font-size: 14px; color: #4178d5; cursor: pointer" v-debounce="handleGetCode">
|
||||
{{ dataStore.codeFont }}
|
||||
</div>
|
||||
<div v-if="dataStore.isShowTime" style="margin: 0 5px; font-size: 14px; color: #4178d5">
|
||||
{{ dataStore.timeCount }}s
|
||||
</div>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="新密码" prop="newPassword">
|
||||
<el-input
|
||||
v-model="dataStore.resetRuleForm.newPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="确认密码" prop="confirmPassword">
|
||||
<el-input
|
||||
v-model="dataStore.resetRuleForm.confirmPassword"
|
||||
type="password"
|
||||
show-password
|
||||
:prefix-icon="Lock"
|
||||
autocomplete="off"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
size="large"
|
||||
type="primary"
|
||||
style="width: 100px; height: 36px; border-radius: 2px; box-shadow: 2px 5px 16px #4178d5"
|
||||
v-debounce="resetConfirmForm"
|
||||
>提交</el-button
|
||||
>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import CryptoJS from "crypto-js";
|
||||
//loginCodeImgApi
|
||||
import { loginApi } from "@/api/modules/login";
|
||||
import { Iphone, Lock, ArrowLeftBold } from "@element-plus/icons-vue";
|
||||
import { RULES, RULE_FORM, RESET_RULES, RESET_RULE_FORM } from "./constant/index";
|
||||
import { cloneDeep } from "lodash-es";
|
||||
//用户信息存储
|
||||
import { useUserStore } from "@/stores/modules/user";
|
||||
const userStore = useUserStore();
|
||||
const $router = useRouter();
|
||||
//登录表单Ref
|
||||
const ruleFormRef: any = ref(null);
|
||||
//修改密码表单Ref
|
||||
const resetRuleFormRef: any = ref(null);
|
||||
//数据源
|
||||
const dataStore = reactive<any>({
|
||||
timeCount: 120, //修改密码里验证码倒计时
|
||||
isShowTime: false,
|
||||
|
||||
base64: "", //验证码图片
|
||||
type: 1, //1:登录,2:修改密码
|
||||
codeFont: "获取验证码", //修改密码里的验证码按钮文字
|
||||
ruleForm: cloneDeep(RULE_FORM), //登录表单数据
|
||||
rules: cloneDeep(RULES), //登录表单验证
|
||||
resetRuleForm: cloneDeep(RESET_RULE_FORM), //修改密码表单数据
|
||||
resetRules: cloneDeep(RESET_RULES) //修改密码表单验证
|
||||
});
|
||||
//计时器
|
||||
let intervalId: any = null;
|
||||
|
||||
//登录
|
||||
const submitForm = () => {
|
||||
console.log(ruleFormRef);
|
||||
if (!ruleFormRef) return;
|
||||
ruleFormRef?.value?.validate((valid: any) => {
|
||||
if (valid) {
|
||||
login();
|
||||
} else {
|
||||
console.log("error submit!");
|
||||
}
|
||||
});
|
||||
};
|
||||
//忘记密码提交事件
|
||||
const resetConfirmForm = () => {
|
||||
if (!resetRuleFormRef) return;
|
||||
resetRuleFormRef?.value?.validate((valid: any) => {
|
||||
if (valid) {
|
||||
let password = CryptoJS.MD5(dataStore.ruleForm.password)?.toString();
|
||||
console.log(password, "==== dataStore.ruleForm.password====");
|
||||
console.log("submit!");
|
||||
} else {
|
||||
console.log("error submit!");
|
||||
}
|
||||
});
|
||||
};
|
||||
//登录接口
|
||||
const login = async () => {
|
||||
const result: any = await loginApi({
|
||||
...dataStore.ruleForm,
|
||||
password: CryptoJS?.MD5(dataStore.ruleForm.password)?.toString()
|
||||
});
|
||||
|
||||
if (result?.code === 0) {
|
||||
const { data } = result;
|
||||
setUserData(data);
|
||||
}
|
||||
// else {
|
||||
// getLoginCodeImg();
|
||||
// }
|
||||
};
|
||||
//获取验证码图片接口
|
||||
// const getLoginCodeImg = async () => {
|
||||
// const result: any = await loginCodeImgApi();
|
||||
// if (result?.code === 0) {
|
||||
// const { data } = result;
|
||||
// const { captcha, token } = data;
|
||||
// dataStore.base64 = captcha;
|
||||
// dataStore.ruleForm.token = token;
|
||||
// }
|
||||
// };
|
||||
// getLoginCodeImg();
|
||||
//登录和密码重置切换
|
||||
const handleTabClick = (type: any) => {
|
||||
dataStore.type = type;
|
||||
for (let key in dataStore.ruleForm) {
|
||||
dataStore.ruleForm[key] = "";
|
||||
}
|
||||
for (let key in dataStore.resetRuleForm) {
|
||||
dataStore.resetRuleForm[key] = "";
|
||||
}
|
||||
if (intervalId) {
|
||||
handleClearInterval();
|
||||
dataStore.timeCount = 120;
|
||||
dataStore.isShowTime = false;
|
||||
}
|
||||
};
|
||||
//120秒验证时间
|
||||
const updateCountdown = () => {
|
||||
intervalId = setInterval(() => {
|
||||
if (dataStore.timeCount > 0) {
|
||||
dataStore.isShowTime = true;
|
||||
dataStore.timeCount--;
|
||||
} else {
|
||||
handleClearInterval();
|
||||
dataStore.timeCount = 120;
|
||||
dataStore.isShowTime = false;
|
||||
}
|
||||
}, 1000);
|
||||
};
|
||||
//获取验证码
|
||||
const handleGetCode = () => {
|
||||
//如果计时器已经启动了,就不要再去触发了
|
||||
if (intervalId) {
|
||||
return;
|
||||
}
|
||||
resetRuleFormRef.value.validateField("iphone", (valid: any) => {
|
||||
if (valid) {
|
||||
updateCountdown();
|
||||
} else {
|
||||
}
|
||||
});
|
||||
};
|
||||
//清理定时器
|
||||
const handleClearInterval = () => {
|
||||
clearInterval(intervalId);
|
||||
intervalId = null;
|
||||
};
|
||||
|
||||
// 设置用户数据
|
||||
const setUserData = (data: any) => {
|
||||
const { username, uid, token, avatar } = data;
|
||||
console.log();
|
||||
// 设置token
|
||||
userStore.setToken("Bearer" + " " + token);
|
||||
userStore.setUid(uid);
|
||||
userStore.setNickname(username);
|
||||
userStore.setAvatar(avatar);
|
||||
// await userStore.getAuthMenuList();
|
||||
//跳转到首页
|
||||
setTimeout(() => {
|
||||
$router.push("/admin/index");
|
||||
}, 500);
|
||||
};
|
||||
|
||||
onUnmounted(() => {
|
||||
//页面卸载的时候清空定时器
|
||||
if (intervalId) {
|
||||
handleClearInterval();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "./index.scss";
|
||||
</style>
|
||||
Reference in New Issue
Block a user