优化账号绑定功能及社交解绑

2025-09-14 10:41:15 +08:00
parent cef6c8c341
commit a0a44b4551
3 changed files with 56 additions and 20 deletions
--- a/api/personal-center/index.ts
+++ b/api/personal-center/index.ts
@ -66,13 +66,13 @@ export const updateUserAuthInfo = (params: UserAuthInfoRespVO) => {
 * 获得内容信息分页
 */
 export const getContentPage = (params: { type: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/project-history/page', {query:params})
+  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/project-history/page', { query: params })
 }
 /**
 * 获得用户项目工具箱下载分页
 */
 export const getUserToolBoxPage = (params: { pageNum: number; pageSize: number; type?: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/project-member-file/page', {query:params})
+  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/project-member-file/page', { query: params })
 }

 /**
@ -92,20 +92,20 @@ export const signIn = () => {
 * 获得用户积分记录分页
 */
 export const getUserPointPage = (params: { pageNo: number; pageSize: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultMemberPointRecordRespVO>>('/prod-api/app-api/member/point/record/page', {query:params})
+  return useDollarFetchRequest.get<IResponse<PageResultMemberPointRecordRespVO>>('/prod-api/app-api/member/point/record/page', { query: params })
 }
 /**
 * 近期收益和近期活跃
 */
 export const getRecentIncomeAndActive = (params: { type: number; limit: number }) => {
-  return useDollarFetchRequest.get<IResponse<UserStatisticsLineRespVO>>('/prod-api/app-api/member/statistics/line', {query:params})
+  return useDollarFetchRequest.get<IResponse<UserStatisticsLineRespVO>>('/prod-api/app-api/member/statistics/line', { query: params })
 }
 /**
 * 
 资源下载分布
 */
 export const getResourceDistribution = (params: { type: number; limit: number }) => {
-  return useDollarFetchRequest.get<IResponse<UserStatisticsBarRespVO>>('/prod-api/app-api/member/statistics/bar', {query:params})
+  return useDollarFetchRequest.get<IResponse<UserStatisticsBarRespVO>>('/prod-api/app-api/member/statistics/bar', { query: params })
 }
 /**
 * 我的数据统计 包括我的金币 我的关注 我的发布等等
@ -118,14 +118,16 @@ export const getUserStatistics = () => {
 * 获得项目订单用户收藏信息分页
 */
 export const getUserFavoritePage = (params: { pageNo: number; pageSize: number; userId: any; type: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultProjectMemberFavoritesRespVO>>('/prod-api/app-api/business/project-member-favorites/page', {query:params})
+  return useDollarFetchRequest.get<IResponse<PageResultProjectMemberFavoritesRespVO>>('/prod-api/app-api/business/project-member-favorites/page', {
+    query: params,
+  })
 }

 /***
 * 自己发布的-内容信息分页
 */
 export const getOwnContentPage = (params: { pageNo: number; pageSize: number; type: number }) => {
-  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/app/project-draw/my-page', {query:params})
+  return useDollarFetchRequest.get<IResponse<PageResultProjectHistoryResVO>>('/prod-api/app-api/business/app/project-draw/my-page', { query: params })
 }

 /**
@ -148,3 +150,10 @@ export const deleteResource = (params: { id: number }) => {
 export const getUserExtend = () => {
  return useFetchRequest.get<IResponse<UserExtendRespVO>>('/prod-api/app-api/member/user-extend/get', {})
 }
+
+/**
+ * 取消社交绑定
+ */
+export const cancelSocialBind = (params: { type: number; openid: string }) => {
+  return useDollarFetchRequest.del<IResponse<boolean>>('/prod-api/app-api/member/social-user/unbind', { query: params })
+}
--- a/pages/personal-Center/index/account-bind.vue
+++ b/pages/personal-Center/index/account-bind.vue
@ -6,26 +6,31 @@
          <el-icon size="32" color="#007AFF"><Iphone /></el-icon>
          <!-- <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" /> -->
          <div class="ml-[19px] w-fit flex flex-col">
-            <div class="color-#333 text-15px mb-4px">手机号</div><div class="color-#999">手机号可以用于登录帐号{{ user.mobile }}</div></div
+            <div class="color-#333 text-15px mb-4px">手机号{{ user.mobile ? '（已绑定）' : '' }}</div
+            ><div class="color-#999">手机号可以用于登录帐号{{ user.mobile }}</div></div
          >
        </div>
-        <el-button type="primary" class="ml-10px" :disabled="!!user.mobile">{{ user.mobile ? '已绑定' : '绑定' }}</el-button>
+        <el-button :type="user.mobile ? 'danger' : 'primary'" class="ml-10px">{{ user.mobile ? '解绑' : '绑定' }}</el-button>
      </div>
      <div class="mt-[30px] flex items-center justify-between">
        <div class="flex items-center">
          <img src="~/assets/images/qq-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
-          <div class="ml-[19px] w-fit flex flex-col"> <div class="color-#333 text-15px mb-4px">QQ</div><div class="color-#999">QQ可以用于登录帐号</div></div>
+          <div class="ml-[19px] w-fit flex flex-col">
+            <div class="color-#333 text-15px mb-4px">QQ{{ user.qqOpenId ? '（已绑定）' : '' }}</div
+            ><div class="color-#999">QQ可以用于登录帐号</div></div
+          >
        </div>
-        <el-button type="primary" class="ml-10px" :disabled="!!user.qqOpenId" @click="handleBind('qq')">{{ user.qqOpenId ? '已绑定' : '绑定' }}</el-button>
+        <el-button :type="user.qqOpenId ? 'danger' : 'primary'" class="ml-10px" @click="handleBind('qq')">{{ user.qqOpenId ? '解绑' : '绑定' }}</el-button>
      </div>
      <div class="mt-[30px] flex items-center justify-between">
        <div class="flex items-center">
          <img src="~/assets/images/weixin-v2.png" alt="" srcset="" class="h-[35px] w-[34px]" />
          <div class="ml-[19px] w-fit flex flex-col">
-            <div class="color-#333 text-15px mb-4px">微信</div><div class="color-#999">微信可以用于登录帐号</div></div
+            <div class="color-#333 text-15px mb-4px">微信{{ user.wxOpenId ? '（已绑定）' : '' }}</div
+            ><div class="color-#999">微信可以用于登录帐号</div></div
          >
        </div>
-        <el-button type="primary" class="ml-10px" :disabled="!!user.wxOpenId" @click="handleBind('wx')">{{ user.wxOpenId ? '已绑定' : '绑定' }}</el-button>
+        <el-button :type="user.wxOpenId ? 'danger' : 'primary'" class="ml-10px" @click="handleBind('wx')">{{ user.wxOpenId ? '解绑' : '绑定' }}</el-button>
      </div>
    </div>
  </div>
@ -34,7 +39,8 @@
 <script setup lang="ts">
  import { Iphone } from '@element-plus/icons-vue'
  import { onMounted } from 'vue'
-  import { getUserInfo } from '~/api/personal-center/index'
+  import { handleLoginQQ, handleLoginWechat } from '~/utils/login'
+  import { getUserInfo, cancelSocialBind } from '~/api/personal-center/index'
  import type { UserExtendRespVO } from '~/api/personal-center/types'
  onMounted(() => {
    getUser()
@ -48,7 +54,30 @@
  }

  const handleBind = (type: string) => {
-    console.log(type)
+    if (type === 'qq') {
+      if (user.value.qqOpenId) {
+        cancelSocialBind({ type: 35, openid: user.value.qqOpenId }).then((res) => {
+          if (res.code === 0) {
+            ElMessage.success('解绑成功')
+            getUser()
+          }
+        })
+      } else {
+        handleLoginQQ()
+      }
+    }
+    if (type === 'wx') {
+      if (user.value.wxOpenId) {
+        cancelSocialBind({ type: 32, openid: user.value.wxOpenId }).then((res) => {
+          if (res.code === 0) {
+            getUser()
+            ElMessage.success('解绑成功')
+          }
+        })
+      } else {
+        handleLoginWechat()
+      }
+    }
  }
 </script>

--- a/utils/login.ts
+++ b/utils/login.ts
@ -13,19 +13,17 @@ export const generateRandomString = (length: number) => {

 // QQ登录
 export const handleLoginQQ = () => {
-  const appId = QQ_APP_ID // APP ID
  const redirectUri = encodeURIComponent('https://tuxixi.net?type=35') // 回调地址
  const state = generateRandomString(16) // 生成随机state
  // 存储state用于后续验证
  localStorage.setItem('qq_login_state', state)
-  window.location.href = `https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=${appId}&redirect_uri=${redirectUri}&state=${state}`
+  window.location.href = `https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=${QQ_APP_ID}&redirect_uri=${redirectUri}&state=${state}`
 }

 export const handleLoginWechat = () => {
-  const appId = WECHAT_APP_ID // APP ID
  const redirectUri = encodeURIComponent('https://tuxixi.net?type=32') // 回调地址
  const state = generateRandomString(16) // 生成随机state
  // 存储state用于后续验证
  localStorage.setItem('wechat_login_state', state)
-  window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_login&state=${state}`
-}
+  window.location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=${WECHAT_APP_ID}&redirect_uri=${redirectUri}&response_type=code&scope=snsapi_login&state=${state}`
+}