[edit] dialog

src/logic/content/twitter.js

@@ -1341,7 +1341,7 @@ export const appendPopupPage = (params = {}) => {
 
 let showPopupPageFrom = '';
 export const showPopupPage = (params = {}) => {
-    let { path = '', from } = params;
+    let { path = '', from, showJoinGroupFinish = false } = params;
     showPopupPageFrom = from;
     hidePinTips();
     hideNoticeBindTweet();
@@ -1359,7 +1359,10 @@ export const showPopupPage = (params = {}) => {
     
         chrome.runtime.sendMessage({ 
             actionType: "CONTENT_POPUP_PAGE_SHOW", 
-            data: { } 
+            data: {
+                path,
+                showJoinGroupFinish,
+            }
         }, () => { });
 
         chrome.runtime.sendMessage({ 

src/view/components/join-group-finish-dialog.vue

@@ -0,0 +1,112 @@
+<template>
+    <div class="join-group-overlay" :style="{'position': position}" v-if="dialogVisible">
+        <div class="content-wrapper" :style="contentStyle">
+            <img :src="require('@/assets/svg/icon-celebration.svg')" 
+                class="icon-celebration"
+                :style="iconStyle">
+            <div class="desc" :style="descStyle">{{content}}</div>
+            <div class="btn-wrapper">
+                <div class="btn confirm" @click="confirm">Finish</div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineProps } from "vue";
+const props = defineProps({
+    dialogVisible: {
+        type: Boolean,
+        default: false,
+    },
+    content: {
+        type: String,
+        default: 'Joined Successfully'
+    },
+    position: {
+        type: String,
+        default: 'fixed'
+    },
+    contentStyle: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    iconStyle: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    descStyle: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    }
+});
+
+const emits = defineEmits(["confirm"]);
+
+const confirm = () => {
+    emits("confirm", {});
+};
+
+</script>
+
+<style lang="scss" scoped>
+.join-group-overlay {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 3000;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    overflow: auto;
+
+    .content-wrapper {
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        background: #FFFFFF;
+        border-radius: 20px;
+        box-sizing: border-box;
+        transform: translate(-50%, -50%);
+        text-align: center;
+        width: 500px;
+
+        .icon-celebration {
+            width: 120px;
+            margin-top: 60px;
+        }
+
+        .desc {
+            font-weight: 600;
+            font-size: 22px;
+            margin-top: 36px;
+            margin-bottom: 58px;
+        }
+
+        .btn-wrapper {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .confirm {
+                width: 100%;
+                padding: 14px;
+                box-sizing: border-box;
+                background: #1D9BF0;
+                color: #fff;
+                border-radius: 100px;
+                font-weight: 600;
+                font-size: 16px;
+                cursor: pointer;
+                margin: 0px 20px 20px 20px;
+            }
+        }
+    }
+}
+</style>

src/view/popup/tabbar-page/nft/index.vue

@@ -11,6 +11,16 @@
         <div class="name">{{item.nftItemName}}</div>
       </div>
     </div>
+    <join-group-finish-dialog 
+        :dialogVisible="joinGroupFinishShow"
+        :position="'absolute'" 
+        :contentStyle="{
+          width: '315px',
+        }"
+        :iconStyle="{width: '80px',  marginTop: '26px'}"
+        :descStyle="{marginTop: '24px', marginBottom: '25px', fontSize: '19px'}"
+        @confirm="confirmFinish">
+        </join-group-finish-dialog>
   </div>
 </template>
 
@@ -20,6 +30,8 @@ import router from "@/router/popup.js";
 
 import {nftListMine} from "@/http/nft.js";
 
+import joinGroupFinishDialog from "@/view/components/join-group-finish-dialog.vue";
+
 let listData = ref([]);
 
 let NFTReqParams = {
@@ -32,6 +44,7 @@ let NFTReqParams = {
 
 let pageWrapperDom = ref(null);
 let pageListDom = ref(null);
+let joinGroupFinishShow = ref(false);
 
 const clickNFT = (params) => {
   router.push({
@@ -85,10 +98,24 @@ const msgListener = (req, sender, sendResponse) => {
     switch (req.actionType) {
         case 'CONTENT_POPUP_PAGE_SHOW':
             getNFTListMine();
+            showJoinFinishHandler(req.data);
             break;
     }
 }
 
+const showJoinFinishHandler = (params) => {
+    let { path, showJoinGroupFinish} = params;
+    if(path == '/NFT' && showJoinGroupFinish) {
+      joinGroupFinishShow.value = true;
+    } else if(joinGroupFinishShow.value){
+      joinGroupFinishShow.value = false;
+    }
+}
+
+const confirmFinish = () => {
+  joinGroupFinishShow.value = false;
+}
+
 onMounted(() => {
   onMessage();
   getNFTListMine();