de-net-official/pages/payment/index.vue

<template>
    <div class="payment">
        <!-- 选择支付方式 -->
        <template v-if="step === 1">
            <div class="moneyInfo">
                <div class="tips">You Neet to Pay</div>
                <div class="money" v-if="salePlans">
                    <FontZoom width="320">
                        <template v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode !== 'USD'">
                            <img class="icon" :src="salePlans.currencyInfo.iconPath" /><span class="info"> {{ salePlans.price }} {{ salePlans.currencyInfo.tokenSymbol }} (${{salePlans.usdPrice}})</span>
                        </template>
                        <template v-else>
                            <span class="info usd">${{salePlans.usdPrice}}</span>
                        </template>
                    </FontZoom>
                </div>
            </div>
            <div class="payList">
                <div class="detail" v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode !== 'USD'">
                    <div class="title">Crypto Wallet</div>
                    <div class="item denet">
                        <div>
                            <img src="../../static/payment/icon_wallet.png" />
                            <span>DeNet Pay</span>
                        </div>
                        <div class="wallet">
                            Balance:150 SHIB
                        </div>
                    </div>
                    <div class="item">
                        <img src="../../static/payment/icon_meta_mask.png" />
                        <span>MetaMask</span>
                    </div>
                    <div class="item">
                        <img src="../../static/payment/icon_coinbase_wallet.png" />
                        <span>Coinbase Wallet</span>
                    </div>
                </div>
                <div class="detail" v-if="salePlans && salePlans.currencyCode && salePlans.currencyCode === 'USD'">
                    <div class="title">Credit/Debit Card</div>
                    <div class="item denet">
                        <div>
                            <img src="../../static/payment/icon_wallet.png" />
                            <span>DeNet Pay</span>
                        </div>
                        <div class="wallet">
                            Balance:150 SHIB
                        </div>
                    </div>
                    <div class="item">
                        <img src="../../static/payment/icon_master_card.png" />
                        <span>MasterCard</span>
                    </div>
                    <div class="item">
                        <img src="../../static/payment/icon_visa.png" />
                        <span>VISA</span>
                    </div>
                </div>
                <div class="detail">
                    <div class="title">Redemption Code</div>
                    <div class="item" @click="showRedeem">
                        <img src="../../static/payment/icon_enter_code.png" />
                        <span>Enter Code</span>
                    </div>
                </div>
            </div>
        </template>

        <!-- 成功支付 -->
        <template v-if="step === 4">
            <div class="payInfo">
                <div class="picShow" v-if="buyData">
                    <div class="tip">Wow, NFT in the Mystery box is</div>
                    <img class="pic" :src="buyData.imagePath" />
                    <div class="name">{{buyData.nftItemName}}</div>
                </div>
            </div>
            <div class="payBtn">
                <button class="btn" @click="jumpGuide">Done</button>
            </div>
        </template>

        <!-- loading -->
        <div class="loading" v-if="loading">
            <van-loading color="#1D9BF0"></van-loading>
        </div>
        <div class="loadingBg" v-if="loading"></div>

        <!-- redeem -->
        <van-popup
            round
            v-model="redeemLayer"
            position="bottom">
            <div class="redeem">
                <div class="tips">Enter Redemption Code</div>
                <div class="footer">
                    <div class="input">
                        <input
                            type="text"
                            ref="input"
                            v-model="redeemStr"
                            @input="textInput"
                            @blur="textBlur"
                            @focus="textFocus"
                            @keydown.enter="redeemPayment" />
                    </div>
                    <button
                        class="enter"
                        :class="{ disabled: !redeemNext }"
                        @click="redeemPayment">
                        Redeem
                    </button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script>
import FontZoom from '../../components/FontZoom.vue';
import { postRequest } from '../../http/index';
import { Dialog } from 'vant';
import Api from '../../http/api';

export default {
    name: 'payment',
    data() {
        return {
            step: 1,        // 1: 支付方式列表 2: 余额支付 3: 充值支付 4: 支付完成
            loading: true,
            salePlans: null,
            redeemStr: '',
            redeemNext: false,
            redeemLayer: false,
            buyData: {},
        }
    },
    head() {
        return {
            title: 'Buy NFT Mystery Box',
        }
    },
    components: {
        FontZoom,
    },
    mounted() {
        this.saleInfo()
    },
    methods : {
        saleInfo () {
            postRequest(Api.getNftMysteryBoxSaleInfo, {
                params: {
                    nftProjectId: this.$route.query.nftProjectId
                }
            }).then(res => {
                let { code, data } = res;
                if (code === 0) {
                    this.salePlans = data.salePlans[0];
                }
            }).finally(() => {
                this.loading = false;
            })
        },
        showRedeem() {
            this.redeemStr = '';
            this.redeemLayer = true;
            this.$nextTick(() => {
                this.$refs.input.focus();
            })
        },
        textInput(e) {
            let len = 16
            let str = this.redeemStr.replace(/[^a-zA-Z0-9]/g, '')
                str = str.toUpperCase();
                str = str.slice(0, len);
            
            // set
            this.redeemStr = str;
            this.redeemNext = str !== '' && str.length === len;
        },
        textBlur(e) {
            let isiOS = !!window.navigator.userAgent.match(/\(i\[^;]+;( U;)? CPU.+Mac OS X/)
            if (isiOS) {
                setTimeout(() => {
                    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
                    window.scrollTo(0, Math.max(scrollHeight - 1, 0))
                }, 100)
            }
        },
        textFocus(e) {
            let isiOS = !!window.navigator.userAgent.match(/\(i\[^;]+;( U;)? CPU.+Mac OS X/)
            if (isiOS) {
                setTimeout(() => {
                    const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
                    window.scrollTo(0, Math.max(scrollHeight - 1, 0))
                }, 100)
            }
        },
        redeemPayment() {
            if (!this.redeemNext) return;

            let params = {
                redeemCode: this.redeemStr,
                nftProjectId: this.$route.query.nftProjectId,
            }

            this.redeemNext = false;
            postRequest(Api.redeemNft, {
                params
            }).then(res => {
                let { code, data } = res;
                if (code === 0) {
                    this.redeemLayer = false;
                    if (data.length > 0) {
                        this.buyData = data[0];
                    }
                    // 购买成功
                    this.step = 4;
                } else {
                    let msg;
                    switch (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'
                            break;
                    }
                    // Dialog
                    Dialog({
                        message: msg,
                        confirmButtonText: 'OK',
                        confirmButtonColor: '#1D9BF0',
                    });
                }
            }).finally(() => {
                this.redeemNext = true;
            })
        },

        jumpGuide() {
            this.$router.push({
                path: `/nft/${this.$route.query.nftProjectId}/${this.$route.query.account}/show`,
            })
        },
    }
}
</script>

<style lang="scss">
html,
body,
#__nuxt,
#__layout {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}

.payment {
    width: 100%;
    height: 100%;
}
.moneyInfo {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    height: 90px;
    border-bottom: solid 8px rgba($color: #f5f5f5, $alpha: .6);
    .tips {
        font-size: 12px;
        font-weight: 500;
    }
    .money {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
        .icon {
            overflow: hidden;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            margin-right: 10px;
            vertical-align: middle;
            background-color: #f5f5f5;
        }
        .info {
            color: #000;
            font-size: 20px;
            font-weight: 700;
            &.usd {
                margin-top: -5px;
            }
        }
    }
}
.payList {
    overflow-y: auto;
    height: calc(100% - 90px);
    .detail {
        padding: 18px 16px;
        .title {
            color: #ADADAD;
            height: 26px;
            font-size: 12px;
            font-weight: 500;
        }
        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 500;
            font-size: 16px;
            height: 50px;
            margin-bottom: 14px;
            border-radius: 100px;
            border: 1px solid #ECECEC;
            &:last-child {
                margin-bottom: 0;
            }
            img {
                width: 24px;
                height: 24px;
                margin-right: 4px;
            }
            &.denet {
                flex-direction: column;
                img {
                    margin-top: -6px;
                }
            }
            .wallet {
                width: 100%;
                color: #ADADAD;
                font-size: 11px;
                text-align: center;
                margin-top: -2px;
            }
        }
    }
}

.loading {
    position: absolute;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.loadingBg {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba($color: #ffffff, $alpha: .1);
}

.redeem {
    padding: 18px 16px 38px;
    .tips {
        height: 31px;
        font-size: 15px;
        font-weight: 500;
    }
    .footer {
        display: flex;
        justify-content: space-between;
        .input {
            display: flex;
            align-items: center;
            justify-content: center;
            width: calc(100% - 93px);
            height: 45px;
            border-radius: 5px;
            border: 1px solid #E0E0E0;
            input {
                width: 94%;
                border: 0;
                outline: 0;
            }
        }
        .enter {
            width: 83px;
            height: 45px;
            border: 0;
            color: #ffffff;
            font-size: 17px;
            font-weight: 500;
            border-radius: 5px;
            background: #1D9BF0;
            &.disabled {
                background: #DEDEDE;
            }
        }
    }
}

.payInfo {
    width: 100%;
    height: calc(100% - 88px);
    .picShow {
        padding: 54px 48px;
        .tip {
            height: 44px;
            font-size: 18px;
            font-weight: 600;
            text-align: center;
        }
        .pic {
            width: 280px;
            height: 280px;
            border-radius: 3px;
            margin-bottom: 20px;
        }
        .name {
            font-size: 18px;
            font-weight: 600;
            line-height: 21px;
            text-align: center;
        }
    }
}
.payBtn {
    padding: 0 16px 38px;
    .btn {
        width: 100%;
        height: 50px;
        color: #FFFFFF;
        font-size: 18px;
        font-weight: 700;
        border-radius: 50px;
        background: #1D9BF0;
    }
}
</style>