|
|
|
@ -1,9 +1,49 @@ |
|
|
|
<template> |
|
|
|
<div class="member-container"> |
|
|
|
<div class="member-left-container"> |
|
|
|
<el-card class="user-simple-info-view"> |
|
|
|
<div style="display: flex; align-content: center; flex-direction: row;"> |
|
|
|
<img class="avatar" :src="userInfo.avatar"> |
|
|
|
<div class="info-view"> |
|
|
|
<p class="name"> |
|
|
|
{{ userInfo.name }} |
|
|
|
</p> |
|
|
|
<p class="email"> |
|
|
|
{{ userInfo.email }} |
|
|
|
</p> |
|
|
|
<p> |
|
|
|
<font-icon class="fab fa-weixin icon" :style="{color:userInfo.wxName?'#3F9F3F':''}" /> |
|
|
|
<font-icon class="fa fa-qq icon" :style="{color:userInfo.qqName?'#078DF0':''}" /> |
|
|
|
<font-icon class="fa fa-weibo icon" /> |
|
|
|
</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
<el-card class="user-menu-list-view"> |
|
|
|
<el-menu |
|
|
|
:default-active="memberMenuActive" |
|
|
|
> |
|
|
|
<el-menu-item index="1"> |
|
|
|
<span slot="title">账户信息</span> |
|
|
|
</el-menu-item> |
|
|
|
<el-menu-item index="2"> |
|
|
|
<span slot="title">我的资源</span> |
|
|
|
</el-menu-item> |
|
|
|
<el-menu-item index="3"> |
|
|
|
<span slot="title">扩展功能</span> |
|
|
|
</el-menu-item> |
|
|
|
<el-menu-item index="4"> |
|
|
|
<span slot="title">我的联系人</span> |
|
|
|
</el-menu-item> |
|
|
|
<el-menu-item index="5"> |
|
|
|
<span slot="title">协作人员</span> |
|
|
|
</el-menu-item> |
|
|
|
</el-menu> |
|
|
|
</el-card> |
|
|
|
</div> |
|
|
|
<el-card class="member-box-card"> |
|
|
|
<div class="member-info-view"> |
|
|
|
<p class="title pl-5">账号信息</p> |
|
|
|
<el-divider /> |
|
|
|
<p class="title pl-10">个人信息</p> |
|
|
|
<div v-if="userInfo" class="account-info-view"> |
|
|
|
<table> |
|
|
|
<tbody> |
|
|
|
@ -11,7 +51,7 @@ |
|
|
|
<td width="80" style="text-align: right;">用户名：</td> |
|
|
|
<td> |
|
|
|
{{ userInfo.name }} |
|
|
|
<el-link type="primary" @click="editDialogVisible=true">修改</el-link> |
|
|
|
<el-link type="primary" @click="editNameDialogVisible=true">修改</el-link> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
@ -32,7 +72,10 @@ |
|
|
|
<td width="80" style="text-align: right;">手机号：</td> |
|
|
|
<td> |
|
|
|
{{ userInfo.phoneNumber }} |
|
|
|
<el-link type="primary">修改</el-link> |
|
|
|
<el-link v-if="userInfo.phoneNumber" type="primary" @click="phoneDialogVisible=true"> |
|
|
|
修改 |
|
|
|
</el-link> |
|
|
|
<el-link v-else type="primary" @click="phoneDialogVisible=true">绑定</el-link> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
@ -57,23 +100,58 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p class="title pl-5">第三方账号</p> |
|
|
|
<el-divider /> |
|
|
|
<p class="title pl-10">第三方账号</p> |
|
|
|
<div v-if="userInfo" class="account-info-view"> |
|
|
|
<div style="margin-left: 30px; display: flex; flex-direction: row;"> |
|
|
|
<div class="account-icon-view"> |
|
|
|
<font-icon class="fab fa-weixin icon" :style="{color:userInfo.wxName?'#3F9F3F':''}" /> |
|
|
|
<span v-if="userInfo.wxName"> |
|
|
|
{{ userInfo.wxName }}(已绑定) |
|
|
|
</span> |
|
|
|
<el-link v-else type="primary" @click="redirectUrl(qqLoginAuthorizeUrl)">绑定</el-link> |
|
|
|
</div> |
|
|
|
<div class="account-icon-view"> |
|
|
|
<font-icon class="fa fa-qq icon" :style="{color:userInfo.qqName?'#078DF0':''}" /> |
|
|
|
<span v-if="userInfo.qqName"> |
|
|
|
{{ userInfo.qqName }}(已绑定) |
|
|
|
</span> |
|
|
|
<el-link v-else type="primary" @click="redirectUrl(qqLoginAuthorizeUrl)">绑定</el-link> |
|
|
|
</div> |
|
|
|
<div class="account-icon-view"> |
|
|
|
<font-icon class="fa fa-weibo icon" /> |
|
|
|
<span v-if="userInfo.wbName"> |
|
|
|
{{ userInfo.wbName }}(已绑定) |
|
|
|
</span> |
|
|
|
<el-link v-else type="primary">绑定</el-link> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<p class="title pl-10">企业信息</p> |
|
|
|
<div v-if="userInfo" class="account-info-view"> |
|
|
|
<table> |
|
|
|
<tbody> |
|
|
|
<tr> |
|
|
|
<td width="80" style="text-align: right;">smile：</td> |
|
|
|
<td width="80" style="text-align: right;">企业名称：</td> |
|
|
|
<td> |
|
|
|
{{ userInfo.name }} |
|
|
|
<el-link type="primary" @click="editDialogVisible=true">修改</el-link> |
|
|
|
字节跳动（上海研发中心） |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td width="80" style="text-align: right;">smile：</td> |
|
|
|
<td width="80" style="text-align: right;">企业logo：</td> |
|
|
|
<td> |
|
|
|
{{ userInfo.name }} |
|
|
|
<el-link type="primary" @click="editDialogVisible=true">修改</el-link> |
|
|
|
<el-link type="primary">上传Logo</el-link> |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td width="100" style="text-align: right;">自定义域名：</td> |
|
|
|
<td> |
|
|
|
www.zjtd.com.cn |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
<tr> |
|
|
|
<td width="80" style="text-align: right;">所在地址：</td> |
|
|
|
<td> |
|
|
|
上海市闵行区漕河泾创意产业园1812号1654号 |
|
|
|
</td> |
|
|
|
</tr> |
|
|
|
</tbody> |
|
|
|
@ -81,31 +159,39 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</el-card> |
|
|
|
<div> |
|
|
|
<el-dialog |
|
|
|
title="修改用户名" |
|
|
|
:visible.sync="editNameDialogVisible" |
|
|
|
width="30%" |
|
|
|
width="450px" |
|
|
|
center |
|
|
|
> |
|
|
|
<el-form ref="form" :model="userInfo" :rules="userInfoRules" label-width="80px"> |
|
|
|
<el-form ref="updateNameForm" :model="userInfoForm" :rules="userInfoRules" label-width="80px"> |
|
|
|
<el-form-item label="新用户名" prop="name"> |
|
|
|
<el-input v-model="userInfo.name" /> |
|
|
|
<el-input v-model="userInfoForm.name" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<span slot="footer"> |
|
|
|
<el-button type="primary" |
|
|
|
@click="()=>{this.editNameDialogVisible = false;this.updateUserHandle()}" |
|
|
|
@click="()=>{ |
|
|
|
this.$refs['updateNameForm'].validateField('name', err => { |
|
|
|
if (!err) { |
|
|
|
this.editNameDialogVisible = false; |
|
|
|
this.updateUserHandle() |
|
|
|
} |
|
|
|
}) |
|
|
|
}" |
|
|
|
>保存</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
<el-dialog |
|
|
|
title="修改密码" |
|
|
|
:visible.sync="pwdDialogVisible" |
|
|
|
width="30%" |
|
|
|
width="450px" |
|
|
|
center |
|
|
|
> |
|
|
|
<el-form ref="form" |
|
|
|
style="width: 80%;" |
|
|
|
<el-form ref="updatePassWordForm" |
|
|
|
style="width: 300px;" |
|
|
|
:model="userPwdForm" :rules="userPwdRules" label-width="120px" |
|
|
|
> |
|
|
|
<el-form-item label="输入旧密码" prop="oldPassword"> |
|
|
|
@ -127,15 +213,15 @@ |
|
|
|
<el-dialog |
|
|
|
title="修改邮箱" |
|
|
|
:visible.sync="emailDialogVisible" |
|
|
|
width="30%" |
|
|
|
width="450px" |
|
|
|
center |
|
|
|
> |
|
|
|
<el-form ref="form" |
|
|
|
style="width: 80%;" |
|
|
|
:model="userInfo" :rules="userInfoRules" label-width="80px" |
|
|
|
:model="userInfoForm" :rules="userInfoRules" label-width="80px" |
|
|
|
> |
|
|
|
<el-form-item label="邮箱" prop="email"> |
|
|
|
<el-input v-model="userInfo.email" placeholder="请输入邮箱" /> |
|
|
|
<el-input v-model="userInfoForm.email" placeholder="请输入邮箱" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
@ -144,29 +230,65 @@ |
|
|
|
>发送验证邮件</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
<el-dialog |
|
|
|
title="修改手机号" |
|
|
|
:visible.sync="phoneDialogVisible" |
|
|
|
width="450px" |
|
|
|
center |
|
|
|
> |
|
|
|
<el-form ref="updatePhoneForm" |
|
|
|
:model="userInfoForm" :rules="userInfoRules" label-width="120px" |
|
|
|
> |
|
|
|
<el-form-item label="手机号" prop="phoneNumber"> |
|
|
|
<el-input v-model="userInfoForm.phoneNumber" placeholder="请输入手机号" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="输入验证码" prop="code"> |
|
|
|
<el-input v-model="userInfoForm.code" placeholder="请输入验证码" |
|
|
|
style="display: inline-block; width: 60%;" |
|
|
|
/> |
|
|
|
<el-button v-prevent-re-click |
|
|
|
style="display: inline-block; width: 40%;" |
|
|
|
@click.native="sendUpdatePhoneNumber" |
|
|
|
> |
|
|
|
{{ phoneValidateCodeBtnText }} |
|
|
|
</el-button> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<span slot="footer" class="dialog-footer"> |
|
|
|
<el-button type="primary" |
|
|
|
@click="()=>{this.phoneDialogVisible = false;this.updateUserPhoneHandle()}" |
|
|
|
>完 成</el-button> |
|
|
|
</span> |
|
|
|
</el-dialog> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script> |
|
|
|
import myUpload from 'vue-image-crop-upload' |
|
|
|
import constants from '@/utils/constants' |
|
|
|
import FontIcon from '@/components/FontIcon' |
|
|
|
import {getCurrentDomain} from '@/utils' |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Member', |
|
|
|
components: { |
|
|
|
FontIcon, |
|
|
|
myUpload |
|
|
|
}, |
|
|
|
data() { |
|
|
|
let validateRePass = (rule, value, callback) => { |
|
|
|
if (value === '') { |
|
|
|
callback(new Error('请再次输入密码')) |
|
|
|
} else if (value !== this.resetPwdForm.rePassword) { |
|
|
|
} else if (value !== this.userPwdForm.repeatPassword) { |
|
|
|
callback(new Error('两次输入密码不一致!')) |
|
|
|
} else { |
|
|
|
callback() |
|
|
|
} |
|
|
|
} |
|
|
|
return { |
|
|
|
memberMenuActive: '1', |
|
|
|
phoneValidateCodeBtnText: '发送验证码', |
|
|
|
userInfoRules: { |
|
|
|
name: [ |
|
|
|
{required: true, trigger: 'blur', message: '请输入昵称'} |
|
|
|
@ -177,6 +299,15 @@ export default { |
|
|
|
pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/, |
|
|
|
message: '请输入正确的邮箱' |
|
|
|
} |
|
|
|
], |
|
|
|
phoneNumber: [ |
|
|
|
{required: true, trigger: 'blur', message: '请输入手机号'}, |
|
|
|
{ |
|
|
|
pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/, |
|
|
|
message: '请输入正确的手机号' |
|
|
|
} |
|
|
|
], code: [ |
|
|
|
{required: true, trigger: 'blur', message: '请输入验证码'} |
|
|
|
] |
|
|
|
}, |
|
|
|
userPwdRules: { |
|
|
|
@ -200,8 +331,11 @@ export default { |
|
|
|
}, |
|
|
|
editNameDialogVisible: false, |
|
|
|
pwdDialogVisible: false, |
|
|
|
phoneDialogVisible: false, |
|
|
|
emailDialogVisible: false, |
|
|
|
userInfo: {}, |
|
|
|
userInfoForm: {}, |
|
|
|
qqLoginAuthorizeUrl: '', |
|
|
|
userPwdForm: { |
|
|
|
oldPassword: '', |
|
|
|
password: '', |
|
|
|
@ -211,13 +345,17 @@ export default { |
|
|
|
} |
|
|
|
}, |
|
|
|
created() { |
|
|
|
this.queryUserInfo() |
|
|
|
this.getQQLoginAuthorizeUrl() |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
queryUserInfo() { |
|
|
|
this.$api.get('/user/current/detail').then(res => { |
|
|
|
if (res.data) { |
|
|
|
this.userInfo = res.data |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
methods: { |
|
|
|
getUploadHeader() { |
|
|
|
return { |
|
|
|
'token': this.$store.getters['user/isLogin'] |
|
|
|
@ -227,31 +365,77 @@ export default { |
|
|
|
return `${process.env.VUE_APP_API_ROOT}/user/file/upload` |
|
|
|
}, |
|
|
|
updateUserPwdHandle() { |
|
|
|
this.$refs['updatePassWordForm'].validate(valid => { |
|
|
|
if (valid) { |
|
|
|
this.$api.post('/user/update/password', this.userPwdForm).then(res => { |
|
|
|
if (res.data) { |
|
|
|
console.log(res.data) |
|
|
|
this.msgSuccess('修改成功') |
|
|
|
this.queryUserInfo() |
|
|
|
} |
|
|
|
}) |
|
|
|
} else { |
|
|
|
return false |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
}, |
|
|
|
sendUpdateEmail() { |
|
|
|
this.$api.get('/update/email', {params: {email: this.userInfo.email}}).then(res => { |
|
|
|
this.$api.get('/user/update-email/msg', {params: {email: this.userInfoForm.email}}).then(res => { |
|
|
|
if (res.data) { |
|
|
|
this.msgSuccess('发送成功') |
|
|
|
|
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
sendUpdatePhoneNumber() { |
|
|
|
this.$refs['updatePhoneForm'].validateField('phoneNumber', err => { |
|
|
|
if (!err) { |
|
|
|
this.$api.get(`/user/update-phone/code?phoneNumber=${this.userInfoForm.phoneNumber}`).then(() => { |
|
|
|
this.msgSuccess('验证码发送成功，5分钟内有效') |
|
|
|
let count = 60 |
|
|
|
let timer = setInterval(() => { |
|
|
|
count-- |
|
|
|
this.phoneValidateCodeBtnText = count + 's后重新发送' |
|
|
|
if (count == 0) { |
|
|
|
this.phoneValidateCodeBtnText = '发送验证码' |
|
|
|
clearInterval(timer) |
|
|
|
} |
|
|
|
}, 1000) |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
updateUserHandle() { |
|
|
|
this.$api.post('/user/update', this.userInfo).then(res => { |
|
|
|
this.$api.post('/user/update', this.userInfoForm).then(res => { |
|
|
|
if (res.data) { |
|
|
|
console.log(res.data) |
|
|
|
this.msgSuccess('保存成功') |
|
|
|
this.queryUserInfo() |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
// qq登录授权地址 |
|
|
|
getQQLoginAuthorizeUrl() { |
|
|
|
let reUrl = getCurrentDomain() + '/redirect' |
|
|
|
this.$api.get('/login/qq/authorize/url', {params: {redirectUri: reUrl}}).then(res => { |
|
|
|
this.qqLoginAuthorizeUrl = res.data |
|
|
|
}) |
|
|
|
}, |
|
|
|
redirectUrl(url) { |
|
|
|
location.href = url |
|
|
|
}, |
|
|
|
updateUserPhoneHandle() { |
|
|
|
this.$refs['updatePhoneForm'].validateField(['phoneNumber', 'code'], err => { |
|
|
|
if (!err) { |
|
|
|
this.$api.post('/user/update/phone-number', this.userInfoForm).then(() => { |
|
|
|
this.msgSuccess('修改成功') |
|
|
|
this.queryUserInfo() |
|
|
|
}) |
|
|
|
} |
|
|
|
}) |
|
|
|
}, |
|
|
|
cropUploadSuccess(res) { |
|
|
|
console.log(res) |
|
|
|
this.userInfo.avatar = res.data |
|
|
|
this.userInfoForm.avatar = res.data |
|
|
|
this.updateUserHandle() |
|
|
|
} |
|
|
|
} |
|
|
|
@ -265,23 +449,105 @@ export default { |
|
|
|
justify-content: center; |
|
|
|
} |
|
|
|
.title { |
|
|
|
color: rgba(16, 16, 16, 100); |
|
|
|
font-size: 16px; |
|
|
|
text-align: left; |
|
|
|
font-weight: bolder; |
|
|
|
} |
|
|
|
.member-box-card { |
|
|
|
margin-top: 20px; |
|
|
|
width: 900px; |
|
|
|
width: 1027px; |
|
|
|
height: 747px; |
|
|
|
table { |
|
|
|
color: #666; |
|
|
|
color: #101010; |
|
|
|
font-size: 14px; |
|
|
|
} |
|
|
|
table tr { |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
.user-simple-info-view { |
|
|
|
margin-top: 20px; |
|
|
|
margin-right: 10px; |
|
|
|
width: 370px; |
|
|
|
height: 118px; |
|
|
|
line-height: 20px; |
|
|
|
border-radius: 10px; |
|
|
|
text-align: center; |
|
|
|
.avatar { |
|
|
|
width: 81px; |
|
|
|
height: 81px; |
|
|
|
border-radius: 50px; |
|
|
|
background-color: rgba(229, 229, 229, 100); |
|
|
|
box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.4); |
|
|
|
margin: 0 20px; |
|
|
|
} |
|
|
|
p { |
|
|
|
margin: 0; |
|
|
|
} |
|
|
|
.name { |
|
|
|
color: rgba(16, 16, 16, 100); |
|
|
|
font-size: 20px; |
|
|
|
line-height: 30px; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
.email { |
|
|
|
color: rgba(16, 16, 16, 100); |
|
|
|
font-size: 14px; |
|
|
|
line-height: 20px; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
.info-view { |
|
|
|
height: 81px; |
|
|
|
text-align: left; |
|
|
|
} |
|
|
|
.icon { |
|
|
|
margin: 5px; |
|
|
|
} |
|
|
|
} |
|
|
|
.user-menu-list-view { |
|
|
|
margin-top: 20px; |
|
|
|
width: 370px; |
|
|
|
height: 303px; |
|
|
|
line-height: 20px; |
|
|
|
border-radius: 10px; |
|
|
|
text-align: center; |
|
|
|
ul { |
|
|
|
border-right: none; |
|
|
|
} |
|
|
|
ul li { |
|
|
|
list-style: none; |
|
|
|
color: rgba(16, 16, 16, 100); |
|
|
|
font-size: 18px; |
|
|
|
line-height: 40px; |
|
|
|
text-align: center; |
|
|
|
border-bottom: 1px solid rgb(234, 234, 234); |
|
|
|
} |
|
|
|
ul li:last-child { |
|
|
|
border-bottom: none; |
|
|
|
} |
|
|
|
.is-active { |
|
|
|
font-weight: bold; |
|
|
|
} |
|
|
|
} |
|
|
|
.account-info-view { |
|
|
|
padding: 10px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
.icon { |
|
|
|
width: 27px; |
|
|
|
height: 27px; |
|
|
|
} |
|
|
|
.account-icon-view { |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
margin-right: 20px; |
|
|
|
} |
|
|
|
.account-icon-view span { |
|
|
|
font-size: 12px; |
|
|
|
} |
|
|
|
} |
|
|
|
.account-avatar-view { |
|
|
|
width: 180px; |
|
|
|
|
wangqing
5 years ago