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

<template>
    <div class="dialog">
        <!-- 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">
            <!-- 首页 -->
            <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="buy1">
                <btn-loading :color="'while'"></btn-loading>
            </div> -->
            <template v-for="item in state.data.salePlans.splice(0, 2)">
                <div class="buy5"
                    v-show="item.itemCount == 5 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 5"
                    @click="clickJump(item)">
                    <div class="left">Buy {{ item.itemCount }}</div>
                    <div class="right" v-if="(item.price.length + item.currencyCode) > 10">
                        <div class="usdt">{{ item.price }} {{ item.currencyCode }}</div>
                        <div class="off">{{ item.discount }} OFF</div>
                    </div>
                    <div class="right" v-else>
                        <div class="usdt">
                            <p>{{ item.price }}</p>
                            <p>{{ item.currencyCode }}</p>
                        </div>
                        <div class="off">
                            <p>{{ item.discount }} OFF</p>
                        </div>
                    </div>

                </div>

                <!-- <btn-loading></btn-loading> -->
                <div class="buy1" @click="clickJump(item)"
                    v-show="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) >= 1">
                    <template v-if="(item.price.length + item.currencyCode) > 30">
                        <div class="left">Buy 1</div>
                        <div class="right">
                            <p>{{ item.price }}</p>
                            <p>{{ item.currencyCode }}</p>
                        </div>
                    </template>
                    <template v-else>
                        <div class="left">Buy 1</div>
                        <div class="right">
                            {{ item.price }}
                            {{ item.currencyCode }}
                        </div>
                    </template>
                </div>
                <div class="buy1 grey"
                    v-show="item.itemCount == 1 && (state.data.perUserBuyLimit - state.data.userBuyCount) <= 0">
                    <template v-if="(item.price.length + item.currencyCode) > 30">
                        <div class="left">Buy 1</div>
                        <div class="right">
                            <p>{{ item.price }}</p>
                            <p>{{ item.currencyCode }}</p>
                        </div>
                    </template>
                    <template v-else>
                        <div class="left">Buy 1</div>
                        <div class="right">
                            {{ item.price }}
                            {{ item.currencyCode }}
                        </div>
                    </template>
                </div>
            </template>
        </div>
    </div>
</template>
<script setup>
import router from "@/router/buy-nft.js";
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');

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' });
}
onMounted(() => {
    let nft_project_Id = getQueryString('nftProjectId') || ''
    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: 90%;
    min-width: 800px;
    max-height: 90%;
    min-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%;
            height: 100%;
        }
    }

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

        .loading {
            width: 24px;
        }

        .mark {
            position: absolute;
            left: 20px;

            .sold {}

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

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

            .left {
                margin-right: 20px;
            }

            .right {
                text-align: right;

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


            .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;
            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: auto;
        }
    }
}
</style>