登录页面大更新
This commit is contained in:
橙子
@@ -7,10 +7,16 @@
|
||||
<small class="text-body-1"
|
||||
>你可以在这里多角色分配多菜单/选中一个可查看</small
|
||||
> </template
|
||||
><app-btn class="ma-4" @click="setMenu">确定分配</app-btn
|
||||
><app-btn class="my-4" color="secondary" @click="clear">清空选择</app-btn></material-card
|
||||
>
|
||||
<v-divider></v-divider>
|
||||
<app-btn class="ma-4" @click="setMenu">确定分配</app-btn
|
||||
>
|
||||
|
||||
<app-btn class="my-4" color="secondary" @click="clear">清空选择</app-btn></material-card
|
||||
>
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4" lg="4">
|
||||
<v-card class="mx-auto" width="100%">
|
||||
<v-treeview
|
||||
|
||||
@@ -1,162 +1,133 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="px-6 py-4 mx-auto elevation-4 rounded-md"
|
||||
style="height: 600px; width: 500px"
|
||||
>
|
||||
<div>
|
||||
<h1 class="title my-2">Angstrong</h1>
|
||||
<v-subheader>登入你的用户</v-subheader>
|
||||
</div>
|
||||
<v-card class="auth-card">
|
||||
<!-- logo -->
|
||||
<v-card-title class="d-flex align-center justify-center py-7">
|
||||
<router-link to="/" class="d-flex align-center">
|
||||
<v-img
|
||||
:src="require('@/assets/logo.svg')"
|
||||
max-height="30px"
|
||||
max-width="30px"
|
||||
alt="logo"
|
||||
contain
|
||||
class="me-3"
|
||||
></v-img>
|
||||
<h2 class="text-2xl font-weight-semibold">Yi-Framework</h2>
|
||||
</router-link>
|
||||
</v-card-title>
|
||||
|
||||
<v-form ref="form" v-model="valid" lazy-validation>
|
||||
<v-text-field
|
||||
v-model="user_name"
|
||||
:rules="user_nameRules"
|
||||
label="用户名"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
:counter="20"
|
||||
></v-text-field>
|
||||
<!-- title -->
|
||||
<v-card-text>
|
||||
<p class="text-2xl font-weight-semibold text--primary mb-2">
|
||||
欢迎来到CCNetCore! 👋🏻
|
||||
</p>
|
||||
<p class="mb-2">登入你的用户，开始畅游一切</p>
|
||||
</v-card-text>
|
||||
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:rules="passwordRules"
|
||||
label="密码"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
type="password"
|
||||
></v-text-field>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-checkbox
|
||||
v-model="checkbox"
|
||||
:rules="[(v) => !!v || '同意后才可进入']"
|
||||
label="你同意协议吗？"
|
||||
required
|
||||
></v-checkbox
|
||||
></v-col>
|
||||
<v-col cols="6" class="text-right pt-8"
|
||||
><router-link to="/register">前往注册</router-link></v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-form>
|
||||
<!-- login form -->
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-text-field
|
||||
v-model="form.username"
|
||||
outlined
|
||||
label="用户"
|
||||
placeholder="123456789@qq.com"
|
||||
counter="20"
|
||||
></v-text-field>
|
||||
|
||||
<v-btn
|
||||
class="my-2 light-blue white--text"
|
||||
@click="login"
|
||||
large
|
||||
style="width: 100%"
|
||||
@keyup.enter="enterSearch"
|
||||
:loading="loader"
|
||||
:disabled="btn_dis"
|
||||
>
|
||||
登入
|
||||
</v-btn>
|
||||
<p class="my-2">或使用登录</p>
|
||||
<v-btn class="my-2 cyan white--text" @click="qqlogin" large style="width: 100%" :loading="loader" :disabled="btn_dis">
|
||||
<v-icon class="mx-2" > mdi-qqchat </v-icon>
|
||||
QQ
|
||||
</v-btn>
|
||||
<v-text-field
|
||||
v-model="form.password"
|
||||
outlined
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
label="密码"
|
||||
placeholder="············"
|
||||
:append-icon="isPasswordVisible ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
@click:append="isPasswordVisible = !isPasswordVisible"
|
||||
></v-text-field>
|
||||
|
||||
<v-btn class="cyan white--text" @click="yklogin" large style="width: 100%" :loading="loader" :disabled="btn_dis">
|
||||
<v-icon class="mx-2"> mdi-message-text </v-icon>
|
||||
临时游客
|
||||
</v-btn>
|
||||
<div class="d-flex align-center justify-space-between flex-wrap">
|
||||
<v-checkbox label="记住密码" hide-details class="me-3 mt-1">
|
||||
</v-checkbox>
|
||||
|
||||
<!-- forgot link -->
|
||||
<a href="javascript:void(0)" class="mt-1"> 忘记密码? </a>
|
||||
</div>
|
||||
|
||||
<v-btn block color="primary" @click="login" class="mt-6"> 登录 </v-btn>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<!-- create new account -->
|
||||
<v-card-text class="d-flex align-center justify-center flex-wrap mt-2">
|
||||
<span class="me-2"> 没有我们的账号? </span>
|
||||
<router-link :to="{ path: '/register' }"> 注册账号 </router-link>
|
||||
</v-card-text>
|
||||
|
||||
<!-- divider -->
|
||||
<v-card-text class="d-flex align-center mt-2">
|
||||
<v-divider></v-divider>
|
||||
<span class="mx-5">or</span>
|
||||
<v-divider></v-divider>
|
||||
</v-card-text>
|
||||
|
||||
<!-- social links -->
|
||||
<v-card-actions class="d-flex justify-center ">
|
||||
<v-btn v-for="link in socialLink" :key="link.icon" icon class="ms-1">
|
||||
<v-icon :color="$vuetify.theme.dark ? link.colorInDark : link.color">
|
||||
{{ link.icon }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data: () => ({
|
||||
btn_dis:false,
|
||||
loader: null,
|
||||
valid: true,
|
||||
user_name: "",
|
||||
user_nameRules: [
|
||||
(v) => !!v || "用户名不能为空",
|
||||
(v) => (v && v.length <= 20) || "用户名必须小于20个字符",
|
||||
socialLink: [
|
||||
{
|
||||
icon: "mdi-qqchat",
|
||||
color: "#8D5EE0",
|
||||
colorInDark: "#8D5EE0",
|
||||
},
|
||||
{
|
||||
icon: "mdi-facebook",
|
||||
color: "#4267b2",
|
||||
colorInDark: "#4267b2",
|
||||
},
|
||||
{
|
||||
icon: "mdi-twitter",
|
||||
color: "#1da1f2",
|
||||
colorInDark: "#1da1f2",
|
||||
},
|
||||
{
|
||||
icon: "mdi-github",
|
||||
color: "#272727",
|
||||
colorInDark: "#fff",
|
||||
},
|
||||
{
|
||||
icon: "mdi-google",
|
||||
color: "#db4437",
|
||||
colorInDark: "#db4437",
|
||||
},
|
||||
],
|
||||
password: "",
|
||||
passwordRules: [
|
||||
(v) => !!v || "密码不能为空",
|
||||
(v) => (v && v.length <= 120) || "密码必须小于20个字符",
|
||||
],
|
||||
select: null,
|
||||
checkbox: true,
|
||||
}),
|
||||
created() {
|
||||
this.enterSearch();
|
||||
},
|
||||
methods: {
|
||||
enterSearch() {
|
||||
document.onkeydown = (e) => {
|
||||
//13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
|
||||
if (e.keyCode === 13 && e.target.baseURI.match("/")) {
|
||||
//回车后执行搜索方法
|
||||
this.login();
|
||||
}
|
||||
};
|
||||
},
|
||||
|
||||
qqlogin() {
|
||||
// QC.Login.showPopup(myqq.myqqLogin);
|
||||
// window.close();
|
||||
},
|
||||
yklogin() {
|
||||
this.loader = "true";
|
||||
this.btn_dis=true;
|
||||
this.$store
|
||||
.dispatch("Login", {
|
||||
username: "游客",
|
||||
password: "",
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.loader=null;
|
||||
this.btn_dis=false;
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
isPasswordVisible: false,
|
||||
form: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
}),
|
||||
methods: {
|
||||
login() {
|
||||
if (this.$refs.form.validate()) {
|
||||
this.loader = "true";
|
||||
this.btn_dis=true;
|
||||
this.$store
|
||||
.dispatch("Login", {
|
||||
username: this.user_name,
|
||||
password: this.password,
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.loader = null;
|
||||
this.btn_dis=false;
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
this.$store.dispatch("Login", this.form).then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请合理输入数据", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.$refs.form.reset();
|
||||
},
|
||||
resetValidation() {
|
||||
this.$refs.form.resetValidation();
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,238 +1,141 @@
|
||||
<template>
|
||||
<v-card
|
||||
class="px-6 py-4 mx-auto elevation-4 rounded-md"
|
||||
style=" height: 600px; width: 500px"
|
||||
>
|
||||
<div>
|
||||
<h1 class="title my-2">Angstrong</h1>
|
||||
<v-subheader>注册加入我们</v-subheader>
|
||||
</div>
|
||||
<v-card class="auth-card">
|
||||
<!-- logo -->
|
||||
<v-card-title class="d-flex align-center justify-center py-7">
|
||||
<router-link to="/" class="d-flex align-center">
|
||||
<v-img
|
||||
:src="require('@/assets/logo.svg')"
|
||||
max-height="30px"
|
||||
max-width="30px"
|
||||
alt="logo"
|
||||
contain
|
||||
class="me-3"
|
||||
></v-img>
|
||||
|
||||
<v-form ref="form" v-model="valid" lazy-validation>
|
||||
<v-text-field
|
||||
v-model="user_name"
|
||||
:rules="user_nameRules"
|
||||
label="用户名"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
:counter="20"
|
||||
></v-text-field>
|
||||
<h2 class="text-2xl font-weight-semibold">Yi-Framework</h2>
|
||||
</router-link>
|
||||
</v-card-title>
|
||||
|
||||
<v-text-field
|
||||
ref="myemail"
|
||||
v-model="email"
|
||||
:rules="emailRules"
|
||||
label="邮箱"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
></v-text-field>
|
||||
<!-- title -->
|
||||
<v-card-text>
|
||||
<p class="text-2xl font-weight-semibold text--primary mb-2">
|
||||
注册-从这里开始 🚀
|
||||
</p>
|
||||
<p class="mb-2">加入我们，获得一个有趣的灵魂！</p>
|
||||
</v-card-text>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="6" md="8">
|
||||
<v-text-field
|
||||
v-model="code"
|
||||
label="验证码"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
:counter="20"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="2" md="1">
|
||||
<v-progress-circular
|
||||
class="mt-2"
|
||||
size="40"
|
||||
:rotate="360"
|
||||
:value="value"
|
||||
color="cyan"
|
||||
>
|
||||
{{ value }}
|
||||
</v-progress-circular>
|
||||
</v-col>
|
||||
<v-col cols="4" md="3">
|
||||
<v-btn class="mt-1" large :dark="!dis_mail" color="cyan" @click="sendMail"
|
||||
:disabled="dis_mail"
|
||||
>发送</v-btn
|
||||
<!-- login form -->
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-text-field
|
||||
v-model="form.username"
|
||||
outlined
|
||||
label="用户名"
|
||||
placeholder="JohnDoe"
|
||||
|
||||
class="mb-3"
|
||||
counter="20"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="form.email"
|
||||
outlined
|
||||
label="邮箱"
|
||||
placeholder="john@example.com"
|
||||
|
||||
class="mb-3"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="form.password"
|
||||
outlined
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
label="密码"
|
||||
placeholder="············"
|
||||
:append-icon="
|
||||
isPasswordVisible ? 'mdi-eye' : 'mdi-eye-off'
|
||||
"
|
||||
@click:append="isPasswordVisible = !isPasswordVisible"
|
||||
></v-text-field>
|
||||
|
||||
<v-checkbox hide-details class="mt-1">
|
||||
<template #label>
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<span class="me-2">我同意</span
|
||||
><a href="javascript:void(0)">协议 & 策略</a>
|
||||
</div>
|
||||
</template>
|
||||
</v-checkbox>
|
||||
|
||||
<v-btn block color="primary" class="mt-6"> 注册 </v-btn>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<!-- create new account -->
|
||||
<v-card-text class="d-flex align-center justify-center flex-wrap mt-2">
|
||||
<span class="me-2"> 已经存在账号? </span>
|
||||
<router-link :to="{ path: '/login' }"> 跳转登录 </router-link>
|
||||
</v-card-text>
|
||||
|
||||
<!-- divider -->
|
||||
<v-card-text class="d-flex align-center mt-2">
|
||||
<v-divider></v-divider>
|
||||
<span class="mx-5">or</span>
|
||||
<v-divider></v-divider>
|
||||
</v-card-text>
|
||||
|
||||
<!-- social link -->
|
||||
<v-card-actions class="d-flex justify-center">
|
||||
<v-btn
|
||||
v-for="link in socialLink"
|
||||
:key="link.icon"
|
||||
icon
|
||||
class="ms-1"
|
||||
>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-text-field
|
||||
v-model="password"
|
||||
:rules="passwordRules"
|
||||
label="密码"
|
||||
outlined
|
||||
clearable
|
||||
required
|
||||
type="password"
|
||||
></v-text-field>
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<v-checkbox
|
||||
v-model="checkbox"
|
||||
:rules="[(v) => !!v || '同意后才可进入']"
|
||||
label="你同意协议吗？"
|
||||
required
|
||||
></v-checkbox
|
||||
></v-col>
|
||||
<v-col cols="6" class="text-right pt-8"
|
||||
><router-link to="/login">返回</router-link></v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-form>
|
||||
|
||||
<v-btn
|
||||
class="my-2 light-blue white--text"
|
||||
@click="register"
|
||||
large
|
||||
style="width: 100%"
|
||||
:loading="loader"
|
||||
:disabled="btn_dis"
|
||||
>
|
||||
注册
|
||||
</v-btn>
|
||||
<!-- <p>或使用登录</p>
|
||||
<v-btn dark class="my-2 cyan" @click="login" large style="width: 100%">
|
||||
<v-icon class="mx-2"> mdi-message-text </v-icon>
|
||||
QQ
|
||||
</v-btn>
|
||||
|
||||
<v-btn dark class="cyan" @click="login" large style="width: 100%">
|
||||
<v-icon class="mx-2"> mdi-message-text </v-icon>
|
||||
微信
|
||||
</v-btn> -->
|
||||
<v-icon :color="$vuetify.theme.dark ? link.colorInDark:link.color">
|
||||
{{ link.icon }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
import accountApi from "../api/accountApi.js";
|
||||
export default {
|
||||
data: () => ({
|
||||
btn_dis:false,
|
||||
loader: null,
|
||||
dis_mail:false,
|
||||
value:100,
|
||||
code: "",
|
||||
valid: true,
|
||||
user_name: "",
|
||||
user_nameRules: [
|
||||
(v) => !!v || "用户名不能为空",
|
||||
(v) => (v && v.length <= 20) || "用户名必须小于20个字符",
|
||||
],
|
||||
email: "",
|
||||
emailRules: [
|
||||
(v) => !!v || "邮箱不能为空",
|
||||
(v) => /.+@.+\..+/.test(v) || "无效的邮箱",
|
||||
],
|
||||
password: "",
|
||||
passwordRules: [
|
||||
(v) => !!v || "密码不能为空",
|
||||
(v) => (v && v.length <= 120) || "密码必须小于120个字符",
|
||||
(v) => (v && v.length >= 7) || "密码必须大于等于7个字符",
|
||||
],
|
||||
select: null,
|
||||
checkbox: true,
|
||||
socialLink:[
|
||||
{
|
||||
icon: 'mdi-qqchat',
|
||||
color: '#8D5EE0',
|
||||
colorInDark: '#8D5EE0',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-facebook',
|
||||
color: '#4267b2',
|
||||
colorInDark: '#4267b2',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-twitter',
|
||||
color: '#1da1f2',
|
||||
colorInDark: '#1da1f2',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-github',
|
||||
color: '#272727',
|
||||
colorInDark: '#fff',
|
||||
},
|
||||
{
|
||||
icon: 'mdi-google',
|
||||
color: '#db4437',
|
||||
colorInDark: '#db4437',
|
||||
},
|
||||
],
|
||||
|
||||
isPasswordVisible: false,
|
||||
form: {
|
||||
email: "",
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
}),
|
||||
created()
|
||||
{
|
||||
setInterval(this.addValue,1000)
|
||||
},
|
||||
// watch:{
|
||||
// value(val,old)
|
||||
// {
|
||||
|
||||
// val+=1
|
||||
// if (val==100)
|
||||
// {
|
||||
// this.dis_mail=false
|
||||
// }
|
||||
// else
|
||||
// {
|
||||
// this.dis_mail=true
|
||||
// }
|
||||
// }
|
||||
// },
|
||||
methods: {
|
||||
addValue()
|
||||
{
|
||||
if(this.value<=99)
|
||||
{
|
||||
this.value+=1
|
||||
}
|
||||
if(this.value==100)
|
||||
{
|
||||
this.dis_mail=false
|
||||
}
|
||||
else
|
||||
{
|
||||
this.dis_mail=true
|
||||
}
|
||||
},
|
||||
register() {
|
||||
if (this.$refs.form.validate()) {
|
||||
this.loader = "true";
|
||||
this.btn_dis=true;
|
||||
this.$store
|
||||
.dispatch("Register", {
|
||||
username: this.user_name,
|
||||
password: this.password,
|
||||
email: this.email,
|
||||
code: this.code,
|
||||
})
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
this.$router.push("/login");
|
||||
} else {
|
||||
this.loader=null;
|
||||
this.btn_dis=false;
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请合理输入数据", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
},
|
||||
reset() {
|
||||
this.$refs.form.reset();
|
||||
},
|
||||
resetValidation() {
|
||||
this.$refs.form.resetValidation();
|
||||
},
|
||||
sendMail() {
|
||||
if (this.$refs.myemail.validate()) {
|
||||
|
||||
this.value=0
|
||||
this.dis_mail=true
|
||||
accountApi.email(this.email).then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error("请合理输入邮箱", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
</script>
|
||||
Reference in New Issue
Block a user