pc NFT usd

src/view/components/payment-info-usd.vue

@@ -0,0 +1,83 @@
+<template>
+    <div class="card-list">
+        <div class="item">
+            <div class="l">Giveaway Amount</div>
+            <div class="r order-amount">
+                ${{ finalAmountData.orderAmountValue }}
+            </div>
+        </div>
+        <div class="item">
+            <div class="l">Balance</div>
+            <div class="r txt">${{ finalAmountData.balance }}</div>
+        </div>
+        <div class="item">
+            <div class="l">
+                Paypal charges fee ({{ finalAmountData.feeDesc }})
+            </div>
+            <div class="r txt">${{ finalAmountData.feeAmountValue }}</div>
+        </div>
+        <div class="item">
+            <div class="l">Deposit Amount</div>
+            <div class="r deposit-amount">
+                ${{ finalAmountData.rechargeAmountValue }}
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { defineProps } from "vue";
+
+const props = defineProps({
+    finalAmountData: {
+        type: Object,
+        default: () => {
+            return {
+                currencyCode: '',
+                feeAmountValue: 0,
+                finalAmountValue: 0,
+                requestAmountValue: 0,
+            }
+        }
+    },
+})
+</script>
+
+<style scoped lang="scss">
+.card-list {
+    padding: 10px 20px;
+    border-radius: 20px;
+    border: 1px solid #e6e6e6;
+
+    .item {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 47px;
+        font-size: 14px;
+        font-weight: 500;
+        box-shadow: inset 0px -1px 0px #eaeaea;
+
+        .order-amount {
+            font-weight: 600;
+            font-size: 20px;
+        }
+
+        .txt {
+            font-weight: 500;
+            font-size: 16px;
+            color: #9a9a9a;
+        }
+
+        .deposit-amount {
+            font-weight: 600;
+            font-size: 20px;
+            color: #1d9bf0;
+        }
+    }
+
+    .item:last-child {
+        box-shadow: none;
+    }
+}
+</style>

src/view/iframe/buy-nft/buy/pay.vue

@@ -7,7 +7,9 @@
         </div>
         <!-- 内容 -->
         <div class="area-content">
-            <div class="left">
+            <div
+                class="left"
+                :class="{ auto: tempCurrentCurrencyInfo.currencyCode === 'USD' && Number(finalAmountData.rechargeAmountValue) <= 0 }">
                 <img :src="require('@/assets/img/img-box5.png')" v-show="pay_info.home.sale_plan.itemCount == 5"
                     alt="" />
                 <img :src="require('@/assets/img/img-box1.png')" v-show="pay_info.home.sale_plan.itemCount == 1"
@@ -20,9 +22,11 @@
                     </div>
                 </div>
             </div>
-            <div class="right">
-                <div class="card-content">
-                    <template v-if="tempCurrentCurrencyInfo.currencyCode">
+            <div
+                class="right"
+                :class="{ none: tempCurrentCurrencyInfo.currencyCode === 'USD' && Number(finalAmountData.rechargeAmountValue) <= 0 }">
+                <div class="card-content" v-if="tempCurrentCurrencyInfo.currencyCode">
+                    <template v-if="tempCurrentCurrencyInfo.currencyCode !== 'USD'">
                         <div class="card-title">
                             <img class="img" :src="require('@/assets/subject/top-01.svg')" />
                             <div class="font">Deposit to Send Giveaway</div>
@@ -40,60 +44,108 @@
                             :tokenSymbol="tempCurrentCurrencyInfo.tokenSymbol" @updateData="updateData">
                         </preview-balance>
                     </template>
+                    <template v-else>
+                        <div class="card-title">
+                            <img class="img" :src="require('@/assets/subject/top-01.svg')" />
+                            <div class="font">Deposit to Send Giveaway</div>
+                        </div>
+                        <payment-info-usd
+                            :finalAmountData="finalAmountData">
+                        </payment-info-usd>
+                    </template>
                 </div>
             </div>
         </div>
 
         <!-- 底部 -->
-        <div class="footer">
-            <div class="buy1" @click="clickPlay" v-if="state.is_btn_grey == false">
-                <btn-loading :color="'while'" v-if="state.loading.show"></btn-loading>
-                <template
-                    v-else-if="(pay_info.home.sale_plan.price.length + pay_info.home.sale_plan.currencyInfo.tokenSymbol.length) > 30">
-                    <div class="left">Pay</div>
-                    <div class="right">
-                        <p>{{ pay_info.home.sale_plan.price }}</p>
-                        <p>{{ pay_info.home.sale_plan.currencyInfo.tokenSymbol }}</p>
-                    </div>
-                </template>
-                <template v-else>
-                    <div class="left">Pay</div>
-                    <div class="right">
-                        {{ pay_info.home.sale_plan.price }}
-                        {{ pay_info.home.sale_plan.currencyInfo.tokenSymbol }}
-                    </div>
-                </template>
-            </div>
-            <div class="buy1 grey" v-else>
-                <template
-                    v-if="(pay_info.home.sale_plan.price.length + pay_info.home.sale_plan.currencyInfo.tokenSymbol.length) > 30">
-                    <div class="left">Pay</div>
-                    <div class="right">
-                        <p>{{ pay_info.home.sale_plan.price }}</p>
-                        <p>{{ pay_info.home.sale_plan.currencyInfo.tokenSymbol }}</p>
+        <div class="footer" v-if="tempCurrentCurrencyInfo.currencyCode">
+            <template v-if="tempCurrentCurrencyInfo.currencyCode !== 'USD'">
+                <div class="buy1" @click="clickPlay" v-if="state.is_btn_grey == false">
+                    <btn-loading :color="'while'" v-if="state.loading.show"></btn-loading>
+                    <template
+                        v-else-if="(pay_info.home.sale_plan.price.length + pay_info.home.sale_plan.currencyInfo.tokenSymbol.length) > 30">
+                        <div class="left">Pay</div>
+                        <div class="right">
+                            <p>{{ pay_info.home.sale_plan.price }}</p>
+                            <p>{{ pay_info.home.sale_plan.currencyInfo.tokenSymbol }}</p>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="left">Pay</div>
+                        <div class="right">
+                            {{ pay_info.home.sale_plan.price }}
+                            {{ pay_info.home.sale_plan.currencyInfo.tokenSymbol }}
+                        </div>
+                    </template>
+                </div>
+                <div class="buy1 grey" v-else>
+                    <template
+                        v-if="(pay_info.home.sale_plan.price.length + pay_info.home.sale_plan.currencyInfo.tokenSymbol.length) > 30">
+                        <div class="left">Pay</div>
+                        <div class="right">
+                            <p>{{ pay_info.home.sale_plan.price }}</p>
+                            <p>{{ pay_info.home.sale_plan.currencyInfo.tokenSymbol }}</p>
+                        </div>
+                    </template>
+                    <template v-else>
+                        <div class="left">Pay</div>
+                        <div class="right">
+                            {{ pay_info.home.sale_plan.price }}
+                            {{ pay_info.home.sale_plan.currencyInfo.tokenSymbol }}
+                        </div>
+                    </template>
+                </div>
+            </template>
+            <template v-else>
+                <!-- Balance -->
+                <div class="balance">
+                    <img class="icon" src="@/assets/subject/icon-balance.png" />
+                    <div class="con">
+                        <div class="desc">Balance</div>
+                        <div class="price">
+                            $
+                            {{tempCurrentCurrencyInfo.balance}}
+                        </div>
                     </div>
-                </template>
-                <template v-else>
+                    <img class="refresh"
+                        :class="{ 'icon-refresh-rotate': refreshRotate }"
+                        :src=" require('@/assets/svg/icon-form-refresh.svg')"
+                        @click="updateCurrencyBanlce"/>
+                </div>
+                <!-- Play -->
+                <div class="buy1 usd" @click="clickPayUSD">
                     <div class="left">Pay</div>
                     <div class="right">
-                        {{ pay_info.home.sale_plan.price }}
+                        {{ finalAmountData.rechargeAmountValue > 0 ? finalAmountData.rechargeAmountValue : finalAmountData.orderAmountValue }}
                         {{ pay_info.home.sale_plan.currencyInfo.tokenSymbol }}
                     </div>
-                </template>
-            </div>
+                </div>
+            </template>
         </div>
     </div>
+
+    <!-- 预览页充值 -->
+    <message-box
+        :dialogVisible="showDepositMessageBox"
+        title="Is the Deposit Completed?"
+        @cancel="depositAchCancel"
+        @confirm="depositAchConfirm">
+    </message-box>
 </template>
 <script setup >
 import Report from "@/log-center/log"
 import router from "@/router/buy-nft.js";
-import { ref, onMounted, inject, reactive } from 'vue'
+import { ref, onMounted, onUnmounted, inject, reactive } from 'vue'
 import topUp2 from "@/view/iframe/publish/components/top-up2.vue";
 import { getCurrencyInfoByCode } from "@/http/publishApi";
 import PreviewBalance from "@/view/components/preview-balance.vue";
+import paymentInfoUsd from '@/view/components/payment-info-usd.vue';
+import payButton from "@/view/iframe/publish/components/pay-button";
+import messageBox from "@/view/components/message-box.vue";
 import BtnLoading from '../components/btn-loading.vue'
 import { payNftMysteryBoxWithBalance } from "@/http/pay";
-import { getChromeStorage } from "@/uilts/chromeExtension"
+import { calcRechargePayAmount } from "@/http/account";
+import { getChromeStorage, setChromeStorage } from "@/uilts/chromeExtension"
 import { ElMessage } from 'element-plus'
 import "element-plus/es/components/message/style/css";
 import { sendChromeTabMessage } from '@/uilts/chromeExtension.js';
@@ -113,10 +165,40 @@ let currentCurrencyInfo = reactive({
     balance: "",
 });
 
+// 真实支付金额数据
+let finalAmountData = ref({
+    currencyCode: '',
+    feeAmountValue: 0,
+    finalAmountValue: 0,
+    requestAmountValue: 0,
+});
+
+let showDepositMessageBox = ref(false);
+let amountTimer = ref(0);
 let dialogStyle = reactive({
     height: '800'
 })
 
+const calcRechPayAmount = async (params) => {
+    let res = await calcRechargePayAmount({
+        params : params
+    })
+
+    if (res.code == 0) {
+        finalAmountData.value = res.data;
+    }
+    return res.data;
+}
+
+const depositAchCancel = async () => {
+    showDepositMessageBox.value = false;
+    getCurrencyInfo()
+}
+const depositAchConfirm = async () => {
+    showDepositMessageBox.value = false;
+    getCurrencyInfo()
+}
+
 const updateData = (obj_data) => {
     if (Number(obj_data.balance) >= Number(pay_info.home.sale_plan.price)) {
         state.is_btn_grey = false
@@ -201,6 +283,29 @@ const clickPlay = () => {
         postEditorPostId: postId.value,
     })
 }
+
+const clickPayUSD = () => {
+    if(Number(finalAmountData.value.rechargeAmountValue) > 0) {
+        setTimeout(() => {
+            showDepositMessageBox.value = true;
+        }, 1000)
+        chrome.tabs.getCurrent(tab =>{
+            let achPayInfo = {
+                amountValue: finalAmountData.value.rechargeAmountValue,
+                tab: tab
+            };
+            let guideUrl = chrome.runtime.getURL('/iframe/ach-cashier.html');
+            setChromeStorage({ achPayInfo : JSON.stringify(achPayInfo)});
+
+            chrome.tabs.create({
+                url: guideUrl
+            });
+        })
+    } else {
+        clickPlay()
+    }
+}
+
 // 余额是否同步中
 let asyncIng = ref(false);
 
@@ -208,7 +313,16 @@ let asyncIng = ref(false);
 //临时货币信息
 let tempCurrentCurrencyInfo = ref({});
 
-
+const refreshRotate = ref(false);
+const updateCurrencyBanlce = () => {
+    if(!refreshRotate.value) {
+        refreshRotate.value = true;
+        getCurrencyInfo()
+        setTimeout(() => {
+            refreshRotate.value = false;
+        }, 1000)
+    }
+}
 const getLocalCurrencyInfoByCode = () => {
     if (currentCurrencyInfo.currencyCode) {
         getCurrencyInfo();
@@ -227,9 +341,25 @@ const getCurrencyInfo = async () => {
                 tempCurrentCurrencyInfo.value = res.data;
             }
         });
+        // 处理USD支付
+        if (currentCurrencyInfo?.currencyCode === 'USD') {
+            calcRechPayAmount({
+                currencyCode: currentCurrencyInfo.currencyCode,
+                orderAmountValue: pay_info.home.sale_plan.price,
+                payChannel: 'ach'
+            })
+            amountInterval()
+        }
     }
 }
 
+const amountInterval = () => {
+    clearTimeout(amountTimer.value);
+    amountTimer.value = setTimeout(() => {
+        getCurrencyInfo()
+    }, 10000)
+}
+
 const setDialogStyle = () => {
     let clientHeight = window.innerHeight;
     if(clientHeight >= 840) {
@@ -252,6 +382,9 @@ onMounted(() => {
     })
 })
 
+onUnmounted(() => {
+    clearTimeout(amountTimer.value);
+})
 
 </script>
 <style lang="scss" scoped>
@@ -296,6 +429,10 @@ onMounted(() => {
             width: 400px;
             margin: 40px 56px 0 56px;
 
+            &.auto {
+                margin: 40px auto 0 auto;
+            }
+
             img {
                 max-width: 400px;
                 max-height: 400px;
@@ -328,7 +465,12 @@ onMounted(() => {
         }
 
         .right {
+            width: 400px;
             margin: 30px 56px 0px 30px;
+            
+            &.none {
+                display: none;
+            }
 
             .card-content {
                 float: right;
@@ -478,6 +620,10 @@ onMounted(() => {
                 }
             }
 
+            &.usd {
+                min-width: auto;
+            }
+
         }
 
         .grey {
@@ -486,4 +632,36 @@ onMounted(() => {
         }
     }
 }
+
+.balance {
+    display: flex;
+    margin-right: 20px;
+    .icon {
+        width: 40px;
+        height: 40px;
+    }
+    .con {
+        padding: 0 5px;
+        .desc {
+            color: rgba($color: #000000, $alpha: 0.5);
+            font-size: 12px;
+            margin-bottom: 4px;
+        }
+        .price {
+            font-size: 14px;
+            font-weight: bold;
+            word-break: break-all;
+        }
+    }
+    .refresh {
+        width: 40px;
+        cursor: pointer;
+        margin-left: -5px;
+    }
+}
+
+.icon-refresh-rotate {
+    transform: rotate(360deg);
+    transition-duration: 1s;
+}
 </style>

src/view/iframe/publish/components/preview-sheet.vue

@@ -38,30 +38,7 @@
                     <img class="img" :src="require('@/assets/subject/top-02.svg')" />
                     <div class="font">Deposit to Send Giveaway</div>
                 </div>
-                <div class="card-list">
-                    <div class="item">
-                        <div class="l">Giveaway Amount</div>
-                        <div class="r order-amount">
-                            ${{ finalAmountData.orderAmountValue }}
-                        </div>
-                    </div>
-                    <div class="item">
-                        <div class="l">Balance</div>
-                        <div class="r txt">${{ finalAmountData.balance }}</div>
-                    </div>
-                    <div class="item">
-                        <div class="l">
-                            Paypal charges fee ({{ finalAmountData.feeDesc }})
-                        </div>
-                        <div class="r txt">${{ finalAmountData.feeAmountValue }}</div>
-                    </div>
-                    <div class="item">
-                        <div class="l">Deposit Amount</div>
-                        <div class="r deposit-amount">
-                            ${{ finalAmountData.rechargeAmountValue }}
-                        </div>
-                    </div>
-                </div>
+                <payment-info-usd :finalAmountData="finalAmountData"></payment-info-usd>
             </template>
             <template v-else>
                 <div class="card-title">
@@ -99,6 +76,7 @@ import { ref, defineProps, defineEmits, provide, computed } from "vue";
 
 import previewCard from "@/view/iframe/publish/components/preview-card";
 import topUp2 from "@/view/iframe/publish/components/top-up2.vue";
+import paymentInfoUsd from '@/view/components/payment-info-usd.vue';
 
 import { RewardType } from '@/types';
 
@@ -196,7 +174,8 @@ const updateCurrencyBanlce = () => {
 
     .card {
         float: left;
-        width: 480px;
+        width: 48%;
+        max-width: 480px;
         position: relative;
 
         .flash {
@@ -235,7 +214,8 @@ const updateCurrencyBanlce = () => {
 
     .card-content {
         float: right;
-        width: 500px;
+        width: 48%;
+        max-width: 500px;
     }
 
     .card-amount {
@@ -277,42 +257,6 @@ const updateCurrencyBanlce = () => {
         }
     }
 
-    .card-list {
-        padding: 10px 20px;
-        border-radius: 20px;
-        border: 1px solid #e6e6e6;
-
-        .item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            height: 47px;
-            font-size: 14px;
-            font-weight: 500;
-            box-shadow: inset 0px -1px 0px #eaeaea;
-
-            .order-amount {
-                font-weight: 600;
-                font-size: 20px;
-            }
-
-            .txt {
-                font-weight: 500;
-                font-size: 16px;
-                color: #9a9a9a;
-            }
-
-            .deposit-amount {
-                font-weight: 600;
-                font-size: 20px;
-                color: #1d9bf0;
-            }
-        }
-
-        .item:last-child {
-            box-shadow: none;
-        }
-    }
     .icon-refresh-rotate {
         transform: rotate(360deg);
         transition-duration: 1s;