RunForge-Frontend/src/pages/User/setting/components/social-bindings.vue

<template>
  <div class="social-bindings">
    <div class="section-title">第三方账号</div>
    <div class="description">绑定 QQ 和微信后，无论使用哪种方式登录，都会进入当前 沐晨乐跑 账户。</div>

    <div class="account-list">
      <div v-for="item in accounts" :key="item.type" class="account-card">
        <div class="account-info">
          <a-avatar :size="44" v-if="getBinding(item.type)?.avatar" :imageUrl="getBinding(item.type)?.avatar"></a-avatar>
          <a-avatar :size="44" :style="{ backgroundColor: '#FE82A5' }" v-else>
            <icon-qq v-if="item.type === 'qq'" />
            <icon-wechat v-else />
          </a-avatar>
          <div>
            <div class="account-name">{{ item.name }}</div>
            <a-tag :color="isBound(item.type) ? 'green' : 'gray'" size="small">
              {{ isBound(item.type) ? '已绑定' : '未绑定' }}
            </a-tag>
            <div v-if="isBound(item.type)" class="account-nickname">
              昵称：{{ getBinding(item.type)?.nickname || '未获取' }}
            </div>
          </div>
        </div>

        <a-button
          v-if="!isBound(item.type) && isTypeEnabled(item.type)"
          type="primary"
          :loading="state.loadingType === item.type"
          @click="bind(item.type)"
        >
          立即绑定
        </a-button>
        <a-button v-else-if="!isBound(item.type)" disabled>
          已关闭
        </a-button>
        <a-button
          v-else
          status="danger"
          :loading="state.loadingType === item.type"
          @click="unbind(item.type)"
        >
          解绑
        </a-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { onBeforeMount, reactive, ref } from 'vue'
import { getLoginUrl, getUniLoginOptions } from '@/api/login'
import { useUserStore } from '@/store/modules/user'
import { isElectron } from '@/utils/electron'
import { Message, Modal, Notification } from '@arco-design/web-vue'

const userStore = useUserStore()
const user = ref({})
const enabledTypes = ref(['qq', 'wx'])

const state = reactive({
  loadingType: ''
})

const accounts = [
  { type: 'qq', name: 'QQ' },
  { type: 'wx', name: '微信' }
]

const refreshUser = async () => {
  user.value = await userStore.getInfoFromServer()
}

const isBound = (type) => {
  return user.value?.boundTypes?.includes(type) ||
    user.value?.socialBindings?.some(item => item.type === type && item.bound)
}

const getBinding = (type) => {
  return user.value?.socialBindings?.find(item => item.type === type && item.bound) || null
}

const isTypeEnabled = (type) => enabledTypes.value.includes(type)

const refreshOptions = async () => {
  try {
    const res = await getUniLoginOptions()
    if (res?.code === 0 && Array.isArray(res.data?.enabledTypes))
      enabledTypes.value = res.data.enabledTypes
  } catch (error) {
    console.log(error)
  }
}

const bind = async (type) => {
  if (!isTypeEnabled(type)) {
    Message.warning('该绑定方式已关闭')
    return
  }

  try {
    state.loadingType = type
    const res = await getLoginUrl({
      type,
      mode: 'uniLogin',
      action: 'bind',
      from: '/user/setting'
    })
    if (!res || res.code !== 0)
      throw new Error(res?.msg ?? '获取绑定链接失败！')

    if (isElectron())
      window.electron.openNewWindow(res.data)
    else
      window.location.href = res.data
  } catch (error) {
    Notification.error({
      title: '获取绑定链接失败',
      content: error.message || '请稍后再试'
    })
  } finally {
    state.loadingType = ''
  }
}

const unbind = (type) => {
  const accountName = type === 'qq' ? 'QQ' : '微信'
  Modal.confirm({
    title: `解绑${accountName}`,
    content: `解绑后将无法继续通过该${accountName}账号登录当前账户，是否继续？`,
    onOk: async () => {
      try {
        state.loadingType = type
        await userStore.unbindSocial(type)
        await refreshUser()
        Message.success(`${accountName}解绑成功`)
      } catch (error) {
        Notification.error({
          title: `${accountName}解绑失败`,
          content: error.message || '请稍后再试'
        })
      } finally {
        state.loadingType = ''
      }
    }
  })
}

onBeforeMount(async () => {
  await Promise.all([refreshUser(), refreshOptions()])
})
</script>

<style scoped lang="less">
.social-bindings {
  width: min(100%, 560px);
  margin: 0 auto;
}

.description {
  margin-bottom: 18px;
  color: var(--color-text-3);
}

.account-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.account-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px;
  border: 1px solid var(--color-border-2);
  border-radius: 8px;
}

.account-info {
  display: flex;
  align-items: center;
  gap: 14px;
}

.account-name {
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 600;
}

.account-nickname {
  margin-top: 6px;
  color: var(--color-text-3);
  font-size: 12px;
}

@media (max-width: 768px) {
  .social-bindings {
    width: 100%;
  }

  .account-card {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 14px;
  }

  .account-info {
    align-items: flex-start;
  }

  .account-card :deep(.arco-btn) {
    width: 100%;
  }
}
</style>