<template>
|
<div class="app-container">
|
<el-row :gutter="20">
|
<el-col :span="6" :xs="24">
|
<el-card class="box-card">
|
<div slot="header" class="clearfix">
|
<span>个人信息</span>
|
</div>
|
<div>
|
<div class="text-center">
|
<userAvatar :user="user" />
|
</div>
|
<ul class="list-group list-group-striped">
|
<li class="list-group-item">
|
<svg-icon icon-class="user" />用户名称
|
<div class="pull-right">{{ user.userName }}</div>
|
</li>
|
<li class="list-group-item">
|
<svg-icon icon-class="phone" />手机号码
|
<div class="pull-right">{{ user.phonenumber }}</div>
|
</li>
|
<li class="list-group-item">
|
<svg-icon icon-class="email" />用户邮箱
|
<div class="pull-right">{{ user.email }}</div>
|
</li>
|
<li class="list-group-item">
|
<svg-icon icon-class="tree" />所属部门
|
<div v-if="user.dept" class="pull-right">{{ user.dept.deptName }} / {{ postGroup }}</div>
|
</li>
|
<li class="list-group-item">
|
<svg-icon icon-class="peoples" />所属角色
|
<div class="pull-right">{{ roleGroup }}</div>
|
</li>
|
<li class="list-group-item">
|
<svg-icon icon-class="date" />创建日期
|
<div class="pull-right">{{ user.createTime }}</div>
|
</li>
|
<li class="list-group-item">
|
<svg-icon icon-class="wechat" />微信绑定
|
<div v-if="wxbind" style="color:#007AFf" class="pull-right" @click="secureBind">已绑定,点击解绑</div>
|
<div v-else class="pull-right" @click="loginWxCode">未绑定,点击绑定</div>
|
</li>
|
<div id="weixinLogin" style="width: 150px;height: 200px;"></div>
|
</ul>
|
</div>
|
</el-card>
|
</el-col>
|
<el-col :span="18" :xs="24">
|
<el-card>
|
<div slot="header" class="clearfix">
|
<span>基本资料</span>
|
</div>
|
<el-tabs v-model="activeTab">
|
<el-tab-pane label="基本资料" name="userinfo">
|
<userInfo :user="user" />
|
</el-tab-pane>
|
<el-tab-pane label="修改密码" name="resetPwd">
|
<resetPwd />
|
</el-tab-pane>
|
</el-tabs>
|
</el-card>
|
</el-col>
|
</el-row>
|
<el-dialog title="请输入您的密码" :visible.sync="secureBindDialog" width="600px" append-to-body>
|
<el-form label-width="150px">
|
<el-form-item label="密码" prop="pasaward">
|
<el-input v-model="password" style="width: 80%" type="password" />
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="closeSummaryDialog">关 闭</el-button>
|
<el-button class="btns" type="primary" @click="handleSecureBind">确定</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script >
|
import userAvatar from './userAvatar';
|
import userInfo from './userInfo';
|
import resetPwd from './resetPwd';
|
import { getWxBindMsg} from '@/api/login';
|
import { getUserProfile, getLoginParam, secureBind } from '@/api/system/user';
|
|
export default {
|
name: 'Profile',
|
components: { userAvatar, userInfo, resetPwd },
|
data() {
|
return {
|
user: {},
|
roleGroup: {},
|
postGroup: {},
|
activeTab: 'userinfo',
|
qrText: 'fastbee',
|
wxbind: '',
|
secureBindDialog: false,
|
password: '',
|
verifyType: 1,
|
userPhone: '',
|
smsCode: '',
|
};
|
},
|
|
created() {
|
this.getUser();
|
const wxBindMsgId = this.$route.query.wxBindMsgId;
|
if (wxBindMsgId != null && wxBindMsgId !== undefined) {
|
this.getWxBindMsg();
|
} else {
|
console.log('此时没有进行绑定操作！');
|
}
|
},
|
|
mounted() {
|
const script = document.createElement('script');
|
script.type = 'text/javascript',
|
script.src = 'http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js',
|
document.body.appendChild(script);
|
},
|
methods: {
|
getUser() {
|
getUserProfile().then(response => {
|
console.log(response.data);
|
this.user = response.data;
|
this.wxbind = response.wxBind;
|
this.roleGroup = response.roleGroup;
|
this.postGroup = response.postGroup;
|
});
|
},
|
secureBind() {
|
this.secureBindDialog = true;
|
},
|
handleSecureBind() {
|
const params = {
|
password: this.password,
|
verifyType: this.verifyType,
|
userPhone: this.userPhone,
|
smsCode: this.smsCode,
|
};
|
secureBind(params).then(response => {
|
this.loading = true;
|
this.$modal.msgSuccess(response.msg);
|
this.secureBindDialog = false;
|
if (response.code === 200) {
|
this.getUser();
|
}
|
})
|
.catch(() => {
|
// eslint-disable-next-line no-undef
|
this.$modal.msgError(response.msg);
|
this.loading = false;
|
});
|
},
|
closeSummaryDialog() {
|
this.secureBindDialog = false;
|
},
|
// 微信绑定二维码
|
loginWxCode() {
|
getLoginParam().then(response => {
|
// 实例微信js对象
|
// eslint-disable-next-line no-undef
|
const s = document.createElement('script');
|
s.type = 'text/javascript';
|
s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
|
const wxElement = document.body.appendChild(s);
|
wxElement.onload = function () {
|
var obj = new WxLogin({
|
self_redirect: false,
|
id: 'weixinLogin',
|
appid: response.data.appid,
|
scope: response.data.scope,
|
redirect_uri: response.data.redirectUri,
|
state: response.data.state,
|
style: 'black',
|
href: 'data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlIHsKIGRpc3BsYXk6IG5vbmU7Cn0KLmltcG93ZXJCb3ggLnN0YXR1cy5zdGF0dXNfYnJvd3NlciB7CiBkaXNwbGF5OiBub25lOwp9Ci5pbXBvd2VyQm94IC5xcmNvZGUgewogYm9yZGVyOm5vbmU7CiB3aWR0aDogMjAwcHg7CiBoZWlnaHQ6IDIwMHB4OwogbWFyZ2luOjAgYXV0bzsKfQouaW1wb3dlckJveCAuc3RhdHVzewogZGlzcGxheTogbm9uZQp9',
|
});
|
};
|
});
|
},
|
// 获取微信绑定返回结果信息
|
getWxBindMsg() {
|
const query = this.$route.query;
|
const wxBindMsgId = query.wxBindMsgId;
|
getWxBindMsg(wxBindMsgId).then((res) => {
|
this.$modal.msgSuccess(res.msg)
|
.catch(() => {
|
setTimeout(function() {
|
this.$modal.msgError(res.msg);
|
}, 1000);
|
});
|
});
|
},
|
},
|
};
|
</script>
|
<styule lang="scss">
|
// 自定义二维码样式
|
.impowerBox .title {
|
display: none;
|
}
|
.impowerBox .status.status_browser {
|
display: none;
|
}
|
.impowerBox .qrcode {
|
border:none;
|
width: 200px;
|
height: 200px;
|
margin:0 auto;
|
}
|
.impowerBox .status{
|
display: none
|
}
|
</styule>
|
