[add][加载态组件]

src/assets/svg/icon-loading-gray2.svg

@@ -0,0 +1,3 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.9992 3.33203V7.49869C17.2553 7.49927 14.5878 8.40267 12.4083 10.0695C10.2287 11.7364 8.65819 14.0741 7.93892 16.722C7.21965 19.3699 7.39163 22.1809 8.42832 24.7214C9.46501 27.2619 11.3088 29.3907 13.6753 30.7795C16.0418 32.1682 18.7995 32.7397 21.5229 32.4058C24.2464 32.0719 26.7844 30.8511 28.7453 28.9318C30.7062 27.0125 31.9811 24.5014 32.3734 21.7857C32.7657 19.07 32.2535 16.3007 30.9158 13.9049L34.5533 11.8737C36.3369 15.0681 37.0198 18.7605 36.4967 22.3815C35.9737 26.0025 34.2737 29.3508 31.659 31.9098C29.0444 34.4688 25.6604 36.0964 22.029 36.5415C18.3976 36.9866 14.7206 36.2245 11.5653 34.3727C8.41006 32.5209 5.95175 29.6823 4.56965 26.2949C3.18755 22.9074 2.95846 19.1593 3.91772 15.6287C4.87698 12.0982 6.97129 8.98135 9.87757 6.75906C12.7839 4.53676 16.3406 3.3325 19.9992 3.33203Z" fill="#E2E2E2"/>
+</svg>

src/view/components/loading.vue

@@ -0,0 +1,39 @@
+<template>
+    <img :src="icon" alt="" class="loading"
+        :style="{ 'width': `${width}px`, 'height': `${height}px`, 'margin-left': `-${width / 2}px`, 'margin-top': `-${height / 2}px` }" />
+</template>
+<script setup>
+import { defineProps } from "vue";
+const props = defineProps({
+    width: {
+        type: Number,
+        default: 40
+    },
+    height: {
+        type: Number,
+        default: 40
+    },
+    icon: {
+        type: String,
+        default: require('@/assets/svg/icon-loading-gray2.svg')
+    }
+})
+</script>
+<style lang="scss" scoped>
+.loading {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    animation: rotation 1s linear infinite;
+}
+
+@keyframes rotation {
+    from {
+        -webkit-transform: rotate(0deg);
+    }
+
+    to {
+        -webkit-transform: rotate(360deg);
+    }
+}
+</style>

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

@@ -1,48 +1,55 @@
 <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 <span>Real New follower</span> of {{followUserStr}} to receive rewards</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 <span>Real New follower</span> of {{ followUserStr }} to receive rewards
         </div>
-        <div class="invite-friends-content-body">
+      </div>
+      <div class="invite-friends-content-body">
+        <template v-if="state.share_list_end">
           <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 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"  />
+              @click="clickShare(item)" class="share-item">
+              <img :src="item.iconPath" />
               <div class="name">
-                {{item.name}}
+                {{ item.name }}
               </div>
             </div>
-            <div v-show="state.share_list_end" class="share-item copy-btn" @click="clickCopy" v-click-log="state.log_invite_copy_btn_click"
-                :data-clipboard-text="state.detail.inviteCopyUrl">
+            <div v-show="state.share_list_end" 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="channelLoadingImg" />
-          <div class="text">
-            Link copied to clipboard
-             <br/>
-            Opening {{selectShareApp.name }}
           </div>
+        </template>
+        <template v-else>
+          <v-loading></v-loading>
+        </template>
+      </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="channelLoadingImg" />
+        <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'
+import VLoading from '@/view/components/loading.vue'
 import { inviteChannel } from '@/http/treasure'
 import { inject, onMounted, ref } from 'vue'
 import Report from "@/log-center/log"
@@ -58,40 +65,40 @@ let channelLoadingImg = ref(loadingImg);
 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({});
@@ -99,299 +106,302 @@ 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
-                    state.share_list_end = true
-                }
-            })
-        })
-    } 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
+          state.share_list_end = true
+        }
+      })
+    })
+  } 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) => {
-    channelLoadingImg.value = loadingImg;
-    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();
+  channelLoadingImg.value = loadingImg;
+  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;
-          channelLoadingImg.value = '';
-          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,
-        redPacketType: Report.redPacketType.treasure
-    }, {
-        '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;
+      channelLoadingImg.value = '';
+      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,
+    redPacketType: Report.redPacketType.treasure
+  }, {
+    '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: 16px;
+      padding: 0 6px;
       box-sizing: border-box;
 
-      .invite-friends-content-head {
-        margin-bottom: 16px;
-        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;
+      .info {
+        font-weight: 400;
+        font-size: 12px;
+        color: #7A7A7A;
+        line-height: 15px;
+
+        span {
+          font-weight: 800;
           font-size: 12px;
-          color: #7A7A7A;
           line-height: 15px;
-          span{
-            font-family: 'SF Pro Display';
-            font-style: normal;
-            font-weight: 800;
-            font-size: 12px;
-            line-height: 15px;
-            /* identical to box height, or 125% */
-            letter-spacing: 0.3px;
-            color: #000000;
-          }
+          color: #000000;
         }
+      }
 
+    }
+
+    .invite-friends-content-body {
+      position: relative;
+      height: 159px;
+
+      .tips {
+        position: absolute;
+        top: -42px;
+        left: 0;
+        width: 146px;
       }
 
-      .invite-friends-content-body {
-        position: relative;
-        height: 159px;
+      .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 {
-            animation: fade-in-gray 0.25s linear forwards;
+          .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 {
+          animation: fade-in-gray 0.25s linear forwards;
         }
+
       }
     }
-    .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;
-        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;
+      margin-bottom: 30px;
     }
+
+    .text {
+      font-weight: 600;
+      font-size: 17px;
+      color: #FFFFFF;
+    }
+  }
+
   @keyframes fade-in-gray {
     from {
       background: none;