[edit][开奖提示]

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

@@ -1,45 +1,45 @@
 <template>
-    <div class="invite-friends">
-      <div class="invite-friends-content">
-        <div class="invite-friends-content-head">
-          <div class="title">Invite Friends to Open the Chest!</div>
-          <div class="info">Invitees Need to be Real New follower of {{followUserStr}} to receive rewards</div>
-        </div>
-        <div class="invite-friends-content-body">
-          <img class="tips" v-if="state.active_share_channel" :src="require('@/assets/svg/icon-channel-tips.svg')" />
-
-          <div class="share-list" :class="{'share-list-active': state.active_share_channel}">
-            <div v-for="(item, index) in state.share_list" :key="index" :data-clipboard-text="item.inviteContent"
-                @click="clickShare(item)" class="share-item">
-              <img :src="item.iconPath"  />
-              <div class="name">
-                {{item.name}}
-              </div>
+  <div class="invite-friends">
+    <div class="invite-friends-content">
+      <div class="invite-friends-content-head">
+        <div class="title">Invite Friends to Open the Chest!</div>
+        <div class="info">Invitees Need to be Real New follower of {{ followUserStr }} to receive rewards</div>
+      </div>
+      <div class="invite-friends-content-body">
+        <img class="tips" v-if="state.active_share_channel" :src="require('@/assets/svg/icon-channel-tips.svg')" />
+
+        <div class="share-list" :class="{ 'share-list-active': state.active_share_channel }">
+          <div v-for="(item, index) in state.share_list" :key="index" :data-clipboard-text="item.inviteContent"
+            @click="clickShare(item)" class="share-item">
+            <img :src="item.iconPath" />
+            <div class="name">
+              {{ item.name }}
             </div>
-            <div class="share-item copy-btn" @click="clickCopy" v-click-log="state.log_invite_copy_btn_click"
-                :data-clipboard-text="state.detail.inviteCopyUrl">
-              <img :src="require('@/assets/svg/icon-copy-url-teasure.svg')" alt="">
-              <div class="name">
-                Copy URL
-              </div>
+          </div>
+          <div class="share-item copy-btn" @click="clickCopy" v-click-log="state.log_invite_copy_btn_click"
+            :data-clipboard-text="state.detail.inviteCopyUrl">
+            <img :src="require('@/assets/svg/icon-copy-url-teasure.svg')" alt="">
+            <div class="name">
+              Copy URL
             </div>
-        </div>
+          </div>
         </div>
       </div>
-      <v-btn :txt="state.open_btn.txt" :font-size="'17px'" class="btn" :icon="false"
-            :disabled="state.open_btn.disabled" v-show-log="state.log_invite_btn_show" :loading="state.btn_loading"
-            v-click-log="state.log_invite_btn_click" @onClick="clickBtn" font-weight="600"></v-btn>
-      <div class="mask" v-show="showShareTips">
-        <div class="content">
-          <img class="icon-loading" :src="require('@/assets/svg/icon-tweet-loading.svg')" />
-          <div class="text">
-            Link copied to clipboard
-             <br/>
-            Opening {{selectShareApp.name }}
-          </div>
+    </div>
+    <v-btn :txt="state.open_btn.txt" :font-size="'17px'" class="btn" :icon="false" :disabled="state.open_btn.disabled"
+      v-show-log="state.log_invite_btn_show" :loading="state.btn_loading" v-click-log="state.log_invite_btn_click"
+      @onClick="clickBtn" font-weight="600"></v-btn>
+    <div class="mask" v-show="showShareTips">
+      <div class="content">
+        <img class="icon-loading" :src="require('@/assets/svg/icon-tweet-loading.svg')" />
+        <div class="text">
+          Link copied to clipboard
+          <br />
+          Opening {{ selectShareApp.name }}
         </div>
       </div>
     </div>
+  </div>
 </template>
 <script setup>
 import VBtn from '@/view/iframe/treasure-hunt/components/btn.vue'
@@ -55,40 +55,40 @@ let ClipboardJS = require('clipboard');
 let state = inject('state')
 
 state.log_invite_btn_show = {
-    businessType: Report.businessType.buttonView,
-    pageSource: Report.pageSource.inviteFriendsPage,
-    objectType: Report.objectType.openChestButton,
-    redPacketType: Report.redPacketType.treasure,
-    shareLinkId: state.invite_code,
-    myShareLinkId: state.detail.inviteCopyUrl,
-    currentInvitedNum: state.inviteCount,
-    postId: state.postId
+  businessType: Report.businessType.buttonView,
+  pageSource: Report.pageSource.inviteFriendsPage,
+  objectType: Report.objectType.openChestButton,
+  redPacketType: Report.redPacketType.treasure,
+  shareLinkId: state.invite_code,
+  myShareLinkId: state.detail.inviteCopyUrl,
+  currentInvitedNum: state.inviteCount,
+  postId: state.postId
 }
 
 state.log_invite_btn_click = {
-    businessType: Report.businessType.buttonClick,
-    pageSource: Report.pageSource.inviteFriendsPage,
-    objectType: Report.objectType.openChestButton,
-    redPacketType: Report.redPacketType.treasure,
-    shareLinkId: state.invite_code,
-    myShareLinkId: state.detail.inviteCopyUrl,
-    currentInvitedNum: state.inviteCount,
-    postId: state.postId
+  businessType: Report.businessType.buttonClick,
+  pageSource: Report.pageSource.inviteFriendsPage,
+  objectType: Report.objectType.openChestButton,
+  redPacketType: Report.redPacketType.treasure,
+  shareLinkId: state.invite_code,
+  myShareLinkId: state.detail.inviteCopyUrl,
+  currentInvitedNum: state.inviteCount,
+  postId: state.postId
 }
 state.log_invite_copy_btn_click = {
-    businessType: Report.businessType.buttonClick,
-    pageSource: Report.pageSource.inviteFriendsPage,
-    objectType: Report.objectType.copyButton,
-    redPacketType: Report.redPacketType.treasure,
-    shareLinkId: state.invite_code,
-    myShareLinkId: state.detail.inviteCopyUrl,
-    currentInvitedNum: state.inviteCount,
-    postId: state.postId
+  businessType: Report.businessType.buttonClick,
+  pageSource: Report.pageSource.inviteFriendsPage,
+  objectType: Report.objectType.copyButton,
+  redPacketType: Report.redPacketType.treasure,
+  shareLinkId: state.invite_code,
+  myShareLinkId: state.detail.inviteCopyUrl,
+  currentInvitedNum: state.inviteCount,
+  postId: state.postId
 }
 
 let facebookAppConfig = {
-    facebookAppId: "",
-    faceShareRedirectUrl
+  facebookAppId: "",
+  faceShareRedirectUrl
 };
 
 let selectShareApp = ref({});
@@ -96,295 +96,300 @@ let showShareTips = ref(false);
 let followUserStr = ref('');
 
 onMounted(() => {
-    state.btn_loading = false
-    setFrontConfig();
-    initInviteChannel();
-    getFollowUserStr();
+  state.btn_loading = false
+  setFrontConfig();
+  initInviteChannel();
+  getFollowUserStr();
 })
 
 const getFollowUserStr = () => {
   let arr = [];
-  if(state.follows && state.follows.length) {
-    for(let i = 0; i < state.follows.length; i++) {
+  if (state.follows && state.follows.length) {
+    for (let i = 0; i < state.follows.length; i++) {
       let item = state.follows[i];
-      arr.push('@'+item.name);
+      arr.push('@' + item.name);
     }
   }
   followUserStr.value = arr.join(" or ");
 }
 
 chrome.management.onDisabled.addListener(() => {
-    initInviteChannel()
+  initInviteChannel()
 })
 chrome.management.onEnabled.addListener(() => {
-    initInviteChannel()
+  initInviteChannel()
 })
 
 chrome.management.onInstalled.addListener(() => {
-    initInviteChannel()
+  initInviteChannel()
 })
 chrome.management.onUninstalled.addListener(() => {
-    initInviteChannel()
+  initInviteChannel()
 })
 
 let linePluginInstalled
 const initInviteChannel = () => {
-    try {
-        chrome.management.get('ophjlpahpchlmihnnnihgmmeilfjmjjc', (res) => {
-            if ((res && linePluginInstalled == 1) || (!res && linePluginInstalled == 0)) {
-                return
-            }
-            if (res) {
-                linePluginInstalled = 1
-            } else {
-                linePluginInstalled = 0
-            }
-
-            inviteChannel({
-                params: {
-                    linePluginInstalled,
-                    postId: state.postId
-                }
-            }).then((res) => {
-                if (res.code == 0) {
-                    state.share_list = res.data
-                }
-            })
-        })
-    } catch (error) {
-        console.error(error)
-    }
+  try {
+    chrome.management.get('ophjlpahpchlmihnnnihgmmeilfjmjjc', (res) => {
+      if ((res && linePluginInstalled == 1) || (!res && linePluginInstalled == 0)) {
+        return
+      }
+      if (res) {
+        linePluginInstalled = 1
+      } else {
+        linePluginInstalled = 0
+      }
+
+      inviteChannel({
+        params: {
+          linePluginInstalled,
+          postId: state.postId
+        }
+      }).then((res) => {
+        if (res.code == 0) {
+          state.share_list = res.data
+        }
+      })
+    })
+  } catch (error) {
+    console.error(error)
+  }
 }
 
 async function clickBtn() {
-    let _userInfo = await state.checkIsLogin()
-    if (!_userInfo) {
-        return
-    }
-    state.btn_loading = true
-    state.treasureOpen()
+  let _userInfo = await state.checkIsLogin()
+  if (!_userInfo) {
+    return
+  }
+  state.btn_loading = true
+  state.treasureOpen()
 }
 
 const clickShare = (item) => {
-    var clipboard = new ClipboardJS('.share-item');
-    clipboard.on('success', function (e) {
-        // state.toast.txt = 'Copy Successfully'
-        // state.toast.has_icon = true
-        // state.toast.show = true
-        // setTimeout(() => {
-        //     state.toast.show = false
-        // }, 2000)
-        e.clearSelection();
+  var clipboard = new ClipboardJS('.share-item');
+  clipboard.on('success', function (e) {
+    // state.toast.txt = 'Copy Successfully'
+    // state.toast.has_icon = true
+    // state.toast.show = true
+    // setTimeout(() => {
+    //     state.toast.show = false
+    // }, 2000)
+    e.clearSelection();
+  })
+  showShareTips.value = true;
+  selectShareApp.value = item;
+
+  if (item.name == 'facebook') {
+    setChromeStorage({
+      shareFacebookData: JSON.stringify({
+        contentStr: item.inviteContent
+      })
     })
-    showShareTips.value = true;
-    selectShareApp.value = item;
-
-    if (item.name == 'facebook') {
-        setChromeStorage({
-            shareFacebookData: JSON.stringify({
-                contentStr: item.inviteContent
-            })
-        })
-        let cbParams = {
-            bizType: 'TEASURE_INVITE'
-        }
-        let url = `https://www.facebook.com/dialog/share?app_id=${facebookAppConfig.facebookAppId}&display=popup&href=${item.treasureInviteUrl}&redirect_uri=${facebookAppConfig.faceShareRedirectUrl}?params=${JSON.stringify(cbParams)}`;
-
-        setTimeout(() => {
-          showShareTips.value = false;
-          chrome.windows.create({
-            width: 800,
-              type: 'normal',
-              url
-          }, function (window) {
-          })
-        }, 1000)
-
-    } else {
-        setTimeout(() => {
-          showShareTips.value = false;
-          chrome.tabs.create({
-              url: item.redirectPath
-          });
-        }, 1000)
+    let cbParams = {
+      bizType: 'TEASURE_INVITE'
     }
-    Report.reportLog({
-        businessType: Report.businessType.buttonClick,
-        pageSource: Report.pageSource.inviteFriendsPage,
-        objectType: Report.objectType.channelButton,
-        shareLinkId: state.invite_code,
-        myShareLinkId: state.detail.inviteCopyUrl,
-        currentInvitedNum: state.inviteCount,
-        postId: state.postId
-    }, {
-        'channel-name': item.name
-    });
+    let url = `https://www.facebook.com/dialog/share?app_id=${facebookAppConfig.facebookAppId}&display=popup&href=${item.treasureInviteUrl}&redirect_uri=${facebookAppConfig.faceShareRedirectUrl}?params=${JSON.stringify(cbParams)}`;
+
+    setTimeout(() => {
+      showShareTips.value = false;
+      chrome.windows.create({
+        width: 800,
+        type: 'normal',
+        url
+      }, function (window) {
+      })
+    }, 1000)
+
+  } else {
+    setTimeout(() => {
+      showShareTips.value = false;
+      chrome.tabs.create({
+        url: item.redirectPath
+      });
+    }, 1000)
+  }
+  Report.reportLog({
+    businessType: Report.businessType.buttonClick,
+    pageSource: Report.pageSource.inviteFriendsPage,
+    objectType: Report.objectType.channelButton,
+    shareLinkId: state.invite_code,
+    myShareLinkId: state.detail.inviteCopyUrl,
+    currentInvitedNum: state.inviteCount,
+    postId: state.postId
+  }, {
+    'channel-name': item.name
+  });
 }
 
 const setFrontConfig = () => {
-    getFrontConfig({
-        params: {},
-    }).then((res) => {
-        if (res.code == 0) {
-            facebookAppConfig.facebookAppId = res.data.fbClientId;
-        }
-    });
+  getFrontConfig({
+    params: {},
+  }).then((res) => {
+    if (res.code == 0) {
+      facebookAppConfig.facebookAppId = res.data.fbClientId;
+    }
+  });
 };
 
 
 
 const clickCopy = () => {
-    var clipboard = new ClipboardJS('.copy-btn');
-    clipboard.on('success', function (e) {
-        state.toast.txt = 'Copy Successfully'
-        state.toast.has_icon = true
-        state.toast.show = true
-        setTimeout(() => {
-            state.toast.show = false
-        }, 2000)
-        e.clearSelection();
-    })
-
-    clipboard.on('error', function (e) {
-        state.toast.txt = 'Copy Error'
-        state.toast.has_icon = false
-        state.toast.show = true
-        setTimeout(() => {
-            state.toast.show = false
-        }, 2000)
-    })
+  var clipboard = new ClipboardJS('.copy-btn');
+  clipboard.on('success', function (e) {
+    state.toast.txt = 'Copy Successfully'
+    state.toast.has_icon = true
+    state.toast.show = true
+    setTimeout(() => {
+      state.toast.show = false
+    }, 2000)
+    e.clearSelection();
+  })
+
+  clipboard.on('error', function (e) {
+    state.toast.txt = 'Copy Error'
+    state.toast.has_icon = false
+    state.toast.show = true
+    setTimeout(() => {
+      state.toast.show = false
+    }, 2000)
+  })
 }
 </script>
 <style lang="scss" scoped>
 .invite-friends {
-    padding: 9px 14px 14px 14px;
-    background: #fff;
+  padding: 9px 14px 14px 14px;
+  background: #fff;
+  box-sizing: border-box;
+
+  .invite-friends-content {
+    max-height: 242px;
+    overflow-y: auto;
+    margin-bottom: 10px;
     box-sizing: border-box;
 
-    .invite-friends-content {
-      max-height: 242px;
-      overflow-y: auto;
-      margin-bottom: 10px;
+    .invite-friends-content-head {
+      margin-bottom: 18px;
+      padding: 0 6px;
       box-sizing: border-box;
 
-      .invite-friends-content-head {
-        margin-bottom: 18px;
-        padding: 0 6px;
-        box-sizing: border-box;
+      .title {
+        font-weight: 900;
+        font-size: 18px;
+        margin-bottom: 7px;
+      }
 
-        .title {
-          font-weight: 900;
-          font-size: 18px;
-          margin-bottom: 7px;
-        }
-        .info {
-          font-weight: 400;
-          font-size: 12px;
-          color: #7A7A7A;
-          line-height: 15px;
-        }
+      .info {
+        font-weight: 400;
+        font-size: 12px;
+        color: #7A7A7A;
+        line-height: 15px;
+      }
+
+    }
 
+    .invite-friends-content-body {
+      position: relative;
+
+      .tips {
+        position: absolute;
+        top: -42px;
+        left: 0;
+        width: 146px;
       }
 
-      .invite-friends-content-body {
-        position: relative;
+      .share-list-active {
+        background: rgba(29, 155, 240, 0.1);
+        border: 1.5px solid #1D9BF0 !important;
+        border-radius: 10px;
+      }
 
-        .tips {
-          position: absolute;
-          top: -42px;
-          left: 0;
-          width: 146px;
-        }
+      .share-list {
+        display: flex;
+        flex-wrap: wrap;
+        width: 100%;
+        box-sizing: border-box;
+        border: 1.5px solid #fff;
 
-        .share-list-active {
-          background: rgba(29, 155, 240, 0.1);
-          border: 1.5px solid #1D9BF0 !important;
-          border-radius: 10px;
-        }
-        .share-list {
+        .share-item {
+          user-select: none;
+          width: 20%;
           display: flex;
-          flex-wrap: wrap;
-          width: 100%;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          padding: 8px 2px;
           box-sizing: border-box;
-          border: 1.5px solid #fff;
-
-          .share-item {
-            user-select: none;
-            width: 20%;
-            display: flex;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            padding: 8px 2px;
-            box-sizing: border-box;
-            border-radius: 12px;
-
-
-            cursor: pointer;
-            img {
-                width: 40px;
-                height: 40px;
-                border-radius: 100px;
-                margin-bottom: 8px;
-            }
-            .name {
-              font-weight: 400;
-              font-size: 12px;
-              color: #898989;
-              width: 100%;
-              overflow: hidden;
-              text-overflow: ellipsis; //文本溢出显示省略号
-              white-space: nowrap;
-              text-align: center;
-            }
+          border-radius: 12px;
+
+
+          cursor: pointer;
+
+          img {
+            width: 40px;
+            height: 40px;
+            border-radius: 100px;
+            margin-bottom: 8px;
           }
 
-          .share-item:hover {
-            background: #E3E3E4;
+          .name {
+            font-weight: 400;
+            font-size: 12px;
+            color: #898989;
+            width: 100%;
+            overflow: hidden;
+            text-overflow: ellipsis; //文本溢出显示省略号
+            white-space: nowrap;
+            text-align: center;
           }
+        }
 
+        .share-item:hover {
+          background: #E3E3E4;
         }
+
       }
     }
-    .mask {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 375px;
-      height: 100%;
-      background: rgba($color: #000000, $alpha: 0.9);
-      z-index: 1000;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      .content {
-        text-align: center;
-      }
+  }
 
-      .icon-loading {
-        width: 60px;
-        height: 60px;
-        animation: loading 1.5 1s linear;
-        margin-bottom: 30px;
-      }
+  .mask {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 375px;
+    height: 100%;
+    background: rgba($color: #000000, $alpha: 0.9);
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .content {
+      text-align: center;
+    }
 
-      .text {
-        font-weight: 600;
-        font-size: 17px;
-        color: #FFFFFF;
-      }
+    .icon-loading {
+      width: 60px;
+      height: 60px;
+      animation: loading 1.5 1s linear;
+      margin-bottom: 30px;
+    }
+
+    .text {
+      font-weight: 600;
+      font-size: 17px;
+      color: #FFFFFF;
     }
+  }
 
 
   @keyframes loading {
-      0% {
-          transform: rotate(0);
-      }
+    0% {
+      transform: rotate(0);
+    }
 
-      100% {
-          transform: rotate(360deg);
-      }
+    100% {
+      transform: rotate(360deg);
+    }
   }
 }
 </style>

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

@@ -1,5 +1,5 @@
 <template>
-    <div class="layer" :class="{ 'down': state.page_status == '显示开奖' }">
+    <div class="layer down">
         <div v-if="Number(state.start_task.amountValue) > 0">
             <div class="n1">
                 You Win <span>${{ state.start_task.usdAmountValue }} !</span>

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

@@ -1,5 +1,5 @@
 <template>
-    <invite-layer></invite-layer>
+    <invite-layer v-if="state.page_status == '显示开奖'"></invite-layer>
     <all-receive-list v-if="state.page_show == '总邀请者页'"></all-receive-list>
     <div v-show="state.page_show != '总邀请者页'">
         <!-- 邀请页 -->