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

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 })
+}

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>
 

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}`
 }