wangqiao/front-pc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
wangqiao
2025-09-14 10:41:15 +08:00
parent cef6c8c341
commit a0a44b4551
3 changed files with 56 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
api/personal-center/index.ts
View File

@ -118,7 +118,9 @@ 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,
})
}
/***
@ -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 })
}

45
pages/personal-Center/index/account-bind.vue
View File

@ -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>

6
utils/login.ts
View File

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