修改alarm组件，添加登录注册页面
This commit is contained in:
parent
a4e642a7db
commit
0af4b9aff7
|
|
@ -1,10 +1,12 @@
|
|||
<template>
|
||||
<div class="alarmOn" :style="alarmStyle">
|
||||
<slot></slot>
|
||||
<div class="flashing slot-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "Alarm",
|
||||
props: {
|
||||
|
|
@ -12,20 +14,28 @@ export default {
|
|||
type: String,
|
||||
default: "red",
|
||||
},
|
||||
size:{
|
||||
type: Number,
|
||||
default: 100,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
alarmStyle() {
|
||||
return {
|
||||
background: this.backgroudColor,
|
||||
'--size': `${this.size}px`,
|
||||
borderColor: `transparent transparent ${this.backgroudColor} transparent`,
|
||||
};
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
<style lang="less" scoped>
|
||||
:root {
|
||||
--size: 100px; /* 默认值 */
|
||||
}
|
||||
@keyframes flashing {
|
||||
0% {
|
||||
0% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
|
|
@ -35,21 +45,29 @@ export default {
|
|||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.alarmOn {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
|
||||
font-size: 100px;
|
||||
position: relative;
|
||||
font-size: var(--size);
|
||||
color: white;
|
||||
height: 200px;
|
||||
|
||||
width: 200px;
|
||||
/* background: var(--alarmStyle-color); */
|
||||
border-radius: 50%;
|
||||
|
||||
animation: flashing 2000ms infinite ease-in-out;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: var(--size) solid transparent;
|
||||
border-right: var(--size) solid transparent;
|
||||
border-bottom: calc(var(--size)*2) solid red;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
.flashing {
|
||||
animation: flashing 2s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.slot-content {
|
||||
position: absolute;
|
||||
top: var(--size); /* Adjust this value to center the content vertically */
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
</style>
|
||||
|
|
@ -2,23 +2,28 @@ import Vue from 'vue';
|
|||
import Router from 'vue-router';
|
||||
import User from '@/views/User.vue';
|
||||
import App from '@/App.vue';
|
||||
|
||||
import Login from '@/views/Login.vue';
|
||||
Vue.use(Router);
|
||||
|
||||
|
||||
const routes=[
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'App',
|
||||
component: App,
|
||||
children: [
|
||||
{
|
||||
path: 'user',
|
||||
name: 'User',
|
||||
component: User
|
||||
}
|
||||
|
||||
]
|
||||
path: '/',
|
||||
name: 'App',
|
||||
component: App,
|
||||
children: [
|
||||
{
|
||||
path: 'user',
|
||||
name: 'User',
|
||||
component: User
|
||||
},
|
||||
{
|
||||
path: 'login',
|
||||
name: 'Login',
|
||||
component: Login
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,308 @@
|
|||
<template>
|
||||
<div class="login">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>XXX系统</span>
|
||||
</div>
|
||||
<el-tabs v-model="currentIndex" stretch @tab-click="handleClick">
|
||||
<el-tab-pane label="登录" name="login">
|
||||
<el-form :model="loginForm" :rules="rules" status-icon ref="loginForm">
|
||||
<el-form-item label="账号" label-width="80px" prop="account">
|
||||
<el-input type="text" v-model="loginForm.account" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" label-width="80px" prop="password">
|
||||
<el-input type="password" v-model="loginForm.password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="注册" name="register">
|
||||
<el-form :model="registerForm" :rules="rules" status-icon ref="registerForm">
|
||||
<el-form-item label="账号" label-width="80px" prop="account">
|
||||
<el-input type="text" v-model="registerForm.account"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" label-width="80px" prop="email">
|
||||
<el-input type="text" v-model="registerForm.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" label-width="80px" prop="password">
|
||||
<el-input type="password" v-model="registerForm.password"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="确认密码" label-width="80px" prop="checkPassword">
|
||||
<el-input type="password" v-model="registerForm.checkPassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" label-width="80px" prop="code">
|
||||
<el-input type="text" v-model="registerForm.code" class="code"></el-input>
|
||||
<span v-if="codeShow" style="color: rgb(0, 238, 255);cursor: pointer; /*悬停变小手的属性*/"
|
||||
@click="getCode()">获取验证码</span>
|
||||
<span v-if="!codeShow" style="color: rgb(0, 238, 255);">{{ count }}秒后重试</span>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// import axiosInstance from "@/store/request";
|
||||
export default {
|
||||
data() {
|
||||
|
||||
|
||||
|
||||
var validateAccount = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入账号"));
|
||||
} else if (value.length < 3) {
|
||||
return callback(new Error("请输入3位以上的账号"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
var validatePassword = (rule, value, callback) => {
|
||||
if (this.activeTab === "login") {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入密码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
if (this.activeTab === "register") {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入密码"));
|
||||
} else if (value.length < 6) {
|
||||
callback(new Error("请输入六位以上的密码"));
|
||||
} else if (value.length > 16) {
|
||||
callback(new Error("请输入16位以下的密码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
var validateRegisterCheckPassword = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请再次输入密码"));
|
||||
} else if (this.registerForm.password !== value) {
|
||||
return callback(new Error("两次密码输入不一致"));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
};
|
||||
var validateEmail = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入邮箱"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validateCode = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入验证码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
codeShow: true,
|
||||
count: "",
|
||||
timer: null,
|
||||
|
||||
currentIndex: "login",
|
||||
loginForm: {
|
||||
account: "",
|
||||
password: "",
|
||||
},
|
||||
registerForm: {
|
||||
username: "",
|
||||
email: "",
|
||||
code: "",
|
||||
account: "",
|
||||
password: "",
|
||||
checkPassword: "",
|
||||
},
|
||||
activeTab: "login",
|
||||
rules: {
|
||||
account: [
|
||||
{
|
||||
validator: validateAccount,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
validator: validatePassword,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
checkPassword: [
|
||||
{
|
||||
validator: validateRegisterCheckPassword,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: validateEmail,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
code: [
|
||||
{
|
||||
validator: validateCode,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getCode() {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(this.registerForm.email)) {
|
||||
this.$message({
|
||||
message: '请输入正确的邮箱',
|
||||
type: 'warning'
|
||||
});
|
||||
}
|
||||
else {
|
||||
const TIME_COUNT = 60;
|
||||
// axiosInstance.post("/sendCode", {
|
||||
// email: this.registerForm.email,
|
||||
// });
|
||||
if (!this.timer) {
|
||||
this.count = TIME_COUNT;
|
||||
this.codeShow = false;
|
||||
this.timer = setInterval(() => {
|
||||
if (this.count > 0 && this.count <= TIME_COUNT) {
|
||||
this.count--;
|
||||
|
||||
}
|
||||
else {
|
||||
this.codeShow = true;
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
submitForm(formname) {
|
||||
// const that = this;
|
||||
this.$refs[formname].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.activeTab === "login") {
|
||||
console.log(this.loginForm.username);
|
||||
console.log(this.loginForm.password);
|
||||
|
||||
// axiosInstance
|
||||
// .post("/login", {
|
||||
|
||||
// account: this.loginForm.account,
|
||||
// password: this.loginForm.password,
|
||||
|
||||
// })
|
||||
// .then(function (response) {
|
||||
// if (response.data.responseStr !== "No") {
|
||||
// that.$store.commit("setToken", response.data.responseStr);
|
||||
// localStorage.setItem("account", that.loginForm.account);
|
||||
// that.$router.push({ path: "/home" });
|
||||
// } else {
|
||||
// that.$message.error('账号或密码错误');
|
||||
// }
|
||||
// });
|
||||
|
||||
// console.log(this.username+"pass"+this.password);
|
||||
}
|
||||
if (this.activeTab === "register") {
|
||||
// const that = this;
|
||||
// axiosInstance.post("/checkCode", {
|
||||
// email: that.registerForm.email,
|
||||
// code: that.registerForm.code,
|
||||
// }).then(function (response) {
|
||||
// if (response.data === true) {
|
||||
|
||||
// that.$message({
|
||||
// message: '验证码正确',
|
||||
// type: 'success'
|
||||
// });
|
||||
// axiosInstance
|
||||
// .post("/register", {
|
||||
|
||||
// account: that.registerForm.account,
|
||||
// password: that.registerForm.password,
|
||||
// email: that.registerForm.email,
|
||||
|
||||
// })
|
||||
// .then(function (response) {
|
||||
// if (response.data.status === 200) {
|
||||
// that.$message({
|
||||
// message: '注册成功',
|
||||
// type: 'success'
|
||||
// });
|
||||
// } else if (response.data.status === 1001) {
|
||||
// that.$message.error('账号已存在');
|
||||
// } else if (response.data.status === 1002) {
|
||||
// that.$message.error('该邮箱已被注册');
|
||||
// } else {
|
||||
// that.$message.error('注册失败');
|
||||
// }
|
||||
|
||||
// });
|
||||
|
||||
|
||||
// } else if (response.data === false) {
|
||||
// that.$message.error('验证码错误');
|
||||
// } else {
|
||||
// that.$message.error('验证码失效');
|
||||
|
||||
// }
|
||||
// });
|
||||
|
||||
// // .catch(){
|
||||
// // //抛出网络请求异常
|
||||
// // }
|
||||
// console.log(this.registerForm);
|
||||
}
|
||||
} else {
|
||||
console.log("abc");
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClick(tab) {
|
||||
this.activeTab = tab.name;
|
||||
// console.log("active"+this.activeTab)
|
||||
// console.log("tab"+tab.name)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.login {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 500px;
|
||||
margin: 100px auto;
|
||||
}
|
||||
|
||||
.code {
|
||||
width: 200px;
|
||||
margin-right: 107px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="outer">
|
||||
<Alarm>!</Alarm>
|
||||
<Alarm :size="50">!</Alarm>
|
||||
|
||||
<div class="video">
|
||||
<video ref="video" autoplay></video>
|
||||
|
|
|
|||
Loading…
Reference in New Issue