[edit][红包状态]

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

@@ -76,8 +76,7 @@
             <img v-if="state.done.join_discord" :src="require('@/assets/svg/icon-true.svg')" alt />
             <template v-else>
               <div v-if="joinDiscordIng" class="loading-wrapper">
-                <img class="icon-loading"
-                  :src="require('@/assets/svg/icon-loading-gray.svg')"/>
+                <img class="icon-loading" :src="require('@/assets/svg/icon-loading-gray.svg')" />
               </div>
               <div v-else class="btn" @click="joinDiscord">
                 Join
@@ -107,7 +106,8 @@
               <img v-else :src="require('@/assets/svg/icon-twitter.svg')" alt
                 :style="{ left: `${(i) * 16}px`, zIndex: `${10 - i}` }" />
             </template>
-            <img v-if="state.detail.allReceived && state.detail.allReceived.length > 3" :src="require('@/assets/svg/icon-winner-more.svg')" alt
+            <img v-if="state.detail.allReceived && state.detail.allReceived.length > 3"
+              :src="require('@/assets/svg/icon-winner-more.svg')" alt
               :style="{ left: `${3 * 16}px`, zIndex: `${10 - 3}` }" />
           </div>
         </div>
@@ -286,7 +286,7 @@
     </div>
 
   </div>
-  <div style="width: 100%; height: 30px; position: fixed; color: red; top:0;">{{state.detail.validity}}</div>
+  <div style="width: 100%; height: 30px; position: fixed; color: red; top:0;">{{ state.detail.validity }}</div>
 </template>
 
 <script>
@@ -551,7 +551,7 @@ function showLastTwoPlace(n) {
   return n
 }
 
-const showCloseEndTimePage = ()=>{
+const showCloseEndTimePage = () => {
   state.status = 'close'
   state.close_status = '红包过期了'
   state.close_text = [`This Giveaways`, `expired on ${moment(state.detail.endTimestamp).format('MM-DD')}`]
@@ -585,11 +585,11 @@ const showNotOpenPage = () => {
 }
 const showOpenedPage = () => {
   state.status = 'opened'
-  
+
   initTaskDetail()
 }
-const showOpenedPageReport = ()=>{
-// 埋点
+const showOpenedPageReport = () => {
+  // 埋点
   Report.reportLog({
     pageSource: Report.pageSource.task_page,
     businessType: Report.businessType.pageView,
@@ -599,10 +599,10 @@ const showOpenedPageReport = ()=>{
 const showRabbitPage = () => {
   state.status = 'close'
   state.close_status = '没有领到钱'
-  
-  
+
+
 }
-const showRabbitPageReport = ()=> {
+const showRabbitPageReport = () => {
   Report.reportLog({
     pageSource: Report.pageSource.received_empty_rewards_page,
     businessType: Report.businessType.pageView,
@@ -628,7 +628,10 @@ const handleStatusPage = () => {
   //        否则 
   //            显示成功页面
   //    如果 任务完成状态 = 已经过期
-  //        显示已经过期页面
+  //        如果 红包状态 = 进行中
+  //            显示未打开页面
+  //        否则 
+  //            显示已经过期页面
 
   // 如果 我没有领取过 & 红包状态 = 进行中
   //    如果 过了红包的领取截止时间 = true
@@ -667,9 +670,16 @@ const handleStatusPage = () => {
       }
       // 如果 任务完成状态 = 已经过期
     } else {
-      // 显示已经过期页面
-      showCloseEndTimePage()
-      showCloseEndTimePageReport()
+      // 如果 红包状态 = 进行中
+      if (state.detail.status == 1) {
+        // 显示未打开页面
+        showNotOpenPage()
+        // 否则 
+      } else {
+        // 显示已经过期页面
+        showCloseEndTimePage()
+        showCloseEndTimePageReport()
+      }
     }
     // 如果 我没有领取过
   } else {
@@ -1106,11 +1116,11 @@ function checkJoinDiscord() {
   if (joinDiscordActionState == 'joinIng') {
     joinDiscordActionState = 'default';
     let url = getInviteUrl();
-    if(url) {
+    if (url) {
       joinDiscordIng.value = true;
-      checkGuildJoinedStatus({url}, (res = {}) => {
+      checkGuildJoinedStatus({ url }, (res = {}) => {
         joinDiscordIng.value = false;
-        if(res.code == 0) {
+        if (res.code == 0) {
           let { joined } = res.data || {};
           if (joined) {
             state.done.join_discord = true;
@@ -1124,15 +1134,15 @@ function checkJoinDiscord() {
 }
 
 
-const checkGuildJoinedStatus = ({url}, cb) => {
+const checkGuildJoinedStatus = ({ url }, cb) => {
   checkGuildJoined({
-        params: {
-          inviteUrl: url
-        }
+    params: {
+      inviteUrl: url
+    }
   }).then(res => {
     cb && cb(res);
   }).catch(err => {
-    cb && cb({catch:true})
+    cb && cb({ catch: true })
   })
 }
 
@@ -1144,29 +1154,29 @@ async function joinDiscord() {
   if (!_userInfo) {
     return
   }
-  if(joinDiscordIng.value) {
+  if (joinDiscordIng.value) {
     return;
-  } 
+  }
   joinDiscordIng.value = true;
-  let url = getInviteUrl(); 
-  if(url) {
-    checkGuildJoinedStatus({url}, (res) => {
+  let url = getInviteUrl();
+  if (url) {
+    checkGuildJoinedStatus({ url }, (res) => {
       setTimeout(() => {
         joinDiscordIng.value = false;
       }, 1500);
-      if(res.code == 0) {
-          let { joined } = res.data || {};
-          if(joined) {
-            state.done.join_discord = true;
-          } else {
-            openInviteUrl();
-          }
-      } else if(res.code == 1010){
+      if (res.code == 0) {
+        let { joined } = res.data || {};
+        if (joined) {
+          state.done.join_discord = true;
+        } else {
+          openInviteUrl();
+        }
+      } else if (res.code == 1010) {
         discordAuth('authAndJoinIng');
       }
-      if(res.catch) {
+      if (res.catch) {
         //判断是否需要授权
-        if(discordAuthorizeRequired) {
+        if (discordAuthorizeRequired) {
           discordAuth('authAndJoinIng');
         } else {
           openInviteUrl();
@@ -1180,31 +1190,32 @@ async function joinDiscord() {
  * discord授权
  */
 function discordAuth(actionState = 'default') {
-    let state = guid();
-    discordAuthUrl({
-        params : {
-            redirectUrl: discordAuthRedirectUri,
-            state
-        }
-    }).then(res => {
-        if(res.code == 0) {
-            let {authorizeUrl = ''} = res.data || {};
-            if(authorizeUrl) {
-              joinDiscordActionState = actionState; 
-              const width = 500;
-              chrome.windows.create({
-                width, 
-                type:'normal', 
-                url: authorizeUrl}, function(window) {
-                  let windowId = window.id;
-                  callEventPageMethod("RED_PACKET_SAVE_DISCORD_AUTH_WINDOW_ID", {
-                    windowId: windowId
-                  }, function (response) {
-                  });
-              })
-            }
-        }
-    })
+  let state = guid();
+  discordAuthUrl({
+    params: {
+      redirectUrl: discordAuthRedirectUri,
+      state
+    }
+  }).then(res => {
+    if (res.code == 0) {
+      let { authorizeUrl = '' } = res.data || {};
+      if (authorizeUrl) {
+        joinDiscordActionState = actionState;
+        const width = 500;
+        chrome.windows.create({
+          width,
+          type: 'normal',
+          url: authorizeUrl
+        }, function (window) {
+          let windowId = window.id;
+          callEventPageMethod("RED_PACKET_SAVE_DISCORD_AUTH_WINDOW_ID", {
+            windowId: windowId
+          }, function (response) {
+          });
+        })
+      }
+    }
+  })
 }
 
 /**
@@ -1783,9 +1794,10 @@ body {
 
         .loading-wrapper {
           width: 90px;
-          text-align:center;
+          text-align: center;
+
           .icon-loading {
-            animation:loading 1s infinite linear;
+            animation: loading 1s infinite linear;
           }
         }
       }
@@ -2008,20 +2020,23 @@ body {
       z-index: 3;
     }
   }
-  @keyframes loading{
-    from{ 
+
+  @keyframes loading {
+    from {
       transform: rotate(0deg);
-    } 
-    to{
+    }
+
+    to {
       transform: rotate(360deg);
     }
   }
 }
+
 .none {
-    display: flex;
-    align-item: center;
-    justify-content: center;
-    width: 100%;
-    height: 100%;
+  display: flex;
+  align-item: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
 }
 </style>