[edit] preview 、bug fix

src/entry/content.js

@@ -10,7 +10,8 @@ import {
     hideIframeHandler,
     showTwitterPublishDialogHandler,
     setIframeRedPacket,
-    showPinTips
+    showPinTips,
+    addPinedPop
 } from "../logic/twitter.js";
 
 import { getChromeStorage } from "../uilts/chromeExtension";
@@ -27,7 +28,10 @@ chrome.storage.onChanged.addListener(changes => {
     if (changes.executeScript) {
         let item = JSON.parse(changes.executeScript.newValue)
         if (item.executeScript) {
-            init(item.isOnToolbar)
+            init()
+            setTimeout(() => {
+                addPinedPop();
+            }, 600)
         }
     }
 })

src/logic/twitter.js

@@ -70,7 +70,7 @@ export function backTwitterPinLoginCode(code) {
  * 渲染要插入的dom,初始化逻辑
  * @param port
  */
-export function renderDom(port, isOnToolbar) {
+export function renderDom(port) {
     if (window.location.href.indexOf('https://twitter.com') > -1) {
         _createBtnDom(port);
         onWindowResize();
@@ -79,7 +79,6 @@ export function renderDom(port, isOnToolbar) {
             _addIframe();
             _addDeNetBtn();
             _getSliderTwitterBtn();
-            addPinedPop(isOnToolbar);
         }, 800)
     }
 }
@@ -124,6 +123,41 @@ export function showPinTips() {
     })
 }
 
+export function addPinedPop() {
+    let domPop = document.getElementById('de-pin-pop');
+
+    if(domPop) {
+        return;
+    }
+
+    let popWrapper = document.createElement('div');
+    popWrapper.style.cssText = 'position: fixed; height: 400px;width: 300px;top: 12px;right: 20px;border-radius: 12px;border: 0.5px solid #919191;box-sizing: border-box;padding: 20px;background: #fff';
+    popWrapper.id = 'de-pin-pop'
+
+    let img = document.createElement('img');
+    img.src = require("../assets/img/img-pined-guide.png");
+
+    let contentDom = document.createElement('div');
+    contentDom.innerHTML = "<div style='font-weight: 500;font-size: 18px;margin-top: 20px;margin-bottom: 20px'>📌 Pin an Extension is more convenient to open😄</div><div style='display: flex; align-items: center; justify-content: space-between;'><div style='display: flex; align-items: center; font-size: 14px; color: #899099; cursor: pointer;'><input id='de-check' type='checkbox'/> Don't remind</div><div class='de-pin-skip' style='font-weight: 500; font-size: 16px; color: #389AFF;cursor: pointer;'>Skip</div></div>"
+
+    let arrow = document.createElement('div');
+    arrow.style.cssText = 'position: absolute;height: 15px;width: 15px;top: -8px;right: 80px;border-left: 0.5px solid rgb(145, 145, 145);border-top: 0.5px solid rgb(145, 145, 145);background: rgb(255, 255, 255);transform: rotate(45deg);';
+
+    popWrapper.appendChild(arrow);
+    popWrapper.appendChild(img);
+    popWrapper.appendChild(contentDom);
+
+    document.querySelector('body').appendChild(popWrapper);
+
+    document.querySelector('#de-check').onclick = function() {
+        setChromeStorage({ pinData: JSON.stringify({show: !this.checked}) })
+    }
+
+    document.querySelector('.de-pin-skip').onclick = function() {
+        document.querySelector('#de-pin-pop').style.display = 'none';
+    }
+}
+
 function getUserInfo(cb) {
     getChromeStorage('userInfo', (res) => {
         cb && cb(res);
@@ -389,41 +423,6 @@ function _createBtnDom(port) {
     dom.loadingImg = loadingImg;
 }
 
-function addPinedPop(isOnToolbar) {
-    let domPop = document.getElementById('de-pin-pop');
-
-    if(domPop || isOnToolbar) {
-        return;
-    }
-
-    let popWrapper = document.createElement('div');
-    popWrapper.style.cssText = 'position: fixed; height: 400px;width: 300px;top: 12px;right: 20px;border-radius: 12px;border: 0.5px solid #919191;box-sizing: border-box;padding: 20px;background: #fff';
-    popWrapper.id = 'de-pin-pop'
-
-    let img = document.createElement('img');
-    img.src = require("../assets/img/img-pined-guide.png");
-
-    let contentDom = document.createElement('div');
-    contentDom.innerHTML = "<div style='font-weight: 500;font-size: 18px;margin-top: 20px;margin-bottom: 20px'>📌 Pin an Extension is more convenient to open😄</div><div style='display: flex; align-items: center; justify-content: space-between;'><div style='display: flex; align-items: center; font-size: 14px; color: #899099; cursor: pointer;'><input id='de-check' type='checkbox'/> Don't remind</div><div class='de-pin-skip' style='font-weight: 500; font-size: 16px; color: #389AFF;cursor: pointer;'>Skip</div></div>"
-
-    let arrow = document.createElement('div');
-    arrow.style.cssText = 'position: absolute;height: 15px;width: 15px;top: -8px;right: 80px;border-left: 0.5px solid rgb(145, 145, 145);border-top: 0.5px solid rgb(145, 145, 145);background: rgb(255, 255, 255);transform: rotate(45deg);';
-
-    popWrapper.appendChild(arrow);
-    popWrapper.appendChild(img);
-    popWrapper.appendChild(contentDom);
-
-    document.querySelector('body').appendChild(popWrapper);
-
-    document.querySelector('#de-check').onclick = function() {
-        setChromeStorage({ pinData: JSON.stringify({show: !this.checked}) })
-    }
-
-    document.querySelector('.de-pin-skip').onclick = function() {
-        document.querySelector('#de-pin-pop').style.display = 'none';
-    }
-}
-
 function addSliderNavDeBtn(isSmall = false) {
     if (!isSmall) {
         let bigDom = document.querySelector('h1[role]').parentNode.parentNode;

src/view/components/custom-card-cover.vue

@@ -0,0 +1,197 @@
+<template>
+    <div class="not-open">
+        <img class="cover" :src="require('../../assets/subject/001-card.png')"  />
+        <img class="open-gif" :src="require('../../assets/gif/001.gif')" />
+
+        <img
+            :src="require('../../assets/svg/icon-open.svg')"
+            class="open"
+            @click="open"
+        />
+        <div class="title" v-if="data.userInfo">
+            <img :src="data.userInfo.avatarUrl" />
+            <span>{{
+                data.userInfo.nickName || "FutureDoctor"
+            }}</span>
+        </div>
+        <div class="money-area">
+            <div class="txt">{{ data.amountCurrencyCode }} GIVEAWAY</div>
+            <div class="coin">
+                <img :src="data.currencyIconUrl" />
+                <span>{{ data.amountValue > 100 ? data.amountValue / 100 : 0 }}</span>
+            </div>
+            <div class="people">
+                {{ data.totalCount }} WINNERS TO SHARE
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+/* eslint-disable */
+import { ref, defineProps, defineEmits } from "vue";
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: () => {
+            return {
+                detail: {
+                    totalCount: 0,
+                    amountValue: 0,
+                    amountCurrencyCode: "",
+                    userInfo: {
+                        avatarUrl: "",
+                        nickName: "",
+                    },
+                },
+            };
+        },
+    },
+});
+
+const emits = defineEmits(["clickOpenRedPacket"]);
+
+const open = () => {
+    emits("clickOpenRedPacket", {});
+};
+</script>
+
+<style scoped lang="scss">
+.not-open {
+    width: 100%;
+    height: 100%;
+    filter: drop-shadow(0px 2px 20px rgba(0, 0, 0, 0.1));
+    position: relative;
+    border-radius: 16px;
+
+    .money-area {
+        width: 100%;
+        position: absolute;
+        top: 65px;
+
+        .txt {
+            font-weight: 800;
+            font-size: 16px;
+            text-align: center;
+            letter-spacing: 0.3px;
+            color: #ffffff;
+        }
+
+        .coin {
+            text-align: center;
+            width: 100%;
+            padding: 6px 0;
+            margin: 0 auto;
+            display: flex;
+            align-items: center;
+            display: block;
+
+            img {
+                width: 46px;
+                height: 46px;
+                border-radius: 50%;
+                border: 3px solid #ffffff;
+            }
+
+            span {
+                margin-left: 15px;
+                font-weight: 800;
+                font-size: 60px;
+                line-height: 76px;
+                color: #ffffff;
+            }
+        }
+
+        .people {
+            font-weight: 800;
+            font-size: 13px;
+            line-height: 16px;
+            letter-spacing: 0.05em;
+            text-align: center;
+            color: #ffffff;
+        }
+    }
+
+    .title {
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        z-index: 3;
+        width: 100%;
+        display: flex;
+        align-items: center;
+
+        img {
+            width: 24px;
+            height: 24px;
+            border: 2px solid #fff4db;
+            border-radius: 50%;
+        }
+
+        span {
+            margin-left: 10px;
+            font-weight: 600;
+            font-size: 16px;
+            letter-spacing: 0.3px;
+            color: #fff2d3;
+        }
+    }
+
+    // .txt {
+    //   width: 100%;
+    //   position: absolute;
+    //   font-style: normal;
+    //   font-weight: 700;
+    //   font-size: 42px;
+    //   line-height: 50px;
+    //   text-align: center;
+
+    //   color: #FFF2D3;
+    //   top: 90px;
+    //   z-index: 3;
+    // }
+
+    img {
+        width: 100%;
+    }
+    
+    .cover {
+        border-radius: 16px;
+    }
+
+    .up {
+        position: absolute;
+        top: 0;
+        // box-shadow: 0px 4px 44px rgba(0, 0, 0, 0.1);
+        z-index: 1;
+    }
+
+    .down {
+        position: absolute;
+        top: 253px;
+    }
+
+    .open {
+        width: 335px;
+        height: 50px;
+        cursor: pointer;
+        position: absolute;
+        bottom: 28px;
+        left: 50%;
+        margin-left: -167.5px;
+        z-index: 2;
+    }
+
+    .open-gif {
+        width: 164px;
+        height: 194px;
+        text-align: center;
+        position: absolute;
+        bottom: 90px;
+        left: 50%;
+        margin-left: -82px;
+        z-index: 3;
+    }
+}
+</style>

src/view/components/follow-input.vue

@@ -282,7 +282,7 @@ const onUserMouseLeave = (params, index) => {
 
             .user-list-wrapper {
                 width: 284px;
-                height: 430px;
+                max-height: 430px;
                 position: absolute;
                 box-shadow: 0px 4px 20px 0px #0000004D;
                 overflow-y: scroll;

src/view/components/give-dialog.vue

@@ -289,14 +289,18 @@ const confirm = () => {
         return;
     }
     if(!calcIptValue()) {
-        showMessageBox.value = true;
-        messageBoxData.value.title = 'Quantity is too small';
-        messageBoxData.value.content = 'A Reward of $100 is recommended to be allocated to 100~10000 participants, would you prefer to modify it?';
         return;
     }
     submitRequest();
 };
 
+/*
+const messageBoxBlock = () => {
+    showMessageBox.value = true;
+    messageBoxData.value.title = 'Quantity is too small';
+    messageBoxData.value.content = 'A Reward of $100 is recommended to be allocated to 100~10000 participants, would you prefer to modify it?';
+}*/
+
 const messageBoxCancel = () => {
     showMessageBox.value = false;
     submitRequest();
@@ -494,7 +498,7 @@ const onCountBlur = () => {
 const setIptAmountErrorMsg = (cb) => {
     let res = calcIptValue();
     if(!res) {
-        iptErrMsgTxt.value = 'If you wish to send 100 red packets, please send USD amount > $1.00';
+        iptErrMsgTxt.value = `If you wish to send ${baseFormData.totalCount} red packets, please send USD amount > $${baseFormData.totalCount * 0.01}`;
     } else {
         iptErrMsgTxt.value = '';
     }
@@ -554,7 +558,7 @@ onMounted(() => {
     overflow: auto;
 
     .content {
-        width: 650px;
+        // width: 650px;
         height: 620px;
         background: #ffffff;
         border-radius: 20px;
@@ -656,6 +660,7 @@ onMounted(() => {
                         color: #fff;
                         margin-bottom: 8px;
                         position: absolute;
+                        z-index: 1000;
                         left: 0px;
                         top: 0px;
                         padding: 7px 12px;

src/view/components/preview-card.vue

@@ -1,56 +1,86 @@
+<!-- 发布器-预览卡片 -->
 <template>
     <div class="wrapper">
-        <div class="select-btn-wrapper">
-            <div class="title">Preview</div>
-            <div
-                class="select-btn"
-                v-for="(item, index) in btnList"
-                :key="index"
-                :class="{'active': previewType == index}"
-                @click="previewCard(item)">
-                <div class="text">
-                    <img class="icon" 
-                    :src="require('../../assets/svg/icon-radio-default.svg')"
-                    v-if="previewType != index ">
-                    <img class="icon" 
-                        :src="require('../../assets/svg/icon-radio-active.svg')" 
-                        v-else>{{ item.text }}</div>
-                <div class="desc">{{ item.desc }}</div>
-            </div>
-        </div>
         <div class="card-container">
-            <img class="img-preview" :src="require('../../assets/svg/icon-preview.svg')">
-            <div class="head">
-                <img :src="userInfo.avatarUrl"
-                    class="avatar"/>
-                <div class="article-wrapper">
-                    <div class="nickname">
-                        {{userInfo.name}}
+            <!-- 安装之后的卡片样式 -->
+            <div class="left">
+                <div class="tips">
+                    <div class="title">
+                        After
                     </div>
-                    <div class="name">
-                        @{{userInfo.nickName}}
+                    the installs denet
+                </div>
+                <div class="head">
+                    <img :src="userInfo.avatarUrl"
+                        class="avatar"/>
+                    <div class="article-wrapper">
+                        <div class="nickname">
+                            {{userInfo.name}}
+                        </div>
+                        <div class="name">
+                            @{{userInfo.nickName}}
+                        </div>
                     </div>
                 </div>
+                <div class="after-cover-wrapper">
+                    <custom-card-cover :data="{
+                        totalCount: baseFormData.totalCount,
+                        amountValue: baseFormData.amountValue * 100,
+                        amountCurrencyCode: 'USD',
+                        currencyIconUrl: require('../../assets/subject/icon-USD.png'),
+                        userInfo: {
+                            nickName: userInfo.name,
+                            avatarUrl: userInfo.avatarUrl
+                        }
+                    }"></custom-card-cover>
+                </div>
             </div>
-            <div v-if="previewType == 1" class="after-cover-wrapper">
-                <div class="cover-text"> 
+
+            <!-- 安装之前的卡片样式 -->
+            <div class="content-before">
+                <div class="tips">
+                    <div class="title">
+                        Before
+                    </div>
+                    the installs denet
+                </div>
+                <div class="head">
                     <img :src="userInfo.avatarUrl"
-                    class="avatar"/>
-                    Giveaways from: {{userInfo.name}}
+                        class="avatar"/>
+                    <div class="article-wrapper">
+                        <div class="nickname">
+                            {{userInfo.name}}
+                        </div>
+                        <div class="name">
+                            @{{userInfo.nickName}}
+                        </div>
+                    </div>
                 </div>
-                <img class="content-after" 
-                :src="require('../../assets/img/img-red-pack-cover.png')" />
-            </div>
-            <div class="content-before" v-else>
                 <div class="card-wrapper">
-                    <img :src="require('../../assets/img/icon-red-pack-card.png')"
+                    <img :src="require('../../assets/subject/img-card-cover-blue.png')"
                         class="card-cover"/>
-                    <div class="text-wrapper">
-                        <div class="amount">
-                            ${{baseFormData.amountValue}}
+                    <div class="bottom-bar">
+                        <div class="title">
+                            DeNet.me
                         </div>
                         <div class="desc">
-                            to {{baseFormData.totalCount}} People , Good Luck !
+                            🎁 ${{baseFormData.amountValue}} GIVEAWAY
+                        </div>
+                    </div>
+                    <div class="user-info">
+                        <img :src="userInfo.avatarUrl"
+                        class="avatar"/>{{userInfo.name}}
+                    </div>
+                    <div class="content-text">
+                        <div class="title">
+                            USD GIVEAWAY
+                        </div>
+                        <div class="center">
+                            <img src="../../assets/subject/icon-USD.png" class="icon">
+                            {{baseFormData.amountValue}}
+                        </div>
+                        <div class="desc">
+                            {{baseFormData.totalCount}} WINNERS TO SHARE
                         </div>
                     </div>
                 </div>
@@ -60,18 +90,15 @@
 </template>
 
 <script setup>
-import { reactive, ref, defineProps, onMounted } from "vue";
+import { ref, defineProps, onMounted, nextTick } from "vue";
+
+import customCardCover from './custom-card-cover.vue'
+
 import {getChromeStorage} from "../../uilts/chromeExtension"
 import {getUser} from "../../http/publishApi"
 
-let previewType = ref(1);
 let userInfo = ref({});
 
-let btnList = reactive([
-    { text: "Before", desc: "the installs denet", value: 0, checked: false },
-    { text: "After", desc: "the installs denet", value: 1, checked: true },
-]);
-
 defineProps({
     postData: {
         type: Object,
@@ -91,10 +118,6 @@ defineProps({
     }
 })
 
-const previewCard = (params) => {
-    previewType.value = params.value;
-};
-
 const getUserInfo = (cb) => {
     getChromeStorage('userInfo', (res) => {
         if(res) {
@@ -119,10 +142,12 @@ const getUserName = (screenName) => {
 
 onMounted(() => {
     getUserInfo((res) => {
+        nextTick(() => {
+        })
         if(res) {
             getUserName(res.nickName);
         }
-    }); 
+    });
 })
 
 </script>
@@ -146,18 +171,10 @@ onMounted(() => {
         width: 100%;
         height: fit-content;
         background: #ffffff;
-        border: 1px solid #e6e6e6;
         box-sizing: border-box;
         border-radius: 20px;
-        padding: 16px 16px 50px 16px;
-        position: relative;
-
-        .img-preview {
-            position: absolute;
-            right: 0;
-            top: 0;
-            z-index: 200;
-        }
+        padding: 0 16px;
+        display: flex;
 
         .head {
             display: flex;
@@ -188,75 +205,139 @@ onMounted(() => {
                 }
             }
         }
+        .left {
+            width: 430px;
+        }
 
         .after-cover-wrapper {
             position:relative;
-            width:320px;    
+            width:375px;
             margin-left: 53px;
-            margin-top: -15px;
-            .cover-text {
+            margin-top: -10px;
+
+            .icon-gif {
                 position: absolute;
                 left: 50%;
-                top: 40px;
+                bottom: 80px;
                 transform: translateX(-50%);
-                z-index: 100;
-                display: flex;
-                align-items: center;
-                font-size: 16px;
-                color: #FFF2D3;
-                width: max-content;
-
-                img {
-                    width: 24px;
-                    height: 24px;
-                    border: 2px solid #FFF4DB;
-                    box-sizing: border-box;
-                    border-radius: 50%;
-                    margin-right: 10px;
-                }
+                width: 160px;
+                height: 190px;
             }
-            
+
             .content-after {
-                width: 320px;
-                height: 423px;
+                width: 350px;
                 border-radius: 16px;
                 display: block;
                 object-fit: contain;
             }
         }
-        
+
 
         .content-before {
-            margin-top: -10px;
-            margin-left: 60px;
+            width: 550px;
+            margin-left: 40px;
             .card-wrapper {
+                width: 491px;
+                border: 1px solid #D1D9DD;
                 background: #ffffff;
                 box-sizing: border-box;
-                border-radius: 16px;
-                width: 100%;
                 overflow: hidden;
                 position: relative;
-                .text-wrapper {
+                box-sizing: border-box;
+                border-radius: 16px;
+                margin-left: 60px;
+                margin-top: -10px;
+
+                .user-info {
                     position: absolute;
-                    top: 30px;
-                    left: 108px;
+                    left: 15px;
+                    top: 15px;
+                    z-index: 100;
+                    display: flex;
+                    align-items: center;
+                    font-size: 16px;
+                    color: #FFF2D3;
+                    width: max-content;
 
-                    .amount {
-                        font-weight: bolder;
-                        font-size: 40px;
-                        color: #FFEABC;
+                    img {
+                        width: 24px;
+                        height: 24px;
+                        border: 2px solid #FFF4DB;
+                        box-sizing: border-box;
+                        border-radius: 50%;
+                        margin-right: 10px;
+                    }
+                }
+                .content-text {
+                    position: absolute;
+                    top: 68px;
+                    left: 35px;
+                    .title {
+                        font-weight: 800;
+                        font-size: 16px;
+                        color: #ffffff;
+                    }
+                    .center {
+                        padding: 12px 0;
+                        box-sizing: border-box;
+                        font-weight: 800;
+                        font-size: 56px;
+                        color: #fff;
+                        display: flex;
+                        align-items: center;
+                        .icon {
+                            width: 46px;
+                            height: 46px;
+                            margin-right: 10px;
+                            border: 3px solid #fff;
+                            border-radius: 50%;
+                        }
                     }
                     .desc {
-                        font-weight: 700;
-                        font-size: 12px;
-                        color: #F5CD77;
+                        font-weight: 800;
+                        font-size: 13px;
+                        color: #ffffff;
                     }
                 }
-
                 .card-cover {
                     width: 100%;
                     object-fit: contain;
                 }
+
+                .bottom-bar {
+                    padding: 12px;
+                    box-sizing: border-box;
+                    .title {
+                        color: #566370;
+                        font-weight: 400;
+                        font-size: 14px;
+                        margin-bottom: 6px;
+                    }
+                    .desc {
+                        font-weight: 500;
+                        font-size: 15px;
+                        color: #101419;
+                    }
+                }
+            }
+        }
+
+        .left, .content-before {
+            position: relative;
+            .tips {
+                position: absolute;
+                right: 0;
+                background: #F4F4F4;
+                border-radius: 6px;
+                padding: 3px 10px;
+                font-size: 10px;
+                color: #4D4D4D;
+
+                .title {
+                    font-weight: 500;
+                    font-size: 12px;
+                    color: #000;
+                }
             }
         }
     }