Skip to content

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

注册、修改密码

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