[edit] discord

src/view/iframe/publish/give-dialog.vue

@@ -262,12 +262,9 @@
                                 <div class="submit-btn"
                                     :class="{ 'disabled-submit': iptErrMsgTxt != '' && !depositGuide }"
                                     @click="confirm">
-                                    <img
-                                        class="icon-loading"
+                                    <img  class="icon-loading"
                                         v-if="submitIng"
-                                        :src="
-                                            require('@/assets/svg/icon-btn-loading.svg')
-                                        "
+                                        :src="require('@/assets/svg/icon-btn-loading.svg')"
                                     />
                                     {{iptErrMsgTxt ? iptErrMsgTxt : 'NEXT'}}
                                 </div>
@@ -448,6 +445,7 @@ let currentCurrencyInfo = ref({
 
 const discordIptErrTxt = 'Discord invite link is wrong';
 const discordIptEmptyErrTxt = 'Enter discord invite link';
+const discordIptNerverExpiresErrTxt = 'Make sure the Discord link never expires'
 let iptErrType = ''; //discord
 
 let formList = reactive([
@@ -1096,9 +1094,15 @@ const setDiscordErrTxt = (params = {showPop: false}) => {
                         iptErrMsgTxt.value = discordIptErrTxt;
                         iptErrType = 'discord';
                     } else {
-                        if(iptErrMsgTxt.value) {
-                            iptErrMsgTxt.value = '';
+                        if(res.data.expires == null) {
+                            // 不是永久邀请链接
+                            iptErrMsgTxt.value = discordIptNerverExpiresErrTxt;
                             iptErrType = '';
+                        } else {
+                            if(iptErrMsgTxt.value) {
+                                iptErrMsgTxt.value = '';
+                                iptErrType = '';
+                            }
                         }
                         if(params.showPop && res.data) {
                             showDiscordInvitePop.value = true;
@@ -1191,6 +1195,7 @@ const getDiscordInviteInfo = (inviteUrl, cb) => {
                 guildId: id,
                 inviteUrl,
                 inviteCode,
+                expires: res.expires_at,
                 name,
                 icon,
             }

src/view/iframe/red-packet/red-packet.vue

@@ -67,9 +67,15 @@
             <img :src="require('@/assets/gif/red-right.gif')" alt class="red-right"
               v-show="!data.done.join_discord && data.done.join_discord_red" />
             <img v-if="data.done.join_discord" :src="require('@/assets/svg/icon-true.svg')" alt />
-            <div v-else class="btn" @click="joinDiscord">
-              Join
-            </div>
+            <template v-else>
+              <div v-if="joinDiscordIng" class="loading-wrapper">
+                <img class="icon-loading"
+                  :src="require('@/assets/svg/icon-loading-gray.svg')"/>
+              </div>
+              <div v-else class="btn" @click="joinDiscord">
+                Join
+              </div>
+            </template>
           </template>
         </div>
       </div>
@@ -255,7 +261,7 @@ export default {
 }
 </script>
 <script setup>
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { getPostDetail, getRedPacket, finishRedPacket, oneKeyLike, oneKeyReTweet, oneKeyFollow, getTaskDetail, getReceivedList } from '@/http/redPacket.js'
 import { getQueryString, guid } from '@/uilts/help.js'
 import { message } from 'ant-design-vue';
@@ -271,7 +277,7 @@ var moment = require('moment');
 
 let discordAuthorizeRequired = false;
 let joinDiscordActionState = 'default'; //authAndJoinIng  joinIng  reAuth
-let joinDiscordIng = false;
+let joinDiscordIng = ref(false);
 
 let data = reactive({
   status: '',
@@ -1016,11 +1022,9 @@ function checkJoinDiscord() {
     joinDiscordActionState = 'default';
     let url = getInviteUrl();
     if(url) {
-      checkGuildJoined({
-        params: {
-          inviteUrl: url
-        }
-      }).then(res => {
+      joinDiscordIng.value = true;
+      checkGuildJoinedStatus({url}, (res = {}) => {
+        joinDiscordIng.value = false;
         if(res.code == 0) {
           let { joined } = res.data || {};
           if(joined) {
@@ -1034,22 +1038,56 @@ function checkJoinDiscord() {
   }
 }
 
+
+const checkGuildJoinedStatus = ({url}, cb) => {
+  checkGuildJoined({
+        params: {
+          inviteUrl: url
+        }
+  }).then(res => {
+    cb && cb(res);
+  }).catch(err => {
+    cb && cb({catch:true})
+  })
+}
+
 /**
  * 加入discord 事件
  */
-function joinDiscord() {
-  if(joinDiscordIng) {
+async function joinDiscord() {
+  let _userInfo = await checkIsLogin();
+  if (!_userInfo) {
+    return
+  }
+  if(joinDiscordIng.value) {
     return;
   } 
-  joinDiscordIng = true;
-  setTimeout(() => {
-    joinDiscordIng = false;
-  }, 1500);
-  //判断是否需要授权
-  if(discordAuthorizeRequired) {
-    discordAuth('authAndJoinIng');
-  } else {
-    openInviteUrl();
+  joinDiscordIng.value = true;
+  let url = getInviteUrl(); 
+  if(url) {
+    checkGuildJoinedStatus({url}, (res) => {
+      setTimeout(() => {
+        joinDiscordIng.value = false;
+      }, 1500);
+      if(res.code == 0) {
+          let { joined } = res.data || {};
+          if(joined) {
+            data.done.join_discord = true;
+          } else {
+            openInviteUrl();
+          }
+      } else if(res.code == 1010){
+        discordAuth('authAndJoinIng');
+      }
+      if(res.catch) {
+        //判断是否需要授权
+        if(discordAuthorizeRequired) {
+          discordAuth('authAndJoinIng');
+        } else {
+          openInviteUrl();
+        }
+      }
+    })
   }
 }
 
@@ -1646,6 +1684,14 @@ body {
           color: #1D9BF0;
           cursor: pointer;
         }
+
+        .loading-wrapper {
+          width: 90px;
+          text-align:center;
+          .icon-loading {
+            animation:loading 1s infinite linear;
+          }
+        }
       }
     }
 
@@ -1874,5 +1920,13 @@ body {
       z-index: 3;
     }
   }
+  @keyframes loading{
+    from{ 
+      transform: rotate(0deg);
+    } 
+    to{
+      transform: rotate(360deg);
+    }
+  }
 }
 </style>