ShiShiYiBan/yudao-ui-admin-vue3/src/views/Profile/components/UserSocial.vue

69 lines
2.2 KiB
Vue
Raw Normal View History

2022-07-18 19:06:37 +08:00
<template>
2022-11-16 16:01:36 +08:00
<el-table :data="socialUsers" :show-header="false">
<el-table-column type="seq" title="序号" width="60" fixed="left" />
<el-table-column label="社交平台" align="left" width="120">
<template #default="{ row }">
2022-11-22 23:34:31 +08:00
<img class="h-5 align-middle" :src="row.img" alt="" />
<p class="mr-5">{{ row.title }}</p>
2022-07-18 19:06:37 +08:00
</template>
</el-table-column>
2022-11-16 16:01:36 +08:00
<el-table-column label="操作" align="center">
<template #default="{ row }">
<template v-if="row.openid">
2022-07-18 19:06:37 +08:00
已绑定
2022-11-22 23:34:31 +08:00
<XTextButton type="primary" class="mr-5" @click="unbind(row)" title="(解绑)" />
2022-11-16 16:01:36 +08:00
</template>
<template v-else>
2022-07-18 19:06:37 +08:00
未绑定
2022-11-22 23:34:31 +08:00
<XTextButton type="primary" class="mr-5" @click="bind(row)" title="(绑定)" />
2022-11-16 16:01:36 +08:00
</template>
2022-07-18 19:06:37 +08:00
</template>
</el-table-column>
</el-table>
</template>
2022-11-16 16:01:36 +08:00
<script setup lang="ts">
2022-11-22 22:03:02 +08:00
import { useMessage } from '@/hooks/web/useMessage'
2022-11-16 16:01:36 +08:00
import { SystemUserSocialTypeEnum } from '@/utils/constants'
import { getUserProfileApi, ProfileVO } from '@/api/system/user/profile'
import { socialAuthRedirect, socialUnbind } from '@/api/system/user/socialUser'
2022-11-22 22:03:02 +08:00
const message = useMessage()
2022-11-16 16:01:36 +08:00
const socialUsers = ref<any[]>([])
const userInfo = ref<ProfileVO>()
2022-11-22 22:03:02 +08:00
2022-11-16 16:01:36 +08:00
const initSocial = async () => {
const res = await getUserProfileApi()
userInfo.value = res
for (const i in SystemUserSocialTypeEnum) {
const socialUser = { ...SystemUserSocialTypeEnum[i] }
socialUsers.value.push(socialUser)
if (userInfo.value?.socialUsers) {
for (const j in userInfo.value.socialUsers) {
if (socialUser.type === userInfo.value.socialUsers[j].type) {
socialUser.openid = userInfo.value.socialUsers[j].openid
break
}
}
}
}
}
const bind = (row) => {
const redirectUri = location.origin + '/user/profile?type=' + row.type
// 进行跳转
socialAuthRedirect(row.type, encodeURIComponent(redirectUri)).then((res) => {
window.location.href = res.data
})
}
const unbind = async (row) => {
const res = await socialUnbind(row.type, row.openid)
if (res) {
row.openid = undefined
}
2022-11-22 22:03:02 +08:00
message.success('解绑成功')
2022-11-16 16:01:36 +08:00
}
onMounted(async () => {
await initSocial()
})
</script>