de-net/src/view/iframe/publish/components/pay-button.vue

<template>
<!-- pay 支付按钮 -->
    <div class="pay-wrapper">
        <slot name="balance"></slot>
        <div class="pay-btn">
            <div class="iframe-pay"
                v-show="currentCurrencyInfo.currencyCode == 'USD'">
                <div class="token-pay" 
                    @click="clickPayUSD">
                    Pay ${{finalAmountData.rechargeAmountValue > 0 && USDepositStatus != 'SUCCESS' ? finalAmountData.rechargeAmountValue : finalAmountData.orderAmountValue}}
                </div>

                <!-- <iframe
                    class="iframe-pay"
                    ref="iframe"
                    :src="`${payConfig.paypalHtml}?paypalClientId=${payConfig.paypalClientId}&amount=${props.finalAmountData.finalAmountValue}`"></iframe> -->
            </div>
            <div class="token-pay" 
                :class="{ disabled: Number(currentCurrencyInfo.balance) < Number(payConfig.amount) }"
                v-if="currentCurrencyInfo.currencyCode != 'USD'"
                @click="balancePay">
                Pay {{payConfig.amount || 0}} {{currentCurrencyInfo.tokenSymbol}}
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, ref, defineProps, defineEmits, watch, defineExpose } from "vue";

import {payTaskLuckdropWithBalance} from "@/http/publishApi"
import Report from "@/log-center/log"
import {setChromeStorage, getChromeStorage} from "@/uilts/chromeExtension"

const props = defineProps({
    finalAmountData: {
        type: Object,
        default: () => {
            return {
                balance: "",
                feeAmountValue: 0,
                feeDesc: 0,
                orderAmountValue: 0,
                rechargeAmountValue: 0
            }
        },
    },
    payConfig: {
        type: Object,
        default: () => {
            return {
                paypalClientId: '',
                paypalHtml: 'https://d1mcov78iir8kk.cloudfront.net/website/paypal_1.html'
            }
        }
    },
    currentCurrencyInfo: {
        type: Object, 
        default: () => {

        }
    },
    USDepositStatus: {
        type: String,
        default: 'DEFAULT'
    }
});

let iframe = ref(null);
let payIng = false;

watch(
    () => props.finalAmountData.finalAmountValue,
    (newVal) => {
        // iframe.value.contentWindow.postMessage({ 
        //     actionType: "setAmount", amount: newVal
        // },
        //     "*"
        // );
    },
    {
        deep: true
    }
);

const emits = defineEmits(["payFinish"]);

const balancePay = () => {  
    Report.reportLog({
        pageSource: Report.pageSource.previewPage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.confirmButton
    }, {
        type: 'confirm'
    });  
    if(payIng) {
        return;
    }
    payIng = true;
    payTaskLuckdropWithBalance({
        params: {
            currencyCode: props.currentCurrencyInfo.currencyCode,
            postId: props.payConfig.postId
        }
    }).then(res => {
        if(res.code == 0) {
            emits("payFinish", {...res.data});
        }
        payIng = false;
    }).catch(() => {
        payIng = false;
    })
}

const clickPayUSD = () => {
    if(props.finalAmountData.rechargeAmountValue > 0 && props.USDepositStatus != 'SUCCESS') {
        setTimeout(() => {
            emits("showDepositMask", {});
        }, 1000)
        chrome.tabs.getCurrent(tab =>{
            let achPayInfo = {
                amountValue: props.finalAmountData.rechargeAmountValue,
                tab: tab
            };
            let guideUrl = chrome.runtime.getURL('/iframe/ach-cashier.html');
            setChromeStorage({ achPayInfo : JSON.stringify(achPayInfo)});

            chrome.tabs.create({
                url: guideUrl
            });
        })

    } else {
        balancePay();
    }
}

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("payFinish", {...event.data, payNetwork: 'pay'});
    //                 break;
    //         }
    //     }
    // });
});

defineExpose({
    balancePay
})

</script>

<style lang="scss" scoped>
.pay-wrapper {
    width: 100%;
    height: 80px;
    background-color: #fff;
    position: absolute;
    left: 0;
    bottom: 0;
    box-shadow: 0px -1px 0px #ECECEC;
    border-bottom-right-radius: 16px;
    padding: 12px 30px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    border-bottom-left-radius: 16px;
    z-index: 999;

    .pay-msg {
        text-align: right;
        margin-right: 25px;

        .row {
            font-weight: 600;
            font-size: 16px;
            color: #1D9BF0;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            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;
            color: #898989;
        }
    }

    .pay-btn {
        height: 48px;

        .token-pay {
            height: 100%;
            background: #1D9BF0;
            border-radius: 10000px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            font-size: 18px;
            color: #fff;
            padding: 0 30px;
            word-break: break-all;
            cursor: pointer;
            &.disabled {
                background: #DEDEDE;
            }
        }

        .iframe-pay {
            width: 100%;
            height: 100%;
        }

        iframe {
            border: medium none;
            width: 100%;
            height: 100%;
        }
    }
}
</style>