|
@@ -44,9 +44,9 @@
|
|
|
<img class="icon" src="../../assets/user/fenxiang-icon@3x (1).png" alt="" />
|
|
<img class="icon" src="../../assets/user/fenxiang-icon@3x (1).png" alt="" />
|
|
|
</div>
|
|
</div>
|
|
|
<div class="text2">昵称</div>
|
|
<div class="text2">昵称</div>
|
|
|
- <div class="text3">{{ userInfo.username }}</div>
|
|
|
|
|
|
|
+ <div class="text3">{{ userInfo.nickname || userInfo.username }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="text4" @click="Auths">修改</div>
|
|
|
|
|
|
|
+ <div class="text4" @click="username">修改</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="box">
|
|
<div class="box">
|
|
|
<div class="text">
|
|
<div class="text">
|
|
@@ -56,7 +56,17 @@
|
|
|
<div class="text2">编码</div>
|
|
<div class="text2">编码</div>
|
|
|
<div class="text3">{{ userInfo.id }}</div>
|
|
<div class="text3">{{ userInfo.id }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="text4">复制</div>
|
|
|
|
|
|
|
+ <div class="text4" :data-clipboard-text="userInfo.id" @click="copy">复制</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="box">
|
|
|
|
|
+ <div class="text">
|
|
|
|
|
+ <div class="text1">
|
|
|
|
|
+ <span class="el-icon-document"></span>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="text2">简介</div>
|
|
|
|
|
+ <div class="text3 text5">{{ userInfo.intro || '暂无介绍' }}</div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <div class="text4" @click="intro">修改</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="box">
|
|
<div class="box">
|
|
|
<div class="text">
|
|
<div class="text">
|
|
@@ -66,7 +76,7 @@
|
|
|
<div class="text2">邮箱</div>
|
|
<div class="text2">邮箱</div>
|
|
|
<div class="text3">{{ userInfo.email || '暂无' }}</div>
|
|
<div class="text3">{{ userInfo.email || '暂无' }}</div>
|
|
|
</div>
|
|
</div>
|
|
|
- <div class="text4" @click="Auths">修改</div>
|
|
|
|
|
|
|
+ <div class="text4" @click="open">修改</div>
|
|
|
</div>
|
|
</div>
|
|
|
<div class="border"></div>
|
|
<div class="border"></div>
|
|
|
<div class="name">账号安全</div>
|
|
<div class="name">账号安全</div>
|
|
@@ -118,6 +128,7 @@
|
|
|
<script>
|
|
<script>
|
|
|
import { mapState } from 'vuex';
|
|
import { mapState } from 'vuex';
|
|
|
import resolveUrl from 'resolve-url';
|
|
import resolveUrl from 'resolve-url';
|
|
|
|
|
+import Clipboard from 'clipboard';
|
|
|
import FansInfo from '../../components/FansInfo.vue';
|
|
import FansInfo from '../../components/FansInfo.vue';
|
|
|
export default {
|
|
export default {
|
|
|
created() {
|
|
created() {
|
|
@@ -129,7 +140,8 @@ export default {
|
|
|
tabs: ['粉丝', '关注'],
|
|
tabs: ['粉丝', '关注'],
|
|
|
active: '',
|
|
active: '',
|
|
|
list: [],
|
|
list: [],
|
|
|
- empty: false
|
|
|
|
|
|
|
+ empty: false,
|
|
|
|
|
+ value: ''
|
|
|
};
|
|
};
|
|
|
},
|
|
},
|
|
|
computed: {
|
|
computed: {
|
|
@@ -214,10 +226,91 @@ export default {
|
|
|
}
|
|
}
|
|
|
// ROLE_INSTITUTION 企业
|
|
// ROLE_INSTITUTION 企业
|
|
|
// ROLE_PERSONAL 个人
|
|
// ROLE_PERSONAL 个人
|
|
|
|
|
+ },
|
|
|
|
|
+ username() {
|
|
|
|
|
+ this.value = this.userInfo.nickname;
|
|
|
|
|
+ console.log(this.value);
|
|
|
|
|
+ this.$prompt('请输入昵称', '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ customClass: 'myClass'
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(({ value }) => {
|
|
|
|
|
+ this.updateUser({ nickname: value }).then(res => {
|
|
|
|
|
+ // console.log(res);
|
|
|
|
|
+ });
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(() => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ type: 'info',
|
|
|
|
|
+ message: '取消输入'
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ intro() {
|
|
|
|
|
+ this.$prompt('请输入简介', '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ inputType: 'textarea',
|
|
|
|
|
+ customClass: 'myClass'
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(({ value }) => {
|
|
|
|
|
+ this.updateUser({ intro: value }).then(res => {
|
|
|
|
|
+ // console.log(res);
|
|
|
|
|
+ });
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(() => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ type: 'info',
|
|
|
|
|
+ message: '取消输入'
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ open() {
|
|
|
|
|
+ this.$prompt('请输入邮箱', '提示', {
|
|
|
|
|
+ confirmButtonText: '确定',
|
|
|
|
|
+ cancelButtonText: '取消',
|
|
|
|
|
+ customClass: 'myClass',
|
|
|
|
|
+ inputPattern:
|
|
|
|
|
+ /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
|
|
|
|
|
+ inputErrorMessage: '邮箱格式不正确'
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(({ value }) => {
|
|
|
|
|
+ this.updateUser({ email: value }).then(res => {
|
|
|
|
|
+ // console.log(res);
|
|
|
|
|
+ });
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(() => {
|
|
|
|
|
+ this.$message({
|
|
|
|
|
+ type: 'info',
|
|
|
|
|
+ message: '取消输入'
|
|
|
|
|
+ });
|
|
|
|
|
+ });
|
|
|
|
|
+ },
|
|
|
|
|
+ copy() {
|
|
|
|
|
+ var clipboard = new Clipboard('.text4');
|
|
|
|
|
+ clipboard.on('success', e => {
|
|
|
|
|
+ clipboard.destroy();
|
|
|
|
|
+ this.$message.success('复制成功');
|
|
|
|
|
+ });
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
};
|
|
};
|
|
|
</script>
|
|
</script>
|
|
|
|
|
+<style lang="less">
|
|
|
|
|
+.myClass {
|
|
|
|
|
+ .el-button {
|
|
|
|
|
+ background: linear-gradient(133deg, @prim 0%, @warn 100%);
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ border: 0;
|
|
|
|
|
+ }
|
|
|
|
|
+ .el-button:nth-last-child(2) {
|
|
|
|
|
+ background: #c4c7cc;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ font-size: 13px;
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</style>
|
|
|
<style lang="less" scoped>
|
|
<style lang="less" scoped>
|
|
|
.container {
|
|
.container {
|
|
|
.border2 {
|
|
.border2 {
|
|
@@ -236,10 +329,18 @@ export default {
|
|
|
color: #ccc;
|
|
color: #ccc;
|
|
|
margin: 10px 0 0 17px;
|
|
margin: 10px 0 0 17px;
|
|
|
}
|
|
}
|
|
|
|
|
+ // /deep/ .el-message-box {
|
|
|
|
|
+ // /deep/ .el-message-box__btns {
|
|
|
|
|
+ // /deep/ .el-button {
|
|
|
|
|
+ // background: red !important;
|
|
|
|
|
+ // }
|
|
|
|
|
+ // }
|
|
|
|
|
+ // }
|
|
|
.top {
|
|
.top {
|
|
|
height: 146px;
|
|
height: 146px;
|
|
|
width: 970px;
|
|
width: 970px;
|
|
|
}
|
|
}
|
|
|
|
|
+
|
|
|
.top1 {
|
|
.top1 {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: center;
|
|
justify-content: center;
|
|
@@ -292,6 +393,11 @@ export default {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
justify-content: space-between;
|
|
|
padding: 16px 0;
|
|
padding: 16px 0;
|
|
|
|
|
+ .myClass {
|
|
|
|
|
+ background: linear-gradient(133deg, @prim 0%, @warn 100%) !important;
|
|
|
|
|
+ border-radius: 4px;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ }
|
|
|
.text {
|
|
.text {
|
|
|
display: flex;
|
|
display: flex;
|
|
|
.text1 {
|
|
.text1 {
|