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

<template>
    <div class="dialog" :style="{'height': dialogStyle.height + 'px'}">
        <!-- home -->
        <div class="area-title">
            <img :src="require('@/assets/svg/icon-back.svg')" @click="clickBack" />
            <div class="title">Payment</div>
        </div>
        <!-- 内容 -->
        <div class="area-content">
            <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"
                    alt="" />
                <div class="tip">
                    <span>Mystery box*{{ pay_info.home.sale_plan.itemCount }}</span>
                    <div>
                        <img :src="pay_info.home.sale_plan.currencyInfo.iconPath" alt="" />
                        <span>{{ pay_info.home.sale_plan.price }}</span>
                    </div>
                </div>
            </div>
            <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>
                        </div>
                        <top-up2 v-if="tempCurrentCurrencyInfo.currencyCode" :asyncIng="asyncIng"
                            :currentCurrencyInfo="tempCurrentCurrencyInfo" @topUpDone="topUpDone">
                        </top-up2>

                        <div class="card-title">
                            <img class="img" :src="require('@/assets/subject/top-02.svg')" />
                            <div class="font">Wait for the amount to arrive</div>
                        </div>
                        <preview-balance v-if="tempCurrentCurrencyInfo.currencyCode"
                            :currencyCode="tempCurrentCurrencyInfo.currencyCode"
                            :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" 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>
                    <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">
                        {{ finalAmountData.rechargeAmountValue > 0 ? finalAmountData.rechargeAmountValue : finalAmountData.orderAmountValue }}
                        {{ pay_info.home.sale_plan.currencyInfo.tokenSymbol }}
                    </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, 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 { 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';

let pay_info = inject('pay_info');
let postId = inject('post_Id');
let state = reactive({
    loading: {
        show: false
    },
    is_btn_grey: true
})

let currentCurrencyInfo = reactive({
    currencyCode: "",
    currencyName: "",
    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
    }
}

const clickBack = () => {
    router.back()
}
const clickPlay = () => {
    state.loading.show = true
    payNftMysteryBoxWithBalance({
        params: {
            nftProjectId: pay_info.home.nftProjectId,
            salePlanId: pay_info.home.sale_plan.salePlanId,
            nftGroupId: pay_info.nft_group_Id
        }
    }).then((res) => {
        state.loading.show = false
        if (res.code == 0) {
            pay_info.buy_items = res.data.buyItems
            sendChromeTabMessage({ actionType: "FINISH_GROUP_BANNNER" }, () => { })
            router.push({ path: '/open_box' });
            Report.reportLog({
                pageSource: Report.pageSource.nftShopPage,
                businessType: Report.businessType.buttonClick,
                objectType: Report.objectType.buy_button,
                nftProjectId: pay_info.home.nftProjectId,
                postEditorPostId: postId.value,
            }, {
                'buy-number': pay_info.home?.sale_plan?.itemCount,
                result: 'success'
            })
        } else {
            let msg = ''
            switch (res.code.toString()) {
                case '5001':
                    msg = 'nft project not exist'
                    break;
                case '5002':
                    msg = 'nft project not available'
                    break
                case '5101':
                    msg = 'nft sale plan not exist'
                    break
                case '5102':
                    msg = 'nft sold out'
                    break
                case '5103':
                    msg = 'Purchase limit reached'
                    break
                default:
                    console.log(res.msg)
            }
            ElMessage({
                message: msg,
                grouping: true,
                type: 'warning',
                offset: -16,
                appendTo: document.body
            })
            Report.reportLog({
                pageSource: Report.pageSource.nftShopPage,
                businessType: Report.businessType.buttonClick,
                objectType: Report.objectType.buy_button,
                nftProjectId: pay_info.home.nftProjectId,
                postEditorPostId: postId.value,
            }, {
                'buy-number': pay_info.home?.sale_plan?.itemCount,
                result: 'fail'
            })
        }
    }).catch(() => {
        state.loading.show = false
    })
    // report
    Report.reportLog({
        pageSource: Report.pageSource.nftPreviewPage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.confirmButton,
        nftProjectId: pay_info.home.nftProjectId,
        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);


//临时货币信息
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();
    }
}
const getCurrencyInfo = async () => {
    let { accessToken = '' } = await getChromeStorage('userInfo') || {};
    if (accessToken) {
        getCurrencyInfoByCode({
            params: {
                currencyCode: currentCurrencyInfo.currencyCode
            }
        }).then(res => {
            if (res.code == 0 && res.data) {
                currentCurrencyInfo = res.data;
                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) {
        dialogStyle.height = 800;
    } else {
        dialogStyle.height = clientHeight - 40;
    }
}

onMounted(() => {
    currentCurrencyInfo.currencyCode = pay_info.home.sale_plan.currencyCode
    let timer = currentCurrencyInfo.currencyCode === 'USD' ? 10000 : 0;
    setTimeout(() => {
        getLocalCurrencyInfoByCode();
    }, timer);
    setDialogStyle()

    // setParams
    if (router.currentRoute.value?.query?.finalAmount) {
        finalAmountData.value = JSON.parse(router.currentRoute.value.query.finalAmount);
    }

    if (router.currentRoute.value?.query?.currentCurrencyInfo) {
        tempCurrentCurrencyInfo.value = JSON.parse(router.currentRoute.value.query.currentCurrencyInfo);
    }

    // report
    Report.reportLog({
        pageSource: Report.pageSource.nftPreviewPage,
        businessType: Report.businessType.pageView,
        nftProjectId: pay_info.home.nftProjectId,
        postEditorPostId: postId.value,
    })
})

onUnmounted(() => {
    clearTimeout(amountTimer.value);
})

</script>
<style lang="scss" scoped>
.dialog {
    background: #fff;
    border-radius: 25px;
    max-width: 1000px;
    min-width: 1000px;
    max-height: 90%;
    z-index: 23;
    display: flex;
    flex-direction: column;


    .area-title {
        width: 100%;
        height: 48px;
        display: flex;
        align-items: center;
        border-bottom: 1px solid #D9D9D9;
        font-weight: 500;
        font-size: 16px;
        letter-spacing: 0.3px;
        color: #000000;

        img {
            width: 24p;
            height: 24px;
            margin-left: 14px;
            margin-right: 12px;
            cursor: pointer;
        }

    }

    .area-content {
        display: flex;
        overflow-y: auto;
        flex: 1;

        .left {
            width: 400px;
            margin: 40px 56px 0 56px;

            &.auto {
                margin: 40px auto 0 auto;
            }

            img {
                max-width: 400px;
                max-height: 400px;
                width: 100%;
                height: auto;
            }

            p {
                margin: 0;
                padding: 0;
            }

            .tip {
                margin-top: 15px;
                font-size: 16px;    
                display: flex;
                justify-content: space-between;

                div {
                    display: flex;
                    align-items: center;
                }

                img {
                    margin-right: 4px;
                    width: 14px;
                    height: 14px;
                }
            }
        }

        .right {
            width: 400px;
            margin: 30px 56px 0px 30px;
            
            &.none {
                display: none;
            }

            .card-content {
                float: right;
                width: 430px;
                padding-bottom: 22px;

                .card-title {

                    margin-bottom: 12px;
                    display: flex;
                    align-items: center;

                    .img {
                        width: 20px;
                        height: 20px;
                        margin-right: 8px;
                    }

                    .font {

                        font-size: 17px;
                        font-weight: 500;

                        span {
                            color: #0091e9;
                        }
                    }
                }



                .card-list {
                    padding: 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;
                    }
                }
            }
        }
    }

    .pay {
        width: 200px;
        height: 50px;
        font-weight: 700;
        font-size: 18px;
        margin-right: 30px;
        color: #FFFFFF;
        background: #1D9BF0;
        border-radius: 10000px;
        text-align: center;
        line-height: 50px;
        cursor: pointer;

        p {
            margin: 0;
            padding: 0;
        }
    }

    .footer {
        border-top: 1px solid #D9D9D9;
        height: 80px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        position: relative;

        .sold {
            position: absolute;
            left: 20px;
        }

        .limit {
            color: #AF934E;
            margin-right: 25px;
        }

        .buy5 {
            border: 1px solid #1D9BF0;
            background: rgba(29, 155, 240, 0.01);
            border-radius: 100px;
            color: #1D9BF0;
            width: 217px;
            height: 50px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px 0 20px;
            font-weight: 700;
            font-size: 18px;
            cursor: pointer;
            margin-right: 12px;

            .off {
                color: #AF934E;
                font-weight: 700;
                font-size: 14px;

                letter-spacing: 0.3px;
            }

            .usdt {
                color: #1D9BF0;
                font-size: 14px;
                font-weight: 700;

            }
        }

        .buy1 {
            cursor: pointer;
            background: #1D9BF0;
            color: #fff;
            border-radius: 100px;
            min-width: 217px;
            min-height: 50px;
            display: flex;
            align-items: center;
            font-size: 14px;
            font-weight: 700;
            justify-content: space-between;
            padding: 0 15px 0 20px;
            margin-right: 25px;

            .left {
                margin-right: 20px;
            }

            .right {
                text-align: right;

                p {
                    margin: 0;
                    padding: 0;
                    line-height: 17px;
                }
            }

            &.usd {
                min-width: auto;
            }

        }

        .grey {
            background: #CDCDCD;
            cursor: not-allowed;
        }
    }
}

.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>