[edit][cookie check]

src/logic/twitter.js

@@ -1,5 +1,5 @@
 /* eslint-disable */
-import { getChromeStorage, setChromeStorage } from '../uilts/chromeExtension.js'
+import { getChromeStorage, setChromeStorage,LANDING_PAGE } from '../uilts/chromeExtension.js'
 import { getTtwitterRequestToken, twitterLogin } from '../server/twitter.js'
 import { srcPublishSuccess } from '../http/publishApi'
 
@@ -41,11 +41,7 @@ export function backTwitterPinLoginCode(code) {
             }
         }
     })
-    chrome.cookies.getAll(
-        {
-            name: 'received_log',
-            url: 'https://de-net-test.piaoquantv.com'
-        }, (e = []) => {
+    chrome.cookies.getAll(LANDING_PAGE, (e = []) => {
             let _str = '[]'
             if (e.length > 0) {
                 _str = e[0].value
@@ -62,12 +58,7 @@ export function backTwitterPinLoginCode(code) {
             twitterLogin(authToken, code, receivedIds).then(res => {
                 if (res.code == 0) {
                     setChromeStorage({ userInfo: JSON.stringify(res.data) })
-                    // chrome.cookies.remove(
-                    //     {
-                    //         name: 'received_log',
-                    //         url: 'http:localhost:3000'
-                    //     }
-                    // )
+                    chrome.cookies.remove(LANDING_PAGE)
                 }
             })
         }

src/manifest.development.json

@@ -21,7 +21,8 @@
         }
     ],
     "host_permissions": [
-        "*://*/*"
+        "*://*/*",
+        "https://de-net-test.piaoquantv.com"
       ],
     "permissions":[
         "tabs",

src/uilts/chromeExtension.js

@@ -1,14 +1,19 @@
+export const LANDING_PAGE = {
+    name: 'received_log',
+    url: 'https://de-net-test.piaoquantv.com'
+}
+
 export function setChromeStorage(params) {
     chrome.storage.local.set(params)
 }
 
-export function getChromeStorage(key = '',callback) {
+export function getChromeStorage(key = '', callback) {
     let params = {}
     params[key] = ''
     chrome.storage.local.get(params, (item) => {
         if (item[key]) {
             callback(JSON.parse(item[key]))
-        }else{
+        } else {
             callback(null)
         }
     });
@@ -25,4 +30,53 @@ export function getStorage(key) {
     } catch (e) {
         return item;
     }
+}
+
+export function getChromeCookie({
+    name,
+    url
+}, callback) {
+    chrome.cookies.getAll(
+        {
+            name: name || '',
+            url: url || ''
+        }, (e = []) => {
+            let _str = '[]'
+            if (e.length > 0) {
+                _str = e[0].value
+            }
+            let _arr = JSON.parse(decodeURIComponent(_str)) || []
+            callback(_arr)
+        }
+    )
+}
+
+// 累加ChromeCookie
+export function concatChromeCookie({ name, url }, value_obj) {
+    chrome.cookies.getAll(
+        {
+            name: name || '',
+            url: url || ''
+        }, (e = []) => {
+            let _str = '[]'
+            if (e.length > 0) {
+                _str = e[0].value
+            }
+            let _arr = JSON.parse(decodeURIComponent(_str)) || []
+            _arr = _arr.concat(value_obj)
+
+            // 删除cookies
+            chrome.cookies.remove(LANDING_PAGE, () => {
+                chrome.cookies.set({
+                    expirationDate: new Date().getTime() / 10,
+                    name: name,
+                    url: url,
+                    value: encodeURIComponent(JSON.stringify(_arr)) || ''
+                }, (e) => {
+                    console.log(e)
+                })
+            }
+            )
+        }
+    )
 }

src/view/red-packet.vue

@@ -2,10 +2,7 @@
   <div class="content">
     <!-- open -->
     <div v-if="data.status == 'opened'" class="opened">
-      <div
-        class="header"
-        :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }"
-      >
+      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
         <div class="title">Awesome! You Will Get</div>
         <div class="money">
           <img :src="require('../assets/svg/icon-dollar.svg')" alt />
@@ -25,12 +22,8 @@
                 <div v-else class="btn" @click="clickFollowAll(item.relatedUsers)">Follow All</div>
               </div>
               <div class="item-follow-area">
-                <div
-                  class="item-follow"
-                  v-for="item2, i in item.relatedUsers"
-                  v-bind:key="i"
-                  @click="clickFollow(item2)"
-                >
+                <div class="item-follow" v-for="item2, i in item.relatedUsers" v-bind:key="i"
+                  @click="clickFollow(item2)">
                   <span :class="{ finished: item2.finished }">@{{ item2.name }}</span>
                   <img v-if="item2.finished" :src="require('../assets/svg/icon-true-ed.svg')" alt />
                   <img v-else :src="require('../assets/svg/icon-add.svg')" alt />
@@ -58,24 +51,14 @@
         </div>
       </div>
       <div class="people" @click="clickRoad">
-        <div
-          class="txt"
-        >Total ${{ data.detail.amountValue }} USD，{{ data.detail.finishCount || 0 }}/{{ data.detail.totalCount || 0 }} People Got</div>
+        <div class="txt">Total ${{ data.detail.amountValue }} USD，{{ data.detail.finishCount || 0 }}/{{
+          data.detail.totalCount || 0
+        }} People Got</div>
         <div class="right">
-          <template v-for="item, i in data.detail.allReceived" v-bind:key="i">
-            <img :src="item.simpleUserInfoVO.avatarUrl" alt style="right: 14px;" v-if="i == 0" />
-            <img
-              :src="item.simpleUserInfoVO.avatarUrl"
-              alt
-              :style="{ right: `${i * 16 + 14}px` }"
-              v-if="i < 2 && item.simpleUserInfoVO.avatarUrl"
-            />
-            <img
-              v-else-if="i < 2"
-              :src="require('../assets/svg/icon-twitter.svg')"
-              alt
-              :style="{ right: `${i * 16 + 14}px` }"
-            />
+          <template v-for="item, i in data.detail.allReceived.slice(0, 3)" v-bind:key="i">
+            <img :src="item.simpleUserInfoVO.avatarUrl" alt :style="{ right: `${i * 16 + 14}px` }"
+              v-if="item.simpleUserInfoVO.avatarUrl" />
+            <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt :style="{ right: `${i * 16 + 14}px` }" />
           </template>
           <img :src="require('../assets/svg/icon-right.svg')" alt class="road" />
         </div>
@@ -90,10 +73,7 @@
     </div>
     <!-- success -->
     <div v-else-if="data.status == 'success'" class="success">
-      <div
-        class="header"
-        :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }"
-      >
+      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
         <div class="money">
           <img :src="require('../assets/svg/icon-dollar.svg')" alt />
           <span class="big">{{ data.money / 100 }}</span>
@@ -114,10 +94,7 @@
           <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
           <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
           <div class="luck-content">
-            <div
-              class="luck-title"
-              v-if="item.simpleUserInfoVO.nickName"
-            >{{ item.simpleUserInfoVO.nickName }}</div>
+            <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
             <div class="luck-title" v-else>Twitter User</div>
 
             <div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
@@ -153,10 +130,7 @@
           <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
           <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
           <div class="luck-content">
-            <div
-              class="luck-title"
-              v-if="item.simpleUserInfoVO.nickName"
-            >{{ item.simpleUserInfoVO.nickName }}</div>
+            <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
             <div class="luck-title" v-else>Twitter User</div>
             <div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
           </div>
@@ -175,10 +149,7 @@
 
     <!-- 红包被领完了 -->
     <div v-else-if="data.status == 'close'" class="close">
-      <div
-        class="header"
-        :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }"
-      >
+      <div class="header" :style="{ 'backgroundImage': `url(${require('../assets/svg/back-head-top.svg')})` }">
         <div class="close-title">{{ data.close_title }}</div>
       </div>
       <div class="luck-list-title">
@@ -187,9 +158,11 @@
       </div>
       <div class="luck-list">
         <div class="luck-item" v-for="item, i in data.detail.allReceived" v-bind:key="i">
-          <img :src="item.simpleUserInfoVO.avatarUrl" alt />
+          <img v-if="item.simpleUserInfoVO.avatarUrl" :src="item.simpleUserInfoVO.avatarUrl" alt />
+          <img v-else :src="require('../assets/svg/icon-twitter.svg')" alt />
           <div class="luck-content">
-            <div class="luck-title">{{ item.simpleUserInfoVO.nickName }}</div>
+            <div class="luck-title" v-if="item.simpleUserInfoVO.nickName">{{ item.simpleUserInfoVO.nickName }}</div>
+            <div class="luck-title" v-else>Twitter User</div>
             <div class="luck-time">{{ moment(item.finishTimestamp).format('MM-DD hh:mm:ss') }}</div>
           </div>
           <div class="luck-money">
@@ -226,6 +199,7 @@ export default {
 import { onMounted, reactive } from "vue";
 import { getPostDetail, getRedPacket, finishRedPacket } from '../http/redPacket.js'
 import { getQueryString } from '../uilts/help.js'
+import { getChromeCookie, concatChromeCookie, getChromeStorage, LANDING_PAGE } from '../uilts/chromeExtension.js'
 var moment = require('moment');
 
 let data = reactive({
@@ -313,13 +287,28 @@ function init() {
               data.close_title = res.msg
             }
           } else {
-            data.status = 'not-open'
+            // 判断本地之前是否领取过这个红包
+            getChromeCookie(LANDING_PAGE, (res_arr) => {
+              if (res_arr.length > 0) {
+                let _res = res_arr.filter((item) => { return item.postId == data.postId })[0] || null
+                // 本地领取过红包
+                if (_res) {
+                  data.status = 'opened'
+                  data.money = _res.receiveAmount
+                } else {
+                  data.status = 'not-open'
+                }
+              } else {
+                data.status = 'not-open'
+              }
+            })
           }
           data.detail.taskCondition = JSON.parse(data.detail.taskCondition)
           data.detail.amountValue = showLastTwoPlace(data.detail.amountValue)
           data.detail.receiveAmountValue = showLastTwoPlace(data.detail.receiveAmountValue)
-          data.money = data.detail.myReceived.amountValue
-
+          if (data.detail.myReceived) {
+            data.money = data.detail.myReceived.amountValue
+          }
           console.log(data.detail)
           getValidity()
         }
@@ -337,16 +326,42 @@ onMounted(() => {
   init()
 })
 
+// 点击领取
 function clickOpenRedPacket() {
+  getChromeStorage("userInfo", (_res) => {
+    // 1.没有登陆
+    if (!_res) {
+      // 2.查看cookie里是否有  
+      getChromeCookie(LANDING_PAGE, (res_arr) => {
+        // 
+        if (res_arr.length > 0) {
+          let _res = res_arr.filter((item) => { return item.postId == data.postId })[0] || null
+          if(_res){
+            data.status = 'opened'
+            data.money = _res.receiveAmount  
+          }
+        }else{
+          handleRedPacket()    
+        }
+      })
+    } else {
+      handleRedPacket()
+    }
+  })
+}
+
+function handleRedPacket() {
   getRedPacket({
     params: {
       postId: data.postId
     }
   }).then((res) => {
+
     switch (res.code.toString()) {
       case "0":
         data.status = 'opened'
         data.money = res.data.receiveAmount
+        concatChromeCookie(LANDING_PAGE, { receivedId: res.data.receivedId, postId: data.postId, receiveAmount: res.data.receiveAmount })
         init()
         break
       case "2008":
@@ -357,7 +372,25 @@ function clickOpenRedPacket() {
   })
 }
 
+
 function clickGetGiveways() {
+  // 
+  getChromeStorage('userInfo', (res) => {
+    // 
+    if (!res) {
+      chrome.runtime.sendMessage(
+        { method: "POPUP_LOGIN", data: "" },
+        (response) => {
+          console.log("res", response);
+        }
+      );
+    } else {
+      handleFinishRedPacket()
+    }
+  })
+}
+
+function handleFinishRedPacket() {
   finishRedPacket({
     params: {
       postId: data.postId
@@ -423,6 +456,7 @@ body {
   margin: 0;
   padding: 0;
 }
+
 .content {
   width: 375px;
   height: 500px;
@@ -430,13 +464,16 @@ body {
   border-radius: 11px;
   font-family: "SF Pro Display";
   font-style: normal;
+
   .error {
     text-align: center;
+
     img {
       width: 160px;
       height: 160px;
       margin-top: 80px;
     }
+
     .txt {
       font-weight: 500;
       font-size: 22px;
@@ -447,6 +484,7 @@ body {
       margin: 34px 44px 0 44px;
     }
   }
+
   .success,
   .close,
   .luck-peopel-list {
@@ -455,6 +493,10 @@ body {
     height: 100%;
     border-radius: 11px;
     background: #fff;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+
     .close-title {
       font-weight: 600;
       font-size: 27px;
@@ -464,14 +506,17 @@ body {
 
       color: #ffffff;
     }
+
     .head {
       padding: 14px 16px;
+
       img {
         cursor: pointer;
         width: 24px;
         height: 24px;
       }
     }
+
     .header {
       text-align: center;
       height: 120px;
@@ -480,6 +525,7 @@ body {
       padding-top: 30px;
       background-size: 100% 100%;
       position: relative;
+
       .done {
         cursor: pointer;
         position: absolute;
@@ -498,18 +544,21 @@ body {
           color: #000000;
           font-size: 14px;
         }
+
         .icon-done {
           width: 24px;
           height: 24px;
           margin-left: 28px;
           margin-right: 10px;
         }
+
         .icon-right {
           margin-left: 5px;
           width: 7px;
           height: 14px;
         }
       }
+
       .title {
         color: #fff7e4;
         opacity: 0.6;
@@ -519,13 +568,16 @@ body {
         line-height: 21px;
         letter-spacing: -0.3px;
       }
+
       .money {
         margin-top: 16px;
+
         img {
           width: 40px;
           height: 40px;
           margin-right: 9px;
         }
+
         .big {
           font-weight: 700;
           font-size: 46px;
@@ -536,6 +588,7 @@ body {
 
           color: #fff8e6;
         }
+
         .small {
           margin-left: 4px;
 
@@ -550,6 +603,7 @@ body {
         }
       }
     }
+
     .luck-list-title {
       /*      margin-top: 47px;*/
       padding: 0 16px;
@@ -558,28 +612,35 @@ body {
       display: flex;
       justify-content: space-between;
     }
+
     .luck-list {
       background: #fff;
+      overflow: auto;
+
       .luck-item {
         display: flex;
         padding: 12px 16px;
         border-top: 1px solid #d1d1d1;
         justify-content: space-between;
         position: relative;
+
         img:first-child {
           border-radius: 50%;
         }
+
         .luck-king {
           position: absolute;
           top: 36px;
           right: 16px;
           display: flex;
           align-items: center;
+
           img {
             width: 22px;
             height: 19px;
             margin: 0;
           }
+
           span {
             font-weight: 500;
             font-size: 12px;
@@ -588,19 +649,23 @@ body {
             color: #f5b945;
           }
         }
+
         img {
           width: 42px;
           height: 42px;
           margin-right: 12px;
         }
+
         .luck-content {
           flex: auto;
+
           .luck-title {
             font-weight: 500;
             font-size: 16px;
             letter-spacing: 0.3px;
             color: #444444;
           }
+
           .luck-time {
             font-weight: 400;
             font-size: 12px;
@@ -609,15 +674,18 @@ body {
             color: #9b9b9b;
           }
         }
+
         .luck-money {
           display: flex;
           height: 17px;
           align-items: center;
+
           img {
             width: 14px;
             height: 14px;
             margin-right: 6px;
           }
+
           .luck-money-txt {
             font-weight: 500;
             font-size: 14px;
@@ -632,11 +700,13 @@ body {
       }
     }
   }
+
   .success {
     .luck-list-title {
       margin-top: 47px;
     }
   }
+
   .opened {
     filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
     width: 100%;
@@ -644,6 +714,7 @@ body {
     display: flex;
     flex-direction: column;
     justify-content: space-between;
+
     .header {
       text-align: center;
       height: 120px;
@@ -651,6 +722,7 @@ body {
       background: #fff;
       padding-top: 30px;
       background-size: 100% 100%;
+
       .title {
         color: #fff7e4;
         opacity: 0.6;
@@ -660,13 +732,16 @@ body {
         line-height: 21px;
         letter-spacing: -0.3px;
       }
+
       .money {
         margin-top: 16px;
+
         img {
           margin-right: 9px;
           width: 40px;
           height: 40px;
         }
+
         .big {
           font-weight: 700;
           font-size: 46px;
@@ -677,6 +752,7 @@ body {
 
           color: #fff8e6;
         }
+
         .small {
           margin-left: 4px;
           font-weight: 700;
@@ -690,6 +766,7 @@ body {
         }
       }
     }
+
     .list {
       padding: 0 16px 0 16px;
       background: #ffffff;
@@ -700,23 +777,28 @@ body {
         align-items: center;
         min-height: 50px;
         border-bottom: 1px solid #f0f0f0;
+
         img {
           width: 24px;
           height: 24px;
         }
+
         .item-content {
           flex: 1;
+
           .item-follow-title {
             display: flex;
             align-items: center;
             margin-top: 20px;
             margin-bottom: 11px;
             position: relative;
+
             .btn {
               position: absolute;
               right: 0;
             }
           }
+
           .item-title {
             flex: 1;
             margin-left: 10px;
@@ -725,9 +807,11 @@ body {
             letter-spacing: 0.3px;
             color: #000000;
           }
+
           .item-follow-area {
             display: flex;
             margin-bottom: 13px;
+
             .item-follow {
               cursor: pointer;
               border: 1px solid #ebebeb;
@@ -736,16 +820,19 @@ body {
               margin-right: 5px;
               display: flex;
               align-items: center;
+
               .finished {
                 text-decoration: line-through;
                 color: #949494;
               }
+
               span {
                 margin-left: 8px;
                 margin-right: 2px;
                 color: #389aff;
                 opacity: 1;
               }
+
               img {
                 width: 16px;
                 height: 16px;
@@ -753,6 +840,7 @@ body {
               }
             }
           }
+
           span {
             font-weight: 400;
             font-size: 11px;
@@ -764,6 +852,7 @@ body {
             opacity: 0.4;
           }
         }
+
         .btn {
           width: 72px;
           height: 29px;
@@ -777,6 +866,7 @@ body {
         }
       }
     }
+
     .people {
       cursor: pointer;
       padding-left: 16px;
@@ -788,6 +878,7 @@ body {
       display: flex;
       align-items: center;
       justify-content: space-between;
+
       .txt {
         font-weight: 400;
         font-size: 12px;
@@ -796,6 +887,7 @@ body {
         color: #000000;
         opacity: 0.4;
       }
+
       .right {
         flex: 1;
         cursor: pointer;
@@ -811,6 +903,7 @@ body {
           border: 2px solid #fff;
           border-radius: 50%;
         }
+
         .road {
           right: 0;
           width: 7px;
@@ -818,10 +911,12 @@ body {
         }
       }
     }
+
     .footer {
       background: #ffffff;
       display: flex;
       padding: 20px 22px 20px 17px;
+
       .first {
         flex: 1;
 
@@ -834,6 +929,7 @@ body {
           opacity: 0.4;
           margin: 2px 0 8px 0;
         }
+
         .time {
           font-weight: 500;
           font-size: 13px;
@@ -843,6 +939,7 @@ body {
           color: #000000;
         }
       }
+
       .btn {
         background: #ef4545;
         border-radius: 100px;
@@ -857,18 +954,22 @@ body {
       }
     }
   }
+
   .not-open {
     filter: drop-shadow(0px 4px 94px rgba(0, 0, 0, 0.3));
     position: relative;
+
     img {
       width: 100%;
     }
+
     .up {
       position: absolute;
       top: 0;
       box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
       z-index: 1;
     }
+
     .down {
       position: absolute;
       top: 253px;