de-net-hotload/src/pages/tabbar/nft/transfer.vue

<template>
    <div class="info">
        <v-head
            :title="'Transfer'"
            :show_more="true"
            :transactionsRouterParams="{
                backUrl: 'back'
            }">
        </v-head>
        <template v-if="!isSuccess">
            <div class="content">
                <div class="token">
                    <div class="title">Network</div>
                    <div class="box">
                        <img :src="transChainInfo?.iconPath" alt="" />
                        <span>{{  transChainInfo?.chainName  }}</span>
                    </div>
                </div>
                <div class="token">
                    <div class="title">Address</div>
                    <div class="box">
                        <input type="text" v-model="address" placeholder="Click to enter" />
                    </div>
                </div>
            </div>
            <div class="footer">
                <div class="left">
                    <div class="txt">Network fee</div>
                    <span class="money">
                        <a-tooltip :title="feeAmountValue || 0">{{ getBit(feeAmountValue || 0) }}</a-tooltip> {{
                         feeCurrencyInfo?.tokenSymbol  }}
                    </span>
                    <div class="tips" v-if="showTips">Insufficient balance</div>
                </div>
                <div class="right">
                    <div class="btn enter" @click="next" v-if="isNext">Confirm</div>
                    <div class="btn" v-else>Confirm</div>
                </div>
            </div>
        </template>
        <template v-else>
            <div class="withdraw-status">
                <img :src="require('@/assets/svg/icon-withdraw-status.svg')" alt="" />
                <div>
                    <div class="title">Submitted successfully</div>
                    <div class="desc">
                        Please check the status at the message tab
                    </div>
                </div>
            </div>
            <div class="confirm-btn" @click="doneHandle">Done</div>
        </template>
    </div>
</template>

<script setup>
import Report from "@/log-center/log"
import { ref, onMounted, watchEffect } from 'vue'
import { message } from 'ant-design-vue';
import { getCurrencyInfoByCode } from '@/http/publishApi'
import { transferRequest } from '@/http/nft'
import { useRouter } from "vue-router";
import messageCenter from "@/uilts/messageCenter";
import MESSAGE_ENUM from "@/uilts/messageCenter/messageEnum";
import VHead from '@/components/v-head.vue'
import { getBit } from "@/uilts/help";

const isNext = ref(false)
const isSuccess = ref(false)
const isPayment = ref(false)
const showTips = ref(false)
const transChainInfo = ref({})
const feeAmountValue = ref(0)
const feeCurrencyInfo = ref({})
const address = ref('')
const nftId = ref('')
const router = useRouter()

const getCurrentyInfo = (data) => {
    getCurrencyInfoByCode({
        params: {
            currencyCode: data?.currencyCode
        }
    }).then(res => {
        let { code, data } = res;
        if (code === 0) {
            isPayment.value = Number(data?.balance) >= Number(feeAmountValue.value)
            showTips.value = Number(data?.balance) < Number(feeAmountValue.value)
        }
    })
}

const next = () => {
    transferRequest({
        params: {
            nftItemId: nftId.value,
            receiveAddress: address.value
        }
    }).then(res => {
        let { code } = res;
        let transfer;
        if (code === 0) {
            isSuccess.value = true;
            transfer = 'success'
        } else if (code === 5302) {
            transfer = 'fail'
            message.error(`NFT transfer is under system maintenance, try again in two or three hours.`);
        } else {
            transfer = 'fail'
            message.error(`Transfer failed, please try again`);
        }
        // report
        Report.reportLog({
            pageSource: Report.pageSource.denetNftTransferPage,
            businessType: Report.businessType.buttonClick,
            objectType: Report.objectType.confirm_transfer_button,
        }, {
            transfer: transfer
        });
    })
}

const doneHandle = () => {
    messageCenter.send({
        info: {
            actionType: MESSAGE_ENUM.IFRAME_SHOW_FOOTER_MENU
        },
        data: {
            showMenu: true,
        }
    })
    router.push({ name: 'navNftIndex' })
}

watchEffect(() => {
    isNext.value = address.value !== '' && isPayment.value
})

onMounted(() => {
    let { params = '{}' } = router.currentRoute.value.query;
    let { chainInfo, nftItemId, transferFeeAmountValue, transferFeeCurrencyInfo } = JSON.parse(params);
    // set
    nftId.value = nftItemId;
    transChainInfo.value = chainInfo
    feeAmountValue.value = transferFeeAmountValue
    feeCurrencyInfo.value = transferFeeCurrencyInfo

    getCurrentyInfo(feeCurrencyInfo.value)

    // report
    Report.reportLog({
        pageSource: Report.pageSource.denetNftTransferPage,
        businessType: Report.businessType.pageView,
    });
})
</script>

<style lang="scss" scoped>
.info {
    position: relative;
    height: 100%;

    .content {
        height: calc(100% - 48px - 80px);
        overflow: auto;
        padding: 13px 16px 0 13px;

        .token {
            margin-bottom: 20px;

            .title {
                font-weight: 500;
                font-size: 12px;
                margin-bottom: 6px;
                color: #8B8B8B;
            }

            .box {
                border: 1px solid #DBDBDB;
                border-radius: 8px;
                height: 44px;
                display: flex;
                align-items: center;
                padding: 0 15px 0 10px;
                display: flex;
                flex-wrap: nowrap;
                justify-content: space-between;

                img {
                    width: 20px;
                    height: 20px;
                }

                .up {
                    width: 13px;
                    height: 12px;
                    cursor: pointer;
                }

                input {
                    outline: none;
                    border: 0;
                    flex: 1;
                    height: 18px;
                    padding: 0 6px;
                    font-weight: 500;
                    font-size: 15px;

                    &::placeholder {
                        color: #B8B8B8;
                    }
                }

                input::-webkit-outer-spin-button,
                input::-webkit-inner-spin-button {
                    -webkit-appearance: none;
                }

                input[type='number'] {
                    -moz-appearance: textfield;
                }

                span {
                    flex: 1;
                    margin-left: 6px;
                    font-size: 14px;
                    font-weight: 500;
                }
            }
        }
    }

    .footer {
        z-index: 11;
        background: #fff;
        border-top: 1px solid #DBDBDB;
        bottom: 0;
        height: 80px;
        display: flex;
        position: absolute;
        justify-content: space-between;
        width: 100%;
        bottom: 0;
        align-items: center;

        .left {
            margin-left: 16px;

            .txt {
                color: #9D9D9D;
                font-weight: 400;
                font-size: 12px;
            }

            .money {
                color: #000000;
                margin-right: auto;
                font-size: 15px;
                font-weight: bold;
            }

            .tips {
                color: #FF0000;
                font-weight: 500;
                font-size: 12px;
            }
        }

        .right {
            margin-right: 16px;

            .btn {
                cursor: pointer;
                width: 140px;
                height: 46px;
                line-height: 46px;
                text-align: center;
                font-weight: 600;
                font-size: 18px;
                color: #FFFFFF;
                background: #D2D2D2;
                border-radius: 100px;
            }

            .enter {
                background: #1D9BF0;
            }
        }
    }
}

.withdraw-status {
    text-align: center;

    img {
        margin-top: 40px;
        margin-bottom: 34px;
    }

    .title {
        font-weight: 500;
        font-size: 20px;
        margin-bottom: 10px;
    }

    .desc {
        font-size: 15px;
        color: rgba($color: #000000, $alpha: 0.5);
    }
}

.confirm-btn {
    width: 335px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border-radius: 100px;
    background: #1D9BF0;
    font-weight: 600;
    font-size: 18px;
    color: #fff;
    position: absolute;
    left: 50%;
    bottom: 35px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
</style>