de-net/src/view/popup/withdraw/confirm.vue

<template>
    <!-- 公共组件 -->
    <div class="confirm">
        <v-head :title="'Withdraw'" :show_more="true"></v-head>

        <!-- 内容 -->
        <div class="content">
            <div class="order">
                <div class="txt">Confirm order</div>
                <div class="money">{{ withdraw_info.data.amount }} {{ withdraw_info.data.currency_code }}</div>
                <!-- <div class="txt">≈$6.67</div> -->
            </div>
            <div class="info">
                <div class="item">
                    <div class="key">Address</div>
                    <div class="val">{{ withdraw_info.data.input_address }}</div>
                </div>
                <div class="item">
                    <div class="key">Network</div>
                    <!-- <div class="val">{{ withdraw_info.token_chain }}</div> -->
                    <div class="val">BNB Smart Chain (BEP20)</div>
                </div>
                <div class="info-warn">
                    Ensure the network is correct
                </div>
                <div class="item">
                    <div class="key">Amount</div>
                    <div class="val">{{ withdraw_info.data.amount }} {{ withdraw_info.token_symbol }}</div>
                </div>
                <div class="item">
                    <div class="key">Network fee</div>
                    <div class="val">{{ withdraw_info.data.fee_amount }} {{ withdraw_info.token_symbol }}</div>
                </div>
            </div>

            <div class="tips">
                <div class="tips-icon">
                    <img :src="require('@/assets/svg/icon-top-up-tips-warning.svg')" alt="">
                </div>
                <div class="tips-content">
                    <p>Ensure that the address is correct and on the same network. Otherwise, you'll lose your assets.
                    </p>
                </div>
            </div>
        </div>
        <!-- 底部 -->
        <div class="footer">
            <div class="left">
                <img :src="require('@/assets/svg/icon-enter-ed.svg')" alt="" v-if="state.img_enter_state"
                    @click="clickEnter">
                <img :src="require('@/assets/svg/icon-enter.svg')" alt="" v-else @click="clickEnter">
                <span @click="clickEnter">Read </span> &nbsp;
                <span class="agreement" @click="clickRisk">Risk Warning</span>
            </div>
            <div class="right">
                <div class="btn" @click="clickBtn" :class="{ enter: state.img_enter_state }">Confirm</div>
            </div>
        </div>
    </div>

</template>

<script setup>
import { reactive, inject, onMounted } from 'vue'
import VHead from '@/view/popup/components/head.vue'
import { withdrawRequest } from "@/http/account";
import router from "@/router/popup.js";
import Report from "@/log-center/log";
import { message } from "ant-design-vue";

let withdraw_info = inject('withdraw_info')
withdraw_info.source = 'confirm'
withdraw_info.state_page = {}
let state = reactive({
    img_enter_state: false
})

const clickBtn = () => {
    if (!state.img_enter_state) {
        return
    }
    withdrawRequest({
        params: {
            "amountValue": withdraw_info.data.input_amount,
            "currencyCode": withdraw_info.currency_code,
            "withdrawNetwork": withdraw_info.token_chain,
            "withdrawReceiveAccount": withdraw_info.data.input_address
        }
    }).then((res) => {
        switch (res.code.toString()) {
            case '0':
                withdraw_info.state_page.txt = ['Estimated completion with a few minutes', 'View history for the latest updates']
                router.push('/withdraw/success')
                break
            case '4002':
                message.error(res.msg);
                break
            default:
                message.error(res.code);
        }
    })

}
onMounted(()=>{
    Report.reportLog({
        pageSource: Report.pageSource.denetWithdrawConfirm,
        businessType: Report.businessType.pageView,
    });
    state.img_enter_state = withdraw_info.enter_state
})
const clickRisk = () => {
    withdraw_info.enter_state = state.img_enter_state
    router.push('/withdraw/risk')
}

const clickEnter = () => {
    state.img_enter_state = !state.img_enter_state
}

</script>


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

    .head {
        height: 48px;
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: center;
        padding: 0 12px;
        border-bottom: 1px solid #DBDBDB;

        .back,
        .more {
            width: 24px;
            height: 24px;
            cursor: pointer;
        }

        .title {
            padding-left: 16px;
            flex: 1;
            color: #000000;
            font-size: 16px;
            font-weight: 500;
        }
    }

    .content {
        padding: 16px 16px 0 16px;

        .order {
            text-align: center;

            .txt {
                font-weight: 500;
                font-size: 15px;
                color: #000000;
            }

            .txt:first-child {
                margin-bottom: 9px;
            }

            .txt:last-child {
                margin-top: 5px;
            }

            .money {
                font-weight: 600;
                font-size: 24px;
                color: #000000;
            }
        }

        .info {
            text-align: right;
            background: #F7F7F7;
            border-radius: 18px;
            padding: 0 16px 20px 16px;
            margin-top: 20px;

            .item {
                display: flex;
                padding-top: 20px;

                .key {
                    text-align: left;
                    width: 100px;
                    color: #8B8B8B;
                    font-weight: 500;
                    font-size: 14px;
                }

                .val {
                    word-break: break-all;

                    flex: 1;
                    font-weight: 500;
                    font-size: 14px;
                    text-align: right;
                    letter-spacing: 0.5px;

                }
            }

            .info-warn {
                margin-top: 7px;
                background: #F4EEE1;
                border-radius: 5px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                display: inline-block;
                padding: 0 8px;
                color: #AD8226;
            }
        }

        .tips {
            margin-top: 12px;
            font-size: 13px;
            height: 118;
            overflow: auto;
            background: #FCF5E5;
            display: flex;
            padding: 10px;
            border-radius: 10px;

            .tips-icon {

                width: 30px;

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

            .tips-content {
                flex: 1;
            }

            p {
                margin: 0;
                padding: 0;
                color: #AD8226;
            }
        }

    }

    .footer {
        background: #FFFFFF;
        z-index: 11;
        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 {
            cursor: pointer;
            margin-left: 16px;

            display: flex;
            align-items: center;

            img {
                width: 24px;
                height: 24px;
                margin-right: 10px;
            }

            span {
                font-size: 14px;

            }

            .agreement {
                text-decoration: underline;
                color: #1D9BF0;
            }
        }

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