ljydlv
/
sawAdmin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

添加gitee登录及添加绑定

This commit is contained in:
junleea 2025-04-28 15:37:10 +08:00
parent 64126d55d8
commit 84981e7cc1
5 changed files with 101 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/img/gitee_logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 737 B

17
src/assets/img/gitee_logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/img/github-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 480 B

70
src/views/pages/login.vue
View File

@ -52,23 +52,37 @@
</p>
</el-form>
<div>
<!-- 第三登录 -->
<el-divider content-position="center">第三方登录</el-divider>
<div class="login-text">
<!-- 第三登录 -->
<el-divider content-position="center">第三方登录</el-divider>
<div class="login-text">
<el-row :gutter="20">
<el-col :span="8">
<el-button
class="login-btn"
type="primary"
icon="el-icon-github"
class="github-btn"
@click="thirdLogin('github')"
>GitHub</el-button>
circle
></el-button>
</el-col>
<el-col :span="8">
<el-button
class="login-btn"
type="primary"
:style="{ backgroundImage: `url('${qqButtonBgImage}')` }"
class="gitee-btn"
@click="thirdLogin('gitee')"
circle
></el-button>
</el-col>
<el-col :span="8">
<el-button
type="primary"
class="qq-btn"
@click="thirdLogin('qq')"
></el-button>
</div>
</div>
circle
></el-button>
</el-col>
</el-row>
</div>
</div>
</div>
</div>
</template>
@ -117,6 +131,8 @@ const rules = {
};
// 表单引用
const login = ref(null);
const maxLoginRepeatRequest = 30; //最大请求次数
const currentLoginRequest = ref(0); //当前请求次数
//表单数据
var loginData = ref({
@ -139,7 +155,7 @@ const thirdLogin = async (type) => {
return;
}
let result={};
if(type !== "github" && type !== "qq") {
if(type !== "github" && type !== "qq" && type !== "gitee") {
ElMessage.error("不支持的登录平台！请稍后再试："+type);
return;
@ -156,6 +172,12 @@ const thirdLogin = async (type) => {
}
//获取登录状态每2秒请求一次
let timer = setInterval(async () => {
currentLoginRequest.value++;
if (currentLoginRequest.value > maxLoginRepeatRequest) {
clearInterval(timer);
ElMessage.error("登录超时，请重新登录！");
return;
}
let statusResp = await getThirdPartyLoginStatus({uuid: uuid});
if (statusResp["code"] !== 0) {
ElMessage.error("获取登录状态失败！请稍后再试");
@ -318,4 +340,28 @@ const getMyUserInfo = async (id) => {
font-size: 14px;
color: #787878;
}
.login-text {
text-align: center;
}
.login-btn {
width: 100%;
height: 40px;
line-height: 40px;
border-radius: 5px;
font-size: 16px;
}
.github-btn {
background-image: url(../../assets/img/github-logo.png) !important;
}
.gitee-btn {
background-image: url(../../assets/img/gitee_logo.png) !important;
}
.qq-btn {
background-image: url(https://wiki.connect.qq.com/wp-content/uploads/2016/12/Connect_logo_4.png);
}
</style>

30
src/views/pages/ucenter.vue
View File

@ -76,17 +76,31 @@
<el-select v-model="activePlatformName" placeholder="请选择第三方平台" size="small" style="width: 200px;">
<el-option label="QQ" value="qq"></el-option>
<el-option label="Github" value="github"></el-option>
<el-option label="gitee" value="gitee"></el-option>
</el-select>
<el-button type="primary" @click="thirdLogin(activePlatformName)">绑定</el-button>
</div>
<div>
<p>已绑定的第三方登录账号</p>
<template v-for="(item, index) in thirdPartyUserInfo" :key="index">
<el-tag>{{ item.third_party_platform }}</el-tag>
<!-- 头像 -->
<el-row :gutter="20" class="user-tabpane">
<el-col :span="12">
<el-tag>{{ item.third_party_platform }}</el-tag>
</el-col>
<el-col :span="12">
<el-avatar :src="item.third_party_user_avatar" size="small"></el-avatar>
</el-col>
<el-col :span="12">
<el-tag>{{ item.third_party_user_name }}</el-tag>
</el-col>
<el-col :span="12">
<el-button type="danger" @click="unBindThirdParty(item.ID)">解绑</el-button>
</el-col>
<!-- <el-tag>{{ item.third_party_platform }}</el-tag>
<el-avatar :src="item.third_party_user_avatar" size="small"></el-avatar>
<el-tag>{{ item.third_party_user_name }}</el-tag>
<el-button type="danger" @click="unBindThirdParty(item.ID)">解绑</el-button>
<el-button type="danger" @click="unBindThirdParty(item.ID)">解绑</el-button> -->
</el-row>
</template>
</div>
</el-tab-pane>
@ -139,6 +153,8 @@ const avatarImg = ref('');
const imgSrc = ref('');
const cropImg = ref('');
const cropper: any = ref();
const maxLoginRepeatRequest = 30; //最大请求次数
const currentLoginRequest = ref(0); //当前请求次数
const thirdPartyUserInfo = ref<ThirdPartyUserInfo[]>([]);
@ -363,7 +379,7 @@ const thirdLogin = async (type) => {
return;
}
let result={};
if(type !== "github" && type !== "qq") {
if(type !== "github" && type !== "qq" && type !== "gitee") {
ElMessage.error("不支持的登录平台！请稍后再试："+type);
return;
}
@ -379,6 +395,12 @@ const thirdLogin = async (type) => {
}
//获取登录状态每2秒请求一次
let timer = setInterval(async () => {
currentLoginRequest.value++;
if (currentLoginRequest.value > maxLoginRepeatRequest) {
clearInterval(timer);
ElMessage.error("登录超时，请重新登录！");
return;
}
let statusResp = await getThirdPartyLoginStatus({uuid: uuid});
if (statusResp["code"] !== 0) {
ElMessage.error("获取登录状态失败！请稍后再试");