Skip to content

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

修改密码

上级 2f08d0cb
全部展开 隐藏空白字符变更
内嵌 并排
正在显示 包含 606 行增加 和 272 行删除
src/api/user.js
浏览文件 @ 986d8eef
...@@ -26,6 +26,43 @@ export function register(data) { ...@@ -26,6 +26,43 @@ export function register(data) {
}) })
} }
// 修改用户信息
export function editUserInfo(data) {
return request({
url: '/sys/user/info',
method: 'put',
data
})
}
// 修改密码
export function editUserPwd(data) {
return request({
url: '/sys/user/pwd',
method: 'put',
data
})
}
// 注册时验证账号是否唯一
export function checkUserName(data) {
return request({
url: '/sys/user/checkAccount',
method: 'post',
data
})
}
// 注册时验证手机号是否唯一
export function checkPhone(data) {
return request({
url: '/sys/user/checkPhone',
method: 'post',
data
})
}
export function updateUserInfo(data) { export function updateUserInfo(data) {
return request({ return request({
url: '/sys/user', url: '/sys/user',
......
src/components/NavBar/index.vue
浏览文件 @ 986d8eef
...@@ -32,48 +32,20 @@ ...@@ -32,48 +32,20 @@
</el-button> </el-button>
<el-dropdown-menu slot="dropdown"> <el-dropdown-menu slot="dropdown">
<el-dropdown-item <el-dropdown-item
><span v-if="!hasToken"
v-if="!hasToken" @click.native="handleToLogin"
@click="handleToLogin" class="operation-item"
class="operation-item" >登陆
>登陆</span </el-dropdown-item>
></el-dropdown-item
>
<el-dropdown-item <el-dropdown-item
><router-link v-if="hasToken"
v-if="hasToken" class="operation-item"
to="/personal" @click.native="handleToPersonal"
class="operation-item" >
>个人中心</router-link 个人中心</el-dropdown-item
></el-dropdown-item
> >
<el-dropdown-item> <el-dropdown-item v-if="hasToken" @click.native="handleLogOut">
<span v-if="hasToken" @click="handleLogOut">退出</span> <span>退出</span>
<!-- <span class="logout" v-if="hasToken">
<el-popover
placement="bottom"
width="200"
trigger="click"
v-model="logoutDialogVisible"
>
<p>确定退出吗？</p>
<div style="text-align: right; margin: 0">
<el-button
size="mini"
type="text"
@click="logoutDialogVisible = false"
>取消</el-button
>
<el-button
type="primary"
size="mini"
>确定</el-button
>
</div>
</el-popover> -->
<!-- </span> -->
</el-dropdown-item> </el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</el-dropdown> </el-dropdown>
...@@ -81,19 +53,35 @@ ...@@ -81,19 +53,35 @@
</div> </div>
</div> </div>
</div> </div>
<el-dialog :visible.sync="loginVisible" append-to-body title="账号登陆"> <el-dialog :visible.sync="loginVisible" append-to-body>
<div slot="title" class="login-title">
<div
:class="['title-item', isLoginByUsername ? 'active' : '']"
@click="handleChangeLoginWay('username')"
>
账号登录
</div>
<div
:class="['title-item', isLoginByUsername ? '' : 'active']"
@click="handleChangeLoginWay('phone')"
>
手机号登录
</div>
<div class="line"></div>
</div>
<div class="login"> <div class="login">
<el-form <el-form
:model="loginForm" :model="loginForm"
:label-position="labelPosition" :label-position="labelPosition"
ref="loginForm" ref="loginForm"
:rules="loginRules"
> >
<el-form-item :label-width="formLabelWidth" prop="username"> <el-form-item :label-width="formLabelWidth" prop="account">
<el-input <el-input
v-model="loginForm.username" v-model="loginForm.account"
autocomplete="off" autocomplete="off"
clearable clearable
placeholder="用户名/手机号" :placeholder="isLoginByUsername ? '账号' : '手机号'"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item :label-width="formLabelWidth" prop="password"> <el-form-item :label-width="formLabelWidth" prop="password">
...@@ -205,8 +193,30 @@ export default { ...@@ -205,8 +193,30 @@ export default {
showLoginDialog(value) { showLoginDialog(value) {
this.loginVisible = value; this.loginVisible = value;
}, },
loginVisible(value) {
if (value) {
this.handleGetCaptcha();
}
},
}, },
data() { data() {
var validateAccout = (rule, value, callback) => {
if (value === "") {
let text = this.isLoginByUsername ? "账号" : "手机号";
callback(new Error("请输入" + text));
} else {
if (!this.isLoginByUsername) {
var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
if (!pattern.test(value)) {
callback(new Error("请输入合法手机号/电话号"));
} else {
callback();
}
} else {
callback();
}
}
};
return { return {
pages: [ pages: [
{ {
...@@ -234,8 +244,6 @@ export default { ...@@ -234,8 +244,6 @@ export default {
path: "/museum", path: "/museum",
}, },
], ],
userName: "",
logoutDialogVisible: false,
currentTab: { currentTab: {
name: "首页", name: "首页",
path: "/", path: "/",
...@@ -245,7 +253,7 @@ export default { ...@@ -245,7 +253,7 @@ export default {
offsetTop: 0, offsetTop: 0,
loginVisible: false, loginVisible: false,
loginForm: { loginForm: {
username: "", account: "",
password: "", password: "",
captcha: "", captcha: "",
}, },
...@@ -255,17 +263,15 @@ export default { ...@@ -255,17 +263,15 @@ export default {
labelPosition: "right", labelPosition: "right",
loading: false, loading: false,
loginRules: { loginRules: {
username: [ account: [
{ required: true, trigger: "blur", message: "请输入用户名" }, { validator: validateAccout, required: true, trigger: "blur" },
], ],
password: [{ required: true, trigger: "blur", message: "请输入密码" }], password: [{ required: true, trigger: "blur", message: "请输入密码" }],
captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }], captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }],
}, },
isLoginByUsername: true,
}; };
}, },
created() {
this.handleGetCaptcha();
},
mounted() { mounted() {
window.addEventListener("scroll", this.initHeight); window.addEventListener("scroll", this.initHeight);
this.$nextTick(() => { this.$nextTick(() => {
...@@ -290,13 +296,27 @@ export default { ...@@ -290,13 +296,27 @@ export default {
this.loginVisible = true; this.loginVisible = true;
}, },
handleToPersonal() {
this.$router.push("/personal");
},
async handleLogOut() { async handleLogOut() {
await this.$store.dispatch("user/logout"); this.$confirm("是否确定退出?", "提示", {
this.logoutDialogVisible = false; confirmButtonText: "确定",
let path = this.$route.fullPath; cancelButtonText: "取消",
if (path.indexOf("/personal") != -1) { type: "warning",
this.$router.push("/"); })
} .then(async () => {
await this.$store.dispatch("user/logout");
let path = this.$route.fullPath;
if (path.indexOf("/personal") != -1) {
this.$router.push("/");
}
this.$message.success("已成功退出！");
})
.catch((err) => {
console.log();
});
}, },
handleClickTab(tab) { handleClickTab(tab) {
...@@ -306,15 +326,33 @@ export default { ...@@ -306,15 +326,33 @@ export default {
handleLoginSubmit() { handleLoginSubmit() {
this.$refs.loginForm.validate((valid) => { this.$refs.loginForm.validate((valid) => {
if (valid) { if (valid) {
// debugger
this.loading = true; this.loading = true;
const { account, password, captcha } = this.loginForm;
const params = {
captcha,
password,
};
if (this.isLoginByUsername) {
params.username = account;
} else {
params.phone = account;
}
this.$store this.$store
.dispatch("user/login", this.loginForm) .dispatch("user/login", params)
.then(() => { .then((res) => {
this.$router.push({ path: this.$route.query.redirect || "/" }); if (res.code == "0") {
this.handleCloseLogin();
if (this.$route.name !== "home") {
this.$router.push({
path: this.$route.query.redirect || "/",
});
}
}
this.loading = false; this.loading = false;
this.handleCloseLogin();
}) })
.catch(() => { .catch((err) => {
console.log(err);
this.loading = false; this.loading = false;
}); });
} else { } else {
...@@ -341,6 +379,16 @@ export default { ...@@ -341,6 +379,16 @@ export default {
this.requestCodeSuccess = false; this.requestCodeSuccess = false;
}); });
}, },
handleChangeLoginWay(type) {
this.isLoginByUsername = type === "username";
let line = document.getElementsByClassName("line")[0];
if (this.isLoginByUsername) {
line.style.left = "24px";
} else {
line.style.left = "136px";
}
},
}, },
destroyed() { destroyed() {
...@@ -535,7 +583,7 @@ export default { ...@@ -535,7 +583,7 @@ export default {
::v-deep .loginBtn { ::v-deep .loginBtn {
padding: 16px !important; padding: 16px !important;
border-radius: 26px !important; border-radius: 0 !important;
width: 100%; width: 100%;
background-color: #2069c4; background-color: #2069c4;
color: #fff; color: #fff;
...@@ -545,7 +593,7 @@ export default { ...@@ -545,7 +593,7 @@ export default {
background-color: #2069c4; background-color: #2069c4;
color: #fff; color: #fff;
border: none; border: none;
border-radius: 26px !important; border-radius: 0 !important;
padding: 16px !important; padding: 16px !important;
width: 100%; width: 100%;
font-size: 14px; font-size: 14px;
...@@ -553,7 +601,7 @@ export default { ...@@ -553,7 +601,7 @@ export default {
} }
::v-deep .el-dialog { ::v-deep .el-dialog {
width: 380px; width: 380px;
border-radius: 16px; border-radius: 0;
.el-dialog__body { .el-dialog__body {
padding: 20px 30px 60px !important; padding: 20px 30px 60px !important;
} }
...@@ -575,4 +623,31 @@ export default { ...@@ -575,4 +623,31 @@ export default {
font-size: 24px; font-size: 24px;
right: 30px; right: 30px;
} }
.login-title {
display: flex;
position: relative;
.title-item {
margin-right: 40px;
cursor: pointer;
position: relative;
&:hover {
color: #2069c4;
}
}
.active {
color: #2069c4;
}
.line {
width: 18px;
height: 4px;
background-color: #2069c4;
// border-radius: 4px;
position: absolute;
left: 24px;
bottom: -14px;
transition: all 0.3s ease;
}
}
</style> </style>
src/store/modules/user.js
浏览文件 @ 986d8eef
...@@ -41,9 +41,6 @@ const mutations = { ...@@ -41,9 +41,6 @@ const mutations = {
SET_USERINFO: (state, userInfo) => { SET_USERINFO: (state, userInfo) => {
state.userInfo = userInfo state.userInfo = userInfo
}, },
// SET_DEPTLIST:(state,deptList)=>{
// state.deptList = deptList
// }
} }
const actions = { const actions = {
...@@ -51,17 +48,8 @@ const actions = { ...@@ -51,17 +48,8 @@ const actions = {
login({ login({
commit commit
}, userInfo) { }, userInfo) {
const {
username,
password,
captcha
} = userInfo
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
login({ login(userInfo).then(response => {
username: username.trim(),
password: password,
captcha: captcha
}).then(response => {
const { const {
data data
} = response } = response
...@@ -71,7 +59,7 @@ const actions = { ...@@ -71,7 +59,7 @@ const actions = {
setToken(data.accessToken) setToken(data.accessToken)
setUserInfo(data) setUserInfo(data)
// window.location.reload() // window.location.reload()
resolve() resolve(response)
// window.location.reload() // window.location.reload()
}).catch(error => { }).catch(error => {
reject(error) reject(error)
......
src/utils/validate.js 0 → 100644
浏览文件 @ 986d8eef
import axios from 'axios'
var validatePhoneUrl = process.env.VUE_APP_BASE_API + "/sys/user/checkPhone"
var validateUserNameUrl = process.env.VUE_APP_BASE_API + "/sys/user/checkAccount"
/**
* 验证电话是否重复
* @param data
* @returns {Promise}
*/
export function checkPhone(data) {
return new Promise((resolve, reject) => {
axios.post(validatePhoneUrl, data).then(response => {
resolve(response.data)
}).catch(error => {
reject(error)
})
})
}
/**
* 验证用户名是否重复
* @param data
* @returns {Promise}
*/
export function checkUserName(data) {
return new Promise((resolve, reject) => {
axios.post(validateUserNameUrl, data, {
headers: {
'Content-Type': 'multipart/form-data;boundary = ' + new Date().getTime(),
}
}).then(response => {
resolve(response.data)
}).catch(error => {
reject(error)
})
})
}
\ No newline at end of file
src/views/display/detail/ChStyle.vue
浏览文件 @ 986d8eef
<template> <template>
<div class="display-detail"> <div class="display-detail">
<div class="content" id="content"> <div class="content" id="content">
<div class="content-item sliders" ref="imgs"> <div
class="content-item sliders"
ref="imgs"
v-if="displayDetail.imagesVo && displayDetail.imagesVo.length > 0"
>
<div class="view-box"> <div class="view-box">
<div <div
class="slide-group" class="slide-group"
...@@ -78,7 +82,14 @@ ...@@ -78,7 +82,14 @@
<div class="divider"></div> <div class="divider"></div>
<div class="intro-and-video"> <div class="intro-and-video">
<el-row :gutter="70"> <el-row :gutter="70">
<el-col class="intro-container" :span="12"> <el-col
class="intro-container"
:span="
displayDetail.videosVo && displayDetail.videosVo.length > 0
? 12
: 24
"
>
<div class="intro-title">展览简介</div> <div class="intro-title">展览简介</div>
<div class="intro-content"> <div class="intro-content">
{{ displayDetail.intro }} {{ displayDetail.intro }}
...@@ -102,13 +113,17 @@ ...@@ -102,13 +113,17 @@
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
<div class="audio wow animate__animated animate__fadeRight" @click="handleClickAudio" > <div
class="audio"
:style="{ animationPlayState: audioPlaying ? 'running' : 'paused' }"
@click="handleClickAudio"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
>
<img src="@/assets/imgs/display/audio.png" alt="" /> <img src="@/assets/imgs/display/audio.png" alt="" />
<AudioPlayer <AudioPlayer
style="display: none" style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)" :url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer" ref="AudioPlayer"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
/> />
</div> </div>
</div> </div>
...@@ -151,7 +166,7 @@ ...@@ -151,7 +166,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="content-item lts wow animate__animated animate__fadeInUp"> <div class="content-item lts">
<div class="wrapper"> <div class="wrapper">
<div class="custom-title"> <div class="custom-title">
<div class="custom-title-prefix"> <div class="custom-title-prefix">
...@@ -163,6 +178,7 @@ ...@@ -163,6 +178,7 @@
</div> </div>
</div> </div>
</div> </div>
<div <div
class="lts-content" class="lts-content"
v-if=" v-if="
...@@ -271,6 +287,13 @@ export default { ...@@ -271,6 +287,13 @@ export default {
]); ]);
this.loadDetail(); this.loadDetail();
}, },
destroyed() {
//同时在destroyed回调中移除监听：
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
removeEventListener("DOMMouseScroll", firefoxListenFun);
}
},
methods: { methods: {
async loadDetail() { async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId; let exhibitionId = this.$route.params.exhibitionId;
...@@ -299,19 +322,30 @@ export default { ...@@ -299,19 +322,30 @@ export default {
} }
this.$nextTick(() => { this.$nextTick(() => {
this.loadWidth(); this.loadWidth();
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play(); if (
this.displayDetail.videosVo &&
this.displayDetail.videosVo.length > 0
) {
this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
this.$refs.AudioPlayer.play();
}
}); });
} }
} }
}, },
loadWidth() { loadWidth() {
let slideImage = document.getElementsByClassName("slide-item")[0]; if (
this.slideImageWidth = slideImage.offsetWidth; this.displayDetail.imagesVo &&
this.sildeGroupWidth = this.displayDetail.imagesVo.length > 0
this.slideImageWidth * this.displayDetail.imagesVo.length; ) {
this.slideGroupleft = -3 * this.slideImageWidth; let slideImage = document.getElementsByClassName("slide-item")[0];
this.slideImageWidth = slideImage.offsetWidth;
this.sildeGroupWidth =
this.slideImageWidth * this.displayDetail.imagesVo.length;
this.slideGroupleft = -3 * this.slideImageWidth;
}
}, },
handleImgsSlide(e) { handleImgsSlide(e) {
...@@ -320,29 +354,6 @@ export default { ...@@ -320,29 +354,6 @@ export default {
}, },
addImgsEventListener(e) { addImgsEventListener(e) {
let firefoxListenFun = function (e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute("onmousewheel") || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == "BODY") break;
obj = obj.parentNode;
}
if (onmousewheel) {
if (e.preventDefault) e.preventDefault(); //禁止页面滚动
if (typeof obj.onmousewheel != "function") {
//将onmousewheel转换成function
eval("window._tmpFun = function(event){" + onmousewheel + "}");
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
}
// 不直接执行是因为若onmousewheel(e)运行时间较长的话，会导致锁定滚动失效，使用setTimeout可避免
setTimeout(function () {
obj.onmousewheel(e);
}, 1);
}
};
e = e || window.event; e = e || window.event;
if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) { if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
// IE // IE
...@@ -354,7 +365,30 @@ export default { ...@@ -354,7 +365,30 @@ export default {
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) { if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel //firefox支持onmousewheel
addEventListener("DOMMouseScroll", firefoxListenFun, false); addEventListener("DOMMouseScroll", this.firefoxListenFun, false);
}
},
firefoxListenFun(e) {
var obj = e.target;
var onmousewheel;
while (obj) {
onmousewheel = obj.getAttribute("onmousewheel") || obj.onmousewheel;
if (onmousewheel) break;
if (obj.tagName == "BODY") break;
obj = obj.parentNode;
}
if (onmousewheel) {
if (e.preventDefault) e.preventDefault(); //禁止页面滚动
if (typeof obj.onmousewheel != "function") {
//将onmousewheel转换成function
eval("window._tmpFun = function(event){" + onmousewheel + "}");
obj.onmousewheel = window._tmpFun;
window._tmpFun = null;
}
// 不直接执行是因为若onmousewheel(e)运行时间较长的话，会导致锁定滚动失效，使用setTimeout可避免
setTimeout(function () {
obj.onmousewheel(e);
}, 1);
} }
}, },
...@@ -419,6 +453,7 @@ export default { ...@@ -419,6 +453,7 @@ export default {
this.audioPlaying = !this.audioPlaying; this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) { if (this.audioPlaying) {
this.$refs["AudioPlayer"].play(); this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else { } else {
this.$refs["AudioPlayer"].pause(); this.$refs["AudioPlayer"].pause();
} }
...@@ -461,6 +496,7 @@ export default { ...@@ -461,6 +496,7 @@ export default {
overflow-x: hidden; overflow-x: hidden;
.content { .content {
width: 100%; width: 100%;
overflow-y: hidden;
.content-item { .content-item {
width: 100%; width: 100%;
} }
...@@ -468,7 +504,8 @@ export default { ...@@ -468,7 +504,8 @@ export default {
/**轮播图 */ /**轮播图 */
.sliders { .sliders {
height: 434px; height: 434px;
margin: 52px 0 84px 0; // margin: 52px 0 84px 0;
margin-top: 52px;
display: flex; display: flex;
justify-content: center; justify-content: center;
position: relative; position: relative;
...@@ -507,12 +544,13 @@ export default { ...@@ -507,12 +544,13 @@ export default {
width: 1200px; width: 1200px;
transform: translateY(-25px); transform: translateY(-25px);
position: relative; position: relative;
filter:drop-shadow(2px 4px 6px #f8f8f8); filter: drop-shadow(2px 4px 6px #f8f8f8);
img { img {
transform: translateX(-10px); transform: translateX(-10px);
} }
} }
.left-layer,.right-layer { .left-layer,
.right-layer {
flex: 1; flex: 1;
height: 100%; height: 100%;
background-color: rgba(#f8f8f8, 0.8); background-color: rgba(#f8f8f8, 0.8);
...@@ -522,7 +560,7 @@ export default { ...@@ -522,7 +560,7 @@ export default {
/**展览信息 */ /**展览信息 */
.intro { .intro {
margin-bottom: 96px; margin-top: 84px;
display: flex; display: flex;
justify-content: center; justify-content: center;
...@@ -622,11 +660,15 @@ export default { ...@@ -622,11 +660,15 @@ export default {
border: 1px solid #892325; border: 1px solid #892325;
border-radius: 50%; border-radius: 50%;
// padding: 10px; // padding: 10px;
width: 90px; width: 60px;
height: 90px; height: 60px;
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
img {
width: 28px;
height: 28px;
}
} }
} }
} }
...@@ -656,7 +698,7 @@ export default { ...@@ -656,7 +698,7 @@ export default {
/**展览单元 */ /**展览单元 */
.units { .units {
margin-bottom: 100px; margin-top: 94px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
...@@ -700,6 +742,7 @@ export default { ...@@ -700,6 +742,7 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
margin-top: 100px;
.lts-content { .lts-content {
display: flex; display: flex;
justify-content: center; justify-content: center;
......
src/views/display/detail/NormalStyle.vue 0 → 100644
浏览文件 @ 986d8eef
差异被折叠。
src/views/personal/components/Info.vue
浏览文件 @ 986d8eef
<template> <template>
<div class="personal-info"> <div class="personal-info">
<el-descriptions class="margin-top" title="个人信息" :column="3" border> <div class="name">个人信息</div>
<template slot="extra"> <div class="info-item">
<div v-if="!isEditing"> <div class="label">用户名</div>
<el-button <el-input
type="primary" size="small"
size="small" v-if="isEditing"
@click.native="handleEdit('userInfo')" v-model="userInfoForm.username"
>编辑个人信息</el-button style="width: 300px"
> ></el-input>
<el-button <div class="value" v-else>{{ userInfoForm.username || "暂未填写" }}</div>
type="primary" </div>
size="small" <div class="info-item">
@click.native="handleEdit('pwd')" <div class="label">昵称</div>
>修改密码</el-button <el-input
> size="small"
</div> v-if="isEditing"
<div v-else> v-model="userInfoForm.nickName"
<el-button type="primary" size="small" @click.native="handleReSet" style="width: 300px"
>取消修改</el-button ></el-input>
> <div class="value" v-else>{{ userInfoForm.nickName || "暂未填写" }}</div>
<el-button </div>
type="primary" <div class="info-item">
size="small" <div class="label">手机号</div>
@click.native="handleSubmit('userInfo')" <el-input
>保存</el-button size="small"
> v-if="isEditing"
</div> v-model="userInfoForm.phone"
</template> style="width: 300px"
<el-descriptions-item> ></el-input>
<template slot="label"> <div class="value" v-else>{{ userInfoForm.phone || "暂未填写" }}</div>
<i class="el-icon-user"></i> </div>
用户名 <div class="buttons">
</template> <div
<el-input class="edit-button"
v-if="isEditing" v-if="!isEditing"
v-model="userInfoForm.username" @click="handleEdit('userInfo')"
size="small" >
></el-input> 修改个人信息
<span v-else> {{ userInfo.username }}</span> </div>
</el-descriptions-item> <div class="edit-button" v-if="!isEditing" @click="handleEdit('pwd')">
<el-descriptions-item> 修改密码
<template slot="label"> </div>
<i class="el-icon-mobile-phone"></i> <div class="edit-button" v-if="isEditing" @click="handleReSet">
手机号 取消修改
</template> </div>
<el-input <div class="edit-button" v-if="isEditing" @click="handleSubmit">保存</div>
size="small" </div>
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="dialogFormVisible"
width="400px" width="400px"
:modal="false" append-to-body
@close="handleCloseChangePwd"
> >
<!-- <el-form :model="pwdData" label-position="right" label-width="80px"> <el-form
<el-form-item label="旧密码"> :model="pwdForm"
<el-input v-model="pwdData.oldPwd" type="password"></el-input> label-position="right"
label-width="80px"
:rules="pwdRules"
ref="pwdForm"
>
<el-form-item label="旧密码" prop="oldPwd">
<el-input v-model="pwdForm.oldPwd" type="password"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="新密码"> <el-form-item label="新密码" prop="newPwd">
<el-input v-model="pwdData.newPwd" type="password"></el-input> <el-input v-model="pwdForm.newPwd" type="password"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="重复密码"> <el-form-item label="重复密码" prop="checkPass">
<el-input v-model="pwdData.repeatPwd" type="password"></el-input> <el-input v-model="pwdForm.checkPass" type="password"></el-input>
</el-form-item> </el-form-item>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button> <el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false" <el-button type="primary" @click="handleChangePwd">确 定</el-button>
>确 定</el-button </div>
>
</div> -->
</el-dialog> </el-dialog>
</div> </div>
</template> </template>
<script> <script>
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import { editUserInfo, editUserPwd } from "@/api/user";
import { setUserInfo } from "@/utils/auth";
export default { export default {
name: "Info", name: "Info",
data() { data() {
var validatePass = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入新密码"));
} else {
var pattern =
/^(?![a-zA-Z]+$)(?![A-Z0-9]+$)(?![A-Z\\W_!@#$%^&*`~()-+=]+$)(?![a-z0-9]+$)(?![a-z\\W_!@#$%^&*`~()-+=]+$)(?![0-9\\W_!@#$%^&*`~()-+=]+$)[a-zA-Z0-9\\W_!@#$%^&*`~()-+=]{8,30}$/;
if (!pattern.test(value)) {
callback(
new Error(
"密码长度至少8位，至少含数字,大写字母,小写字母,特殊符其中三种"
)
);
}
if (this.pwdForm.checkPass !== "") {
this.$refs.pwdForm.validateField("checkPass");
}
callback();
}
};
var validatePass2 = (rule, value, callback) => {
if (value === "") {
callback(new Error("请再次输入密码"));
} else if (value !== this.pwdForm.newPwd) {
callback(new Error("两次输入密码不一致!"));
} else {
callback();
}
};
return { return {
dialogFormVisible: false, dialogFormVisible: false,
pwdData: { isEditBasicInfo: true,
isEditing: false,
userInfoForm: {},
pwdForm: {
oldPwd: "", oldPwd: "",
newPwd: "", newPwd: "",
repeatPwd: "", repeatPwd: "",
}, },
isEditBasicInfo: true, pwdRules: {
isEditing: false, oldPwd: [
userInfoForm: {}, { trigger: "blur", required: true, message: "请输入当前密码" },
],
newPwd: [{ validator: validatePass, trigger: "blur", required: true }],
checkPass: [
{ validator: validatePass2, trigger: "blur", required: true },
],
},
}; };
}, },
computed: { computed: {
...@@ -114,30 +153,45 @@ export default { ...@@ -114,30 +153,45 @@ export default {
if (this.isEditing) { if (this.isEditing) {
this.isEditing = false; this.isEditing = false;
} }
this.dialogFormVisible = true;
break; break;
} }
}, },
handleSubmit(type) { async handleSubmit(type) {
switch (type) { let res = await editUserInfo(this.userInfoForm);
case "userInfo": if (res.code == "0") {
console.log(this.userInfoForm); this.$message.success("修改成功！");
break; this.$store.commit("user/SET_USERINFO", this.userInfoForm);
case "pwd": setUserInfo(this.userInfoForm);
break;
} }
this.isEditing = false;
}, },
handleReSet() { handleReSet() {
this.isEditing = false; this.isEditing = false;
this.userInfoForm = this.userInfo;
}, },
editInfo() {
this.dialogFormVisible = true; async handleChangePwd() {
this.isEditBasicInfo = true; const { newPwd, oldPwd } = this.pwdForm;
const params = {
newPwd,
oldPwd,
};
let res = await editUserPwd(params);
if (res.code == "0") {
let path = this.$route.fullPath;
if (path.indexOf("/personal") != -1) {
this.$router.push("/");
}
this.$message.success("修改成功，请重新登录！");
this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
}
}, },
editPassword() {
this.dialogFormVisible = true; handleCloseChangePwd() {
this.isEditBasicInfo = false; this.dialogFormVisible = false;
}, },
}, },
}; };
...@@ -153,4 +207,42 @@ export default { ...@@ -153,4 +207,42 @@ export default {
border: none; border: none;
} }
} }
.personal-info {
margin-left: 40px;
.name {
margin-bottom: 40px;
font-weight: bold;
}
.info-item {
display: flex;
margin-bottom: 30px;
border-bottom: 1px solid #f3f5f6;
padding-bottom: 30px;
.label {
width: 100px;
color: #666;
}
.value {
color: #333;
}
}
.buttons {
display: flex;
.edit-button {
width: 160px;
height: 50px;
background-color: #2069c4;
display: flex;
justify-content: center;
align-items: center;
color: #fff;
margin-right: 10px;
cursor: pointer;
&:hover {
filter: brightness(0.9);
}
}
}
}
</style> </style>
\ No newline at end of file
src/views/personal/index.vue
浏览文件 @ 986d8eef
<template> <template>
<div class="personal"> <div class="personal">
<div class="content-wrapper"> <div class="content-wrapper">
<div class="title wow animate__animated animate__fadeInLeft">个人中心</div>
<div class="bottom-line wow animate__animated animate__fadeInLeft"></div>
<div class="main"> <div class="main">
<el-tabs :tab-position="'left'" type="card" class="wrapper"> <el-tabs :tab-position="'left'" type="card" class="wrapper">
<el-tab-pane label="我的点赞"> <el-tab-pane label="我的点赞">
...@@ -16,32 +18,24 @@ ...@@ -16,32 +18,24 @@
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
<!-- <Footer /> -->
</div> </div>
</template> </template>
<script> <script>
import { relateRelics, exhibitions } from "@/mock/mock";
import Like from "./components/Like.vue"; import Like from "./components/Like.vue";
import Collection from "./components/Collection.vue"; import Collection from "./components/Collection.vue";
import Footprint from "./components/Footprint.vue"; import Footprint from "./components/Footprint.vue";
import Info from "./components/Info.vue"; import Info from "./components/Info.vue";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default { export default {
components: { components: {
Like, Like,
Collection, Collection,
Footprint, Footprint,
Info, Info,
NavBar,
Footer,
}, },
name: "Personal", name: "Personal",
data() { data() {
return { return {
relateRelics: relateRelics,
exhibitions: exhibitions,
list: ["我的点赞", "我的收藏", "浏览记录", "个人信息"], list: ["我的点赞", "我的收藏", "浏览记录", "个人信息"],
}; };
}, },
...@@ -60,17 +54,29 @@ export default { ...@@ -60,17 +54,29 @@ export default {
$blue: #2069c4; $blue: #2069c4;
.personal { .personal {
// width: 1200px; // width: 1200px;
padding-bottom: 100px;
display: flex; display: flex;
justify-content: center; justify-content: center;
background-color: #fff; background-color: #fff;
.content-wrapper { .content-wrapper {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: flex-start;
padding: 60px 0; padding: 60px 0;
width: 1200px; width: 1200px;
.title {
font-family: KaiTi;
font-size: 44px;
margin-bottom: 16px;
}
.bottom-line {
width: 50px;
background-color: #b8b8b8;
height: 2px;
margin-bottom: 40px;
}
.main { .main {
padding: 40px;
width: 100%; width: 100%;
} }
} }
...@@ -108,7 +114,7 @@ $blue: #2069c4; ...@@ -108,7 +114,7 @@ $blue: #2069c4;
color: #2069c4; color: #2069c4;
} }
} }
::v-deep .el-descriptions{ ::v-deep .el-descriptions {
margin-left: 30px; margin-left: 30px;
} }
</style> </style>
\ No newline at end of file
src/views/register/index.vue
浏览文件 @ 986d8eef
...@@ -2,7 +2,17 @@ ...@@ -2,7 +2,17 @@
<div class="wrapper"> <div class="wrapper">
<div class="register"> <div class="register">
<div class="title"> <div class="title">
<div class="text">账号注册</div> <div class="text">
账号注册
<el-tooltip
class="item"
effect="dark"
content="提示：若您已经使用微信账号在小程序平台登陆过后，系统将自动为您注册账号，初始密码为您的手机号，请直接登录"
placement="top-start"
>
<i class="el-icon-question tips"></i>
</el-tooltip>
</div>
<div class="close" @click="handleCloseLogin">×</div> <div class="close" @click="handleCloseLogin">×</div>
</div> </div>
<el-form <el-form
...@@ -18,7 +28,7 @@ ...@@ -18,7 +28,7 @@
v-model="form.username" v-model="form.username"
autocomplete="off" autocomplete="off"
clearable clearable
placeholder="账号长度6-20个字符，只能包括字母、数字、下划线" placeholder="账号长度4-20个字符，只能包括字母、数字、下划线"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="手机号" prop="phone"> <el-form-item label="手机号" prop="phone">
...@@ -33,7 +43,7 @@ ...@@ -33,7 +43,7 @@
v-model="form.nickName" v-model="form.nickName"
autocomplete="off" autocomplete="off"
clearable clearable
placeholder="昵称长度8~10个字符" placeholder="2~10个字符，只能包含中英文、数字及下划线，不能以下划线开头或结尾"
></el-input> ></el-input>
</el-form-item> </el-form-item>
<el-form-item label="密码" prop="password"> <el-form-item label="密码" prop="password">
...@@ -55,11 +65,13 @@ ...@@ -55,11 +65,13 @@
</el-form-item> </el-form-item>
<el-form-item class="submit-buttons"> <el-form-item class="submit-buttons">
<el-button @click="resetForm('registerForm')">重置</el-button> <el-button @click.native="resetForm('registerForm')" v-if="!loading"
>重置</el-button
>
<el-button <el-button
:loading="loading" :loading="loading"
type="primary" type="primary"
@click="submitForm('registerForm')" @click.native="submitForm"
class="submit" class="submit"
>提交</el-button >提交</el-button
> >
...@@ -70,6 +82,8 @@ ...@@ -70,6 +82,8 @@
</template> </template>
<script> <script>
import { register } from "@/api/user"; import { register } from "@/api/user";
import { checkUserName, checkPhone } from "@/utils/validate";
export default { export default {
data() { data() {
var validatePass = (rule, value, callback) => { var validatePass = (rule, value, callback) => {
...@@ -101,13 +115,53 @@ export default { ...@@ -101,13 +115,53 @@ export default {
callback(); callback();
} }
}; };
var validateNickName = (rule, value, callback) => { var validateUserName = (rule, value, callback) => {
if (value === "") { if (value === "") {
callback(new Error("请输入昵称")); callback(new Error("请输入账号"));
} else { } else {
var pattern = /[^\a-\z\A-\Z0-9\u4E00-\u9FA5]{6,10}/g; var pattern = /^[0-9a-zA-Z|_]{4,20}$/g;
if (!pattern.test(value)) { if (!pattern.test(value)) {
callback(new Error("密码长度6~10位，只能包含中文、英文及数字")); callback(new Error("账号长度4-20个字符，只能包括字母、数字、下划线"));
} else {
const formData = new FormData();
formData.append("userName", value);
checkUserName(formData)
.then((res) => {
if (res.code == "0") {
callback();
} else {
callback(res.msg);
}
})
.catch((err) => {
console.error(err);
});
}
}
};
var validatePhone = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入手机号"));
} else {
var pattern = /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
if (!pattern.test(value)) {
callback(new Error("请输入合法手机号/电话号"));
} else {
const formData = new FormData();
formData.append("phone", value);
checkPhone(formData)
.then((res) => {
console.log(res);
if (res.code == "0") {
callback();
} else {
callback(res.msg);
}
})
.catch((err) => {
console.error(err);
});
} }
} }
}; };
...@@ -123,18 +177,15 @@ export default { ...@@ -123,18 +177,15 @@ export default {
second: 60, second: 60,
rules: { rules: {
username: [ username: [
{ message: "请输入账号", trigger: "blur", required: true }, { validator: validateUserName, trigger: "blur", required: true },
{
pattern: /^[0-9a-zA-Z|_]{6,20}$/g,
message: "账号长度6-20个字符，只能包括字母、数字、下划线",
trigger: "blur",
},
], ],
phone: [ phone: [{ validator: validatePhone, trigger: "blur", required: true }],
{ required: true, message: "请输入手机号", trigger: "blur" }, nickName: [
{ required: true, message: "请输入昵称", trigger: "blur" },
{ {
pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/, pattern: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
message: "请输入合法手机号/电话号", message:
"昵称长度2~10位，只能包含中文、英文大小写、数字及下划线，不能以下划线开头或结尾",
trigger: "blur", trigger: "blur",
}, },
], ],
...@@ -148,48 +199,42 @@ export default { ...@@ -148,48 +199,42 @@ export default {
loading: false, loading: false,
}; };
}, },
watch: {
"form.phone": {
handler: function (value) {
this.$refs["registerForm"].validateField("phone", (errorMessage) => {
let valid = errorMessage == "";
if (valid) {
this.isDisabled = false;
} else {
this.isDisabled = true;
}
});
},
deep: true,
},
},
methods: { methods: {
submitForm(formName) { submitForm() {
this.$refs[formName].validate(async (valid) => { // debugger
// console.log(123);
this.$refs["registerForm"].validate((valid) => {
// debugger
if (valid) { if (valid) {
this.loading = true; this.loading = true;
const { username, password, phone } = this.form; const { username, password, phone, nickName } = this.form;
let params = { let params = {
username, username,
password, password,
phone, phone,
nickName,
status: 1, status: 1,
}; };
let res = await register(params); register(params)
if (res.code == "0") { .then((res) => {
this.$confirm("注册成功, 是否去登录?", "提示", { if (res.code == "0") {
confirmButtonText: "确定", this.$confirm("注册成功, 是否去登录?", "提示", {
cancelButtonText: "取消", confirmButtonText: "确定",
type: "success", cancelButtonText: "取消",
type: "success",
})
.then(() => {
this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
})
.catch(() => {
console.log("取消操作");
});
}
this.loading = false;
}) })
.then(() => { .catch((err) => {
this.$store.commit("app/OPEN_LOGIN_DIALOG", true); this.loading = false;
}) });
.catch(() => {
console.log("取消操作");
});
}
this.loading = false;
} else { } else {
console.log("error submit!!"); console.log("error submit!!");
return false; return false;
...@@ -226,7 +271,7 @@ export default { ...@@ -226,7 +271,7 @@ export default {
.register { .register {
width: 580px; width: 580px;
background-color: #fff; background-color: #fff;
border-radius: 16px; // border-radius: 16px;
padding: 48px 32px; padding: 48px 32px;
box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%); box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
.title { .title {
...@@ -235,9 +280,13 @@ export default { ...@@ -235,9 +280,13 @@ export default {
align-items: center; align-items: center;
margin-bottom: 30px; margin-bottom: 30px;
.text { .text {
font-weight: bold; // font-weight: bold;
font-size: 24px; font-size: 36px;
color: #666; color: #666;
font-family: "KaiTi";
.tips {
font-size: 24px;
}
} }
.close { .close {
font-size: 34px; font-size: 34px;
...@@ -258,7 +307,7 @@ export default { ...@@ -258,7 +307,7 @@ export default {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
.el-button { .el-button {
border-radius: 8px; border-radius: 0px;
&:last-child { &:last-child {
width: 160px; width: 160px;
background-color: #2069c4; background-color: #2069c4;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论