[add] head component

src/view/iframe/publish/components/follow-input.vue

@@ -57,7 +57,6 @@
 </template>
 
 <script setup>
-/* eslint-disable */
 import { reactive, ref, onMounted, defineEmits, defineProps, watch } from "vue";
 import {searchTwitterUser} from "@/http/publishApi";
 import {getChromeStorage} from "@/uilts/chromeExtension"

src/view/iframe/publish/components/give-dialog-head.vue

@@ -0,0 +1,170 @@
+<template>
+    <div class="head">
+        <div class="left">
+            <!-- 关闭按钮 -->
+            <div class="close-btn" @click="close">
+                <template v-if="publishType == 'TOOL_BOX'">
+                    <img  class="icon-close"
+                    :src="require('@/assets/svg/icon-close.svg')"
+                    v-if="toolBoxPageData.activePage == 'EDITOR'"/>
+                    <img class="icon-close"
+                        :src="require('@/assets/svg/icon-back.svg')"
+                        v-else/>
+                </template>
+                <template v-else>
+                    <img  class="icon-close"
+                    :src="require('@/assets/svg/icon-close.svg')"
+                    v-if="showComType == 'default'"/>
+                    <img class="icon-close"
+                        :src="require('@/assets/svg/icon-back.svg')"
+                        v-else/>
+                </template>
+            </div>
+            <!-- 标题 -->
+            <div class="title">
+                {{title}}
+            </div>
+        </div>
+        <div class="right">
+            <!-- 更多按钮 -->
+            <img :src="require('@/assets/svg/icon-more-l.svg')"
+                class="more"
+                @click="showMoreOption = true">
+            <div class="area-option" 
+                v-if="showMoreOption" 
+                @click="showMoreOption = false">
+                <div class="option">
+                    <div class="item" @click="goTransactionsList()">
+                        <img :src="require('@/assets/svg/icon-menu.svg')">
+                        <span>Transaction History</span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ref, defineEmits, defineProps } from "vue";
+
+const props = defineProps({
+    publishType: {
+        type: String,
+        default: 'REDPACKET'
+    },
+    showComType: {
+        type: String,
+        default: 'default'
+    },
+    toolBoxPageData: {
+        type: Object,
+        default: () => {
+            return {
+                activePage: 'EDITOR' //PREVIEW
+            }
+        }
+    },
+    title: {
+        type: String,
+        default: 'DeNet'
+    },
+})
+
+const emits = defineEmits(["close"]);
+
+// 展示更多按钮下的选项
+let showMoreOption = ref(false);
+
+const goTransactionsList = () => {
+    window.open(`${chrome.runtime.getURL('/iframe/home.html#/transactions')}`)
+}
+
+const close = () => {
+    emits('close', {})
+}
+
+</script>
+
+<style lang="scss" scoped>
+.head {
+    border-bottom: 1px solid #ececec;
+    height: 48px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0 14px;
+
+    .left {
+        display: flex;
+        align-items: center;
+        .title {
+            font-size: 16px;
+            font-weight: 500;
+        }
+
+        .close-btn {
+            display: flex;
+            align-items: center;
+            width: max-content;
+            margin-right: 12px;
+            cursor: pointer;
+        }
+    }
+
+    .right {
+        .more {
+            cursor: pointer;
+        }
+
+        .area-option {
+            width: 100%;
+            height: 100%;
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 111;
+
+            .option {
+                position: absolute;
+                top: 43px;
+                right: 15px;
+                background: #fff;
+                filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
+                width: 240px;
+                border-radius: 15px;
+                overflow: hidden;
+
+                .item {
+                    width: 100%;
+                    height: 50px;
+                    display: flex;
+                    align-items: center;
+                    cursor: pointer;
+                    border-top: 1px solid #E9E9E9;
+
+                    img {
+                        margin-left: 15px;
+                        width: 30px;
+                        height: 30px;
+                        margin-right: 6px;
+                    }
+
+                    span {
+                        font-weight: 500;
+                        font-size: 14px;
+                    }
+                }
+
+                .item:first-child {
+                    border-top: 0;
+                }
+
+                .item:hover {
+                        background: #F5F5F5;
+                }
+            }
+        }
+    }
+}
+</style>

src/view/iframe/publish/give-dialog.vue

@@ -9,51 +9,14 @@
                 v-show="showCurrencyPop || showCurrencySelect"
                 @click.stop="showCurrencyPop = false; showCurrencySelect=false">
             </div>
-
-            <!-- 头部 -->
-            <div class="head">
-                <div class="left">
-                    <!-- 关闭按钮 -->
-                    <div class="close-btn" @click="close">
-                        <template v-if="publishType == 'TOOL_BOX'">
-                            <img  class="icon-close"
-                            :src="require('@/assets/svg/icon-close.svg')"
-                            v-if="toolBoxPageData.activePage == 'EDITOR'"/>
-                            <img class="icon-close"
-                                :src="require('@/assets/svg/icon-back.svg')"
-                                v-else/>
-                        </template>
-                        <template v-else>
-                            <img  class="icon-close"
-                            :src="require('@/assets/svg/icon-close.svg')"
-                            v-if="showComType == 'default'"/>
-                            <img class="icon-close"
-                                :src="require('@/assets/svg/icon-back.svg')"
-                                v-else/>
-                        </template>
-                    </div>
-                    <!-- 标题 -->
-                    <div class="title">
-                        {{publishType == 'REDPACKET' ? currentComData[showComType]["title"] : 'Tool Box' }}
-                    </div>
-                </div>
-                <div class="right">
-                    <!-- 更多按钮 -->
-                    <img :src="require('@/assets/svg/icon-more-l.svg')"
-                        class="more"
-                        @click="showMoreOption = true">
-                    <div class="area-option" 
-                        v-if="showMoreOption" 
-                        @click="showMoreOption = false">
-                        <div class="option">
-                            <div class="item" @click="goTransactionsList()">
-                                <img :src="require('@/assets/svg/icon-menu.svg')">
-                                <span>Transaction History</span>
-                            </div>
-                        </div>
-                    </div>
-                </div>
-            </div>
+            
+            <!-- head -->
+            <give-dialog-head  
+                :title="publishType == 'REDPACKET' ? currentComData[showComType]['title'] : 'Tool Box'"
+                :publishType="publishType" 
+                :showComType="showComType"
+                :toolBoxPageData="toolBoxPageData"
+                @close="close"></give-dialog-head>
 
             <!-- 内容 -->
             <div class="body">
@@ -451,6 +414,7 @@
             @cancel="messageBoxCancel"
             @confirm="messageBoxConfirm"></message-box>
 
+        <!-- 预览页充值 -->
         <message-box
             :dialogVisible="showDepositMessageBox"
             title="Is the Deposit Completed?"
@@ -521,6 +485,7 @@ import topUp from "@/view/iframe/publish/components/top-up.vue";
 import topUp2 from "@/view/iframe/publish/components/top-up2.vue";
 import toolBox from '@/view/iframe/publish/tool-box/index.vue'
 import giveawayPoster from '@/view/iframe/publish/components/giveaway-poster.vue';
+import giveDialogHead from "@/view/iframe/publish/components/give-dialog-head";
 import GlobalTip from '@/view/components/global-tip.vue'
 import customCardCover from '@/view/components/custom-card-cover.vue'
 
@@ -617,9 +582,6 @@ let showDepositMessageBox = ref(false);
 let showCurrencyPop = ref(false);
 let showCurrencySelect = ref(false);
 
-// 展示更多按钮下的选项
-let showMoreOption = ref(false);
-
 // 货币列表的dom
 let currencyListDom = ref(null);
 
@@ -1530,18 +1492,6 @@ const formSwitchChange = (val, params, index) => {
     closeDiscordTask(val, params, index);
 }
 
-
-const hideTask = (params, index) => {
-    formList[index]['checked'] = false;
-    formList[index]['show'] = false;
-    closeDiscordTask(false, {type: 7}, index)
-}
-
-const clickDropdown = (params, index) => {
-    formList[index]['show'] = true;
-    formList[index]['checked'] = true;
-}
-
 const closeDiscordTask = (val, params, index) => {
     if(params.type == 7) {
         if(!val) {
@@ -1817,11 +1767,6 @@ const setFrontConfig = () => {
     });
 };
 
-const goTransactionsList = () => {
-    window.open(`${chrome.runtime.getURL('/iframe/home.html#/transactions')}`)
-}
-
-
 /**
  * 默认获取上次选中的货币信息
  */
@@ -2082,88 +2027,6 @@ onMounted(() => {
             z-index:900;
         }
 
-        .head {
-            border-bottom: 1px solid #ececec;
-            height: 48px;
-            box-sizing: border-box;
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            padding: 0 14px;
-
-            .left {
-                display: flex;
-                align-items: center;
-                .title {
-                    font-size: 16px;
-                    font-weight: 500;
-                }
-
-                .close-btn {
-                    display: flex;
-                    align-items: center;
-                    width: max-content;
-                    margin-right: 12px;
-                    cursor: pointer;
-                }
-            }
-
-            .right {
-                .more {
-                    cursor: pointer;
-                }
-
-                .area-option {
-                    width: 100%;
-                    height: 100%;
-                    position: absolute;
-                    top: 0;
-                    left: 0;
-                    z-index: 111;
-
-                    .option {
-                        position: absolute;
-                        top: 43px;
-                        right: 15px;
-                        background: #fff;
-                        filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
-                        width: 240px;
-                        border-radius: 15px;
-                        overflow: hidden;
-
-                        .item {
-                            width: 100%;
-                            height: 50px;
-                            display: flex;
-                            align-items: center;
-                            cursor: pointer;
-                            border-top: 1px solid #E9E9E9;
-
-                            img {
-                                margin-left: 15px;
-                                width: 30px;
-                                height: 30px;
-                                margin-right: 6px;
-                            }
-
-                            span {
-                                font-weight: 500;
-                                font-size: 14px;
-                            }
-                        }
-
-                        .item:first-child {
-                            border-top: 0;
-                        }
-
-                        .item:hover {
-                                background: #F5F5F5;
-                        }
-                    }
-                }
-            }
-        }
-
         .body {
             box-sizing: border-box;
             height: calc(100% - 48px);