[add] preview style 逻辑优化

package.json

@@ -16,6 +16,7 @@
     "node-sass": "^7.0.1",
     "postcss-import": "^14.0.2",
     "postcss-url": "^10.1.3",
+    "quill": "^1.3.7",
     "sass-loader": "^12.6.0",
     "vue": "^3.2.13"
   },

src/logic/twitter.js

@@ -86,7 +86,7 @@ export function hideIframeHandler() {
 export function showTwitterPublishDialogHandler(publishRes) {
     dom.tweetBtn.click();
     _setPublishContent(publishRes.srcContent);
-    _publishTweetEvent(publishRes.srcContent ,(twitterArtId) => {
+    _publishTweetEvent(publishRes.postId ,(twitterArtId) => {
         if(twitterArtId) {
             getUserInfo((userInfo) => {
                 if(userInfo) {
@@ -121,8 +121,9 @@ function _publishTweetEvent(contentStr, cb) {
         let publishTweetBtn = document.querySelector('div[role="dialog"]').querySelector('div[data-testid="tweetButton"]');
         publishTweetBtn.addEventListener('click', function () {
             setTimeout(() => {
-                let twitterArtId = _getTwitterArtId(contentStr);
-                cb && cb(twitterArtId)
+                _getTwitterArtId(contentStr, (twitterArtId) => {
+                    cb && cb(twitterArtId)
+                });
             }, 1500)
         });
     }, 800)
@@ -138,11 +139,11 @@ function _publishTweetEvent(contentStr, cb) {
 function _addDeNetEditBtn(parent, dom, isClick = false) {
     setTimeout(() => {
         if (parent) {
-            parent.parentNode.insertBefore(dom, parent.nextSibling);
+            parent.parentNode.insertBefore(dom, parent.nextElementSibling);
         } else {
             setTimeout(() => {
                 parent = _getScheduleDom(isClick);
-                parent.parentNode.insertBefore(dom, parent.nextSibling);
+                parent.parentNode.insertBefore(dom, parent.nextElementSibling);
             }, 1000)
         }
     })
@@ -199,7 +200,7 @@ function _getScheduleDom(isDialogInner = false) {
     } else {
         let toolBar = document.querySelector('div[data-testid="toolBar"]');
         if (toolBar) {
-            scheduleBtn = toolBar.querySelector('div[data-testid="createPollButton"]');
+            scheduleBtn = toolBar.querySelector('div[data-testid="geoButton"]');
         }
     }
     return scheduleBtn;
@@ -227,10 +228,29 @@ function _addIframe() {
  * @returns {string}
  * @private
  */
-function _getTwitterArtId() {
-    let firstTwitterArtId = document.querySelector('article[data-testid="tweet"]').querySelector('a[dir="auto"]').getAttribute('href');
-
-    return firstTwitterArtId.split('/status/')[1];
+function _getTwitterArtId(contentStr, cb) {
+    // let firstTwitterArtId = document.querySelector('article[data-testid="tweet"]').querySelector('a[dir="auto"]').getAttribute('href');
+    // return firstTwitterArtId.split('/status/')[1];
+    let id = '';
+
+    let timer = setInterval(() => {
+        let artDomList = document.querySelectorAll('article[data-testid="tweet"]');
+        for(let i = 0; i < artDomList.length; i++) {
+            let itemChild = artDomList[i].querySelector('.css-1dbjc4n');
+            if(itemChild && itemChild.querySelector('div[lang="und"]')) {
+                let innerText = itemChild.querySelector('div[lang="und"]').innerText;
+                let regex = new RegExp(contentStr);
+                if(regex.test(innerText)) {
+                    id = itemChild.parentNode.querySelector('a[dir="auto"]').getAttribute('href').split('/status/')[1];
+                    clearInterval(timer);
+                    if(id) {
+                        cb && cb(id);
+                    }
+                    break;
+                }
+            }
+        }
+    }, 1000);
 }
 
 /**
@@ -261,6 +281,7 @@ function _deNetBtnClick(port) {
  */
 function _setPublishContent(content) {
     setTimeout(() => {
+        document.execCommand("insertText", false, '');
         document.execCommand("insertText", false, content);
     }, 1300);
 }
@@ -279,16 +300,17 @@ function _createBtnDom(port) {
     shadowDiv.style.cssText = 'width:220px;height: 52px;text-align:center;line-height:52px;margin-bottom: 4px;margin-top: 4px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:15px;font-weight:700;border-radius:100px;cursor: pointer;';
     shadowRoot.appendChild(shadowDiv);
 
-    const deBtn1 = document.createElement('div');
-    const smallDeBtnStyle = 'width:30px;height: 30px;text-align:center;line-height:30px;background: linear-gradient(274.8deg, #FF9900 -3.69%, #BD00FF 69.71%, #00F0FF 122.65%);color:#fff;font-size:12px;font-weight:500;border-radius:4px;cursor: pointer;';
-    deBtn1.innerText = 'De';
+    const deBtn1 = document.createElement('img');
+    let src = require( "../assets/img/icon-gift-pack.png");
+    const smallDeBtnStyle = 'width:20px;height: 20px;cursor: pointer;marign-left:4px;margin-right:4px';
     deBtn1.id = 'de-btn1';
     deBtn1.style.cssText = smallDeBtnStyle;
+    deBtn1.src =src
 
     const deBtn2 = document.createElement('div');
-    deBtn2.innerText = 'De';
     deBtn2.id = 'de-btn2';
     deBtn2.style.cssText = smallDeBtnStyle;
+    deBtn2.src = "../assets/img/icon-gift-pack.png"
 
     deBtn.addEventListener('click', () => {
         _deNetBtnClick(port);

src/view/components/give-dialog.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="overlay" v-if="visible">
-        <div class="content" 
+        <div class="content"
             :style="{height: showPreview ? previewDialogHeight + 'px' : dialogHeight +'px' }">
             <div class="head">
                 <div class="left">
@@ -26,6 +26,7 @@
                 </div>
                 <div class="right">
                     <template v-if="!showPreview">
+                        <div id="editor" class=""></div>
                         <div class="form-wrapper">
                             <div class="form-base">
                                 <div class="item">
@@ -60,20 +61,6 @@
                                             :src="require('../../assets/svg/icon-require.svg')" />
                                         Require
                                     </div>
-                                    <el-dropdown trigger="click">
-                                        <img class="icon-button"
-                                            :src="require('../../assets/svg/icon-add-option.svg')" />
-                                        <template #dropdown>
-                                            <el-dropdown-menu>
-                                                <el-dropdown-item
-                                                    v-for="(item, index) in optionsList"
-                                                    :key="index"
-                                                    @click="addOption(item)">
-                                                    {{ item.label }}
-                                                </el-dropdown-item>
-                                            </el-dropdown-menu>
-                                        </template>
-                                    </el-dropdown>
                                 </div>
                                 <div
                                     class="form-item"
@@ -97,25 +84,17 @@
                                                 'padding': '1px',
                                                 'line-height': '1'
                                             }"/>
-                                        <div
-                                            class="inner"
-                                            v-else
-                                            @click="selectChange(item)">
-                                            <img class="icon"
-                                                v-if="item.checked"
-                                                :src="require('../../assets/svg/icon-option-checked.svg')" />
-                                        </div>
                                     </div>
-                                    <img class="icon-remove-button"
-                                        @click="removeOption(item, index)"
-                                        :src="require('../../assets/svg/icon-remove-option.svg')" />
+                                    <el-switch v-model="item.checked" />
                                 </div>
                             </div>
+                            <div class="submit-btn" @click="confirm">NEXT</div>
                         </div>
-                        <div class="submit-btn" @click="confirm">NEXT</div>
+                    </template>
+                    <template v-if="showPreview">
+                        <preview-card :postData="publishRes"></preview-card>
                     </template>
                     <div v-show="showPreview">
-                        <preview-card></preview-card>
                         <paypal-button :amount="baseFormData.amountValue" @payPalFinsh="payPalFinsh"></paypal-button>
                     </div>
                 </div>
@@ -125,8 +104,14 @@
 </template>
 
 <script setup>
-import { ref, watch, reactive, defineProps, defineEmits } from "vue";
+import { ref, watch, reactive, defineProps, defineEmits, onMounted } from "vue";
 import {postPublish, verifyPaypalResult} from "../../http/publishApi"
+// import Quill from 'quill';
+// import 'quill/dist/quill.snow.css'
+
+// const quillOptions = {
+//     placeholder: 'Compose an epic...',
+// };
 
 import previewCard from "./preview-card";
 import paypalButton from "./paypal-button";
@@ -135,7 +120,7 @@ const paypalClientId = 'ASn7k0zqyS5AWYikVSfmamR-RFpjyU_QFJWSxOHHoWE04-RgHNO6nahn
 
 let publishRes = reactive({})
 
-let visible = ref(true);
+let visible = ref(false);
 let showPreview = ref(false);
 let dialogHeight = ref(620);
 let previewDialogHeight = ref(880)
@@ -146,33 +131,31 @@ let baseFormData = reactive({
     totalCount: "",
 });
 
-
-let optionsList = reactive([
-    { 
-        label: "Follow", 
+let formList = reactive([
+    {
+        label: "Follow",
         icon: require('../../assets/svg/icon-follow.svg'),
         nodeType: 'textarea',
         type: 1,
         text: '',
+        checked: true
     },
-    { 
+    {
         label: "Like",
         icon: require('../../assets/svg/icon-like.svg'),
         nodeType: 'div',
-        type: 2, 
-        checked: false
+        type: 2,
+        checked: true
     },
-    { 
+    {
         label: "Retweet",
         icon: require('../../assets/svg/icon-retweet.svg'),
         nodeType: 'div',
         type: 3,
-        checked: false
+        checked: true
     },
 ]);
 
-let formList = reactive([]);
-
 const props = defineProps({
     dialogVisible: {
         type: Boolean,
@@ -185,6 +168,9 @@ watch(
     (newVal) => {
         console.log("watch", newVal);
         visible.value = newVal;
+        if(newVal) {
+            // initQuill();
+        }
     }
 );
 
@@ -194,6 +180,7 @@ const close = () => {
     if (showPreview.value) {
         showPreview.value = false;
     } else {
+        initParams();
         emits("close", false);
     }
 };
@@ -218,11 +205,11 @@ const confirm = () => {
     for(let i = 0; i < formList.length; i++) {
         let item = {};
         item.type = formList[i]['type'];
-        if(item.type == 1 && formList[i]['text']) { // follow 参数
+        if(item.type == 1 && formList[i]['checked'] && formList[i]['text']) { // follow 参数
             let relatedUsers = [];
             let text = formList[i]['text'].replace(/\s*/g,""); // 删除空格
             let textList = text.split('@');
-            
+
             for(let i = 0; i < textList.length; i++) {
                 let item =  textList[i];
                 if(item) {
@@ -258,20 +245,11 @@ const confirm = () => {
     })
 };
 
-const addOption = (params) => {
-    let hasItem = formList.find((item) => item.type == params.type);
-    if (!formList.length || !hasItem) {
-        formList.push({...params});
-    }
-};
-
-const removeOption = (params, index) => {
-    formList.splice(index, 1);
-};
-
-const selectChange = (params) => {
-    params.checked = !params.checked;
-};
+const initParams = () => {
+    baseFormData.amountValue = '';
+    baseFormData.totalCount = '';
+    formList[0].text = '';
+}
 
 const payPalFinsh = (params) => {
     let transaction = params.transaction;
@@ -287,14 +265,45 @@ const payPalFinsh = (params) => {
             //支付状态 0：未支付，1：支付成功，2：支付失败，3：已关闭，4：已退款
             if(res.data && res.data.payStatus == 1) {
                 emits("payPalFinsh", {publishRes});
+                showPreview.value = false;
+                initParams();
             }
-        } 
+        }
     })
 }
 
+
+// const initQuill = () => {
+//     let container = document.getElementById('editor');
+//     let editor  = new Quill(container, quillOptions);
+
+//     editor.on('text-change', () => {
+//         if(editor.getText()) {
+//             /**
+//              * quill.insertText(5, 'Quill', {
+//                 'color': '#ffff00',
+//                 'italic': true
+//                 });
+//              */
+//             // editor.setContents([
+//             //     { insert: 'World!', attributes: { color: 'blue' } },
+//             // ]);
+//         }
+//         console.log(editor.getText())
+//     });
+// }
+
+onMounted(() => {
+    setPreviewDialogHeight();
+    // initQuill();
+})
+
 </script>
 
 <style lang="scss" scoped>
+.ql-container {
+    height: 100px;
+}
 .overlay {
     position: fixed;
     top: 0;

src/view/components/paypal-button.vue

@@ -1,7 +1,7 @@
 <template>
     <div class="pay-wrapper">
         <div class="pay-msg">
-            <div class="row">Pay $100</div>
+            <div class="row">Pay ${{amount || 0}}</div>
             <div class="row">Generate Giveaways</div>
         </div>
         <div class="pay-btn">

yarn.lock

@@ -2504,6 +2504,11 @@ clone@^1.0.2:
   resolved "https://registry.npmmirror.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clone@^2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/clone/-/clone-2.1.2.tgz#1b7f4b9f591f1e8f83670401600345a02887435f"
+  integrity sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=
+
 color-convert@^1.9.0:
   version "1.9.3"
   resolved "https://registry.npmmirror.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
@@ -3396,6 +3401,11 @@ event-pubsub@4.3.0:
   resolved "https://registry.npmmirror.com/event-pubsub/-/event-pubsub-4.3.0.tgz#f68d816bc29f1ec02c539dc58c8dd40ce72cb36e"
   integrity sha512-z7IyloorXvKbFx9Bpie2+vMJKKx1fH1EN5yiTfp8CiLOTptSYy1g8H4yDpGlEdshL1PBiFtBHepF2cNsqeEeFQ==
 
+eventemitter3@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-2.0.3.tgz#b5e1079b59fb5e1ba2771c0a993be060a58c99ba"
+  integrity sha1-teEHm1n7XhuidxwKmTvgYKWMmbo=
+
 eventemitter3@^4.0.0:
   version "4.0.7"
   resolved "https://registry.npmmirror.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
@@ -3483,7 +3493,7 @@ express@^4.17.1:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-extend@~3.0.2:
+extend@^3.0.2, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
@@ -3503,6 +3513,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.npmmirror.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-diff@1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/fast-diff/-/fast-diff-1.1.2.tgz#4b62c42b8e03de3f848460b639079920695d0154"
+  integrity sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig==
+
 fast-glob@^3.2.11, fast-glob@^3.2.7, fast-glob@^3.2.9:
   version "3.2.11"
   resolved "https://registry.npmmirror.com/fast-glob/-/fast-glob-3.2.11.tgz#a1172ad95ceb8a16e20caa5c5e56480e5129c1d9"
@@ -5193,11 +5208,6 @@ object-assign@^4.0.1, object-assign@^4.1.1:
   resolved "https://registry.npmmirror.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==
 
-object-inspect@^1.9.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
-  integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
-
 object-is@^1.0.1:
   version "1.1.5"
   resolved "https://registry.npmmirror.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
@@ -5347,6 +5357,11 @@ param-case@^3.0.4:
     dot-case "^3.0.4"
     tslib "^2.0.3"
 
+parchment@^1.1.4:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/parchment/-/parchment-1.1.4.tgz#aeded7ab938fe921d4c34bc339ce1168bc2ffde5"
+  integrity sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg==
+
 parent-module@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmmirror.com/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
@@ -5858,6 +5873,27 @@ quick-lru@^4.0.1:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
   integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
 
+quill-delta@^3.6.2:
+  version "3.6.3"
+  resolved "https://registry.yarnpkg.com/quill-delta/-/quill-delta-3.6.3.tgz#b19fd2b89412301c60e1ff213d8d860eac0f1032"
+  integrity sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==
+  dependencies:
+    deep-equal "^1.0.1"
+    extend "^3.0.2"
+    fast-diff "1.1.2"
+
+quill@^1.3.4, quill@^1.3.7:
+  version "1.3.7"
+  resolved "https://registry.yarnpkg.com/quill/-/quill-1.3.7.tgz#da5b2f3a2c470e932340cdbf3668c9f21f9286e8"
+  integrity sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==
+  dependencies:
+    clone "^2.1.1"
+    deep-equal "^1.0.1"
+    eventemitter3 "^2.0.3"
+    extend "^3.0.2"
+    parchment "^1.1.4"
+    quill-delta "^3.6.2"
+
 randombytes@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmmirror.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -6323,15 +6359,6 @@ shell-quote@^1.6.1:
   resolved "https://registry.npmmirror.com/shell-quote/-/shell-quote-1.7.3.tgz#aa40edac170445b9a431e17bb62c0b881b9c4123"
   integrity sha512-Vpfqwm4EnqGdlsBFNmHhxhElJYrdfcxPThu+ryKS5J8L/fhAwLazFZtq+S+TWZ9ANj2piSQLGj6NQg+lKPmxrw==
 
-side-channel@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/side-channel/-/side-channel-1.0.4.tgz#efce5c8fdc104ee751b25c58d4290011fa5ea2cf"
-  integrity sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==
-  dependencies:
-    call-bind "^1.0.0"
-    get-intrinsic "^1.0.2"
-    object-inspect "^1.9.0"
-
 signal-exit@^3.0.0, signal-exit@^3.0.2, signal-exit@^3.0.3, signal-exit@^3.0.7:
   version "3.0.7"
   resolved "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz#a9a1767f8af84155114eaabd73f99273c8f59ad9"