[add] preview dialog

src/view/paypal.html → library/paypal.html

@@ -57,6 +57,13 @@
                 }
                 paypal
                     .Buttons({
+                        style: {
+                            layout: 'horizontal',
+                            color:  'blue',
+                            shape:  'pill',
+                            tagline: false,
+                            height: 48
+                        },
                         // Sets up the transaction when a payment button is clicked
                         createOrder: function (data, actions) {
                             return actions.order.create({

src/entry/content.js

@@ -19,13 +19,13 @@ window.onload = () => {
 window.onmessage = (res) => {
 	if (res.data && res.data.actionType) {
 		switch (res.data.actionType) {
-			case "showIframe":
+			case "IFRAME_SHOW_IFREME":
 				showIframeHandler();
 				break;
-			case "hideIframe":
+			case "IFRAME_HIDE_IFREME":
 				hideIframeHandler();
 				break;
-			case "showTwitterPublishDialog":
+			case "IFRAME_SHOW_TWITTER_PUBLISH_DIALOG":
 				showTwitterPublishDialogHandler()
 				break;
 		}

src/logic/twitter.js

@@ -2,9 +2,7 @@
 import { getChromeStorage, setChromeStorage } from '../uilts/chromeExtension.js'
 import { getTtwitterRequestToken, twitterLogin } from '../server/twitter.js'
 
-let tweetBtn;
-
-let deBtn, deBtn1, deBtn2;
+let dom = {};
 
 export function contentTwitterPinLogin(port) {
     if (window.location.href == 'https://api.twitter.com/oauth/authorize') {
@@ -52,74 +50,64 @@ export function backTwitterPinLoginCode(code) {
     })
 }
 
-function getUserInfo (cb) {
-    getChromeStorage('userInfo', (res) => {
-        cb && cb(res);
-    })
-}
-
 /**
  * 渲染要插入的dom,初始化逻辑
  * @param port
  */
 export function renderDom (port) {
-    let {deBtn: deNet, deBtn1: deNet1, deBtn2: deNet2} = _createBtnDom(port);
-    deBtn = deNet;
-    deBtn1 = deNet1;
-    deBtn2 = deNet2;
-    setTimeout(() => {
-        _addIframe();
-        _addDeNetBtn();
-        _getSliderTwitterBtn();
-    }, 800)
-}
-
-/**
- * 监听dialog内点击原生发布按钮事件
- * @private
- */
-function _publishTweetEvent (cb) {
-    let publishTweetBtn = document.querySelector('div[role="dialog"]').querySelector('div[data-testid="tweetButton"]');
-    publishTweetBtn.addEventListener('click', function () {
+    if(window.location.href.indexOf('https://twitter.com') > -1) {
+        _createBtnDom(port);
         setTimeout(() => {
-            let twitterArtId = _getTwitterArtId();
-            cb && cb(twitterArtId)
-        }, 1000)
-    });
-}
-
-/**
- * 获取插入的iframe
- * @returns {HTMLElement}
- */
-function getIframe () {
-    let iframe = document.getElementById('iframe-test');
-    return iframe;
+            _addIframe();
+            _addDeNetBtn();
+            _getSliderTwitterBtn();
+        }, 800)
+    }
 }
 
 /**
  * 展示give弹窗
  */
 export function showGiveDialogHandler() {
-    getIframe().contentWindow.postMessage({actionType : 'showGiveDialog'}, '*');
+    dom.iframe.contentWindow.postMessage({actionType : 'CONTENT_SHOW_GIVE_DIALOG'}, '*');
 }
 
 export function showIframeHandler () {
-    getIframe().style.display = 'block';
+    dom.iframe.style.display = 'block';
 }
 
 export function hideIframeHandler () {
-    getIframe().style.display = 'none';
+    dom.iframe.style.display = 'none';
 }
 
 /**
  * 展示twitter原生发布框
  */
 export function showTwitterPublishDialogHandler () {
-    tweetBtn.click();
+    dom.tweetBtn.click();
     _publishTweetEvent();
 }
 
+function getUserInfo (cb) {
+    getChromeStorage('userInfo', (res) => {
+        cb && cb(res);
+    })
+}
+
+/**
+ * 监听dialog内点击原生发布按钮事件
+ * @private
+ */
+ function _publishTweetEvent (cb) {
+    let publishTweetBtn = document.querySelector('div[role="dialog"]').querySelector('div[data-testid="tweetButton"]');
+    publishTweetBtn.addEventListener('click', function () {
+        setTimeout(() => {
+            let twitterArtId = _getTwitterArtId();
+            cb && cb(twitterArtId)
+        }, 1000)
+    });
+}
+
 /**
  * 在输入推文区插入deNet按钮
  * @param parent
@@ -147,7 +135,7 @@ function _addDeNetEditBtn (parent, dom, isClick = false) {
 function _addDeNetBtnToDialog () {
     setTimeout(() => {
         let dialogScheduleBtn = _getScheduleDom(true);
-        _addDeNetEditBtn(dialogScheduleBtn, deBtn2);
+        _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn2);
     }, 800)
 }
 
@@ -156,9 +144,9 @@ function _addDeNetBtnToDialog () {
  * @private
  */
 function _getSliderTwitterBtn () {
-    tweetBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
-    tweetBtn.addEventListener('click', function () {
-        _addDeNetBtnToDialog();
+    dom.tweetBtn = document.querySelector('a[data-testid="SideNav_NewTweet_Button"]');
+    dom.tweetBtn.addEventListener('click', function () {
+        // _addDeNetBtnToDialog();
     })
 }
 
@@ -170,11 +158,11 @@ function _addDeNetBtn () {
     setTimeout(() => {
         let node = document.querySelector('header[role="banner"]').querySelector('.r-1habvwh');
         if (node) {
-            node.appendChild(deBtn);
+            node.appendChild(dom.deBtn);
         }
         
         let dialogScheduleBtn = _getScheduleDom(false);
-        _addDeNetEditBtn(dialogScheduleBtn, deBtn1);
+        _addDeNetEditBtn(dialogScheduleBtn, dom.deBtn1);
     }, 800)
 }
 
@@ -189,7 +177,6 @@ function _getScheduleDom (isDialogInner = false) {
     if (isDialogInner) {
         scheduleBtn = document.querySelector('div[role="dialog"]').querySelector('[data-testid="createPollButton"]');
     } else {
-        // eslint-disable-next-line no-unused-vars
         let toolBar = document.querySelector('div[data-testid="toolBar"]');
         if (toolBar) {
             scheduleBtn = toolBar.querySelector('div[data-testid="createPollButton"]');
@@ -211,6 +198,7 @@ function _addIframe () {
     iframe.style.cssText = 'position:fixed;top:0px;right:0;display:block; width:100%;height:100%;z-index:0; border: medium none;display:none';
     // shadowRoot.appendChild(iframe);
     // document.body.appendChild(span)
+    dom.iframe = iframe;
     document.getElementById('layers').appendChild(iframe)
 }
 
@@ -283,12 +271,9 @@ function _createBtnDom (port) {
     deBtn2.addEventListener('click', () => {
         _deNetBtnClick(port);
     })
-    
-    return {
-        deBtn,
-        deBtn1,
-        deBtn2
-    }
+    dom.deBtn = deBtn;
+    dom.deBtn1 = deBtn1;
+    dom.deBtn2 = deBtn2;
 }
 
 /* setInterval(() => {

src/view/components/give-dialog.vue

@@ -1,156 +1,193 @@
 <template>
-  <div class="overlay" v-if="visible">
-    <div class="content">
-      <div class="head">
-        <div class="close-btn" @click="close">
-          ×
-        </div>
-      </div>
-      <div class="body">
-        <div class="left"></div>
-        <div class="right">
-          <div class="form-wrapper">
-            <div class="form-base">
-              <div class="item">
-                <div class="label">
-                  USD
-                </div>
-                <el-input v-model="baseFormData.amount"
-                          placeholder="$0.00"
-                          :input-style="{'box-shadow': 'none'}" />
-              </div>
-              <div class="item">
-                <div class="label">
-                  Quantity
+    <div class="overlay" v-if="visible">
+        <div class="content" 
+            :style="{height: showPreview ? previewDialogHeight + 'px' : dialogHeight +'px' }">
+            <div class="head">
+                <div class="close-btn" @click="close">
+                    {{ showPreview ? "🔙" : "× " }}
                 </div>
-                <el-input v-model="baseFormData.quantity"
-                          placeholder="Enter quantity"
-                          :input-style="{'box-shadow': 'none'}" />
-              </div>
             </div>
-            <div class="form-require">
-              <div class="bar">
-                <div class="label">
-                  Require
-                </div>
-                <el-dropdown trigger="click">
-                  <div class="button">＋</div>
-                  <template #dropdown>
-                    <el-dropdown-menu>
-                      <el-dropdown-item
-                        v-for="(item, index) in optionsList"
-                        :key="index"
-                        @click="addOption(item)">
-                        {{item.type}}
-                      </el-dropdown-item>
-                    </el-dropdown-menu>
-                  </template>
-                </el-dropdown>
-              </div>
-              <div class="form-item"
-                   v-for="(item, index) in formList"
-                   :key="index">
-                <div class="label">
-                  {{item.type}}
-                </div>
-                <div class="control">
-                  <el-input v-model="formData[item.type]"
-                            placeholder="Please input"
-                            :input-style="{'box-shadow': 'none'}"
-                            v-if="item.type == 'Follow'"/>
-                  <div class="inner"
-                       v-else
-                       @click="selectChange(item)">
-                    {{formData[item.type]?'✅':'❌'}}
-                  </div>
+            <div class="body">
+                <div class="left"></div>
+                <div class="right">
+                    <template v-if="!showPreview">
+                        <div class="form-wrapper">
+                            <div class="form-base">
+                                <div class="item">
+                                    <div class="label">USD</div>
+                                    <el-input
+                                        v-model="baseFormData.amount"
+                                        placeholder="$0.00"
+                                        :input-style="{ 'box-shadow': 'none' }"/>
+                                </div>
+                                <div class="item">
+                                    <div class="label">Quantity</div>
+                                    <el-input
+                                        v-model="baseFormData.quantity"
+                                        placeholder="Enter quantity"
+                                        :input-style="{ 'box-shadow': 'none' }"/>
+                                </div>
+                            </div>
+                            <div class="form-require">
+                                <div class="bar">
+                                    <div class="label">Require</div>
+                                    <el-dropdown trigger="click">
+                                        <div class="button">＋</div>
+                                        <template #dropdown>
+                                            <el-dropdown-menu>
+                                                <el-dropdown-item
+                                                    v-for="(item, index) in optionsList"
+                                                    :key="index"
+                                                    @click="addOption(item)">
+                                                    {{ item.type }}
+                                                </el-dropdown-item>
+                                            </el-dropdown-menu>
+                                        </template>
+                                    </el-dropdown>
+                                </div>
+                                <div
+                                    class="form-item"
+                                    v-for="(item, index) in formList"
+                                    :key="index">
+                                    <div class="label">
+                                        {{ item.type }}
+                                    </div>
+                                    <div class="control">
+                                        <el-input
+                                            v-model="formData[item.type]"
+                                            v-if="item.type == 'Follow'"
+                                            placeholder="Please input"
+                                            :input-style="{
+                                                'box-shadow': 'none',
+                                            }"/>
+                                        <div
+                                            class="inner"
+                                            v-else
+                                            @click="selectChange(item)">
+                                            {{formData[item.type]? "✅": "❌"}}
+                                        </div>
+                                    </div>
+                                    <div
+                                        class="btn"
+                                        @click="removeOption(item, index)">
+                                        ×
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="submit-btn" @click="confirm">NEXT</div>
+                    </template>
+                    <template v-else>
+                        <preview-card></preview-card>
+                        <paypal-button :amount="baseFormData.amount" @payPalFinsh="payPalFinsh"></paypal-button>
+                    </template>
                 </div>
-                <div class="btn" @click="removeOption(item, index)">
-                  ×
-                </div>
-              </div>
             </div>
-          </div>
-
-          <div class="submit-btn" @click="confirm">
-            NEXT
-          </div>
         </div>
-      </div>
     </div>
-  </div>
 </template>
 
 <script setup>
 /* eslint-disable */
-  import {ref, watch, reactive} from "vue";
-  let visible = ref(true);
-
-  let baseFormData = reactive({
-		amount: '',
-		quantity: '',
-	});
-
-  let formData = reactive({
-		Follow: '',
-		Like: false,
-		Retweet: false
-  });
-
-  let optionsList = reactive([
-    {type: 'Follow'},
-    {type: 'Like'},
-    {type: 'Retweet'},
-  ]);
-
-  let formList = reactive([
-		{type: 'Follow'},
-		{type: 'Like'},
-		{type: 'Retweet'},
-	]);
-
-  const props = defineProps({
-		dialogVisible: {
-			type: Boolean,
-      default: false
-    }
-  })
+import { ref, watch, reactive, onMounted } from "vue";
+import previewCard from "./preview-card";
+import paypalButton from "./paypal-button";
+
+let visible = ref(true);
+let showPreview = ref(false);
+let dialogHeight = ref(620);
+let previewDialogHeight = ref(880)
+
+let baseFormData = reactive({
+    amount: "",
+    quantity: "",
+});
+
+let formData = reactive({
+    Follow: "",
+    Like: false,
+    Retweet: false,
+});
+
+let optionsList = reactive([
+    { type: "Follow" },
+    { type: "Like" },
+    { type: "Retweet" },
+]);
+
+let formList = reactive([
+    { type: "Follow" },
+    { type: "Like" },
+    { type: "Retweet" },
+]);
+
+const props = defineProps({
+    dialogVisible: {
+        type: Boolean,
+        default: false,
+    },
+});
 
-  watch(
+watch(
     () => props.dialogVisible,
     (newVal, oldVal) => {
-    	console.log('watch', newVal)
-      visible.value = newVal
+        console.log("watch", newVal);
+        visible.value = newVal;
     }
-  );
+);
 
-	const emits = defineEmits(['close', 'confirm'])
+const emits = defineEmits(["close", "confirm"]);
 
-	const close = () => {
-  	emits('close', false)
-	}
+const close = () => {
+    if (showPreview) {
+        showPreview.value = false;
+    } else {
+        emits("close", false);
+    }
+};
+
+const setPreviewDialogHeight = () => {
+    let clientHeight = document.documentElement.clientHeight;
+    let gapSafe = 80;
+
+    if(clientHeight - gapSafe >= previewDialogHeight.value) {
+
+    } else {
+        previewDialogHeight.value = clientHeight - gapSafe;
+    }
+};
+
+const confirm = () => {
+    setPreviewDialogHeight();
+    showPreview.value = true;
+};
 
-	const confirm = () => {
-		emits('confirm', false)
-	}
+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, index) => {
+    formData[params.type] = !formData[params.type];
+};
 
-	const addOption = (params) => {
-		let hasItem = formList.find(item => item.type == params.type);
-		if (!formList.length || !hasItem) {
-			formList.push(params)
-		}
-	}
+const payPalFinsh = () => {
+    emits("close", false);
+}
 
-	const removeOption = (params, index) => {
-		formList.splice(index, 1);
-  }
+onMounted(() => {
+});
 
-	const selectChange = (params, index) => {
-		formData[params.type] = !formData[params.type];
-  }
 </script>
 
 <style lang="scss" scoped>
-  .overlay {
+.overlay {
     position: fixed;
     top: 0;
     right: 0;
@@ -158,151 +195,163 @@
     left: 0;
     z-index: 2000;
     height: 100%;
-    background-color: rgba(0,0,0,.5);
+    background-color: rgba(0, 0, 0, 0.5);
     overflow: auto;
 
     .content {
-      width: 43%;
-      height: 500px;
-      background: #FFFFFF;
-      border-radius: 16px;
-      position: absolute;
-      left: 50%;
-      top: 10%;
-      transform: translate(-50%, 0);
-      box-sizing: border-box;
-
-      .head {
-        border-bottom: 1px solid #ECECEC;
-        height: 48px;
+        width: 650px;
+        height: 620px;
+        background: #ffffff;
+        border-radius: 16px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%, -50%);
         box-sizing: border-box;
-        display: flex;
-        align-items: center;
-        .close-btn {
-          width: max-content;
-          font-size: 20px;
-          margin-left: 20px;
-          cursor: pointer;
-        }
-      }
-      .body {
-        box-sizing: border-box;
-        height: calc(100% - 48px);
-        display: flex;
-        .left,.right {
-          height: 100%;
-        }
-        .left {
-          width: 50px;
+
+        .head {
+            border-bottom: 1px solid #ececec;
+            height: 48px;
+            box-sizing: border-box;
+            display: flex;
+            align-items: center;
+
+            .close-btn {
+                width: max-content;
+                font-size: 20px;
+                margin-left: 20px;
+                cursor: pointer;
+            }
         }
-        .right {
-          width: calc(100% - 50px);
-          padding: 26px 18px;
-          box-sizing: border-box;
-          position: relative;
-          border-left: 1px solid #ECECEC;
-
-          .form-wrapper {
-            .form-base {
-              display: flex;
-              justify-content: space-between;
-              align-items: center;
-              .item {
-                width: 250px;
-                height: 60px;
-                border: 1px solid #E1E1E1;
-                box-sizing: border-box;
-                border-radius: 15px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                padding: 18px 16px;
-
-                .label {
-                  font-weight: 500;
-                  font-size: 15px;
-
-                  .img {
-                    width: 20px;
-                    height: 20px;
-                  }
-                }
-              }
+
+        .body {
+            box-sizing: border-box;
+            height: calc(100% - 48px);
+            display: flex;
+
+            .left,
+            .right {
+                height: 100%;
             }
 
-            .form-require {
-              border: 1px solid #E1E1E1;
-              box-sizing: border-box;
-              border-radius: 15px;
-              margin-top: 12px;
+            .left {
+                width: 50px;
+            }
 
-              .bar {
-                padding: 2px 10px 0 10px;
+            .right {
+                width: calc(100% - 50px);
                 box-sizing: border-box;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                line-height: 50px;
-
-                .button {
-                  width: 22px;
-                  height: 22px;
-                  background: #4A99E9;
-                  border-radius: 5px;
-                  display: flex;
-                  align-items: center;
-                  justify-content: center;
-                  color: #fff;
-                  cursor: pointer;
-                }
-              }
-
-              .form-item {
-                height: 50px;
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                margin: 0 16px;
-                border-bottom: 1px solid #ECECEC;
-                .label {
-                  width: 100px;
-                  color: rgba(0,0,0,.6);
-                }
-                .control {
-                  width: 264px;
-                  height: 50px;
-                  line-height: 50px;
-                  cursor: pointer;
-
-                  .inner {
-                    width: 100%;
-                    height: 100%;
+                position: relative;
+                border-left: 1px solid #ececec;
+
+                .form-wrapper {
+                    padding: 26px 18px;
                     box-sizing: border-box;
-                    padding-left: 10px;
-                  }
+
+                    .form-base {
+                        display: flex;
+                        justify-content: space-between;
+                        align-items: center;
+
+                        .item {
+                            width: 220px;
+                            height: 60px;
+                            border: 1px solid #e1e1e1;
+                            box-sizing: border-box;
+                            border-radius: 15px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            padding: 16px 14px;
+
+                            .label {
+                                font-weight: 500;
+                                font-size: 15px;
+
+                                .img {
+                                    width: 20px;
+                                    height: 20px;
+                                }
+                            }
+                        }
+                    }
+
+                    .form-require {
+                        border: 1px solid #e1e1e1;
+                        box-sizing: border-box;
+                        border-radius: 15px;
+                        margin-top: 12px;
+
+                        .bar {
+                            padding: 2px 10px 0 10px;
+                            box-sizing: border-box;
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            line-height: 50px;
+
+                            .button {
+                                width: 22px;
+                                height: 22px;
+                                background: #4a99e9;
+                                border-radius: 5px;
+                                display: flex;
+                                align-items: center;
+                                justify-content: center;
+                                color: #fff;
+                                cursor: pointer;
+                            }
+                        }
+
+                        .form-item {
+                            height: 50px;
+                            display: flex;
+                            align-items: center;
+                            justify-content: space-between;
+                            margin: 0 16px;
+                            border-bottom: 1px solid #ececec;
+
+                            .label {
+                                width: 100px;
+                                color: rgba(0, 0, 0, 0.6);
+                            }
+
+                            .control {
+                                width: 264px;
+                                height: 50px;
+                                line-height: 50px;
+                                cursor: pointer;
+
+                                .inner {
+                                    width: 100%;
+                                    height: 100%;
+                                    box-sizing: border-box;
+                                    padding-left: 10px;
+                                }
+                            }
+
+                            .btn {
+                                cursor: pointer;
+                            }
+                        }
+                    }
                 }
-                .btn {
-                  cursor: pointer;
+
+                .submit-btn {
+                    width: calc(100% - 36px);
+                    height: 60px;
+                    text-align: center;
+                    line-height: 60px;
+                    background: #4a99e9;
+                    border-radius: 15px;
+                    color: #fff;
+                    position: absolute;
+                    bottom: 32px;
+                    left: 18px;
+                    cursor: pointer;
                 }
-              }
             }
-          }
-
-          .submit-btn {
-            width: calc(100% - 36px);
-            height: 60px;
-            text-align: center;
-            line-height: 60px;
-            background: #4A99E9;
-            border-radius: 15px;
-            color: #fff;
-            position: absolute;
-            bottom: 32px;
-            left: 18px;
-            cursor: pointer;
-          }
         }
-      }
     }
-  }
+}
 </style>

src/view/components/pay-dialog.vue

@@ -1,80 +0,0 @@
-<template>
-  <el-dialog
-    v-model="visible"
-    title="Tips"
-    width="30%"
-    @close="close">
-    <div ref="content">
-      <iframe class="iframe-pay"
-              ref="iframe"
-              src="https://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/testScript.html"></iframe>
-    </div>
-    <template #footer>
-      <span class="dialog-footer">
-<!--    <el-button @click="close">Cancel</el-button>-->
-        <el-button type="primary" @click="confirm">Confirm</el-button>
-      </span>
-    </template>
-  </el-dialog>
-</template>
-<script setup>
-/* eslint-disable */
-  import {ref, watch, nextTick, onMounted, getCurrentInstance, } from "vue";
-  let visible = ref(false);
-  let iframe = ref(null);
-  let amount = ref(5);
-  const { proxy } = getCurrentInstance();
-
-  const props = defineProps({
-		dialogVisible: {
-			type: Boolean,
-      default: false
-    }
-  })
-
-  onMounted(() => {
-		window.addEventListener("message", function (event) {
-			if (event.data && event.data.actionType) {
-				switch (event.data.actionType) {
-					case 'payCallBack':
-						let {orderData, transaction} = event.data;
-						console.log('payCallBack',orderData, transaction)
-						break;
-					case "iframeLoaded":
-						iframe.value.contentWindow.postMessage({actionType : 'setAmount', amount: amount.value}, '*');
-						break;
-				}
-			}
-		});
-	});
-
-  watch(
-    () => props.dialogVisible,
-    (newVal, oldVal) => {
-      visible.value = newVal;
-    	if (newVal) {
-				nextTick(() => {
-				})
-			}
-    }
-  );
-
-	const emits = defineEmits(['close', 'confirm'])
-
-	const close = () => {
-  	emits('close', false)
-	}
-
-	const confirm = () => {
-		emits('confirm', false)
-	}
-</script>
-
-<style scoped>
-  .iframe-pay {
-    width: 400px;
-    height: 200px;
-    border: medium none;
-    display: block;
-  }
-</style>

src/view/components/paypal-button.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="pay-wrapper">
+        <div class="pay-msg">
+            <div class="row">Pay $100</div>
+            <div class="row">Generate Giveaways</div>
+        </div>
+        <div class="pay-btn">
+            <iframe
+                class="iframe-pay"
+                ref="iframe"
+                src="https://art-weapp.oss-cn-hangzhou.aliyuncs.com/chromeExtension/paypal.html"></iframe>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { onMounted, ref, defineProps, defineEmits } from "vue";
+
+let iframe = ref(null);
+
+const props = defineProps({
+    amount: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const emits = defineEmits(["payPalFinsh"]);
+
+onMounted(() => {
+    window.addEventListener("message", function (event) {
+        if (event.data && event.data.actionType) {
+            switch (event.data.actionType) {
+                case "payCallBack":
+                    console.log(
+                        "payCallBack",
+                        event.data.orderData,
+                        event.data.transaction
+                    );
+                    emits("payPalFinsh", {});
+                    window.parent.postMessage({ actionType: "IFRAME_SHOW_TWITTER_PUBLISH_DIALOG" }, "*");
+                    break;
+                case "iframeLoaded":
+                    iframe.value.contentWindow.postMessage(
+                        { actionType: "setAmount", amount: props.amount },
+                        "*"
+                    );
+                    break;
+            }
+        }
+    });
+});
+</script>
+
+<style lang="scss" scoped>
+.pay-wrapper {
+    width: 100%;
+    height: 68px;
+    background-color: #fff;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    border-top: 1px solid;
+    border-bottom-right-radius: 16px;
+    padding: 12px 30px;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    .pay-msg {
+        font-weight: 600;
+        font-size: 17px;
+    }
+
+    .pay-btn {
+        width: 182px;
+        height: 48px;
+
+        iframe {
+            border: medium none;
+            width: 100%;
+            height: 100%;
+        }
+    }
+}
+</style>

src/view/components/preview-card.vue

@@ -0,0 +1,206 @@
+<template>
+    <div class="wrapper">
+        <div class="select-btn-wrapper">
+            <div
+                class="select-btn"
+                v-for="(item, index) in btnList"
+                :key="index"
+                :class="{ active: previewType == index }"
+                @click="previewCard(item)">
+                <div class="text">{{ item.text }}</div>
+                <div class="desc">{{ item.desc }}</div>
+            </div>
+        </div>
+        <div class="card-container">
+            <div class="head">
+                <img
+                    src="https://t7.baidu.com/it/u=2006997523,200382512&fm=193&f=GIF"
+                    class="avatar"/>
+                <div class="article-wrapper">
+                    <div class="nickname">Elon Musk</div>
+                    <div class="desc">
+                        <div class="row">💵$100 to 1000 People!</div>
+                        <div class="row">Good luck ❤️ ❤️ ❤️</div>
+                    </div>
+                </div>
+            </div>
+            <div class="content-after" v-if="previewType == 1"></div>
+            <div class="content-before" v-else>
+                <div class="card-wrapper">
+                    <!-- <img
+                        src="https://t7.baidu.com/it/u=2006997523,200382512&fm=193&f=GIF"
+                        class="card-cover"/> -->
+                    <div class="card-cover"></div>
+                    <div class="bottom">
+                        <div class="url">DeNet.me</div>
+                        <div class="desc">🎁 $100 Giveaways, Good Luck !</div>
+                    </div>
+                </div>
+                <div class="operation-bar">
+                   <!-- <div
+                        class="item"
+                        v-for="(item, index) in operationList"
+                        :key="index">
+                        {{ item.value }}
+                    </div> -->
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { reactive, ref } from "vue";
+
+let previewType = ref(0);
+
+let btnList = reactive([
+    { text: "Before", desc: "Before the user installs denet", value: 0 },
+    { text: "After", desc: "After the user installs denet", value: 1 },
+]);
+
+// let operationList = reactive([
+//     { icon: "Before", value: 90, showVal: true },
+//     { icon: "Before", value: 23, showVal: true },
+//     { icon: "Before", value: 43, showVal: true },
+//     { icon: "Before", value: 43, showVal: false },
+// ]);
+
+const previewCard = (params) => {
+    previewType.value = params.value;
+};
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+    width: 100%;
+    height: 100%;
+    padding: 10px 30px;
+    box-sizing: border-box;
+    background: #f5f5f5;
+    border-bottom-right-radius: 16px;
+    overflow-y: scroll;
+    padding-bottom: 80px;
+
+    &::-webkit-scrollbar {
+        display: none;
+    }
+
+    .card-container {
+        width: 100%;
+        /*height: calc(100% - 80px);*/
+        background: #ffffff;
+        border: 3px solid #e6e6e6;
+        box-sizing: border-box;
+        border-radius: 20px;
+        padding: 16px;
+        /*overflow-y: scroll;*/
+
+        .head {
+            display: flex;
+
+            .avatar {
+                width: 50px;
+                height: 50px;
+                border-radius: 50%;
+                object-fit: cover;
+                margin-right: 13px;
+            }
+
+            .article-wrapper {
+                .nickname {
+                    font-weight: 500;
+                    font-size: 15px;
+                }
+
+                .desc {
+                    margin-top: 8px;
+                }
+            }
+        }
+
+        .content-after {
+            width: 375px;
+            height: 500px;
+            border-radius: 16px;
+            background: #ef4545;
+            margin: 0 auto;
+            margin-top: 13px;
+        }
+
+        .content-before {
+            margin-top: 16px;
+
+            .card-wrapper {
+                background: #ffffff;
+                border: 1px solid #d1d9dd;
+                box-sizing: border-box;
+                border-radius: 16px;
+                width: 100%;
+                height: 342px;
+                overflow: hidden;
+
+                .card-cover {
+                    width: 100%;
+                    height: 265px;
+                    object-fit: cover;
+                    background: #ef4545;
+                }
+
+                .bottom {
+                    margin-top: 10px;
+                    margin-left: 13px;
+
+                    .url {
+                        font-size: 14px;
+                        color: #566370;
+                        margin-bottom: 3px;
+                    }
+
+                    .desc {
+                        font-weight: 500;
+                        font-size: 15px;
+                    }
+                }
+            }
+
+            .operation-bar {
+            }
+        }
+    }
+
+    .select-btn-wrapper {
+        position: absolute;
+        left: -200px;
+        top: 26%;
+
+        .select-btn {
+            width: 120px;
+            height: 80px;
+            border: 1.5px solid #505050;
+            margin-bottom: 16px;
+            border-radius: 10px;
+            padding: 10px;
+            box-sizing: border-box;
+            cursor: pointer;
+
+            .text {
+                font-weight: 600;
+                font-size: 18px;
+                color: #fff;
+            }
+
+            .desc {
+                word-break: break-word;
+                font-weight: 400;
+                font-size: 13px;
+                color: rgba(255, 255, 255, 0.4);
+            }
+        }
+
+        .active {
+            border: 1.5px solid #b4b4b4 !important;
+        }
+    }
+}
+</style>

src/view/test.vue

@@ -1,57 +1,47 @@
 <template>
-  <div class="main_app">
-    <el-button type="text" @click="dialogVisible = true">click to open the Dialog</el-button>
-
-    <give-dialog :dialogVisible="dialogVisible"
-                 @close="close"
-                 @confirm="confirm"></give-dialog>
-    <pay-dialog :dialogVisible="payDialogVisible"
-                 @close="closePay"
-                 @confirm="confirmPay"></pay-dialog>
-
-  </div>
+    <div class="main_app">
+        <give-dialog
+            :dialogVisible="dialogVisible"
+            @close="close"
+            @confirm="confirm"
+        ></give-dialog>
+    </div>
 </template>
 
 <script setup>
-  import { ref } from 'vue'
-	import giveDialog from './components/give-dialog.vue'
-	import payDialog from './components/pay-dialog.vue'
-
-  let dialogVisible = ref(false);
-  let payDialogVisible = ref(false);
-
-	const close = () => {
-		dialogVisible.value = false
-		hideIframe();
-	}
-
-  const confirm = () => {
-		// dialogVisible.value = false;
-		payDialogVisible.value = true;
-	}
-
-	const closePay = () => {
-		payDialogVisible.value = false;
-	}
-
-	const confirmPay = () => {
-		payDialogVisible.value = false;
-		window.parent.postMessage({actionType: 'showTwitterPublishDialog'},'*')
-		// window.parent.postMessage({actionType: 'hideIframe'},'*')
-	}
-
-	const hideIframe = () => {
-		window.parent.postMessage({actionType: 'hideIframe'},'*')
-	}
-
-	window.addEventListener('message', function (event) {
-		console.log('addEventListener',event)
-    if (event.data && event.data.actionType == 'showGiveDialog') {
-			window.parent.postMessage({actionType: 'showIframe'},'*')
-			dialogVisible.value = true
+/* eslint-disable */
+import { ref } from "vue";
+import giveDialog from "./components/give-dialog.vue";
+
+let dialogVisible = ref(false);
+let payDialogVisible = ref(false);
+
+const close = () => {
+    dialogVisible.value = false;
+    hideIframe();
+};
+
+const confirm = () => {
+    // dialogVisible.value = false;
+    payDialogVisible.value = true;
+};
+
+const confirmPay = () => {
+    payDialogVisible.value = false;
+    window.parent.postMessage({ actionType: "IFRAME_SHOW_TWITTER_PUBLISH_DIALOG" }, "*");
+};
+
+const hideIframe = () => {
+    window.parent.postMessage({ actionType: "IFRAME_HIDE_IFREME" }, "*");
+};
+
+window.addEventListener("message", function (event) {
+    console.log("addEventListener", event);
+    if (event.data && event.data.actionType == "CONTENT_SHOW_GIVE_DIALOG") {
+        window.parent.postMessage({ actionType: "IFRAME_SHOW_IFREME" }, "*");
+        dialogVisible.value = true;
     }
-	});
-
+});
 </script>
 
 <style>