[edit][逻辑]

src/manifest.json

@@ -2,8 +2,8 @@
     "manifest_version": 3,
     "name": "DeNet",
     "description": "Growing more twitter followers with Denet",
-    "version": "1.1.7.1",
-    "denet_app_version_code": "21",
+    "version": "1.1.7.2",
+    "denet_app_version_code": "22",
     "background": {
         "service_worker": "/js/background.js"
     },

src/view/iframe/treasure-hunt/all-invite-list.vue → src/view/iframe/treasure-hunt/all-receive-list.vue

@@ -18,7 +18,7 @@
                             <div class="name">{{ item.userInfo.nickName }}</div>
                             <div class="time">{{ getBeforeTimeFormat(item.timestamp) }}</div>
                         </div>
-                        <div class="money">$123</div>
+                        <div class="money">${{ item.amountValue }}</div>
                     </div>
                 </div>
             </div>
@@ -61,11 +61,6 @@ function handleScroll(e) {
 }
 
 const list = () => {
-    state.inviteListRefresh()
-}
-
-// 刷新时调用
-state.inviteListRefresh = () => {
     let last_timestamp = 0
     if (state.invited_list.length > 0) {
         last_timestamp = state.invited_list[0].timestamp
@@ -83,6 +78,8 @@ state.inviteListRefresh = () => {
     })
 }
 
+
+
 const handleCommon = (data) => {
     state.inviteCount = data.inviteCount
     if (state.inviteCount > 0) {

src/view/iframe/treasure-hunt/components/boxs.vue

@@ -2,19 +2,20 @@
     <div class="area-boxs">
         <!-- 箱子 -->
         <div class="box-process">
-            <div class="item" v-for="item, i in state.boxs" :style="{ 'margin-left': item.icon_margin_left }">
+            <div class="item" v-for="item, i in state.boxs"
+                :style="{ 'margin-left': item.icon_margin_left, 'z-index': 10 - i }">
                 <!--悬浮 -->
                 <!-- < hover - tip : txt=" item.txt" v-show="item.show || item.openStatus" :icon="item.hover_icon">
                 </hover-tip> -->
                 <!-- 金额 -->
-                <span class="money" :style="{ 'color': item.money_color }">
-                    <img :src="require('@/assets/svg/icon-green-yes.svg')" alt="" v-if="item.openStatus == 0" />
+                <span class="money" :style="{ 'color': item.money_color, 'top': item.money_top }">
+                    <img :src="require('@/assets/svg/icon-green-yes.svg')" alt="" v-if="item.openStatus == 1" />
                     {{ item.txt }}
                 </span>
                 <!-- 宝箱 -->
                 <img :src="item.icon" alt="" @mouseenter="mouseItem(i)" @mouseleave="mouseLeaveItem(i)"
                     :style="{ 'width': item.icon_width, 'height': item.icon_width }" class="box"
-                    :class="{ 'active': item.openStatus == 0 && item.taskFinishStatus == 1 }" />
+                    :class="{ 'active': item.openStatus == 0 && item.taskFinishStatus == 1 }" @click="clickBox(item)" />
                 <!-- 发光 -->
                 <img :src="require('@/assets/img/icon-flash-active.png')" alt="" class="flash"
                     v-if="item.openStatus == 0 && item.taskFinishStatus == 1"
@@ -38,8 +39,11 @@
     </div>
 </template>
 <script setup>
-import { onMounted, inject } from 'vue'
-import { object } from '_vue-types@3.0.2@vue-types';
+import { onMounted, inject, watch } from 'vue'
+import { checkIsLogin } from '@/uilts/chromeExtension'
+
+
+let state = inject('state')
 // ---- box 区域
 let silver_close_box = require('@/assets/img/icon-silver-close-box.png')
 let silver_open_box = require('@/assets/img/icon-silver-open-box.png')
@@ -48,43 +52,32 @@ let gold_close_box = require('@/assets/img/icon-gold-close-box.png')
 let purple_open_box = require('@/assets/img/icon-purple-open-box.png')
 let purple_close_box = require('@/assets/img/icon-purple-close-box.png')
 
+watch(state, () => {
+    if (state.refresh) {
+        init()
+    }
+})
 
-let state = inject('state')
-state.detail.treasureRecords = [
-    {
-        "id": 1710,
-        "taskFinishStatus": 0,
-        "needInviteCount": 1,
-        "amountValue": "0",
-        "amountUsdValue": "0",
-        "openStatus": 0,
-        "inviteProgress": "0/1",
-        "successInviteCount": 0,
-        "finishNeedInviteCount": 1
-    },
-    {
-        "id": 1711,
-        "taskFinishStatus": 0,
-        "needInviteCount": 5,
-        "amountValue": "0",
-        "amountUsdValue": "0",
-        "openStatus": 0,
-        "inviteProgress": "0/5",
-        "successInviteCount": 0,
-        "finishNeedInviteCount": 4
-    },
-    {
-        "id": 1712,
-        "taskFinishStatus": 0,
-        "needInviteCount": 25,
-        "amountValue": "0",
-        "amountUsdValue": "0",
-        "openStatus": 0,
-        "inviteProgress": "0/25",
-        "successInviteCount": 0,
-        "finishNeedInviteCount": 20
+onMounted(() => {
+    init()
+})
+const init = () => {
+    boxsStatus()
+    btnStatus()
+}
+
+async function clickBox(item) {
+    let _userInfo = await checkIsLogin()
+    if (!_userInfo) {
+        return
+    }
+
+    if (item.openStatus == 0 && item.taskFinishStatus == 1 && state.btn_loading == false) {
+        state.btn_loading = true
+        state.treasureOpen()
     }
-]
+}
+
 state.boxs = [{
     icon: '',
     icon_open: silver_open_box,
@@ -97,7 +90,8 @@ state.boxs = [{
     flash_margin_top: `-${70 / 2}px`,
     line_width: '25px',
     line_left: `-${25 - 10}px`,
-    money_color: '#BFCCE4'
+    money_color: '#BFCCE4',
+    money_top: '-20px'
 }, {
     icon: '',
     icon_open: gold_open_box,
@@ -110,7 +104,7 @@ state.boxs = [{
     flash_margin_top: `-${70 / 2}px`,
     line_width: '55px',
     line_left: `-${55 - 10}px`,
-    money_color: '#FCB936'
+    money_color: '#FCB936', money_top: '-20px'
 
 }, {
     icon: '',
@@ -124,10 +118,10 @@ state.boxs = [{
     flash_margin_top: `-${90 / 2}px`,
     line_width: '55px',
     line_left: `-${55 - 15}px`,
-    money_color: '#FCB936'
+    money_color: '#FCB936', money_top: '-15px'
 
 }, {
-    icon: '',
+    icon: purple_close_box,
     icon_open: purple_open_box,
     icon_close: purple_close_box,
     show: false,
@@ -135,19 +129,53 @@ state.boxs = [{
     flash_width: '108px',
     icon_margin_left: '23px',
     flash_margin_top: `-${108 / 2}px`,
-    line_width: '55px',
-    line_left: `-${55 - 18}px`,
-    money_color: '#FCB936'
+    line_width: '58px',
+    line_left: `-${58 - 20}px`,
+    money_color: '#FCB936', money_top: '-10px'
 }]
 
 const setLineFull = (box_num = 0, finishNeedInviteCount = 0, successInviteCount = 0) => {
     state.boxs[box_num].full_width = `${(successInviteCount / finishNeedInviteCount) * 100}%`
 }
 
-onMounted(() => {
-    boxsStatus()
-    console.log('state.boxs', state.boxs)
-})
+const btnStatus = () => {
+    for (let i in state.boxs) {
+        if (state.boxs[i].taskFinishStatus == 0) {
+            let num = state.boxs[i].finishNeedInviteCount - state.boxs[i].successInviteCount
+            if (num == 1) {
+                state.open_btn.txt = 'Invite 1 Friend to Open'
+            } else {
+                state.open_btn.txt = `Invite ${num} Friends to Open`
+            }
+            state.open_btn.disabled = true
+            break
+        }
+    }
+
+    state.treasureId = ''
+    let open_num = 0
+    // 有打开的箱子 Open the chest
+    state.boxs.forEach((item, index) => {
+        if (item.taskFinishStatus == 1 && item.openStatus == 0) {
+            state.open_btn.txt = 'Open the Treasure Chest'
+            state.open_btn.disabled = false
+            if (!state.treasureId) {
+                state.treasureId = item.id
+            }
+        }
+        setLineFull(index, item.finishNeedInviteCount, item.successInviteCount)
+        // 三个箱子全部打开了
+        if (item.openStatus == 1) {
+            open_num++
+        }
+        if (open_num == state.boxs.length) {
+            state.open_btn.txt = 'All Chests Have Been Opened'
+            state.open_btn.disabled = true
+        }
+    })
+}
+
+
 
 const mouseItem = (i) => {
     state.boxs[i].show = true
@@ -164,7 +192,7 @@ const boxsStatus = () => {
         } else {
             box.icon = box.icon_open
         }
-        box.txt = `$ ${item.amountUsdValue}`
+        box.txt = `$${item.targetAmountUsdValue}`
         state.boxs[index] = Object.assign(box, item)
     })
 }
@@ -245,6 +273,9 @@ const boxsStatus = () => {
             }
 
             .money {
+                display: flex;
+                align-items: center;
+                white-space: nowrap;
                 position: absolute;
                 top: -20px;
                 font-weight: 700;
@@ -253,6 +284,7 @@ const boxsStatus = () => {
                 img {
                     width: 13px;
                     height: 13px;
+                    margin-right: 4px;
                 }
             }
 

src/view/iframe/treasure-hunt/components/btn.vue

@@ -52,17 +52,22 @@ const clickBtn = () => {
     }
 }
 
+state.refreshInit = () => {
+    state.init(() => {
+        state.refresh = true
+        setTimeout(() => {
+            state.refresh = false
+        }, 1000)
+    })
+}
+
 const refresh = () => {
     if (!refreshRotate.value) {
         refreshRotate.value = true;
         setTimeout(() => {
             refreshRotate.value = false;
         }, 1000)
-
-        state.init(() => {
-            state.inviteInit()
-            state.inviteListRefresh()
-        })
+        state.refreshInit()
     }
 }
 </script>

src/view/iframe/treasure-hunt/index.vue

@@ -2,7 +2,7 @@
     <v-cover v-if="state.page == '封面页'"></v-cover>
     <v-invite v-if="state.page == '邀请页'"></v-invite>
     <v-result v-if="state.page == '开奖页'"></v-result>
-    <all-invite-list v-if="state.page == '总邀请者页'"></all-invite-list>
+    <all-receive-list v-if="state.page == '总邀请者页'"></all-receive-list>
     <open-box v-show="state.open_box.show"></open-box>
     <v-toast :show="state.toast.show" :txt="state.toast.txt" :has_icon="state.toast.has_icon"></v-toast>
     <div v-show="state.loading_redbag" class="redbag">
@@ -20,7 +20,7 @@ import { reSetBindTwtterId, reSetBindPostContent, reSetBindRepost } from '@/http
 import { getQueryString } from '@/uilts/help'
 import { getChromeStorage, sendChromeTabMessage } from '@/uilts/chromeExtension.js'
 import VToast from '@/view/iframe/treasure-hunt/components/toast.vue'
-import AllInviteList from '@/view/iframe/treasure-hunt/all-invite-list.vue'
+import AllReceiveList from '@/view/iframe/treasure-hunt/all-receive-list.vue'
 import OpenBox from '@/view/iframe/treasure-hunt/components/open-box.vue'
 import Report from "@/log-center/log"
 
@@ -43,6 +43,7 @@ let state = reactive({
     dialog: {
         show: false,
     },
+    refresh: false,
     start_task: {},
     toast: {},
     iframeId: ''
@@ -210,10 +211,7 @@ state.treasureOpen = () => {
             state.open_box.showed = true
             state.open_box.data = res.data
 
-            state.init(() => {
-                state.inviteInit()
-                state.inviteListRefresh()
-            })
+            state.refreshInit()
         } else {
             switch (String(res.code)) {
                 case '2037':
@@ -237,10 +235,7 @@ state.treasureOpen = () => {
                 state.toast.show = false
             }, 2000)
 
-            state.init(() => {
-                state.inviteInit()
-                state.inviteListRefresh()
-            })
+            state.refreshInit()
         }
     }).catch(() => {
         state.btn_loading = false

src/view/iframe/treasure-hunt/invite.vue

@@ -57,67 +57,16 @@ state.tabs = [{
     txt: 'Invited'
 }]
 
-
-let line_full = ref(null)
 onMounted(() => {
-    state.inviteInit()
     setInterval(() => {
-        state.init(() => {
-            state.inviteInit()
-            state.inviteListRefresh()
-        })
+        state.refresh = true
+        state.refresh = false
     }, 30000)
 })
 
 const clickItem = (item) => {
     window.open(`https://twitter.com/${item.userInfo.nickName}`)
 }
-state.inviteInit = () => {
-    // state.boxs = []
-    btnStatus()
-
-}
-
-const btnStatus = () => {
-    for (let i in state.boxs) {
-        if (state.boxs[i].taskFinishStatus == 0) {
-            let num = state.boxs[i].finishNeedInviteCount - state.boxs[i].successInviteCount
-            if (num == 1) {
-                state.open_btn.txt = 'Invite 1 Friend to Open'
-            } else {
-                state.open_btn.txt = `Invite ${num} Friends to Open`
-            }
-            state.open_btn.disabled = true
-            break
-        }
-    }
-
-    state.treasureId = ''
-    let open_num = 0
-    // 有打开的箱子 Open the chest
-    state.boxs.forEach((item, index) => {
-        if (item.taskFinishStatus == 1 && item.openStatus == 0) {
-            state.open_btn.txt = 'Open the Treasure Chest'
-            state.open_btn.disabled = false
-            if (!state.treasureId) {
-                state.treasureId = item.id
-            }
-        }
-        // setLineFull(index, item.finishNeedInviteCount, item.successInviteCount)
-        // 三个箱子全部打开了
-        if (item.openStatus == 1) {
-            open_num++
-        }
-        if (open_num == state.boxs.length) {
-            state.open_btn.txt = 'All Chests Have Been Opened'
-            state.open_btn.disabled = true
-        }
-    })
-}
-
-
-
-
 
 </script>
 <style lang="scss"  scoped>