Merge branch 'feature_220505_dev' into test

# Conflicts:
#	src/manifest.pre.json
#	src/manifest.production.json

src/http/publishApi.js

@@ -72,4 +72,12 @@ export function syncChainTokenRechargeRecord(params) {
     method: 'post',
     data: params
   })
+}
+
+export function getCurrencyInfoByCode(params) {
+  return service({
+    url: `/currency/getCurrencyInfoByCode`,
+    method: 'post',
+    data: params
+  })
 }

src/logic/twitter.js

@@ -140,10 +140,6 @@ export function addPinedPop() {
     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;' id='de-remind'><input id='de-check' type='checkbox'/> Don't remind</div><div class='de-pin-skip' style='font-weight: 500; font-size: 16px; color: #1D9BF0;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);
 

src/view/components/give-dialog.vue

@@ -61,7 +61,7 @@
                             @setCurrencyList="setCurrentCurrencyInfo"></currency-list>
                     </div>
 
-                    <div class="left">
+                    <div class="left" v-if="showComType != 'preview'">
                         <div class="gift-pack-wrapper">
                             <img class="icon"
                                 :src="require('../../assets/svg/icon-gift-pack.svg')"/>
@@ -70,7 +70,8 @@
                         </div>
                     </div>
 
-                    <div class="right">
+                    <div class="right"  
+                        :class="{'fill-right': showComType == 'preview'}">
                         <div class="form-wrapper"  v-if="showComType == 'default'">
                             <img
                                 class="img-mode"
@@ -284,9 +285,10 @@
 
 <script setup>
 import { ref, watch, reactive, defineProps, defineEmits, onMounted, nextTick } from "vue";
-import { postPublish, verifyPaypalResult, syncChainTokenRechargeRecord } from "@/http/publishApi";
+import { postPublish, verifyPaypalResult, syncChainTokenRechargeRecord, getCurrencyInfoByCode } from "@/http/publishApi";
 import { payCalcFee, getPayConfig } from "@/http/pay";
 import { getFrontConfig } from "@/http/account";
+import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"
 import { throttle } from "@/uilts/help"
 import { ElMessage, ElLoading } from "element-plus";
 import "element-plus/es/components/message/style/css";
@@ -305,14 +307,24 @@ const config = {
 }
 const math = create(all, config);
 
+//临时货币信息
 let tempCurrentCurrencyInfo = ref({});
 
 let paypalClientId = ref("");
-let payConfig = ref({})
+let payConfig = ref({});
 let paypalHtml = ref("");
 
+// 发布后返回的结果
 let publishRes = reactive({});
 
+//弹窗是否展示
+let visible = ref(false);
+
+//弹窗高度
+let dialogHeight = ref(680);
+
+// 当前展示组件内容 default(表单)  preview(预览)  topUp(充值)
+let showComType = ref("default"); 
 let currentComData = {
     default: {
         title: "Giveaway",
@@ -325,36 +337,45 @@ let currentComData = {
     },
 };
 
-let visible = ref(false);
-let showComType = ref("default"); // default(表单)  preview(预览)  topUp(充值)
+// 机器人开关
 let openAntiBot = ref(false);
-let dialogHeight = ref(680);
+
 // 是否正在提交
 let submitIng = ref(false);
+
 // 艾特关注人列表
 let atUserList = ref([]);
 
+// 表单错误提示
 let iptErrMsgTxt = ref("Select a reward");
 
 // 是否返回
 let isBack = ref(false);
+
 // 展示消息提示 
 let showMessageBox = ref(false);
+
 // 展示货币列表pop
 let showCurrencyPop = ref(false);
 
+// 展示更多按钮下的选项
 let showMoreOption = ref(false);
 
+// 货币列表的dom
 let currencyListDom = ref('');
 
+// 刷新按钮旋转
 let refreshRotate = ref(false);
 
+// 预览字体大小
 let previewFontSize = ref(56);
 
 let postId = ref('');
 
+// 余额是否同步中
 let asyncIng = ref(false);
 
+// 提交按钮-充值引导提示
 let depositGuide = ref(false);
 
 let messageBoxData = ref({
@@ -428,6 +449,7 @@ watch(
         console.log("watch", newVal);
         visible.value = newVal;
         if (newVal) {
+            getLocalCurrencyInfoByCode();
             setTimeout(() => {
                 setDialogHeight();
             }, 300);
@@ -452,16 +474,19 @@ const close = () => {
  * 设置弹窗高度
  */
 const setDialogHeight = (resize = false) => {
-    let clientHeight = window.innerHeight;
-    let gapSafe = 40;
+    nextTick(() => {
+        let clientHeight = window.innerHeight;
+        let gapSafe = 40;
+        console.log('resize',resize)
 
-    if (dialogHeight.value > clientHeight - gapSafe) {
-        dialogHeight.value = clientHeight - gapSafe;
-    } else {
-        if(resize) {
-            dialogHeight.value = 680;
+        if (dialogHeight.value > clientHeight - gapSafe) {
+            dialogHeight.value = clientHeight - gapSafe;
+        } else {
+            if(resize) {
+                dialogHeight.value = 680;
+            }
         }
-    }
+    })
 };
 
 const selectCurrencyPopHandle = () => {
@@ -494,6 +519,7 @@ const getPayAmount = async (amountValue) => {
     return res.data;
 };
 
+
 const confirm = () => {
     if(depositGuide.value) { //余额不够去充值
         goTopUp();
@@ -509,6 +535,9 @@ const confirm = () => {
     submitRequest();
 };
 
+/**
+ * 货币列表-选中货币
+ */
 const selectCurrency = (params) => {
     tempCurrentCurrencyInfo.value = params;
     depositGuide.value = false;
@@ -520,6 +549,7 @@ const selectCurrency = (params) => {
         });
     } else {
         currentCurrencyInfo.value = params;
+        setLocalSelectCurrencyInfo(currentCurrencyInfo.value);
         showCurrencyPop.value = false;
         finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
         calcDomZoom();
@@ -544,16 +574,15 @@ const resetFormIpt = () => {
     baseFormData.totalCount = "";
 }
 
+const setLocalSelectCurrencyInfo = (params = {}) => {
+    setChromeStorage({ selectCurrencyInfo : JSON.stringify(params)})    
+}
+
 /**
- * 设置默认使用货币
+ * 获取完货币列表
  */
 
 const setCurrentCurrencyInfo = (params) => {
-    let {list} = params;
-    if(list && list.length && list[0].data && list[0].data.length) {
-        // currentCurrencyInfo.value = list[0].data[0];
-        // finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
-    }
 }
 
 const messageBoxBlock = ({ title = "", content = "" }) => {
@@ -575,6 +604,7 @@ const messageBoxConfirm = () => {
  */
 const messageBoxCancel = () => {
     currentCurrencyInfo.value = tempCurrentCurrencyInfo.value;
+    setLocalSelectCurrencyInfo(currentCurrencyInfo.value);
     showMessageBox.value = false;
     showCurrencyPop.value = false;
     calcDomZoom();
@@ -974,9 +1004,34 @@ const goTransactionsList = () => {
     window.open(`${chrome.runtime.getURL('/iframe/home.html#/transactions')}`)
 }
 
+
+/**
+ * 默认获取上次选中的货币信息
+ */
+const getLocalCurrencyInfoByCode = () => {
+    if(!currentCurrencyInfo.value.currencyCode) {
+        getChromeStorage('selectCurrencyInfo', (res) => {
+            if(res && res.currencyCode) {
+                getCurrencyInfoByCode({
+                    params: {
+                        currencyCode: res.currencyCode
+                    }
+                }).then(res => {
+                    if(res.code == 0 && res.data) {
+                        currentCurrencyInfo.value = res.data;
+                        tempCurrentCurrencyInfo.value = res.data;
+                        onIptSetErrorTxt();
+                    }
+                });
+            }
+        })
+    }
+}
+
 onMounted(() => {
     setFrontConfig();
     setPayConfig();
+    getLocalCurrencyInfoByCode();
     document.onkeydown = function (e) {
         var keyNum = window.event ? e.keyCode : e.which;
         let escKey = 27;
@@ -986,9 +1041,9 @@ onMounted(() => {
             }
         }
     };
-    window.onresize = throttle(function () {
-        setDialogHeight(true)
-    }, 300)
+    window.addEventListener('resize', function () {
+        setDialogHeight(true);
+    })
 });
 </script>
 
@@ -1494,6 +1549,10 @@ onMounted(() => {
                     }
                 }
             }
+            .fill-right {
+                width: 100% !important;
+                border-bottom-left-radius: 16px;
+            }
         }
     }
 }

src/view/components/message-box.vue

@@ -1,3 +1,4 @@
+<!-- 消息提示组件 -->
 <template>
     <div class="msg-box-overlay" v-if="dialogVisible">
         <div class="content-wrapper">

src/view/components/paypal-button.vue

@@ -151,6 +151,8 @@ onMounted(() => {
     display: flex;
     align-items: center;
     justify-content: flex-end;
+    border-bottom-left-radius: 16px;
+    z-index: 999;
 
     .pay-msg {
         text-align: right;

src/view/components/preview-card.vue

@@ -2,17 +2,14 @@
 <template>
     <div class="wrapper">
         <div class="card-container">
+            <div class="preview-txt">
+                <span>{{installStatus ? 'After' : 'Before'}}</span>
+                DeNet installed
+            </div>
+
             <!-- 安装之后的卡片样式 -->
-            <div class="left">
-                <div class="tips">
-                    <div class="title">
-                        After
-                    </div>
-                    <div class="desc">
-                        the installs denet
-                    </div>
-                </div>
-                <div class="head">
+            <div v-show="installStatus" class="left" :style="{'width': reviewCanvasParams.width+ 'px'}">
+                <div class="head" :style="{'zoom': reviewCanvasParams.zoom}">
                     <img :src="userInfo.avatarUrl"
                         class="avatar"/>
                     <div class="article-wrapper">
@@ -24,31 +21,25 @@
                         </div>
                     </div>
                 </div>
-                <div class="after-cover-wrapper">
-                    <custom-card-cover :data="{
-                        totalCount: baseFormData.totalCount,
-                        amountValue: baseFormData.amountValue,
-                        tokenSymbol: currentCurrencyInfo.tokenSymbol,
-                        currencyIconUrl: currentCurrencyInfo.iconPath,
-                        userInfo: {
-                            nickName: userInfo.name,
-                            avatarUrl: userInfo.avatarUrl
-                        }
-                    }"></custom-card-cover>
+                <div class="after-cover-wrapper-parent" :style="{'zoom': reviewCanvasParams.zoom}">
+                    <div class="after-cover-wrapper">
+                        <custom-card-cover :data="{
+                            totalCount: baseFormData.totalCount,
+                            amountValue: baseFormData.amountValue,
+                            tokenSymbol: currentCurrencyInfo.tokenSymbol,
+                            currencyIconUrl: currentCurrencyInfo.iconPath,
+                            userInfo: {
+                                nickName: userInfo.name,
+                                avatarUrl: userInfo.avatarUrl
+                            }
+                        }"></custom-card-cover>
+                    </div>
                 </div>
-            </div>
+            </div> 
 
             <!-- 安装之前的卡片样式 -->
-            <div class="content-before">
-                <div class="tips">
-                    <div class="title">
-                        Before
-                    </div>
-                    <div class="desc">
-                        the installs denet
-                    </div>
-                </div>
-                <div class="head">
+            <div v-show="!installStatus" class="content-before" :style="{'width': reviewCanvasParams.width+ 'px'}">
+                <div class="head" :style="{'zoom': reviewCanvasParams.zoom}">
                     <img :src="userInfo.avatarUrl"
                         class="avatar"/>
                     <div class="article-wrapper">
@@ -60,7 +51,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="card-wrapper">
+                <div class="card-wrapper" :style="{'zoom': reviewCanvasParams.zoom}">
                     <img :src="require('@/assets/subject/img-card-cover-blue.png')"
                         class="card-cover"/>
                     <div class="bottom-bar">
@@ -72,9 +63,8 @@
                         </div>
                     </div>
                     <div class="user-info">
-                        <!-- <img :src="userInfo.avatarUrl" 
-                        class="avatar"/>-->
-                        @{{userInfo.name}}
+                        <img :src="userInfo.avatarUrl" 
+                        class="avatar"/> {{userInfo.name}}
                     </div>
                     <div class="content-text">
                         <div class="title">
@@ -100,14 +90,21 @@
 </template>
 
 <script setup>
-import { ref, defineProps, onMounted, nextTick, watch } from "vue";
+import { ref, defineProps, onMounted, nextTick, watch, reactive } from "vue";
 
 import customCardCover from './custom-card-cover.vue'
 
 import {getChromeStorage} from "@/uilts/chromeExtension"
+import { throttle } from "@/uilts/help"
 import {getUser} from "@/http/publishApi"
 
 let userInfo = ref({});
+let reviewCanvasParams = reactive({
+    width: 396,
+    zoom: 1
+});
+
+let installStatus = ref(false);
 
 defineProps({
     postData: {
@@ -162,14 +159,45 @@ const getUserName = (screenName) => {
     });
 }
 
+const calcPreviewCanvasParams = () => {
+    nextTick(() => {
+        let domHeight = document.querySelector('.card-container').offsetHeight;
+        const canvasHeight = 820, canvasWidth = 600;
+        if(domHeight < canvasHeight) {
+            //比例: 高 / 宽
+            let hWRatio = canvasHeight / canvasWidth; 
+            //缩小宽度 = 高度 / 比例  
+            let width = domHeight / hWRatio;  
+            if(width > canvasWidth) {
+                width = canvasWidth;
+            }
+            //缩小比例 
+            let zoom = width / canvasWidth;
+            if(zoom > 1) {
+                zoom = 1;
+            }
+            reviewCanvasParams.width = width;
+            reviewCanvasParams.zoom = zoom;
+        } else {
+            reviewCanvasParams.width = canvasWidth;
+            reviewCanvasParams.zoom = 1;
+        }
+    });
+}
+
 onMounted(() => {
+    calcPreviewCanvasParams();
     getUserInfo((res) => {
-        nextTick(() => {
-        })
         if(res) {
             getUserName(res.nickName);
         }
+        setInterval(() => {
+            installStatus.value = !installStatus.value;
+        }, 3000)
     });
+    window.addEventListener('resize', throttle(function () {
+        calcPreviewCanvasParams();
+    }, 300))
 })
 
 </script>
@@ -181,7 +209,7 @@ onMounted(() => {
     padding: 10px 16px;
     box-sizing: border-box;
     border-bottom-right-radius: 16px;
-    overflow-y: scroll;
+    overflow-y: auto;
     padding-bottom: 80px;
     display: flex;
 
@@ -191,14 +219,28 @@ onMounted(() => {
 
     .card-container {
         width: 100%;
-        height: fit-content;
+        height: 100%;
         background: #ffffff;
         box-sizing: border-box;
         border-radius: 20px;
-        padding: 0 16px;
+        padding: 0 6px;
         display: flex;
+        align-items: center;
+
+        .preview-txt {
+            width: 238px;
+            font-weight: 600;
+            font-size: 22px;
+            span {
+                color: #1D9BF0;
+            }
+        }
 
         .head {
+            position: absolute;
+            z-index: 1100;
+            top: 136px;
+            left: 17px;
             display: flex;
 
             .avatar {
@@ -228,19 +270,25 @@ onMounted(() => {
             }
         }
         .left {
-            width: 430px;
+            background: url('../../assets/img/img-preview-bg-after.png');
+            width: 387px;
+            height: 100%;
+            background-size: contain;
             .tips {
                 right: 15px !important;
             }
         }
 
+        .after-cover-wrapper-parent {
+            position: absolute;
+            z-index: 100;
+            top: 223px;
+            left: 78px;
+        }
+
         .after-cover-wrapper {
             position:relative;
             width:375px;
-            margin-left: 58px;
-            margin-top: -10px;
-            margin-bottom: 20px;
-
             .icon-gif {
                 position: absolute;
                 left: 50%;
@@ -260,8 +308,13 @@ onMounted(() => {
 
 
         .content-before {
-            width: 550px;
-            margin-left: 40px;
+            background: url('../../assets/img/img-preview-bg-before.png');
+            background-size: contain;
+            height: 100%;
+            .head {
+                top: 138px !important;
+                left: 17px !important;
+            }
             .card-wrapper {
                 width: 491px;
                 border: 1px solid #D1D9DD;
@@ -271,13 +324,13 @@ onMounted(() => {
                 position: relative;
                 box-sizing: border-box;
                 border-radius: 16px;
-                margin-left: 60px;
-                margin-top: -10px;
+                left: 73px;
+                top: 238px;
 
                 .user-info {
                     position: absolute;
-                    right: 10px;
-                    top: 6px;
+                    left: 8px;
+                    top: 8px;
                     z-index: 100;
                     display: flex;
                     align-items: center;
@@ -296,13 +349,12 @@ onMounted(() => {
                 }
                 .content-text {
                     position: absolute;
-                    top: 58px;
+                    top: 53px;
                     left: 35px;
                     .title {
                         font-weight: 800;
                         font-size: 16px;
                         color: #ffffff;
-                        margin-bottom: -8px;
                     }
                     .center {
                         padding: 12px 0;
@@ -324,7 +376,6 @@ onMounted(() => {
                         font-weight: 800;
                         font-size: 13px;
                         color: #ffffff;
-                        margin-top: -8px;
                     }
                 }
                 .card-cover {
@@ -352,25 +403,6 @@ onMounted(() => {
 
         .left, .content-before {
             position: relative;
-            .tips {
-                position: absolute;
-                right: -10px;
-                background: #F4F4F4;
-                border-radius: 6px;
-                padding: 3px 10px;
-                font-size: 10px;
-                color: #4D4D4D;
-                transform: scale(0.8);
-
-                .title {
-                    font-weight: 500;
-                    font-size: 12px;
-                }
-
-                .desc {
-                    opacity: .6;
-                }
-            }
         }
     }