elink-star
/
tduck-front
8
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

我的页面

old
wangqing 5 years ago
parent
2a831d70bb
commit
2dd2dfed45
4 changed files with 380 additions and 90 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      src/assets/styles/index.scss
  2. 2
      src/main.js
  3. 21
      src/utils/plugins.js
  4. 330
      src/views/account/member.vue

3
src/assets/styles/index.scss
View File

@ -60,6 +60,9 @@ div:focus {
.pl-5 { .pl-5 {
padding-left: 5px; padding-left: 5px;
} }
.pl-10 {
padding-left: 10px;
}
.block { .block {
display: block; display: block;
} }

2
src/main.js
View File

@ -10,7 +10,7 @@ import router from './router/index'
import api from './api' import api from './api'
import store from './store/index' import store from './store/index'
import '@/assets/styles/index.scss' // global css import '@/assets/styles/index.scss' // global css
import '@/utils/plugins'
// 全局组件自动注册 // 全局组件自动注册
import '@/components/autoRegister' import '@/components/autoRegister'
import VueClipboard from 'vue-clipboard2' import VueClipboard from 'vue-clipboard2'

21
src/utils/plugins.js
View File

@ -0,0 +1,21 @@
import Vue from 'vue';
// 防重复点击(指令实现)
const preventReClick= Vue.directive('preventReClick', {
inserted (el, binding) {
el.addEventListener('click', () => {
console.log('aaa')
if (!el.disabled) {
el.disabled = true
setTimeout(() => {
el.disabled = false
}, binding.value || 3000)
}
})
}
})
export default {
preventReClick
}

330
src/views/account/member.vue
View File

@ -1,9 +1,49 @@
<template> <template>
<div class="member-container"> <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"> <el-card class="member-box-card">
<div class="member-info-view"> <div class="member-info-view">
<p class="title pl-5">账号信息</p> <p class="title pl-10">个人信息</p>
<el-divider />
<div v-if="userInfo" class="account-info-view"> <div v-if="userInfo" class="account-info-view">
<table> <table>
<tbody> <tbody>
@ -11,7 +51,7 @@
<td width="80" style="text-align: right;">用户名：</td> <td width="80" style="text-align: right;">用户名：</td>
<td> <td>
{{ userInfo.name }} {{ userInfo.name }}
<el-link type="primary" @click="editDialogVisible=true">修改</el-link> <el-link type="primary" @click="editNameDialogVisible=true">修改</el-link>
</td> </td>
</tr> </tr>
<tr> <tr>
@ -32,7 +72,10 @@
<td width="80" style="text-align: right;">手机号：</td> <td width="80" style="text-align: right;">手机号：</td>
<td> <td>
{{ userInfo.phoneNumber }} {{ 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> </td>
</tr> </tr>
</tbody> </tbody>
@ -57,23 +100,58 @@
</div> </div>
</div> </div>
</div> </div>
<p class="title pl-5">第三方账号</p> <p class="title pl-10">第三方账号</p>
<el-divider /> <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"> <div v-if="userInfo" class="account-info-view">
<table> <table>
<tbody> <tbody>
<tr> <tr>
<td width="80" style="text-align: right;">smile：</td> <td width="80" style="text-align: right;">企业名称：</td>
<td> <td>
{{ userInfo.name }} 字节跳动（上海研发中心）
<el-link type="primary" @click="editDialogVisible=true">修改</el-link>
</td> </td>
</tr> </tr>
<tr> <tr>
<td width="80" style="text-align: right;">smile：</td> <td width="80" style="text-align: right;">企业logo：</td>
<td> <td>
{{ userInfo.name }} <el-link type="primary">上传Logo</el-link>
<el-link type="primary" @click="editDialogVisible=true">修改</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> </td>
</tr> </tr>
</tbody> </tbody>
@ -81,31 +159,39 @@
</div> </div>
</div> </div>
</el-card> </el-card>
<div>
<el-dialog <el-dialog
title="修改用户名" title="修改用户名"
:visible.sync="editNameDialogVisible" :visible.sync="editNameDialogVisible"
width="30%" width="450px"
center 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-form-item label="新用户名" prop="name">
<el-input v-model="userInfo.name" /> <el-input v-model="userInfoForm.name" />
</el-form-item> </el-form-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer">
<el-button type="primary" <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> >保存</el-button>
</span> </span>
</el-dialog> </el-dialog>
<el-dialog <el-dialog
title="修改密码" title="修改密码"
:visible.sync="pwdDialogVisible" :visible.sync="pwdDialogVisible"
width="30%" width="450px"
center center
> >
<el-form ref="form" <el-form ref="updatePassWordForm"
style="width: 80%;" style="width: 300px;"
:model="userPwdForm" :rules="userPwdRules" label-width="120px" :model="userPwdForm" :rules="userPwdRules" label-width="120px"
> >
<el-form-item label="输入旧密码" prop="oldPassword"> <el-form-item label="输入旧密码" prop="oldPassword">
@ -127,15 +213,15 @@
<el-dialog <el-dialog
title="修改邮箱" title="修改邮箱"
:visible.sync="emailDialogVisible" :visible.sync="emailDialogVisible"
width="30%" width="450px"
center center
> >
<el-form ref="form" <el-form ref="form"
style="width: 80%;" style="width: 80%;"
:model="userInfo" :rules="userInfoRules" label-width="80px" :model="userInfoForm" :rules="userInfoRules" label-width="80px"
> >
<el-form-item label="邮箱" prop="email"> <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-item>
</el-form> </el-form>
<span slot="footer" class="dialog-footer"> <span slot="footer" class="dialog-footer">
@ -144,29 +230,65 @@
>发送验证邮件</el-button> >发送验证邮件</el-button>
</span> </span>
</el-dialog> </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> </div>
</template> </template>
<script> <script>
import myUpload from 'vue-image-crop-upload' import myUpload from 'vue-image-crop-upload'
import constants from '@/utils/constants' import constants from '@/utils/constants'
import FontIcon from '@/components/FontIcon'
import {getCurrentDomain} from '@/utils'
export default { export default {
name: 'Member', name: 'Member',
components: { components: {
FontIcon,
myUpload myUpload
}, },
data() { data() {
let validateRePass = (rule, value, callback) => { let validateRePass = (rule, value, callback) => {
if (value === '') { if (value === '') {
callback(new Error('请再次输入密码')) callback(new Error('请再次输入密码'))
} else if (value !== this.resetPwdForm.rePassword) { } else if (value !== this.userPwdForm.repeatPassword) {
callback(new Error('两次输入密码不一致!')) callback(new Error('两次输入密码不一致!'))
} else { } else {
callback() callback()
} }
} }
return { return {
memberMenuActive: '1',
phoneValidateCodeBtnText: '发送验证码',
userInfoRules: { userInfoRules: {
name: [ name: [
{required: true, trigger: 'blur', message: '请输入昵称'} {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}$/, pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
message: '请输入正确的邮箱' message: '请输入正确的邮箱'
} }
],
phoneNumber: [
{required: true, trigger: 'blur', message: '请输入手机号'},
{
pattern: /^(?:0|86|\+86)?1[3456789]\d{9}$/,
message: '请输入正确的手机号'
}
], code: [
{required: true, trigger: 'blur', message: '请输入验证码'}
] ]
}, },
userPwdRules: { userPwdRules: {
@ -200,8 +331,11 @@ export default {
}, },
editNameDialogVisible: false, editNameDialogVisible: false,
pwdDialogVisible: false, pwdDialogVisible: false,
phoneDialogVisible: false,
emailDialogVisible: false, emailDialogVisible: false,
userInfo: {}, userInfo: {},
userInfoForm: {},
qqLoginAuthorizeUrl: '',
userPwdForm: { userPwdForm: {
oldPassword: '', oldPassword: '',
password: '', password: '',
@ -211,13 +345,17 @@ export default {
} }
}, },
created() { created() {
this.queryUserInfo()
this.getQQLoginAuthorizeUrl()
},
methods: {
queryUserInfo() {
this.$api.get('/user/current/detail').then(res => { this.$api.get('/user/current/detail').then(res => {
if (res.data) { if (res.data) {
this.userInfo = res.data this.userInfo = res.data
} }
}) })
}, },
methods: {
getUploadHeader() { getUploadHeader() {
return { return {
'token': this.$store.getters['user/isLogin'] 'token': this.$store.getters['user/isLogin']
@ -227,31 +365,77 @@ export default {
return `${process.env.VUE_APP_API_ROOT}/user/file/upload` return `${process.env.VUE_APP_API_ROOT}/user/file/upload`
}, },
updateUserPwdHandle() { updateUserPwdHandle() {
this.$refs['updatePassWordForm'].validate(valid => {
if (valid) {
this.$api.post('/user/update/password', this.userPwdForm).then(res => { this.$api.post('/user/update/password', this.userPwdForm).then(res => {
if (res.data) { if (res.data) {
console.log(res.data)
this.msgSuccess('修改成功') this.msgSuccess('修改成功')
this.queryUserInfo()
}
})
} else {
return false
} }
}) })
}, },
sendUpdateEmail() { 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) { if (res.data) {
this.msgSuccess('发送成功') 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() { updateUserHandle() {
this.$api.post('/user/update', this.userInfo).then(res => { this.$api.post('/user/update', this.userInfoForm).then(res => {
if (res.data) { if (res.data) {
console.log(res.data)
this.msgSuccess('保存成功') 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) { cropUploadSuccess(res) {
console.log(res) console.log(res)
this.userInfo.avatar = res.data this.userInfoForm.avatar = res.data
this.updateUserHandle() this.updateUserHandle()
} }
} }
@ -265,23 +449,105 @@ export default {
justify-content: center; justify-content: center;
} }
.title { .title {
color: rgba(16, 16, 16, 100);
font-size: 16px; font-size: 16px;
text-align: left;
font-weight: bolder;
} }
.member-box-card { .member-box-card {
margin-top: 20px; margin-top: 20px;
width: 900px; width: 1027px;
height: 747px;
table { table {
color: #666; color: #101010;
font-size: 14px; font-size: 14px;
} }
table tr { table tr {
line-height: 30px; 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 { .account-info-view {
padding: 10px; padding: 10px;
display: flex; display: flex;
justify-content: space-between; 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 { .account-avatar-view {
width: 180px; width: 180px;

Write Preview
Loading…
Cancel
Save