pms-iot/yudao-ui-admin/src/views/system/user/profile/userSocial.vue

<template>
  <el-table :data="socialUsers" :show-header="false">
    <el-table-column label="社交平台" align="left" width="120">
      <template v-slot="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 v-slot="scope">
        <div v-if="scope.row.openid">
          已绑定
          <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 {SystemUserSocialTypeEnum} from "@/utils/constants";
import {socialAuthRedirect} from "@/api/login";
import {socialBind, socialUnbind} from "@/api/system/socialUser";

export default {
  props: {
    user: {
      type: Object
    },
    getUser: { // 刷新用户
      type: Function
    },
    setActiveTab: { // 设置激活的
      type: Function
    }
  },
  data() {
    return {
    };
  },
  computed: {
    socialUsers (){
      const socialUsers = [];
      for (const i in SystemUserSocialTypeEnum) {
        const socialUser = {...SystemUserSocialTypeEnum[i]};
        socialUsers.push(socialUser);
        if (this.user.socialUsers) {
          for (const j in this.user.socialUsers) {
            if (socialUser.type === this.user.socialUsers[j].type) {
              socialUser.openid = this.user.socialUsers[j].openid;
              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.$modal.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.openid).then(resp => {
        this.$modal.msgSuccess("解绑成功");
        socialUser.openid = undefined;
      });
    },
    close() {
      this.$tab.closePage();
    }
  }
};
</script>