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" v-if="showDesc">Buy Limit: {{ state.data.userBuyCount || 0 }}/{{ state.data.perUserBuyLimit || 0 }}</div>
            </div>
            <div class="btn-area">
                <!-- 兑换码 -->
                <template v-if="(state.data.perUserBuyLimit - state.data.userBuyCount) >= 1 && (state.data.itemTotalCount - state.data.itemSoldCount) >= 1">
                    <div class="redeem" @click="showRedeemLayer">Redeem</div>
                </template>
                <template v-else>
                    <div class="redeem grey">Redeem</div>
                </template>

                <template v-for="item in state.data.salePlans.slice(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 v-if="showRedeem">
        <div class="redeemLayer">
            <div class="header">
                <img :src="require('@/assets/svg/icon-close.svg')" @click="hideRedeemLayer" />
            </div>
            <div class="footer">
                <div class="tips">Enter Redemption Code</div>
                <div class="input"><input ref="refInput" type="text" v-model="redeemStr" /></div>
                <div class="confirm">
                    <button class="btn" @click="redeemPost" v-if="redeemNext">Confirm</button>
                    <button class="btn grey" v-else>Confirm</button>
                </div>
            </div>
        </div>
        <div class="redeemMask"></div>
    </template>
</template>
<script setup>
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { onMounted, reactive, inject, ref, nextTick, watchEffect } from "vue";
import { getNftMysteryBoxSaleInfo, redeemNft } from "@/http/nft";
import BtnLoading from '../components/btn-loading.vue'
import Report from "@/log-center/log"
import { getQueryString } from "@/uilts/help";
import { sendChromeTabMessage } from '@/uilts/chromeExtension.js';
let postId = inject('post_Id');
let pay_info = inject('pay_info');
let router = useRouter()
let showDesc = ref(true)
let showRedeem = ref(false)
let redeemNext = ref(false)
let redeemStr = ref('')
let refInput = ref('')
let groupId = ref('')
let projectId = ref('')
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' });
    // report
    Report.reportLog({
        pageSource: Report.pageSource.nftShopPage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.buy_button,
        nftProjectId: projectId.value,
        postEditorPostId: postId.value,
    }, {
        'buy-number': item.itemCount
    })
}

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

const redeemPost = () => {
    let params = {
        redeemCode: redeemStr.value
    }
    if (projectId.value) {
        params['nftProjectId'] = projectId.value
    }
    if (groupId.value) {
        params['nftGroupId'] = groupId.value
    }

    // disabled btn
    redeemNext.value = false

    redeemNft({ params }).then(res => {
        let { code, data } = res;
        if (code == 0 && data) {
            pay_info.buy_items = data
            sendChromeTabMessage({ actionType: "FINISH_GROUP_BANNNER" }, () => { })
            router.push({ path: '/open_box' });
            // report
            Report.reportLog({
                pageSource: Report.pageSource.nftShopPage,
                businessType: Report.businessType.buttonClick,
                objectType: Report.objectType.redeem_button,
                nftProjectId: projectId.value,
                postEditorPostId: postId.value,
            }, {
                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
                case '5104':
                case '5105':
                case '5106':
                    msg = 'Invalid redemption code'
                    break;
                default:
                    msg = 'Invalid redemption code, please try again'
                    console.log(res.msg)
            }
            ElMessage({
                message: msg,
                type: 'warning'
            })
            redeemNext.value = true;
            // report
            Report.reportLog({
                pageSource: Report.pageSource.nftShopPage,
                businessType: Report.businessType.buttonClick,
                objectType: Report.objectType.redeem_button,
                nftProjectId: projectId.value,
                postEditorPostId: postId.value,
            }, {
                result: 'fail'
            })
        }
    }).catch(() => {
        ElMessage({
            message: 'Invalid redemption code, please try again',
            type: 'warning'
        })
        redeemNext.value = true;
    })
}

const showRedeemLayer = () => {
    showRedeem.value = true;
    nextTick(() => {
        refInput.value.focus()
    })
    // report
    Report.reportLog({
        pageSource: Report.pageSource.nftShopPage,
        businessType: Report.businessType.buttonClick,
        objectType: Report.objectType.redeem_button,
        nftProjectId: projectId.value,
        postEditorPostId: postId.value,
    })
}

const hideRedeemLayer = () => {
    showRedeem.value = false;
    redeemStr.value = '';
}

watchEffect(() => {
    let len = 16
    let str = redeemStr.value.replace(/[^a-zA-Z0-9]/g, '')
        str = str.toUpperCase();
        str = str.slice(0, len);
    // set
    redeemStr.value = str;
    redeemNext.value = str !== '' && str.length === len;
})

onMounted(() => {
    setDialogStyle();

    let nft_project_Id = router.currentRoute.value.query.nftProjectId
    let nft_group_Id = router.currentRoute.value.query.nft_group_Id
    let post_id = router.currentRoute.value.query.postId
    if(nft_group_Id){
        pay_info.nft_group_Id = nft_group_Id
    }
    if (!nft_project_Id) {
        return
    }

    // 作用域外用
    groupId.value = nft_group_Id
    projectId.value = nft_project_Id
    postId.value = post_id

    getNftMysteryBoxSaleInfo({
        params: {
            nftProjectId: nft_project_Id
        }
    }).then((res) => {
        if (res.code == 0) {
            state.data = res.data
            pay_info.home = res.data
            let { perUserBuyLimit, itemTotalCount } = res.data;
            // 不限购
            if (perUserBuyLimit && itemTotalCount && perUserBuyLimit >= itemTotalCount) {
                showDesc.value = false;
            }
        } else {

        }
    }).catch(() => {

    })

    // report
    Report.reportLog({
        pageSource: Report.pageSource.nftShopPage,
        businessType: Report.businessType.pageView,
        nftProjectId: nft_project_Id,
        postEditorPostId: postId.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%;
        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;
                min-height: 50px;

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

            .redeem {
                border: 1px solid #1D9BF0;
                background: rgba(29, 155, 240, 0.01);
                border-radius: 100px;
                color: #1D9BF0;
                min-width: 110px;
                min-height: 50px;
                display: flex;
                justify-content: center;
                align-items: center;
                font-weight: 700;
                font-size: 16px;
                cursor: pointer;
                margin-right: 12px;
                box-sizing: border-box;
                &.grey {
                    background: #CDCDCD;
                    cursor: not-allowed;
                    color: #fff;
                    border: unset;
                }
            }
        }
    }
}

.redeemLayer {
    position: absolute;
    z-index: 25;
    top: 50%;
    left: 50%;
    width: 630px;
    height: 270px;
    border-radius: 20px;
    background: #FFFFFF;
    transform: translate(-50%, -50%);
    .header {
        display: flex;
        align-items: center;
        height: 48px;
        box-shadow: 0px 0.5px 0px #D1D9DD;
        img {
            width: 24px;
            height: 24px;
            margin-left: 14px;
            cursor: pointer;
        }
    }
    .footer {
        padding: 20px;
        .tips {
            font-size: 16px;
            font-weight: 500;
            line-height: 19px;
            letter-spacing: 0.3px;
            margin-bottom: 18px;
        }
        .input {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 49px;
            border-radius: 100px;
            background: #FFFFFF;
            border: 1px solid #DDDDDD;
            input {
                width: calc(100% - 40px);
                border: 0;
                outline: 0;
                font-size: 16px;
                font-weight: 500;
                line-height: 19px;
            }
        }
        .confirm {
            margin-top: 45px;
            text-align: right;
            .btn {
                border: 0;
                width: 170px;
                height: 51px;
                cursor: pointer;
                color: #FFFFFF;
                font-size: 16px;
                font-weight: 700;
                border-radius: 100px;
                background: #1D9BF0;
                &.grey {
                    background: #CDCDCD;
                    cursor: not-allowed;
                    color: #fff;
                    border: unset;
                }
            }
        }
    }
}
.redeemMask {
    position: absolute;
    z-index: 24;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #000000, $alpha: .7);
}
</style>