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">
                <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">
                <div class="card-content">
                    <template v-if="tempCurrentCurrencyInfo.currencyCode">
                        <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>
                </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>
                </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>
    </div>
</template>
<script setup >
import router from "@/router/buy-nft.js";
import { ref, onMounted, 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 BtnLoading from '../components/btn-loading.vue'
import { payNftMysteryBoxWithBalance } from "@/http/pay";
import { getChromeStorage } 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 state = reactive({
    loading: {
        show: false
    },
    is_btn_grey: true
})

let currentCurrencyInfo = reactive({
    currencyCode: "",
    currencyName: "",
    balance: "",
});

let dialogStyle = reactive({
    height: '800'
})

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' });
        } 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
            })
        }
    }).catch(() => {
        state.loading.show = false
    })
}
// 余额是否同步中
let asyncIng = ref(false);


//临时货币信息
let tempCurrentCurrencyInfo = ref({});


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;
            }
        });
    }
}

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
    getLocalCurrencyInfoByCode();
    setDialogStyle()
})


</script>
<style lang="scss" scoped>
.dialog {
    background: #fff;
    border-radius: 25px;
    max-width: 1000px;
    min-width: 800px;
    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;

            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 {
            margin: 30px 56px 0px 30px;

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

        }

        .grey {
            background: #CDCDCD;
            cursor: not-allowed;
        }
    }
}
</style>