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

<template>
    <div class="dialog"  :style="{'height': dialogStyle.height + 'px'}">
        <!-- home -->
        <div class="area-title">
            <img :src="require('@/assets/svg/icon-close.svg')" @click="clickClose" />
            <div class="title">NFT Mystery box</div>
        </div>
        <!-- 内容 -->
        <div class="area-content">
            <img :src="state.data.mysteryBoxImagePath" class="box" v-show="state.data.mysteryBoxImagePath" />
            <img :src="require('@/assets/svg/icon-default.svg')" class="box" v-show="!state.data.mysteryBoxImagePath" />
        </div>

        <!-- 底部 -->
        <div class="footer" v-show="state.data.mysteryBoxImagePath">
            <!-- 首页 -->
            <div class="mark">
                <div class="sold">SOLD: {{ state.data.itemSoldCount || 0 }}/{{ state.data.itemTotalCount || 0 }} </div>
                <div class="limit">Buy Limit: {{ state.data.userBuyCount || 0 }}/{{ state.data.perUserBuyLimit || 0 }}
                </div>
            </div>
            <div class="btn-area">
                <template v-for="item in state.data.salePlans.splice(0, 2).reverse()">
                    <div class="buy1" @click="clickJump(item)" v-if="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 1
                    && (state.data.itemTotalCount - state.data.itemSoldCount) >= 1">
                        <template v-if="(item.price.length + item.currencyInfo.tokenSymbol.length) > 30">
                            <div class="left">Buy 1</div>
                            <div class="right">
                                <p>{{ item.price }}</p>
                                <p>{{ item.currencyInfo.tokenSymbol }}</p>
                            </div>
                        </template>
                        <template v-else>
                            <div class="left">Buy 1</div>
                            <div class="right">
                                {{ item.price }}
                                {{ item.currencyInfo.tokenSymbol }}
                            </div>
                        </template>
                    </div>
                    <div class="buy1 grey" v-if="item.itemCount == 1 && ((state.data.perUserBuyLimit - state.data.userBuyCount) <= 0
                    || (state.data.itemTotalCount - state.data.itemSoldCount) <= 0)">
                        <template v-if="(item.price.length + item.currencyInfo.tokenSymbol.length) > 30">
                            <div class="left">Buy 1</div>
                            <div class="right">
                                <p>{{ item.price }}</p>
                                <p>{{ item.currencyInfo.tokenSymbol }}</p>
                            </div>
                        </template>
                        <template v-else>
                            <div class="left">Buy 1</div>
                            <div class="right">
                                {{ item.price }}
                                {{ item.currencyInfo.tokenSymbol }}
                            </div>
                        </template>
                    </div>

                    <div class="buy5" v-if="item.itemCount == 5 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 5 &&
                    (state.data.itemTotalCount - state.data.itemSoldCount) >= 5" @click="clickJump(item)">
                        <div class="left">Buy {{ item.itemCount }}</div>

                        <div class="right" v-if="(item.price.length + item.currencyInfo.tokenSymbol.length) > 30">
                            <div class="usdt">
                                <p>{{ item.price }}</p>
                                <p>{{ item.currencyInfo.tokenSymbol }}</p>
                            </div>
                            <div class="off">
                                <p>{{ item.discount }}</p>
                            </div>
                        </div>
                        <div class="right" v-else>
                            <div class="usdt">{{ item.price }} {{ item.currencyInfo.tokenSymbol }}</div>
                            <div class="off">{{ item.discount }}</div>
                        </div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { onMounted, reactive, inject, } from "vue";
import { getNftMysteryBoxSaleInfo } from "@/http/nft";
import BtnLoading from '../components/btn-loading.vue'
import { getQueryString } from "@/uilts/help";
let pay_info = inject('pay_info');
const router = useRouter()
let dialogStyle = reactive({
    height: '800'
})
let state = reactive({
    data: {
        salePlans: [
            {
                currencyCode: 'BSC_TESTNET_BF_6X',
                discount: '20$',
                itemCount: 5,
                price: 23,
                salePlanId: '2'
            },
            {
                currencyCode: 'BSC_TESTNET_BF_6X',
                discount: '20$',
                itemCount: 1,
                price: 123,
                salePlanId: '123'
            }
        ]
    }
})
const clickClose = () => {
    chrome.tabs.getCurrent((tab) => {
        chrome.tabs.sendMessage(tab.id, {
            actionType: "IFRAME_TWITTER_HIDE_BUY_NFT",
        }, (res) => { });
    })
}
const clickJump = (item) => {
    pay_info.home.sale_plan = item
    router.push({ path: '/pay' });
}

const setDialogStyle = () => {
    let clientHeight = window.innerHeight;
    if(clientHeight >= 840) {
        dialogStyle.height = 800;
    } else {
        dialogStyle.height = clientHeight - 40;
    }
}

onMounted(() => {
    setDialogStyle();

    let nft_project_Id = router.currentRoute.value.query.nftProjectId
    let nft_group_Id = router.currentRoute.value.query.nft_group_Id
    if(nft_group_Id){
        pay_info.nft_group_Id = nft_group_Id
    }
    if (!nft_project_Id) {
        return
    }
    getNftMysteryBoxSaleInfo({
        params: {
            nftProjectId: nft_project_Id
        }
    }).then((res) => {
        if (res.code == 0) {
            state.data = res.data
            pay_info.home = res.data
        } else {

        }
    }).catch(() => {

    })
})
</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%;
        min-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 {
        flex: 1;
        overflow-y: auto;

        img {
            width: 100%;
            object-fit: contain;
        }
    }

    .footer {
        border-top: 1px solid #D9D9D9;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .loading {
            width: 24px;
        }

        .mark {
            margin-left: 20px;

            .sold {
                margin-bottom: 7px;
            }

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

        .btn-area {
            height: 100%;
            display: flex;
            padding: 15px 0;
            min-height: 50px;
            box-sizing: border-box;

            .buy5 {
                border: 1px solid #1D9BF0;
                background: rgba(29, 155, 240, 0.01);
                border-radius: 100px;
                color: #1D9BF0;
                min-width: 217px;
                display: flex;

                justify-content: space-between;
                align-items: center;
                padding: 10px 15px 10px 20px;
                font-weight: 700;
                font-size: 14px;
                cursor: pointer;
                margin-right: 12px;
                box-sizing: border-box;

                .left {
                    margin-right: 20px;
                }

                .right {
                    text-align: right;
                    line-height: 17px;

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


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

                    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;
                display: flex;
                align-items: center;
                font-size: 14px;
                font-weight: 700;
                justify-content: space-between;
                padding: 0 15px 0 20px;
                margin-right: 25px;
                box-sizing: border-box;

                .left {
                    margin-right: 20px;
                }

                .right {
                    line-height: 17px;
                    text-align: right;

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

            }

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