Skip to content

E
exhibition_page
提交 2f08d0cb authored 作者: 龙菲's avatar 龙菲
浏览文件
操作

注册、修改密码

上级 e42ddc08
隐藏空白字符变更
内嵌 并排
正在显示 包含 611 行增加 和 274 行删除
src/api/user.js
浏览文件 @ 2f08d0cb
......@@ -18,6 +18,23 @@ export function login(data) {
})
}
export function register(data) {
return request({
url: '/sys/user/register',
method: 'post',
data
})
}
export function updateUserInfo(data) {
return request({
url: '/sys/user',
method: 'post',
data
})
}
export function updatePassword(data) {
return request({
url: '/auth/user/modifyPass',
......@@ -79,28 +96,3 @@ export function getViewList(data) {
})
}
// /** *
// * 上传头像
// */
// export function uploadFileByFile(data) {
// return request({
// url: '/common/oss/uploadFileByFile',
// method: 'post',
// data,
// headers: {
// 'Content-Type': 'multipart/form-data'
// }
// })
// }
// /** *
// * 更新头像
// */
// export function updateHeadPic(params) {
// return request({
// url: '/auth/user/updateHeadPic',
// method: 'get',
// params
// })
// }
src/components/NavBar/index.vue
浏览文件 @ 2f08d0cb
......@@ -81,15 +81,90 @@
</div>
</div>
</div>
<el-dialog :visible.sync="loginVisible" append-to-body title="账号登陆">
<div class="login">
<el-form
:model="loginForm"
:label-position="labelPosition"
ref="loginForm"
>
<el-form-item :label-width="formLabelWidth" prop="username">
<el-input
v-model="loginForm.username"
autocomplete="off"
clearable
placeholder="用户名/手机号"
></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth" prop="password">
<el-input
v-model="loginForm.password"
autocomplete="off"
type="password"
clearable
show-password
placeholder="密码"
></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<el-row :gutter="10">
<el-col :span="12">
<el-form-item prop="captcha">
<el-input
ref="captcha"
v-model="loginForm.captcha"
placeholder="请输入验证码"
name="captcha"
tabindex="3"
auto-complete="on"
@keyup.enter.native="handleLoginSubmit"
/>
</el-form-item>
</el-col>
<el-col :span="12" class="captcha">
<img
v-if="requestCodeSuccess"
:src="captchaImgSrc"
@click="handleGetCaptcha"
/>
<img
v-else
src="@/assets/404_images/checkcode.png"
@click="handleGetCaptcha"
/>
</el-col>
</el-row>
</el-form-item>
</el-form>
<div class="opration">
<el-button
round
@click="handleLoginSubmit"
size="small"
:loading="loading"
class="loginBtn"
>登 陆</el-button
>
<div class="register" @click="handleToRegister">注册</div>
</div>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { getVerify } from "@/api/user";
export default {
name: "NavBar",
computed: {
...mapGetters(["token", "userInfo", "curPath", "navBarFixed"]),
...mapGetters([
"token",
"userInfo",
"curPath",
"navBarFixed",
"showLoginDialog",
]),
hasToken() {
return this.token;
},
......@@ -127,6 +202,9 @@ export default {
navBarFixed(value) {
console.log("navBarFixed", value);
},
showLoginDialog(value) {
this.loginVisible = value;
},
},
data() {
return {
......@@ -165,17 +243,34 @@ export default {
isHome: true,
isFixed: false,
offsetTop: 0,
loginVisible: false,
loginForm: {
username: "",
password: "",
captcha: "",
},
requestCodeSuccess: false,
captchaImgSrc: "",
formLabelWidth: "1px",
labelPosition: "right",
loading: false,
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入用户名" },
],
password: [{ required: true, trigger: "blur", message: "请输入密码" }],
captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }],
},
};
},
created() {
this.handleGetCaptcha();
},
mounted() {
window.addEventListener("scroll", this.initHeight);
this.$nextTick(() => {
this.offsetTop = document.querySelector("#navbar").offsetTop;
});
// 获取logo-container、tabs、tools
// let logoContainer = document.getElementsByClassName("logo-container")[0];
// let tabs = document.getElementsByClassName("tabs")[0];
// let tools = document.getElementsByClassName("tools")[0];
},
methods: {
initHeight() {
......@@ -186,8 +281,13 @@ export default {
this.isFixed = scrollTop > this.offsetTop ? true : false;
},
handleToRegister() {
this.$router.push("/register?redirect=" + this.$route.fullPath);
this.handleCloseLogin();
},
handleToLogin() {
this.$router.push("/login?redirect=" + this.$route.fullPath);
this.loginVisible = true;
},
async handleLogOut() {
......@@ -202,6 +302,45 @@ export default {
handleClickTab(tab) {
this.currentTab = tab;
},
handleLoginSubmit() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
this.loading = true;
this.$store
.dispatch("user/login", this.loginForm)
.then(() => {
this.$router.push({ path: this.$route.query.redirect || "/" });
this.loading = false;
this.handleCloseLogin();
})
.catch(() => {
this.loading = false;
});
} else {
console.log("error submit!!");
return false;
}
});
},
handleCloseLogin() {
this.loginVisible = false;
this.$refs["loginForm"].resetFields;
},
handleGetCaptcha() {
this.currdatetime = new Date().getTime();
getVerify()
.then((res) => {
this.requestCodeSuccess = true;
const imgSrc = window.URL.createObjectURL(res);
this.captchaImgSrc = imgSrc;
})
.catch(() => {
this.requestCodeSuccess = false;
});
},
},
destroyed() {
......@@ -229,7 +368,6 @@ export default {
position: fixed !important;
background-color: #2069c4 !important;
z-index: 99;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
top: 0;
}
......@@ -238,7 +376,7 @@ export default {
width: 100%;
transition: all 0.5s ease;
background-color: #2069c4;
box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 5px 0px;
.container {
width: 100%;
height: 100%;
......@@ -250,8 +388,6 @@ export default {
.logo-container {
width: 380px;
height: 74px;
// transform: translateX(-1000px);
// animation: fadeUp 0.5s ease;
}
.right {
display: flex;
......@@ -262,9 +398,6 @@ export default {
display: flex;
margin-right: 80px;
min-width: 512px;
// height: 100%;
// transform: translateY(200px);
// animation: fadeUp ease 1s forwards;
height: 100%;
.tab-item {
margin-right: 70px;
......@@ -273,7 +406,6 @@ export default {
align-items: center;
font-family: "Alibaba-PuHuiTi";
position: relative;
// padding: 15px 50px;
height: 100%;
text-align: center;
......@@ -295,41 +427,6 @@ export default {
color: #fff8a3;
text-shadow: 0 1px 2px #9fafcb, 1px 0px 2px #9fafcb;
}
// .activeHome {
// a {
// color: #2069c4 !important;
// }
// }
// .active {
// a {
// color: #000 !important;
// }
// }
// &::before {
// transition: all 0.5s cubic-bezier(0.7, -0.5, 0.2, 2);
// content: "";
// display: inline-block;
// width: 0;
// height: 4px;
// background: #1d549d;
// position: absolute;
// bottom: 24px;
// left: 0;
// }
// &:hover:before {
// background: #1d549d;
// width: 38px;
// }
// .active {
// width: 38px;
// height: 4px;
// background: #1d549d;
// position: absolute;
// bottom: 24px;
// left: 0;
// }
}
}
}
......@@ -379,9 +476,103 @@ export default {
.el-dropdown-menu__item:focus,
.el-dropdown-menu__item:not(.is-disabled):hover {
// background-color: rgba(255, 255, 255, 0.2);
// color: #fff;
background-color: #f8f8f8;
color: #8a919f;
}
.login {
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
.text {
font-weight: bold;
font-size: 24px;
color: #666;
}
.close {
font-size: 34px;
cursor: pointer;
color: #ccc;
}
}
.login-box {
width: 500px;
margin: auto;
}
}
.opration {
display: flex;
justify-content: space-between;
flex-direction: column;
margin-top: 20px;
.register {
display: flex;
justify-content: center;
margin-top: 20px;
font-size: 14px;
cursor: pointer;
&:hover {
color: #2069c4;
}
}
}
.dialog-footer {
display: flex;
justify-content: center;
}
.captcha {
display: flex;
justify-content: flex-end;
img {
margin-top: 2px;
height: 40px;
}
}
::v-deep .loginBtn {
padding: 16px !important;
border-radius: 26px !important;
width: 100%;
background-color: #2069c4;
color: #fff;
font-size: 14px;
&:hover {
filter: brightness(0.9) !important;
background-color: #2069c4;
color: #fff;
border: none;
border-radius: 26px !important;
padding: 16px !important;
width: 100%;
font-size: 14px;
}
}
::v-deep .el-dialog {
width: 380px;
border-radius: 16px;
.el-dialog__body {
padding: 20px 30px 60px !important;
}
}
::v-deep .el-input__inner {
background: #e8f0fe;
border: none;
}
::v-deep .el-dialog__header {
padding: 48px 30px 10px !important;
color: #666 !important;
font-weight: bold;
}
::v-deep .el-dialog__headerbtn {
top: 48px !important;
font-size: 24px;
right: 30px;
}
</style>
src/router/index.js
浏览文件 @ 2f08d0cb
......@@ -82,15 +82,15 @@ const routes = [
keepAlive: true
}
},
// 登录
{
path: '/login',
name: 'login',
component: () => import('@/views/login'),
meta: {
keepAlive: true
}
},
// // 登录
// {
// path: '/login',
// name: 'login',
// component: () => import('@/views/login'),
// meta: {
// keepAlive: true
// }
// },
// 注册页
{
......
src/store/getters.js
浏览文件 @ 2f08d0cb
......@@ -9,6 +9,7 @@ const getters = {
museumTree: state => state.org.museumTree,
curPath: state => state.app.curPath,
navBarFixed: state => state.app.navBarFixed
navBarFixed: state => state.app.navBarFixed,
showLoginDialog: state => state.app.showLoginDialog
}
export default getters
src/store/modules/app.js
浏览文件 @ 2f08d0cb
// import {
// getToken,
// } from '@/utils/auth'
const getDefaultState = () => {
return {
curPath: null,
navBarFixed: false
navBarFixed: false,
showLoginDialog: null
}
}
// const getCurPath= function(){}
const state = getDefaultState()
const mutations = {
......@@ -21,16 +18,14 @@ const mutations = {
},
SET_NAVBAR_FIXED: (state, isFixed) => {
state.navBarFixed = isFixed
},
OPEN_LOGIN_DIALOG: (state, showLoginDialog) => {
state.showLoginDialog = showLoginDialog
}
}
const actions = {
}
export default {
namespaced: true,
state,
mutations,
actions
}
src/views/login/index.vue
浏览文件 @ 2f08d0cb
......@@ -3,7 +3,7 @@
<div class="wrapper">
<div class="login">
<div class="title">
<div class="text">登 陆</div>
<div class="text">账号登陆</div>
<div class="close" @click="handleCloseLogin">×</div>
</div>
<el-form
......@@ -31,7 +31,7 @@
</el-form-item>
<el-form-item :label-width="formLabelWidth">
<el-row :gutter="10">
<el-col :span="16">
<el-col :span="12">
<el-form-item prop="captcha">
<el-input
ref="captcha"
......@@ -44,16 +44,14 @@
/>
</el-form-item>
</el-col>
<el-col :span="8" class="captcha">
<el-col :span="12" class="captcha">
<img
v-if="requestCodeSuccess"
style="margin-top: 2px"
:src="captchaImgSrc"
@click="handleGetCaptcha"
/>
<img
v-else
style="margin-top: 2px"
src="@/assets/404_images/checkcode.png"
@click="handleGetCaptcha"
/>
......@@ -167,7 +165,7 @@ export default {
}
.login {
width: 500px;
width: 400px;
// margin: 50px auto;
background-color: #fff;
border-radius: 16px;
......@@ -179,11 +177,13 @@ export default {
margin-bottom: 30px;
.text {
font-weight: bold;
font-size: 26px;
font-size: 24px;
color: #666;
}
.close {
font-size: 48px;
font-size: 34px;
cursor: pointer;
color: #ccc;
}
}
.login-box {
......@@ -200,15 +200,17 @@ export default {
}
}
.dialog-footer {
display: flex;
justify-content: center;
::v-deep .el-input__inner{
background:#e8f0fe ;
border: none;
}
.login-button,
.el-button {
width: 100%;
background-color: #2069c4;
color: #fff;
font-size: 22px;
.captcha{
display: flex;
justify-content: flex-end;
img{
margin-top: 2px;
height: 40px;
}
}
</style>
src/views/personal/components/Collection.vue
浏览文件 @ 2f08d0cb
......@@ -7,17 +7,18 @@
:label="tab.title"
:name="tab.name"
>
<el-row :gutter="20" v-if="list.records.length > 0">
<el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImagePressUrl || item.faceImageUrl"
/></el-col>
</el-row>
<div v-else>
<el-empty description="描述文字"></el-empty>
</div>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
</el-tab-pane>
</el-tabs>
<div class="pagination">
<div class="pagination" v-if="list.records.length>0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
......
src/views/personal/components/Footprint.vue
浏览文件 @ 2f08d0cb
......@@ -9,12 +9,18 @@
>
<el-row :gutter="20">
<el-col :span="8" v-for="(item, index) in list.records" :key="index">
<Card :title="item.title" :url="item.faceImagePressUrl || item.faceImageUrl"
<Card
:title="item.title"
:url="item.faceImagePressUrl || item.faceImageUrl"
/></el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
</el-tab-pane>
</el-tabs>
<div class="pagination">
<div class="pagination" v-if="list.records.length>0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
......@@ -144,7 +150,7 @@ export default {
}
}
}
.pagination{
.pagination {
margin: 20px;
}
</style>
\ No newline at end of file
src/views/personal/components/Info.vue
浏览文件 @ 2f08d0cb
<template>
<div class="personal-info">
<el-form ref="form" label-width="80px">
<el-form-item label="账号" v-if="userInfo && userInfo.name">
{{ userInfo.username }}
</el-form-item>
<el-form-item label="手机号" v-if="userInfo && userInfo.phone">
{{ userInfo.phone }}</el-form-item
>
<!-- <el-form-item>
<el-button @click="editInfo">修改个人信息</el-button>
<el-button @click="editPassword">修改密码</el-button>
</el-form-item> -->
</el-form>
<el-descriptions class="margin-top" title="个人信息" :column="3" border>
<template slot="extra">
<div v-if="!isEditing">
<el-button
type="primary"
size="small"
@click.native="handleEdit('userInfo')"
>编辑个人信息</el-button
>
<el-button
type="primary"
size="small"
@click.native="handleEdit('pwd')"
>修改密码</el-button
>
</div>
<div v-else>
<el-button type="primary" size="small" @click.native="handleReSet"
>取消修改</el-button
>
<el-button
type="primary"
size="small"
@click.native="handleSubmit('userInfo')"
>保存</el-button
>
</div>
</template>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-user"></i>
用户名
</template>
<el-input
v-if="isEditing"
v-model="userInfoForm.username"
size="small"
></el-input>
<span v-else> {{ userInfo.username }}</span>
</el-descriptions-item>
<el-descriptions-item>
<template slot="label">
<i class="el-icon-mobile-phone"></i>
手机号
</template>
<el-input
size="small"
v-if="isEditing"
v-model="userInfoForm.phone"
></el-input>
<span v-else> {{ userInfo.phone }}</span>
</el-descriptions-item>
</el-descriptions>
<el-dialog
title="修改个人信息"
title="修改密码"
:visible.sync="dialogFormVisible"
width="400px"
:modal="false"
>
<el-form
:model="infoData"
v-if="isEditBasicInfo"
label-position="right"
label-width="80px"
>
<el-form-item label="昵称">
<el-input v-model="infoData.name" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="邮箱">
<el-input v-model="infoData.email" autocomplete="off"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input v-model="infoData.phone" autocomplete="off"></el-input>
</el-form-item>
</el-form>
<el-form
:model="pwdData"
v-else
label-position="right"
label-width="80px"
>
<!-- <el-form :model="pwdData" label-position="right" label-width="80px">
<el-form-item label="旧密码">
<el-input v-model="pwdData.oldPwd" type="password"></el-input>
</el-form-item>
......@@ -55,7 +75,7 @@
<el-button type="primary" @click="dialogFormVisible = false"
>确 定</el-button
>
</div>
</div> -->
</el-dialog>
</div>
</template>
......@@ -67,23 +87,50 @@ export default {
data() {
return {
dialogFormVisible: false,
infoData: {
name: "",
email: "",
phone: "",
},
pwdData: {
oldPwd: "",
newPwd: "",
repeatPwd: "",
},
isEditBasicInfo: true,
isEditing: false,
userInfoForm: {},
};
},
computed: {
...mapGetters(["userInfo"]),
},
mounted() {
this.userInfoForm = JSON.parse(JSON.stringify(this.userInfo));
},
methods: {
handleEdit(type) {
switch (type) {
case "userInfo":
this.isEditing = true;
break;
case "pwd":
if (this.isEditing) {
this.isEditing = false;
}
break;
}
},
handleSubmit(type) {
switch (type) {
case "userInfo":
console.log(this.userInfoForm);
break;
case "pwd":
break;
}
},
handleReSet() {
this.isEditing = false;
},
editInfo() {
this.dialogFormVisible = true;
this.isEditBasicInfo = true;
......@@ -96,7 +143,14 @@ export default {
};
</script>
<style lang="scss" scoped>
.el-input {
width: 80%;
::v-deep .el-tabs__header.is-left {
margin-right: 50px;
}
::v-deep .el-descriptions__extra {
.el-button {
background-color: #2069c4;
border-radius: 0;
border: none;
}
}
</style>
\ No newline at end of file
src/views/personal/components/Like.vue
浏览文件 @ 2f08d0cb
......@@ -14,12 +14,18 @@
:key="index"
@click.native="handleClick(item)"
>
<Card :title="item.title" :url="item.faceImagePressUrl || item.faceImageUrl"
<Card
:title="item.title"
:url="item.faceImagePressUrl || item.faceImageUrl"
/></el-col>
</el-row>
<el-empty
description="暂无数据"
v-if="list.records.length == 0"
></el-empty>
</el-tab-pane>
</el-tabs>
<div class="pagination">
<div class="pagination" v-if="list.records.length>0">
<el-pagination
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
......@@ -169,7 +175,7 @@ export default {
}
}
}
.pagination{
.pagination {
margin: 20px;
}
</style>
\ No newline at end of file
src/views/personal/index.vue
浏览文件 @ 2f08d0cb
......@@ -60,12 +60,18 @@ export default {
$blue: #2069c4;
.personal {
// width: 1200px;
margin: auto;
display: flex;
justify-content: center;
background-color: #fff;
.content-wrapper {
background-color: #fff;
align-items: flex-start;
display: flex;
justify-content: center;
align-items: center;
padding: 60px 0;
width: 1200px;
.main {
padding: 40px;
width: 100%;
}
}
}
......@@ -102,20 +108,7 @@ $blue: #2069c4;
color: #2069c4;
}
}
// ::v-deep{
// .el-tabs__nav.is-top{
// display: flex;
// }
// }
// ::v-deep{
// .el-tabs__item.is-top.is-active{
// width: 100px;
// display: flex;
// justify-content: center;
// }
// .el-tabs__active-bar.is-top{
// width: 100px !important;
// }
// }
::v-deep .el-descriptions{
margin-left: 30px;
}
</style>
\ No newline at end of file
src/views/register/index.vue
浏览文件 @ 2f08d0cb
<template>
<div class="register">
<el-form
:model="form"
status-icon
:rules="rules"
ref="registerForm"
label-width="100px"
class="register-form"
>
<el-form-item label="手机号" prop="phoneNumber">
<el-input v-model="form.phoneNumber" autocomplete="off"></el-input>
<!-- <el-button style="margin-left:16px">发送验证码</el-button> -->
</el-form-item>
<el-form-item label="验证码" prop="captcha">
<el-input
v-model="form.captcha"
autocomplete="off"
style="width: 46%; margin-right: 8px"
clearable
></el-input>
<el-button :disabled="isDisabled" @click.native="handleSend">{{
sendButtonText
}}</el-button>
</el-form-item>
<el-form-item label="账号" prop="account">
<el-input v-model="form.account" autocomplete="off"></el-input>
</el-form-item>
<!-- <el-form-item label="手机号" prop="pass">
<el-input v-model="ruleForm.account" autocomplete="off"></el-input>
<el-button>发送验证码</el-button>
</el-form-item> -->
<el-form-item label="密码" prop="pass">
<el-input
type="password"
v-model="form.pass"
autocomplete="off"
></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input
type="password"
v-model="form.checkPass"
autocomplete="off"
></el-input>
</el-form-item>
<div class="wrapper">
<div class="register">
<div class="title">
<div class="text">账号注册</div>
<div class="close" @click="handleCloseLogin">×</div>
</div>
<el-form
:model="form"
status-icon
:rules="rules"
ref="registerForm"
label-width="80px"
class="register-form"
>
<el-form-item label="账号" prop="username">
<el-input
v-model="form.username"
autocomplete="off"
clearable
placeholder="账号长度6-20个字符，只能包括字母、数字、下划线"
></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-input
v-model="form.phone"
autocomplete="off"
clearable
></el-input>
</el-form-item>
<el-form-item label="昵称" prop="nickName">
<el-input
v-model="form.nickName"
autocomplete="off"
clearable
placeholder="昵称长度8~10个字符"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input
type="password"
v-model="form.password"
autocomplete="off"
clearable
placeholder="至少8位，至少含数字、大写字母、小写字母、特殊符其中三种"
></el-input>
</el-form-item>
<el-form-item label="确认密码" prop="checkPass">
<el-input
type="password"
v-model="form.checkPass"
autocomplete="off"
clearable
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('registerForm')"
>提交</el-button
>
<el-button @click="resetForm('registerForm')">重置</el-button>
</el-form-item>
</el-form>
<el-form-item class="submit-buttons">
<el-button @click="resetForm('registerForm')">重置</el-button>
<el-button
:loading="loading"
type="primary"
@click="submitForm('registerForm')"
class="submit"
>提交</el-button
>
</el-form-item>
</el-form>
</div>
</div>
</template>
<script>
import { register } from "@/api/user";
export default {
data() {
var validatePass = (rule, value, callback) => {
......@@ -76,27 +91,38 @@ export default {
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.form.pass) {
} else if (value !== this.form.password) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
var validateNickName = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入昵称"));
} else {
var pattern = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5]{6,10}/g;
if (!pattern.test(value)) {
callback(new Error("密码长度6~10位，只能包含中文、英文及数字"));
}
}
};
return {
form: {
account: "",
pass: "",
username: "",
password: "",
checkPass: "",
captcha: "",
nickName: "",
},
isDisabled: true,
sendButtonText: "发送验证码",
second: 60,
rules: {
account: [
username: [
{ message: "请输入账号", trigger: "blur", required: true },
{
pattern: /^[0-9a-zA-Z|_]{6,20}$/g,
......@@ -104,7 +130,7 @@ export default {
trigger: "blur",
},
],
phoneNumber: [
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
{
pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
......@@ -112,19 +138,20 @@ export default {
trigger: "blur",
},
],
captcha: [{ message: "请输入验证码", required: true }],
pass: [{ validator: validatePass, trigger: "blur", required: true }],
password: [
{ validator: validatePass, trigger: "blur", required: true },
],
checkPass: [
{ validator: validatePass2, trigger: "blur", required: true },
],
},
loading: false,
};
},
watch: {
"form.phoneNumber": {
"form.phone": {
handler: function (value) {
this.$refs["registerForm"].validateField("phoneNumber", (errorMessage) => {
this.$refs["registerForm"].validateField("phone", (errorMessage) => {
let valid = errorMessage == "";
if (valid) {
this.isDisabled = false;
......@@ -137,26 +164,32 @@ export default {
},
},
methods: {
// 点击发送验证码
handleSend() {
this.isDisabled = true;
this.second = 60;
var timer = setInterval(() => {
if (this.second < 1) {
this.isDisabled = false;
clearInterval(timer);
timer = null;
this.sendButtonText = "发送验证码";
} else {
this.second--;
this.sendButtonText = `${this.second}秒后重新发送`;
}
}, 1 * 1000);
},
submitForm(formName) {
this.$refs[formName].validate((valid) => {
this.$refs[formName].validate(async (valid) => {
if (valid) {
alert("submit!");
this.loading = true;
const { username, password, phone } = this.form;
let params = {
username,
password,
phone,
status: 1,
};
let res = await register(params);
if (res.code == "0") {
this.$confirm("注册成功, 是否去登录?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "success",
})
.then(() => {
this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
})
.catch(() => {
console.log("取消操作");
});
}
this.loading = false;
} else {
console.log("error submit!!");
return false;
......@@ -166,16 +199,74 @@ export default {
resetForm(formName) {
this.$refs[formName].resetFields();
},
handleCloseLogin() {
if (window.history.length <= 1) {
this.$router.push({ path: "/" });
return false;
} else {
this.$router.go(-1);
}
},
},
};
</script>
<style lang="scss" scoped>
.register {
width: 1200px;
margin: 50px auto;
.register-form {
width: 500px;
margin: auto;
.wrapper {
width: 100%;
background-image: url("@/assets/imgs/home/display-bg.png");
background-repeat: no-repeat;
background-size: 100%;
background-position: center;
padding: 60px 0 100px;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
flex-direction: column;
.register {
width: 580px;
background-color: #fff;
border-radius: 16px;
padding: 48px 32px;
box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
.title {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
.text {
font-weight: bold;
font-size: 24px;
color: #666;
}
.close {
font-size: 34px;
cursor: pointer;
color: #ccc;
}
}
}
}
::v-deep .el-input__inner {
background: #e8f0fe;
border: none;
}
::v-deep .submit-buttons {
.el-form-item__content {
display: flex;
justify-content: flex-end;
.el-button {
border-radius: 8px;
&:last-child {
width: 160px;
background-color: #2069c4;
&:hover {
filter: brightness(0.9);
}
}
}
}
}
</style>
\ No newline at end of file
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论