添加gitee登录及添加绑定

src/views/pages/login.vue

@@ -52,23 +52,37 @@
         </p>
       </el-form>
       <div>
-        <!-- 第三登录 -->
+    <!-- 第三登录 -->
-        <el-divider content-position="center">第三方登录</el-divider>
+    <el-divider content-position="center">第三方登录</el-divider>
-        <div class="login-text">
+    <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>
+            circle
-        </div>
+          ></el-button>
-      </div>
+        </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>

src/views/pages/ucenter.vue

@@ -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("获取登录状态失败！请稍后再试");