| 提交 | 用户 | 时间 | ||
| 314507 | 1 | <template> |
| H | 2 | <el-table :data="socialUsers" :show-header="false"> |
| 3 | <el-table-column fixed="left" title="序号" type="seq" width="60" /> | |
| 4 | <el-table-column align="left" label="社交平台" width="120"> | |
| 5 | <template #default="{ row }"> | |
| 6 | <img :src="row.img" alt="" class="h-5 align-middle" /> | |
| 7 | <p class="mr-5">{{ row.title }}</p> | |
| 8 | </template> | |
| 9 | </el-table-column> | |
| 10 | <el-table-column align="center" label="操作"> | |
| 11 | <template #default="{ row }"> | |
| 12 | <template v-if="row.openid"> | |
| 13 | 已绑定 | |
| 14 | <XTextButton class="mr-5" title="(解绑)" type="primary" @click="unbind(row)" /> | |
| 15 | </template> | |
| 16 | <template v-else> | |
| 17 | 未绑定 | |
| 18 | <XTextButton class="mr-5" title="(绑定)" type="primary" @click="bind(row)" /> | |
| 19 | </template> | |
| 20 | </template> | |
| 21 | </el-table-column> | |
| 22 | </el-table> | |
| 23 | </template> | |
| 24 | <script lang="ts" setup> | |
| 25 | import { SystemUserSocialTypeEnum } from '@/utils/constants' | |
| 26 | import { getUserProfile, ProfileVO } from '@/api/system/user/profile' | |
| 27 | import { socialAuthRedirect, socialBind, socialUnbind } from '@/api/system/user/socialUser' | |
| 28 | ||
| 29 | defineOptions({ name: 'UserSocial' }) | |
| 30 | defineProps<{ | |
| 31 | activeName: string | |
| 32 | }>() | |
| 33 | const message = useMessage() | |
| 34 | const socialUsers = ref<any[]>([]) | |
| 35 | const userInfo = ref<ProfileVO>() | |
| 36 | ||
| 37 | const initSocial = async () => { | |
| 38 | socialUsers.value = [] // 重置避免无限增长 | |
| 39 | const res = await getUserProfile() | |
| 40 | userInfo.value = res | |
| 41 | for (const i in SystemUserSocialTypeEnum) { | |
| 42 | const socialUser = { ...SystemUserSocialTypeEnum[i] } | |
| 43 | socialUsers.value.push(socialUser) | |
| 44 | if (userInfo.value?.socialUsers) { | |
| 45 | for (const j in userInfo.value.socialUsers) { | |
| 46 | if (socialUser.type === userInfo.value.socialUsers[j].type) { | |
| 47 | socialUser.openid = userInfo.value.socialUsers[j].openid | |
| 48 | break | |
| 49 | } | |
| 50 | } | |
| 51 | } | |
| 52 | } | |
| 53 | } | |
| 54 | const route = useRoute() | |
| 55 | const emit = defineEmits<{ | |
| 56 | (e: 'update:activeName', v: string): void | |
| 57 | }>() | |
| 58 | const bindSocial = () => { | |
| 59 | // 社交绑定 | |
| 60 | const type = getUrlValue('type') | |
| 61 | const code = route.query.code | |
| 62 | const state = route.query.state | |
| 63 | if (!code) { | |
| 64 | return | |
| 65 | } | |
| 66 | socialBind(type, code, state).then(() => { | |
| 67 | message.success('绑定成功') | |
| 68 | emit('update:activeName', 'userSocial') | |
| 69 | }) | |
| 70 | } | |
| 71 | ||
| 72 | // 双层 encode 需要在回调后进行 decode | |
| 73 | function getUrlValue(key: string): string { | |
| 74 | const url = new URL(decodeURIComponent(location.href)) | |
| 75 | return url.searchParams.get(key) ?? '' | |
| 76 | } | |
| 77 | ||
| 78 | const bind = (row) => { | |
| 79 | // 双层 encode 解决钉钉回调 type 参数丢失的问题 | |
| 80 | const redirectUri = location.origin + '/user/profile?' + encodeURIComponent(`type=${row.type}`) | |
| 81 | // 进行跳转 | |
| 82 | socialAuthRedirect(row.type, encodeURIComponent(redirectUri)).then((res) => { | |
| 83 | window.location.href = res | |
| 84 | }) | |
| 85 | } | |
| 86 | const unbind = async (row) => { | |
| 87 | const res = await socialUnbind(row.type, row.openid) | |
| 88 | if (res) { | |
| 89 | row.openid = undefined | |
| 90 | } | |
| 91 | message.success('解绑成功') | |
| 92 | } | |
| 93 | ||
| 94 | onMounted(async () => { | |
| 95 | await initSocial() | |
| 96 | }) | |
| 97 | ||
| 98 | watch( | |
| 99 | () => route, | |
| 100 | () => { | |
| 101 | bindSocial() | |
| 102 | }, | |
| 103 | { | |
| 104 | immediate: true | |
| 105 | } | |
| 106 | ) | |
| 107 | </script> | |
