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) {
})
}
// 修改用户信息
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) {
return request({
url: '/sys/user',
......
src/components/NavBar/index.vue
浏览文件 @ 986d8eef
......@@ -32,48 +32,20 @@
</el-button>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item
><span
v-if="!hasToken"
@click="handleToLogin"
class="operation-item"
>登陆</span
></el-dropdown-item
>
v-if="!hasToken"
@click.native="handleToLogin"
class="operation-item"
>登陆
</el-dropdown-item>
<el-dropdown-item
><router-link
v-if="hasToken"
to="/personal"
class="operation-item"
>个人中心</router-link
></el-dropdown-item
v-if="hasToken"
class="operation-item"
@click.native="handleToPersonal"
>
个人中心</el-dropdown-item
>
<el-dropdown-item>
<span v-if="hasToken" @click="handleLogOut">退出</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 v-if="hasToken" @click.native="handleLogOut">
<span>退出</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
......@@ -81,19 +53,35 @@
</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">
<el-form
:model="loginForm"
:label-position="labelPosition"
ref="loginForm"
:rules="loginRules"
>
<el-form-item :label-width="formLabelWidth" prop="username">
<el-form-item :label-width="formLabelWidth" prop="account">
<el-input
v-model="loginForm.username"
v-model="loginForm.account"
autocomplete="off"
clearable
placeholder="用户名/手机号"
:placeholder="isLoginByUsername ? '账号' : '手机号'"
></el-input>
</el-form-item>
<el-form-item :label-width="formLabelWidth" prop="password">
......@@ -205,8 +193,30 @@ export default {
showLoginDialog(value) {
this.loginVisible = value;
},
loginVisible(value) {
if (value) {
this.handleGetCaptcha();
}
},
},
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 {
pages: [
{
......@@ -234,8 +244,6 @@ export default {
path: "/museum",
},
],
userName: "",
logoutDialogVisible: false,
currentTab: {
name: "首页",
path: "/",
......@@ -245,7 +253,7 @@ export default {
offsetTop: 0,
loginVisible: false,
loginForm: {
username: "",
account: "",
password: "",
captcha: "",
},
......@@ -255,17 +263,15 @@ export default {
labelPosition: "right",
loading: false,
loginRules: {
username: [
{ required: true, trigger: "blur", message: "请输入用户名" },
account: [
{ validator: validateAccout, required: true, trigger: "blur" },
],
password: [{ required: true, trigger: "blur", message: "请输入密码" }],
captcha: [{ required: true, trigger: "blur", message: "请输入验证码" }],
},
isLoginByUsername: true,
};
},
created() {
this.handleGetCaptcha();
},
mounted() {
window.addEventListener("scroll", this.initHeight);
this.$nextTick(() => {
......@@ -290,13 +296,27 @@ export default {
this.loginVisible = true;
},
handleToPersonal() {
this.$router.push("/personal");
},
async handleLogOut() {
await this.$store.dispatch("user/logout");
this.logoutDialogVisible = false;
let path = this.$route.fullPath;
if (path.indexOf("/personal") != -1) {
this.$router.push("/");
}
this.$confirm("是否确定退出?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.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) {
......@@ -306,15 +326,33 @@ export default {
handleLoginSubmit() {
this.$refs.loginForm.validate((valid) => {
if (valid) {
// debugger
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
.dispatch("user/login", this.loginForm)
.then(() => {
this.$router.push({ path: this.$route.query.redirect || "/" });
.dispatch("user/login", params)
.then((res) => {
if (res.code == "0") {
this.handleCloseLogin();
if (this.$route.name !== "home") {
this.$router.push({
path: this.$route.query.redirect || "/",
});
}
}
this.loading = false;
this.handleCloseLogin();
})
.catch(() => {
.catch((err) => {
console.log(err);
this.loading = false;
});
} else {
......@@ -341,6 +379,16 @@ export default {
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() {
......@@ -535,7 +583,7 @@ export default {
::v-deep .loginBtn {
padding: 16px !important;
border-radius: 26px !important;
border-radius: 0 !important;
width: 100%;
background-color: #2069c4;
color: #fff;
......@@ -545,7 +593,7 @@ export default {
background-color: #2069c4;
color: #fff;
border: none;
border-radius: 26px !important;
border-radius: 0 !important;
padding: 16px !important;
width: 100%;
font-size: 14px;
......@@ -553,7 +601,7 @@ export default {
}
::v-deep .el-dialog {
width: 380px;
border-radius: 16px;
border-radius: 0;
.el-dialog__body {
padding: 20px 30px 60px !important;
}
......@@ -575,4 +623,31 @@ export default {
font-size: 24px;
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>
src/store/modules/user.js
浏览文件 @ 986d8eef
......@@ -41,9 +41,6 @@ const mutations = {
SET_USERINFO: (state, userInfo) => {
state.userInfo = userInfo
},
// SET_DEPTLIST:(state,deptList)=>{
// state.deptList = deptList
// }
}
const actions = {
......@@ -51,17 +48,8 @@ const actions = {
login({
commit
}, userInfo) {
const {
username,
password,
captcha
} = userInfo
return new Promise((resolve, reject) => {
login({
username: username.trim(),
password: password,
captcha: captcha
}).then(response => {
login(userInfo).then(response => {
const {
data
} = response
......@@ -71,7 +59,7 @@ const actions = {
setToken(data.accessToken)
setUserInfo(data)
// window.location.reload()
resolve()
resolve(response)
// window.location.reload()
}).catch(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>
<div class="display-detail">
<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="slide-group"
......@@ -78,7 +82,14 @@
<div class="divider"></div>
<div class="intro-and-video">
<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-content">
{{ displayDetail.intro }}
......@@ -102,13 +113,17 @@
</el-col>
</el-row>
</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="" />
<AudioPlayer
style="display: none"
:url="$getFullUrl(displayDetail.audiosVo[0].url)"
ref="AudioPlayer"
v-if="displayDetail.audiosVo && displayDetail.audiosVo.length > 0"
/>
</div>
</div>
......@@ -151,7 +166,7 @@
</div>
</div>
</div>
<div class="content-item lts wow animate__animated animate__fadeInUp">
<div class="content-item lts">
<div class="wrapper">
<div class="custom-title">
<div class="custom-title-prefix">
......@@ -163,6 +178,7 @@
</div>
</div>
</div>
<div
class="lts-content"
v-if="
......@@ -271,6 +287,13 @@ export default {
]);
this.loadDetail();
},
destroyed() {
//同时在destroyed回调中移除监听：
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//firefox支持onmousewheel
removeEventListener("DOMMouseScroll", firefoxListenFun);
}
},
methods: {
async loadDetail() {
let exhibitionId = this.$route.params.exhibitionId;
......@@ -299,19 +322,30 @@ export default {
}
this.$nextTick(() => {
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() {
let slideImage = document.getElementsByClassName("slide-item")[0];
this.slideImageWidth = slideImage.offsetWidth;
this.sildeGroupWidth =
this.slideImageWidth * this.displayDetail.imagesVo.length;
this.slideGroupleft = -3 * this.slideImageWidth;
if (
this.displayDetail.imagesVo &&
this.displayDetail.imagesVo.length > 0
) {
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) {
......@@ -320,29 +354,6 @@ export default {
},
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;
if (navigator.userAgent.toLowerCase().indexOf("msie") >= 0) {
// IE
......@@ -354,7 +365,30 @@ export default {
if (navigator.userAgent.toLowerCase().indexOf("firefox") >= 0) {
//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 {
this.audioPlaying = !this.audioPlaying;
if (this.audioPlaying) {
this.$refs["AudioPlayer"].play();
// console.log(this.$refs['audioContainer']);
} else {
this.$refs["AudioPlayer"].pause();
}
......@@ -461,6 +496,7 @@ export default {
overflow-x: hidden;
.content {
width: 100%;
overflow-y: hidden;
.content-item {
width: 100%;
}
......@@ -468,7 +504,8 @@ export default {
/**轮播图 */
.sliders {
height: 434px;
margin: 52px 0 84px 0;
// margin: 52px 0 84px 0;
margin-top: 52px;
display: flex;
justify-content: center;
position: relative;
......@@ -507,12 +544,13 @@ export default {
width: 1200px;
transform: translateY(-25px);
position: relative;
filter:drop-shadow(2px 4px 6px #f8f8f8);
filter: drop-shadow(2px 4px 6px #f8f8f8);
img {
transform: translateX(-10px);
}
}
.left-layer,.right-layer {
.left-layer,
.right-layer {
flex: 1;
height: 100%;
background-color: rgba(#f8f8f8, 0.8);
......@@ -522,7 +560,7 @@ export default {
/**展览信息 */
.intro {
margin-bottom: 96px;
margin-top: 84px;
display: flex;
justify-content: center;
......@@ -622,11 +660,15 @@ export default {
border: 1px solid #892325;
border-radius: 50%;
// padding: 10px;
width: 90px;
height: 90px;
width: 60px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
img {
width: 28px;
height: 28px;
}
}
}
}
......@@ -656,7 +698,7 @@ export default {
/**展览单元 */
.units {
margin-bottom: 100px;
margin-top: 94px;
display: flex;
flex-direction: column;
align-items: center;
......@@ -700,6 +742,7 @@ export default {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 100px;
.lts-content {
display: flex;
justify-content: center;
......
src/views/display/detail/NormalStyle.vue 0 → 100644
浏览文件 @ 986d8eef
差异被折叠。
src/views/personal/components/Info.vue
浏览文件 @ 986d8eef
<template>
<div class="personal-info">
<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>
<div class="name">个人信息</div>
<div class="info-item">
<div class="label">用户名</div>
<el-input
size="small"
v-if="isEditing"
v-model="userInfoForm.username"
style="width: 300px"
></el-input>
<div class="value" v-else>{{ userInfoForm.username || "暂未填写" }}</div>
</div>
<div class="info-item">
<div class="label">昵称</div>
<el-input
size="small"
v-if="isEditing"
v-model="userInfoForm.nickName"
style="width: 300px"
></el-input>
<div class="value" v-else>{{ userInfoForm.nickName || "暂未填写" }}</div>
</div>
<div class="info-item">
<div class="label">手机号</div>
<el-input
size="small"
v-if="isEditing"
v-model="userInfoForm.phone"
style="width: 300px"
></el-input>
<div class="value" v-else>{{ userInfoForm.phone || "暂未填写" }}</div>
</div>
<div class="buttons">
<div
class="edit-button"
v-if="!isEditing"
@click="handleEdit('userInfo')"
>
修改个人信息
</div>
<div class="edit-button" v-if="!isEditing" @click="handleEdit('pwd')">
修改密码
</div>
<div class="edit-button" v-if="isEditing" @click="handleReSet">
取消修改
</div>
<div class="edit-button" v-if="isEditing" @click="handleSubmit">保存</div>
</div>
<el-dialog
title="修改密码"
:visible.sync="dialogFormVisible"
:visible="dialogFormVisible"
width="400px"
:modal="false"
append-to-body
@close="handleCloseChangePwd"
>
<!-- <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
:model="pwdForm"
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 label="新密码">
<el-input v-model="pwdData.newPwd" type="password"></el-input>
<el-form-item label="新密码" prop="newPwd">
<el-input v-model="pwdForm.newPwd" type="password"></el-input>
</el-form-item>
<el-form-item label="重复密码">
<el-input v-model="pwdData.repeatPwd" type="password"></el-input>
<el-form-item label="重复密码" prop="checkPass">
<el-input v-model="pwdForm.checkPass" type="password"></el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="dialogFormVisible = false">取 消</el-button>
<el-button type="primary" @click="dialogFormVisible = false"
>确 定</el-button
>
</div> -->
<el-button type="primary" @click="handleChangePwd">确 定</el-button>
</div>
</el-dialog>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { editUserInfo, editUserPwd } from "@/api/user";
import { setUserInfo } from "@/utils/auth";
export default {
name: "Info",
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 {
dialogFormVisible: false,
pwdData: {
isEditBasicInfo: true,
isEditing: false,
userInfoForm: {},
pwdForm: {
oldPwd: "",
newPwd: "",
repeatPwd: "",
},
isEditBasicInfo: true,
isEditing: false,
userInfoForm: {},
pwdRules: {
oldPwd: [
{ trigger: "blur", required: true, message: "请输入当前密码" },
],
newPwd: [{ validator: validatePass, trigger: "blur", required: true }],
checkPass: [
{ validator: validatePass2, trigger: "blur", required: true },
],
},
};
},
computed: {
......@@ -114,30 +153,45 @@ export default {
if (this.isEditing) {
this.isEditing = false;
}
this.dialogFormVisible = true;
break;
}
},
handleSubmit(type) {
switch (type) {
case "userInfo":
console.log(this.userInfoForm);
break;
case "pwd":
break;
async handleSubmit(type) {
let res = await editUserInfo(this.userInfoForm);
if (res.code == "0") {
this.$message.success("修改成功！");
this.$store.commit("user/SET_USERINFO", this.userInfoForm);
setUserInfo(this.userInfoForm);
}
this.isEditing = false;
},
handleReSet() {
this.isEditing = false;
this.userInfoForm = this.userInfo;
},
editInfo() {
this.dialogFormVisible = true;
this.isEditBasicInfo = true;
async handleChangePwd() {
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;
this.isEditBasicInfo = false;
handleCloseChangePwd() {
this.dialogFormVisible = false;
},
},
};
......@@ -153,4 +207,42 @@ export default {
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>
\ No newline at end of file
src/views/personal/index.vue
浏览文件 @ 986d8eef
<template>
<div class="personal">
<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">
<el-tabs :tab-position="'left'" type="card" class="wrapper">
<el-tab-pane label="我的点赞">
......@@ -16,32 +18,24 @@
</el-tabs>
</div>
</div>
<!-- <Footer /> -->
</div>
</template>
<script>
import { relateRelics, exhibitions } from "@/mock/mock";
import Like from "./components/Like.vue";
import Collection from "./components/Collection.vue";
import Footprint from "./components/Footprint.vue";
import Info from "./components/Info.vue";
import NavBar from "@/components/NavBar";
import Footer from "@/components/Footer";
export default {
components: {
Like,
Collection,
Footprint,
Info,
NavBar,
Footer,
},
name: "Personal",
data() {
return {
relateRelics: relateRelics,
exhibitions: exhibitions,
list: ["我的点赞", "我的收藏", "浏览记录", "个人信息"],
};
},
......@@ -60,17 +54,29 @@ export default {
$blue: #2069c4;
.personal {
// width: 1200px;
padding-bottom: 100px;
display: flex;
justify-content: center;
background-color: #fff;
.content-wrapper {
display: flex;
justify-content: center;
align-items: center;
align-items: flex-start;
padding: 60px 0;
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 {
padding: 40px;
width: 100%;
}
}
......@@ -108,7 +114,7 @@ $blue: #2069c4;
color: #2069c4;
}
}
::v-deep .el-descriptions{
::v-deep .el-descriptions {
margin-left: 30px;
}
</style>
\ No newline at end of file
src/views/register/index.vue
浏览文件 @ 986d8eef
......@@ -2,7 +2,17 @@
<div class="wrapper">
<div class="register">
<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>
<el-form
......@@ -18,7 +28,7 @@
v-model="form.username"
autocomplete="off"
clearable
placeholder="账号长度6-20个字符，只能包括字母、数字、下划线"
placeholder="账号长度4-20个字符，只能包括字母、数字、下划线"
></el-input>
</el-form-item>
<el-form-item label="手机号" prop="phone">
......@@ -33,7 +43,7 @@
v-model="form.nickName"
autocomplete="off"
clearable
placeholder="昵称长度8~10个字符"
placeholder="2~10个字符，只能包含中英文、数字及下划线，不能以下划线开头或结尾"
></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
......@@ -55,11 +65,13 @@
</el-form-item>
<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
:loading="loading"
type="primary"
@click="submitForm('registerForm')"
@click.native="submitForm"
class="submit"
>提交</el-button
>
......@@ -70,6 +82,8 @@
</template>
<script>
import { register } from "@/api/user";
import { checkUserName, checkPhone } from "@/utils/validate";
export default {
data() {
var validatePass = (rule, value, callback) => {
......@@ -101,13 +115,53 @@ export default {
callback();
}
};
var validateNickName = (rule, value, callback) => {
var validateUserName = (rule, value, callback) => {
if (value === "") {
callback(new Error("请输入昵称"));
callback(new Error("请输入账号"));
} 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)) {
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 {
second: 60,
rules: {
username: [
{ message: "请输入账号", trigger: "blur", required: true },
{
pattern: /^[0-9a-zA-Z|_]{6,20}$/g,
message: "账号长度6-20个字符，只能包括字母、数字、下划线",
trigger: "blur",
},
{ validator: validateUserName, trigger: "blur", required: true },
],
phone: [
{ required: true, message: "请输入手机号", trigger: "blur" },
phone: [{ validator: validatePhone, trigger: "blur", required: true }],
nickName: [
{ required: true, message: "请输入昵称", trigger: "blur" },
{
pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
message: "请输入合法手机号/电话号",
pattern: /^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/,
message:
"昵称长度2~10位，只能包含中文、英文大小写、数字及下划线，不能以下划线开头或结尾",
trigger: "blur",
},
],
......@@ -148,48 +199,42 @@ export default {
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: {
submitForm(formName) {
this.$refs[formName].validate(async (valid) => {
submitForm() {
// debugger
// console.log(123);
this.$refs["registerForm"].validate((valid) => {
// debugger
if (valid) {
this.loading = true;
const { username, password, phone } = this.form;
const { username, password, phone, nickName } = this.form;
let params = {
username,
password,
phone,
nickName,
status: 1,
};
let res = await register(params);
if (res.code == "0") {
this.$confirm("注册成功, 是否去登录?", "提示", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "success",
register(params)
.then((res) => {
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;
})
.then(() => {
this.$store.commit("app/OPEN_LOGIN_DIALOG", true);
})
.catch(() => {
console.log("取消操作");
});
}
this.loading = false;
.catch((err) => {
this.loading = false;
});
} else {
console.log("error submit!!");
return false;
......@@ -226,7 +271,7 @@ export default {
.register {
width: 580px;
background-color: #fff;
border-radius: 16px;
// border-radius: 16px;
padding: 48px 32px;
box-shadow: 0 4px 8px 0 rgb(7 17 27 / 10%);
.title {
......@@ -235,9 +280,13 @@ export default {
align-items: center;
margin-bottom: 30px;
.text {
font-weight: bold;
font-size: 24px;
// font-weight: bold;
font-size: 36px;
color: #666;
font-family: "KaiTi";
.tips {
font-size: 24px;
}
}
.close {
font-size: 34px;
......@@ -258,7 +307,7 @@ export default {
display: flex;
justify-content: flex-end;
.el-button {
border-radius: 8px;
border-radius: 0px;
&:last-child {
width: 160px;
background-color: #2069c4;
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论