[add] 发布器逻辑开发

src/http/publishApi.js

@@ -64,4 +64,12 @@ export function searchCurrencyInfo(params) {
     method: 'post',
     data: params
   })
+}
+
+export function syncChainTokenRechargeRecord(params) {
+  return service({
+    url: `/wallet/recharge/syncChainTokenRechargeRecord`,
+    method: 'post',
+    data: params
+  })
 }

src/view/components/currency-list.vue

@@ -3,8 +3,10 @@
     <div class="currency-list-wrapper">
         <div class="search-input-wrapper">
             <input class="input" v-model="keywords" @input="onInput" placeholder="Search name or paste address" />
-            <img :src="require('../../assets/svg/icon-form-refresh.svg')" class="icon"
-            @click="refresh">
+            <img :src="require('../../assets/svg/icon-form-refresh.svg')" 
+                class="icon"
+                :class="{ 'icon-refresh-rotate': refreshRotate }"
+                @click="refresh">
             <img :src="require('../../assets/svg/icon-clear-search.svg')" class="icon-clear"
             v-if="keywords"
             @click="clearIpt" >
@@ -61,7 +63,7 @@
                         <div class="amount" v-if="data.currencyType == 2">${{data.usdEstimateBalance}}</div>
                     </div>
                 </div>
-                <div class="no-data">
+                <div class="no-data" v-if="!searchList.length">
                     not found
                 </div>
             </div>
@@ -72,13 +74,14 @@
 <script setup>
 /* eslint-disable */
 import { defineEmits, ref, onMounted } from "vue";
-import {getCurrencyInfo, searchCurrencyInfo} from "@/http/publishApi";
+import {getCurrencyInfo, searchCurrencyInfo, syncChainTokenRechargeRecord} from "@/http/publishApi";
 import {debounce} from "@/uilts/help";
 
 let keywords = ref('');
 let showSearch = ref(false);
 let currencyInfoList = ref([]);
 let searchList = ref([]);
+let refreshRotate = ref(false);
 
 const emits = defineEmits(["selectCurrency", "setCurrencyList"]);
 
@@ -104,7 +107,15 @@ const clearIpt = () => {
 }
 
 const refresh = () => {
-    getCurrencyInfoList();
+    if(!refreshRotate.value) {
+        refreshRotate.value = true;
+        setTimeout(() => {
+            refreshRotate.value = false;
+        }, 1000)
+        asyncTokenRechRecord(() => {
+            getCurrencyInfoList();
+        })
+    }
 }
 
 /**
@@ -153,6 +164,22 @@ const getCurrencyInfoList = () => {
     })  
 }
 
+
+/**
+ * 同步链上交易
+ */
+const asyncTokenRechRecord = (cb) => {
+    syncChainTokenRechargeRecord({
+        params: {
+            currencyCode: ''
+        }
+    }).then(res => {
+        if(res.code == 0) {
+            cb && cb(res.data)
+        }
+    })
+}
+
 onMounted(() => {
     getCurrencyInfoList();
 }) 
@@ -190,6 +217,12 @@ onMounted(() => {
             cursor: pointer;
         }
 
+        .icon-refresh-rotate {
+            transform: rotate(360deg);
+            transition-duration: 1s;
+        }
+
+
         .icon-clear {
             position: absolute;
             right: 16%;

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

@@ -16,7 +16,7 @@
             }}</span>
         </div>
         <div class="money-area">
-            <div class="txt">{{ data.tokenSymbol }} GIVEAWAY</div>
+            <div class="txt">{{data.currencyCode == 'USD' ? 'USD' : data.tokenSymbol}} GIVEAWAY</div>
             <div class="coin">
                 <img :src="data.currencyIconUrl" />
                 <span>{{ data.amountValue }}</span>

src/view/components/give-dialog.vue

@@ -26,24 +26,32 @@
                     </div>
                 </div>
                 <div class="right">
-                    <div class="transactions">
-                        <img
-                            :src="
-                                require('../../assets/svg/icon-option-list.svg')
-                            "
-                        />
-                        Transactions
+                    <img :src="require('@/assets/svg/icon-more-l.svg')"
+                        class="more"
+                        @click="showMoreOption = true">
+                    <div class="area-option" 
+                        v-if="showMoreOption" 
+                        @click="showMoreOption = false">
+                        <div class="option">
+                            <div class="item" @click="goTransactionsList()">
+                                <img :src="require('@/assets/svg/icon-menu.svg')">
+                                <span>Transactions</span>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
             <div class="body">
                 <!-- 充值组件 -->
-                <top-up v-show="showComType == 'topUp'"></top-up>
+                <top-up v-if="showComType == 'topUp'" 
+                    :currentCurrencyInfo="currentCurrencyInfo"
+                    @topUpDone="topUpDone"></top-up>
                 <!-- 表单填写容器 -->
-                <div class="body-content" v-show="showComType != 'topUp'">
+                <div class="body-content" v-if="showComType != 'topUp'">
                     <!-- 货币列表  -->
                     <div class="currency-pop" v-show="showCurrencyPop">
                         <currency-list 
+                            ref="currencyListDom"
                             @selectCurrency="selectCurrency"
                             @setCurrencyList="setCurrentCurrencyInfo"></currency-list>
                     </div>
@@ -125,8 +133,10 @@
                                         Balance
                                     </div>
                                     <div class="amount">
-                                        218
+                                        {{currentCurrencyInfo.balance}}
                                         <img
+                                            :class="{ 'icon-refresh-rotate': refreshRotate }"
+                                            @click="updateCurrencyBanlce"
                                             :src="
                                                 require('../../assets/svg/icon-form-refresh.svg')
                                             "
@@ -252,7 +262,9 @@
                                 :finalAmountData="finalAmountData"
                                 :payConfig="{
                                     paypalClientId,
+                                    feeDesc: payConfig.feeDesc,
                                     paypalHtml,
+                                    amount: baseFormData.amountValue
                                 }"
                                 :currentCurrencyInfo="currentCurrencyInfo"
                                 :postData="publishRes"
@@ -276,7 +288,7 @@
 
 <script setup>
 import { ref, watch, reactive, defineProps, defineEmits, onMounted } from "vue";
-import { postPublish, verifyPaypalResult } from "../../http/publishApi";
+import { postPublish, verifyPaypalResult, syncChainTokenRechargeRecord } from "../../http/publishApi";
 import { payCalcFee, getPayConfig } from "../../http/pay";
 import { getFrontConfig } from "../../http/account";
 import { ElMessage, ElLoading } from "element-plus";
@@ -290,6 +302,7 @@ import currencyList from "./currency-list.vue";
 import topUp from "./top-up.vue"
 
 let paypalClientId = ref("");
+let payConfig = ref({})
 let paypalHtml = ref("");
 
 let publishRes = reactive({});
@@ -322,6 +335,12 @@ let showMessageBox = ref(false);
 // 展示货币列表pop
 let showCurrencyPop = ref(false);
 
+let showMoreOption = ref(false);
+
+let currencyListDom = ref(null);
+
+let refreshRotate = ref(false);
+
 let messageBoxData = ref({
     title: "",
     content: "",
@@ -436,7 +455,8 @@ const getPayAmount = async (amountValue) => {
         },
     });
     if (res.code == 0) {
-        let { finalAmountValue } = res.data;
+        let { finalAmountValue, feeDesc } = res.data;
+        payConfig.value.feeDesc = feeDesc;
         if (finalAmountValue > 0) {
             finalAmountData.value = res.data;
         }
@@ -459,18 +479,17 @@ const confirm = () => {
 };
 
 const selectCurrency = (params) => {
-
-    // if(params.currencyCode != "USD" && params.balance < params.minAmount) {
-    //     let tokenSymbol = params.currencyCode == 'USD' ? 'USD' : params.tokenSymbol;
-    //     messageBoxBlock({
-    //         title: `是否要充值 ${tokenSymbol}`,
-    //         content: `${tokenSymbol} 可用余额为${params.balance}，是否要去充值？`,
-    //     });
-    // } else {
+    currentCurrencyInfo.value = params;
+    if(params.currencyCode != "USD" && params.balance < params.minAmount) {
+        let tokenSymbol = params.currencyCode == 'USD' ? 'USD' : params.tokenSymbol;
+        messageBoxBlock({
+            title: `是否要充值 ${tokenSymbol}`,
+            content: `${tokenSymbol} 可用余额为${params.balance}，是否要去充值？`,
+        });
+    } else {
         showCurrencyPop.value = false;
-        currentCurrencyInfo.value = params;
         finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
-    // }
+    }
 };
 
 /**
@@ -507,6 +526,48 @@ const goTopUp = () => {
     showComType.value = 'topUp';
 }
 
+/**
+ * 充值done事件
+ * 更新货币列表
+ */
+const topUpDone = () => {
+    asyncTokenRechRecord(() => {
+        showComType.value = 'default';
+    })
+}
+
+const updateCurrencyBanlce = () => {
+    if(!refreshRotate.value) {
+        refreshRotate.value = true;
+        setTimeout(() => {
+            refreshRotate.value = false;
+        }, 1000)
+    }
+    asyncTokenRechRecord((data) => {
+        if(data && data.length) {
+            let currencyInfo = data[0];
+            if(currencyInfo.currencyCode && currentCurrencyInfo.value.currencyCode) {
+                currentCurrencyInfo.value.balance = currencyInfo.balance;
+            }
+        }
+    })
+}
+
+/**
+ * 同步链上交易
+ */
+const asyncTokenRechRecord = (cb) => {
+    syncChainTokenRechargeRecord({
+        params: {
+            currencyCode: currentCurrencyInfo.currencyCode
+        }
+    }).then(res => {
+        if(res.code == 0) {
+            cb && cb(res.data)
+        }
+    })
+}
+
 /**
  * 提交表单请求
  */
@@ -762,6 +823,7 @@ const setPayConfig = () => {
         params: {},
     }).then((res) => {
         if (res.code == 0) {
+            payConfig.value = res.data;
             paypalClientId.value = res.data.paypalClientId;
         }
     });
@@ -780,6 +842,10 @@ const setFrontConfig = () => {
     });
 };
 
+const goTransactionsList = () => {
+    window.open(`${chrome.runtime.getURL('/iframe/home.html#/transactions')}`)
+}
+
 onMounted(() => {
     setFrontConfig();
     setPayConfig();
@@ -858,15 +924,56 @@ onMounted(() => {
             }
 
             .right {
-                .transactions {
-                    color: #a0a0a0;
-                    font-weight: 400;
-                    font-size: 13px;
-                    display: flex;
-                    align-items: center;
+                .more {
                     cursor: pointer;
-                    img {
-                        margin-right: 5px;
+                }
+
+                .area-option {
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    z-index: 111;
+
+                    .option {
+                        position: absolute;
+                        top: 43px;
+                        right: 15px;
+                        background: #fff;
+                        filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
+                        width: 240px;
+                        border-radius: 15px;
+                        overflow: hidden;
+
+                        .item {
+                            width: 100%;
+                            height: 50px;
+                            display: flex;
+                            align-items: center;
+                            cursor: pointer;
+                            border-top: 1px solid #E9E9E9;
+
+                            img {
+                                margin-left: 15px;
+                                width: 30px;
+                                height: 30px;
+                                margin-right: 6px;
+                            }
+
+                            span {
+                                font-weight: 500;
+                                font-size: 14px;
+                            }
+                        }
+
+                        .item:first-child {
+                            border-top: 0;
+                        }
+
+                        .item:hover {
+                                background: #F5F5F5;
+                        }
                     }
                 }
             }
@@ -989,6 +1096,11 @@ onMounted(() => {
                                 color: #ff9839;
                                 cursor: pointer;
                             }
+
+                            .icon-refresh-rotate {
+                                transform: rotate(360deg);
+                                transition-duration: 1s;
+                            }
                         }
 
                         .msg {

src/view/components/paypal-button.vue

@@ -1,13 +1,32 @@
 <template>
     <div class="pay-wrapper">
         <div class="pay-msg">
-            <div class="row">Pay <template v-if="currentCurrencyInfo.currencyCode == 'USD'">$</template>{{finalAmountData.finalAmountValue || 0}}
-                <span v-if="currentCurrencyInfo.currencyCode == 'USD'">
-                    (Available ${{finalAmountData.requestAmountValue}})
-                </span>
-                <template v-else>{{currentCurrencyInfo.tokenSymbol}}</template>
+            <div class="row">
+                <template v-if="currentCurrencyInfo.currencyCode == 'USD'">
+                    Pay ${{finalAmountData.finalAmountValue || 0}} 
+                    <span>
+                        (Available ${{finalAmountData.requestAmountValue}})
+                    </span>
+                </template>
+                <template v-else>
+                    <span class="desc">
+                        Pay
+                    </span>
+                    {{payConfig.amount || 0}}
+                    <img :src="currentCurrencyInfo.iconPath" class="icon">
+                    <span>
+                        {{currentCurrencyInfo.tokenSymbol}}
+                    </span>
+                </template>
+            </div>
+            <div class="msg">
+                <template v-if="currentCurrencyInfo.currencyCode == 'USD'">
+                    {{payConfig.feeDesc}}
+                </template>
+                <template v-else>
+                    (Balance: {{currentCurrencyInfo.balance}})
+                </template>
             </div>
-            <div class="msg" v-if="currentCurrencyInfo.currencyCode == 'USD'">Paypal charges fee: 4.4% + $0.3</div>
         </div>
         <div class="pay-btn">
             <iframe
@@ -125,7 +144,7 @@ onMounted(() => {
 <style lang="scss" scoped>
 .pay-wrapper {
     width: 100%;
-    height: 68px;
+    height: 80px;
     background-color: #fff;
     position: absolute;
     left: 0;
@@ -146,11 +165,23 @@ onMounted(() => {
             font-weight: 600;
             font-size: 16px;
             color: #389AFF;
+            display: flex;
+            align-items: center;
+            margin-bottom: 6px;
             span {
                 display: inline-block;
                 color: #000000;
                 margin-left: 6px;
             }
+
+            .icon {
+                width: 14px;
+                margin-left:6px;
+            }
+            
+            .desc {
+                margin-right:6px
+            }
         }
         .msg {
             font-size: 13px;

src/view/components/preview-card.vue

@@ -8,7 +8,9 @@
                     <div class="title">
                         After
                     </div>
-                    the installs denet
+                    <div class="desc">
+                        the installs denet
+                    </div>
                 </div>
                 <div class="head">
                     <img :src="userInfo.avatarUrl"
@@ -42,7 +44,9 @@
                     <div class="title">
                         Before
                     </div>
-                    the installs denet
+                    <div class="desc">
+                        the installs denet
+                    </div>
                 </div>
                 <div class="head">
                     <img :src="userInfo.avatarUrl"
@@ -264,7 +268,7 @@ onMounted(() => {
                     display: flex;
                     align-items: center;
                     font-size: 16px;
-                    color: #FFF2D3;
+                    color: #FFF;
                     width: max-content;
 
                     img {
@@ -334,17 +338,21 @@ onMounted(() => {
             position: relative;
             .tips {
                 position: absolute;
-                right: 0;
+                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;
-                    color: #000;
+                }
+
+                .desc {
+                    opacity: .6;
                 }
             }
         }

src/view/components/top-up.vue

@@ -10,7 +10,7 @@
                     <div class="content">
                         <img
                             class="icon"
-                            src="../../assets/subject/icon-USD.png"
+                            :src="currentCurrencyInfo.iconPath"
                         />USDT
                     </div>  
                 </div>
@@ -21,16 +21,16 @@
                     <div class="content">
                         <img
                             class="icon"
-                            src="../../assets/subject/icon-USD.png"
+                            :src="require('@/assets/svg/icon-BNB.svg')"
                         />
                         BNB Chain
                     </div>
                 </div>
             </div>
             <div class="qrcode-wrapper">
-                <img class="img" src="../../assets/img/img-qrcode.png" />
-                <div class="address">TJGkVQQ8e3HQSghPQkkYYE9AZf5Pmvc3vG</div>
-                <div class="btn">copy</div>
+                <canvas id="canvas"></canvas>
+                <div class="address">{{tokenRechargeAddress}}</div>
+                <div class="copy-btn" :data-clipboard-text="tokenRechargeAddress">copy</div>
             </div>
             <div class="tips-box">
                 <div>TIPS</div>
@@ -39,15 +39,104 @@
                 <div>3、同一个地址可多次充值，不影响到账。最小充值金额 0.0001。</div>
             </div>
         </div>
-        <div class="btn-done">
-            Done
+        <div class="btn-done" @click="doneHandle">
+            DONE
         </div>
     </div>
 </template>
 
 <script setup>
 /* eslint-disable */
-import { defineProps, defineEmits } from "vue";
+import { defineProps, defineEmits, onMounted, ref } from "vue";
+import { getTokenRechargeAddress } from "@/http/pay";
+import { ElMessage } from 'element-plus'
+
+let QRCode = require('qrcode')
+let ClipboardJS = require('clipboard')
+
+let tokenRechargeAddress = ref('');
+
+const props = defineProps({
+    currentCurrencyInfo: {
+        type: Object,
+        default: () => {
+
+        }
+    }
+})
+
+const emits = defineEmits(['doneHandle']);
+
+const createQRCode = (str) => {
+    var canvas = document.getElementById('canvas')
+    QRCode.toCanvas(canvas, str, {
+        width: 180,
+        height: 180,
+        scale: 10, 
+        color: {
+            dark: '#000', // 二维码前景颜色
+            light: '#F7F7F7' // 二维码背景颜色
+        }
+
+    }, function (error) {
+        if (error) console.error(error)
+        console.log('success!');
+    })
+}
+const copyToken = () => {
+    var clipboard = new ClipboardJS('.copy-btn');
+    clipboard.on('success', function (e) {
+        ElMessage({
+            message: 'copy success',
+            grouping: true,
+            type: 'success',
+            offset: -16,
+            appendTo: document.body
+
+        })
+        console.info('Action:', e.action);
+        console.info('Text:', e.text);
+        console.info('Trigger:', e.trigger);
+
+        e.clearSelection();
+    });
+
+    clipboard.on('error', function (e) {
+        ElMessage({
+            message: 'copy error',
+            grouping: true,
+            type: 'error',
+            offset: -16
+        })
+        console.error('Action:', e.action);
+        console.error('Trigger:', e.trigger);
+    });
+}
+
+
+const doneHandle = () => {
+    emits('topUpDone', {});
+}
+
+const getTokenAddress = () => {
+    getTokenRechargeAddress({
+        params: {
+            tokenChain: props.currentCurrencyInfo.tokenChain
+        },
+    }).then((res) => {
+        if(res.code == 0) {
+            if (res.data && res.data.rechargeAddress) {
+                tokenRechargeAddress.value = res.data.rechargeAddress;
+                createQRCode(res.data.rechargeAddress)
+                copyToken()
+            }
+        }    
+    })
+}
+
+onMounted(() => {
+    getTokenAddress();
+}) 
 
 </script>
 
@@ -104,19 +193,19 @@ import { defineProps, defineEmits } from "vue";
             padding: 20px;
             box-sizing: border-box;
 
-            .img {
-                width: 140px;
-                height: 140px;
-            }
-
             .address {
-                padding: 20px 0;
+                padding-bottom: 20px;
                 box-sizing: border-box;
                 font-weight: 500;
                 font-size: 15px;
+                height: 38px;
+            }
+
+            #canvas {
+                margin-top: -25px;
             }
 
-            .btn {
+            .copy-btn {
                 height: 40px;
                 width: 160px;
                 border-radius: 1000px;