101 lines
2.8 KiB
Vue
101 lines
2.8 KiB
Vue
|
<template>
|
||
|
|
<el-table :data="socialUsers" :show-header="false">
|
||
|
|
<el-table-column label="社交平台" align="left" width="120">
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<img style="height:20px;vertical-align: middle;" :src="scope.row.img" /> {{ scope.row.title }}
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
<el-table-column label="操作" align="left" >
|
||
|
|
<template slot-scope="scope">
|
||
|
|
<div v-if="scope.row.unionId">
|
||
|
|
已绑定
|
||
|
|
<el-button size="large" type="text" @click="unbind(scope.row)">(解绑)</el-button>
|
||
|
|
</div>
|
||
|
|
<div v-else>
|
||
|
|
未绑定
|
||
|
|
<el-button size="large" type="text" @click="bind(scope.row)">(绑定)</el-button>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</el-table-column>
|
||
|
|
</el-table>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
import {SysUserSocialTypeEnum} from "@/utils/constants";
|
||
|
|
import {socialAuthRedirect, socialBind, socialUnbind} from "@/api/login";
|
||
|
|
|
||
|
|
export default {
|
||
|
|
props: {
|
||
|
|
user: {
|
||
|
|
type: Object
|
||
|
|
},
|
||
|
|
getUser: { // 刷新用户
|
||
|
|
type: Function
|
||
|
|
},
|
||
|
|
setActiveTab: { // 设置激活的
|
||
|
|
type: Function
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
};
|
||
|
|
},
|
||
|
|
computed: {
|
||
|
|
socialUsers (){
|
||
|
|
const socialUsers = [];
|
||
|
|
for (const i in SysUserSocialTypeEnum) {
|
||
|
|
const socialUser = {...SysUserSocialTypeEnum[i]};
|
||
|
|
socialUsers.push(socialUser);
|
||
|
|
if (this.user.socialUsers) {
|
||
|
|
for (const j in this.user.socialUsers) {
|
||
|
|
if (socialUser.type === this.user.socialUsers[j].type) {
|
||
|
|
socialUser.unionId = this.user.socialUsers[j].unionId;
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
return socialUsers;
|
||
|
|
}
|
||
|
|
},
|
||
|
|
created() {
|
||
|
|
// 社交绑定
|
||
|
|
const type = this.$route.query.type;
|
||
|
|
const code = this.$route.query.code;
|
||
|
|
const state = this.$route.query.state;
|
||
|
|
if (!code) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
socialBind(type, code, state).then(resp => {
|
||
|
|
this.msgSuccess("绑定成功");
|
||
|
|
this.$router.replace('/user/profile');
|
||
|
|
// 调用父组件, 刷新
|
||
|
|
this.getUser();
|
||
|
|
this.setActiveTab('userSocial');
|
||
|
|
});
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
bind(socialUser) {
|
||
|
|
// 计算 redirectUri
|
||
|
|
const redirectUri = location.origin + '/user/profile?type=' + socialUser.type;
|
||
|
|
// 进行跳转
|
||
|
|
socialAuthRedirect(socialUser.type, encodeURIComponent(redirectUri)).then((res) => {
|
||
|
|
// console.log(res.url);
|
||
|
|
window.location.href = res.data;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
unbind(socialUser) {
|
||
|
|
socialUnbind(socialUser.type, socialUser.unionId).then(resp => {
|
||
|
|
this.msgSuccess("解绑成功");
|
||
|
|
socialUser.unionId = undefined;
|
||
|
|
});
|
||
|
|
},
|
||
|
|
close() {
|
||
|
|
this.$store.dispatch("tagsView/delView", this.$route);
|
||
|
|
this.$router.push({ path: "/index" });
|
||
|
|
}
|
||
|
|
}
|
||
|
|
};
|
||
|
|
</script>
|