685 lines
17 KiB
Vue
685 lines
17 KiB
Vue
<template>
|
||
<div class="card" data-state="#about">
|
||
<div class="card-header">
|
||
<div class="card-cover"
|
||
style="background-image: url('https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg')"></div>
|
||
<!-- <img class="card-avatar" src="https://pic.imgdb.cn/item/658af285c458853aef9177aa.jpg" alt="avatar">-->
|
||
<el-avatar v-if="user.avatar===null" class="card-avatar" alt="avatar"> {{user.userLogin}}</el-avatar>
|
||
<el-avatar v-if="user.avatar!==null" class="card-avatar" :src="user.avatar" alt="avatar"></el-avatar>
|
||
<h1 v-if="user.nickname===null" class="card-fullname">{{user.userLogin}}</h1>
|
||
<h1 v-if="user.nickname!==null" class="card-fullname">{{user.nickname}}</h1>
|
||
<h2 v-if="user.roleId===1" class="card-jobtitle">common user</h2>
|
||
<h2 v-if="user.roleId===0" class="card-jobtitle">Admin</h2>
|
||
</div>
|
||
<div class="card-main">
|
||
<div class="card-section is-active" id="about">
|
||
<div class="card-content">
|
||
<div class="card-subtitle">ABOUT</div>
|
||
<p class="card-desc">用户描述...
|
||
</p>
|
||
</div>
|
||
<div class="card-content">
|
||
<div class="card-subtitle">TIME OF REGISTRATION</div>
|
||
<p class="card-desc">{{user.userRegistered}}
|
||
</p>
|
||
</div>
|
||
<!-- <div class="card-social">-->
|
||
<!-- -->
|
||
<!-- </div>-->
|
||
</div>
|
||
<div class="card-section" id="experience">
|
||
<div class="card-content">
|
||
<div class="card-subtitle">登录日志</div>
|
||
<div class="card-timeline">
|
||
<div v-if="loginLogs" v-for="(item,index) in loginLogs" :key="index" class="card-item" :data-year="item.loginTime.substring(0, 4)">
|
||
<div v-if="item.loginIp" class="card-item-title">{{item.loginIp}} <span v-if="user.userLogin">: {{user.userLogin}}</span></div>
|
||
<div v-if="item.loginTime" class="card-item-title">{{item.loginTime}}</div>
|
||
<div v-if="item.location" class="card-item-desc">{{item.location}}</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-section" id="contact">
|
||
<div class="card-content">
|
||
<div class="card-subtitle">CONTACT</div>
|
||
<div class="card-contact-wrapper">
|
||
<!-- <div class="card-contact">-->
|
||
<!-- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"-->
|
||
<!-- stroke-width="2" stroke-linecap="round" stroke-linejoin="round">-->
|
||
<!-- <path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path>-->
|
||
<!-- <circle cx="12" cy="10" r="3"></circle>-->
|
||
<!-- </svg>-->
|
||
<!-- Algonquin Rd, Three Oaks Vintage, MI, 49128-->
|
||
<!-- </div>-->
|
||
<div class="card-contact" v-if="user.phone">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path
|
||
d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"></path>
|
||
</svg>
|
||
{{user.phone}}
|
||
</div>
|
||
<div class="card-contact">
|
||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
|
||
stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||
<path d="M22 6l-10 7L2 6"></path>
|
||
</svg>
|
||
{{user.userEmail}}
|
||
</div>
|
||
<!-- <button class="contact-me">注销账号</button>-->
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card-section" id="update">
|
||
<div class="card-content">
|
||
<div class="card-subtitle">修改信息</div>
|
||
<el-form :model="updateForm" :rules="rules" ref="updateForm" class="form">
|
||
<el-form-item prop="avatar">
|
||
<el-input
|
||
v-model="updateForm.avatar"
|
||
prefix-icon="el-icon-link"
|
||
placeholder="头像链接"
|
||
auto-complete="off"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="nickname">
|
||
<el-input
|
||
v-model="updateForm.nickname"
|
||
prefix-icon="el-icon-user"
|
||
placeholder="昵称"
|
||
auto-complete="off"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item prop="phone">
|
||
<el-input
|
||
v-model="updateForm.phone"
|
||
prefix-icon="el-icon-phone"
|
||
placeholder="联系电话"
|
||
auto-complete="off"
|
||
></el-input>
|
||
</el-form-item>
|
||
<el-form-item>
|
||
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
||
<el-button @click="resetForm('updateForm')">重置</el-button>
|
||
<el-button type="primary" @click="updateUserInfo('updateForm')">确认
|
||
</el-button
|
||
>
|
||
</div>
|
||
</el-form-item>
|
||
|
||
</el-form>
|
||
</div>
|
||
|
||
</div>
|
||
<div class="card-buttons">
|
||
<button data-section="#about" class="is-active">我的</button>
|
||
<button data-section="#contact">联系方式</button>
|
||
<button data-section="#experience">日志</button>
|
||
<button data-section="#update">修改信息</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import axios from "axios";
|
||
import Vue from "vue";
|
||
|
||
export default {
|
||
name: "PersonalInfoCard",
|
||
data() {
|
||
return {
|
||
user:{
|
||
avatar:null,
|
||
id:null,
|
||
nickname:null,
|
||
phone:null,
|
||
userEmail:null,
|
||
userLogin:null,
|
||
userRegistered:null,
|
||
roleId:null
|
||
},
|
||
loginLogs:[],
|
||
updateForm:{
|
||
avatar:null,
|
||
nickname:null,
|
||
phone:null,
|
||
},
|
||
rules: {
|
||
avatar: [
|
||
// required：规则，o：失去焦点触发
|
||
{required: true, message: "请输入头像链接", trigger: "blur"},
|
||
],
|
||
nickname: [{required: true, message: "请输入昵称", trigger: "blur"}],
|
||
phone: [{required: true, message: "请输入联系电话", trigger: "blur"}],
|
||
},
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getUserAllInfo();
|
||
this.getUserLoginLogs();
|
||
const buttons = document.querySelectorAll(".card-buttons button");
|
||
const sections = document.querySelectorAll(".card-section");
|
||
const card = document.querySelector(".card");
|
||
|
||
const handleButtonClick = e => {
|
||
const targetSection = e.target.getAttribute("data-section");
|
||
const section = document.querySelector(targetSection);
|
||
targetSection !== "#about" ?
|
||
card.classList.add("is-active") :
|
||
card.classList.remove("is-active");
|
||
card.setAttribute("data-state", targetSection);
|
||
sections.forEach(s => s.classList.remove("is-active"));
|
||
buttons.forEach(b => b.classList.remove("is-active"));
|
||
e.target.classList.add("is-active");
|
||
section.classList.add("is-active");
|
||
};
|
||
|
||
buttons.forEach(btn => {
|
||
btn.addEventListener("click", handleButtonClick);
|
||
});
|
||
},
|
||
created() {
|
||
|
||
},
|
||
computed: {},
|
||
methods: {
|
||
//重置
|
||
resetForm(formName) {
|
||
this.$refs[formName].resetFields();
|
||
},
|
||
updateUserInfo(formName){
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
if (localStorage.getItem("Authorization") && localStorage.getItem("userId")) {
|
||
let _this=this;
|
||
axios({
|
||
method: 'get',
|
||
url: '/api/updateUserDetails',
|
||
params: {
|
||
avatar:this.updateForm.avatar,
|
||
nickname:this.updateForm.nickname,
|
||
id:localStorage.getItem('userId'),
|
||
phone:this.updateForm.phone,
|
||
}
|
||
}).then(function (res) {
|
||
if(res.data.code!==200){
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "修改失败！",
|
||
offset: 0
|
||
});
|
||
}else{
|
||
Vue.prototype.$notify.success({
|
||
title: 'OK',
|
||
message: "修改成功！",
|
||
offset: 0
|
||
});
|
||
_this.getUserAllInfo();
|
||
}
|
||
}).catch((error) => {
|
||
// Vue.prototype.$notify.error({
|
||
// title: '错误',
|
||
// message: error,
|
||
// offset: 0
|
||
// });
|
||
})
|
||
} else {
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "登录状态失效，请重新登录！",
|
||
offset: 0
|
||
});
|
||
}
|
||
}
|
||
})
|
||
|
||
},
|
||
getUserAllInfo() {
|
||
let _this = this;
|
||
if (localStorage.getItem("Authorization") && localStorage.getItem("userId")) {
|
||
axios({
|
||
method: 'get',
|
||
url: '/api/getUserDetailes',
|
||
params: {
|
||
id: localStorage.getItem("userId")
|
||
}
|
||
}).then(function (res) {
|
||
if(res.data){
|
||
_this.user.avatar=res.data.avatar;
|
||
_this.user.id=res.data.id;
|
||
_this.user.nickname=res.data.nickname;
|
||
_this.user.phone=res.data.phone;
|
||
_this.user.userEmail=res.data.userEmail;
|
||
_this.user.userLogin=res.data.userLogin;
|
||
_this.user.userRegistered=res.data.userRegistered;
|
||
_this.user.roleId=res.data.roleId;
|
||
}
|
||
}).catch((error) => {
|
||
// Vue.prototype.$notify.error({
|
||
// title: '错误',
|
||
// message: error,
|
||
// offset: 0
|
||
// });
|
||
})
|
||
} else {
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "登录状态失效，请重新登录！",
|
||
offset: 0
|
||
});
|
||
}
|
||
|
||
},
|
||
getUserLoginLogs() {
|
||
let _this = this;
|
||
if (localStorage.getItem("Authorization") && localStorage.getItem("userId")) {
|
||
axios({
|
||
method: 'get',
|
||
url: '/api/getUserLoginLogs',
|
||
params: {
|
||
userId: localStorage.getItem("userId")
|
||
}
|
||
}).then(function (res) {
|
||
if(res.data){
|
||
_this.loginLogs=res.data;
|
||
}
|
||
}).catch((error) => {
|
||
// Vue.prototype.$notify.error({
|
||
// title: '错误',
|
||
// message: error,
|
||
// offset: 0
|
||
// });
|
||
})
|
||
} else {
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: "登录状态失效，请重新登录！",
|
||
offset: 0
|
||
});
|
||
}
|
||
|
||
},
|
||
}
|
||
|
||
}
|
||
</script>
|
||
<style scoped>
|
||
* {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
|
||
.card {
|
||
width: 340px;
|
||
margin: auto;
|
||
overflow-y: auto;
|
||
position: relative;
|
||
z-index: 1;
|
||
overflow-x: hidden;
|
||
background-color: var(--theme-bg-color);
|
||
color: var(--theme-color);
|
||
display: flex;
|
||
transition: 0.3s;
|
||
flex-direction: column;
|
||
border-radius: 10px;
|
||
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
|
||
top: 20px;
|
||
left: 20px;
|
||
}
|
||
|
||
.card[data-state="#about"] {
|
||
height: 450px;
|
||
}
|
||
|
||
.card[data-state="#about"] .card-main {
|
||
padding-top: 0;
|
||
}
|
||
|
||
.card[data-state="#contact"] {
|
||
height: 430px;
|
||
}
|
||
|
||
.card[data-state="#experience"] {
|
||
height: 550px;
|
||
}
|
||
|
||
.card.is-active .card-header {
|
||
height: 80px;
|
||
}
|
||
|
||
.card.is-active .card-cover {
|
||
height: 100px;
|
||
top: -50px;
|
||
}
|
||
|
||
.card.is-active .card-avatar {
|
||
transform: none;
|
||
left: 20px;
|
||
width: 50px;
|
||
height: 50px;
|
||
bottom: 10px;
|
||
}
|
||
|
||
.card.is-active .card-fullname,
|
||
.card.is-active .card-jobtitle {
|
||
left: 86px;
|
||
transform: none;
|
||
}
|
||
|
||
.card.is-active .card-fullname {
|
||
bottom: 18px;
|
||
font-size: 19px;
|
||
}
|
||
|
||
.card.is-active .card-jobtitle {
|
||
bottom: 16px;
|
||
letter-spacing: 1px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.card-header {
|
||
position: relative;
|
||
display: flex;
|
||
height: 200px;
|
||
flex-shrink: 0;
|
||
width: 100%;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.card-header * {
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.card-cover {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: absolute;
|
||
height: 160px;
|
||
top: -20%;
|
||
left: 0;
|
||
will-change: top;
|
||
background-size: cover;
|
||
background-position: center;
|
||
filter: blur(30px);
|
||
transform: scale(1.2);
|
||
transition: 0.5s;
|
||
}
|
||
|
||
.card-avatar {
|
||
width: 100px;
|
||
height: 100px;
|
||
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
|
||
border-radius: 50%;
|
||
-o-object-position: center;
|
||
object-position: center;
|
||
-o-object-fit: cover;
|
||
object-fit: cover;
|
||
position: absolute;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
bottom: 0;
|
||
left: 50%;
|
||
cursor: pointer;
|
||
transform: translateX(-50%) translateY(-64px);
|
||
}
|
||
|
||
.card-fullname {
|
||
position: absolute;
|
||
bottom: 0;
|
||
font-size: 22px;
|
||
font-weight: 700;
|
||
text-align: center;
|
||
white-space: nowrap;
|
||
transform: translateY(-10px) translateX(-50%);
|
||
left: 50%;
|
||
}
|
||
|
||
.card-jobtitle {
|
||
position: absolute;
|
||
bottom: 0;
|
||
font-size: 11px;
|
||
white-space: nowrap;
|
||
font-weight: 500;
|
||
opacity: 0.7;
|
||
text-transform: uppercase;
|
||
letter-spacing: 1.5px;
|
||
margin: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%) translateY(-7px);
|
||
}
|
||
|
||
.card-main {
|
||
position: relative;
|
||
flex: 1;
|
||
display: flex;
|
||
padding-top: 10px;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.card-subtitle {
|
||
font-weight: 700;
|
||
font-size: 13px;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.card-content {
|
||
padding: 20px;
|
||
}
|
||
|
||
.card-desc {
|
||
line-height: 1.6;
|
||
color: var(--theme-color);
|
||
font-size: 14px;
|
||
margin: 0;
|
||
font-weight: 400;
|
||
font-family: "DM Sans", sans-serif;
|
||
}
|
||
|
||
.card-social {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
margin-bottom: 30px;
|
||
}
|
||
|
||
.card-social svg {
|
||
fill: #a5b5ce;
|
||
width: 16px;
|
||
display: block;
|
||
transition: 0.3s;
|
||
}
|
||
|
||
.card-social a {
|
||
color: var(--theme-color);
|
||
height: 32px;
|
||
width: 32px;
|
||
border-radius: 50%;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: 0.3s;
|
||
background-color: rgba(93, 133, 193, 0.05);
|
||
border-radius: 50%;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.card-social a:hover svg {
|
||
fill: #637faa;
|
||
}
|
||
|
||
.card-social a:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.card-buttons {
|
||
display: flex;
|
||
background-color: var(--theme-bg-color);
|
||
margin-top: auto;
|
||
color: var(--theme-color);
|
||
position: sticky;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.card-buttons button {
|
||
flex: 1 1 auto;
|
||
-webkit-user-select: none;
|
||
-moz-user-select: none;
|
||
-ms-user-select: none;
|
||
user-select: none;
|
||
background: 0;
|
||
font-size: 13px;
|
||
border: 0;
|
||
padding: 15px 5px;
|
||
cursor: pointer;
|
||
color: #5c5c6d;
|
||
transition: 0.3s;
|
||
font-family: "Jost", sans-serif;
|
||
font-weight: 500;
|
||
outline: 0;
|
||
border-bottom: 3px solid transparent;
|
||
}
|
||
|
||
.card-buttons button.is-active, .card-buttons button:hover {
|
||
color: #2b2c48;
|
||
border-bottom: 3px solid #8a84ff;
|
||
background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgba(211, 226, 255, 0.4) 100%);
|
||
}
|
||
|
||
.card-section {
|
||
display: none;
|
||
}
|
||
|
||
.card-section.is-active {
|
||
display: block;
|
||
-webkit-animation: fadeIn 0.6s both;
|
||
animation: fadeIn 0.6s both;
|
||
}
|
||
|
||
@-webkit-keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translatey(40px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes fadeIn {
|
||
0% {
|
||
opacity: 0;
|
||
transform: translatey(40px);
|
||
}
|
||
100% {
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
.card-timeline {
|
||
margin-top: 30px;
|
||
position: relative;
|
||
}
|
||
|
||
.card-timeline:after {
|
||
background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%);
|
||
content: "";
|
||
left: 42px;
|
||
width: 2px;
|
||
top: 0;
|
||
height: 100%;
|
||
position: absolute;
|
||
content: "";
|
||
}
|
||
|
||
.card-item {
|
||
position: relative;
|
||
padding-left: 60px;
|
||
padding-right: 20px;
|
||
padding-bottom: 30px;
|
||
z-index: 1;
|
||
}
|
||
|
||
.card-item:last-child {
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.card-item:after {
|
||
content: attr(data-year);
|
||
width: 10px;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 37px;
|
||
width: 8px;
|
||
height: 8px;
|
||
line-height: 0.6;
|
||
border: 2px solid #fff;
|
||
font-size: 11px;
|
||
text-indent: -35px;
|
||
border-radius: 50%;
|
||
color: rgba(134, 134, 134, 0.7);
|
||
background: linear-gradient(to bottom, #a0aee3 0%, #516acc 100%);
|
||
}
|
||
|
||
.card-item-title {
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.card-item-desc {
|
||
font-size: 13px;
|
||
color: #6f6f7b;
|
||
line-height: 1.5;
|
||
font-family: "DM Sans", sans-serif;
|
||
}
|
||
|
||
.card-contact-wrapper {
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.card-contact {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 13px;
|
||
color: var(--theme-color);
|
||
font-family: "DM Sans", sans-serif;
|
||
line-height: 1.6;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.card-contact + .card-contact {
|
||
margin-top: 16px;
|
||
}
|
||
|
||
.card-contact svg {
|
||
flex-shrink: 0;
|
||
width: 30px;
|
||
min-height: 34px;
|
||
margin-right: 12px;
|
||
transition: 0.3s;
|
||
padding-right: 12px;
|
||
border-right: 1px solid #dfe2ec;
|
||
}
|
||
|
||
.contact-me {
|
||
border: 0;
|
||
outline: none;
|
||
background: linear-gradient(to right, rgba(83, 200, 239, 0.8) 0%, rgba(81, 106, 204, 0.8) 96%);
|
||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
|
||
color: #fff;
|
||
padding: 12px 16px;
|
||
width: 100%;
|
||
border-radius: 5px;
|
||
margin-top: 25px;
|
||
cursor: pointer;
|
||
font-size: 14px;
|
||
font-weight: 500;
|
||
font-family: "Jost", sans-serif;
|
||
transition: 0.3s;
|
||
}
|
||
</style> |