de-net/src/view/components/give-dialog.vue

<template>
    <div class="overlay" v-if="visible">
        <div
            class="content"
            :style="{
                height: dialogHeight + 'px',
                width: showComType != 'preview' ? '600px' : 'auto',
            }"
        >   
            <div class="pop-mask"  
                v-show="showCurrencyPop" 
                @click.stop="showCurrencyPop = false"></div>
            <div class="head">
                <div class="left">
                    <div class="close-btn" @click="close">
                        <img
                            class="icon-close"
                            v-if="showComType == 'default'"
                            :src="require('../../assets/svg/icon-close.svg')"
                        />
                        <img
                            class="icon-close"
                            v-else
                            :src="require('../../assets/svg/icon-back.svg')"
                        />
                    </div>
                    <div class="title">
                        {{ currentComData[showComType]["title"] }}
                    </div>
                </div>
                <div class="right">
                    <img :src="require('@/assets/svg/icon-more-l.svg')"
                        class="more"
                        @click="showMoreOption = true">
                    <div class="area-option" 
                        v-if="showMoreOption" 
                        @click="showMoreOption = false">
                        <div class="option">
                            <div class="item" @click="goTransactionsList()">
                                <img :src="require('@/assets/svg/icon-menu.svg')">
                                <span>Transactions</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="body">
                <!-- 充值组件 -->
                <top-up v-if="showComType == 'topUp'" 
                    :currentCurrencyInfo="currentCurrencyInfo"
                    @topUpDone="topUpDone"></top-up>
                <!-- 表单填写容器 -->
                <div class="body-content" v-if="showComType != 'topUp'">
                    <!-- 货币列表  -->
                    <div class="currency-pop" v-show="showCurrencyPop">
                        <currency-list 
                            ref="currencyListDom"
                            @selectCurrency="selectCurrency"
                            @setCurrencyList="setCurrentCurrencyInfo"></currency-list>
                    </div>

                    <div class="left">
                        <div class="gift-pack-wrapper">
                            <img
                                class="icon"
                                :src="
                                    require('../../assets/svg/icon-gift-pack.svg')
                                "
                            />
                        </div>
                        <div class="bottom">
                        </div>
                    </div>

                    <div class="right">
                        <div class="form-wrapper"  v-if="showComType == 'default'">
                            <img
                                class="img-mode"
                                src="../../assets/img/img-mode.png"
                            />
                            <!-- 金额、数量 -->
                            <div class="form-base">
                                <div class="item currency-select-wrapper">
                                    <div
                                        class="label currency-select"
                                        @click="showCurrencyPop = true"
                                    >
                                        <img
                                            class="icon"
                                            :src="currentCurrencyInfo.iconPath || require('../../assets/svg/icon-currency.svg')"
                                        />
                                        <div class="text">
                                            {{currentCurrencyInfo.currencyCode == 'USD' ? 'USD' : currentCurrencyInfo.tokenSymbol || 'Currency'}}
                                        </div>
                                        <img
                                            class="arrow"
                                            :src="
                                                require('../../assets/svg/icon-form-arrow-down.svg')
                                            "
                                        />
                                    </div>
                                    <input
                                        v-model="baseFormData.amountValue"
                                        placeholder="0"
                                        autofocus
                                        @input="onAmountInput"
                                        @blur="onAmountBlur"
                                    />
                                </div>
                                <div class="item">
                                    <div class="label">
                                        <img
                                            class="icon"
                                            :src="
                                                require('../../assets/svg/icon-winners.svg')
                                            "
                                        />
                                        Winners
                                    </div>
                                    <input
                                        v-model="baseFormData.totalCount"
                                        placeholder="0"
                                        @input="onCountInput"
                                        @blur="onCountBlur"
                                    />
                                </div>
                            </div>
                            <!-- 刷新按钮、充值 -->
                            <div class="form-base-help">
                                <div class="currency-operation">
                                    <div class="balance">
                                        <img
                                            :src="
                                                require('../../assets/svg/icon-balance.svg')
                                            "
                                        />
                                        Balance
                                    </div>
                                    <div class="amount">
                                        {{currentCurrencyInfo.balance}}
                                        <img
                                            :class="{ 'icon-refresh-rotate': refreshRotate }"
                                            @click="updateCurrencyBanlce"
                                            :src="
                                                require('../../assets/svg/icon-form-refresh.svg')
                                            "
                                        />
                                    </div>
                                    <div class="top-up" @click="goTopUp">Top UP</div>
                                </div>
                                <div class="msg">
                                    Recommend quantity 100～10000
                                </div>
                            </div>
                            <div class="form-label">Tasks</div>
                            <!-- 转推、like、关注 -->
                            <div class="form-require">
                                <div
                                    class="form-item"
                                    v-for="(item, index) in formList"
                                    :key="index"
                                >
                                    <div class="label">
                                        <img
                                            class="icon"
                                            :src="item.icon"
                                        />
                                        {{ item.label }}
                                    </div>
                                    <div
                                        class="control"
                                        v-if="item.nodeType == 'textarea'"
                                    >
                                        <follow-input
                                            :isAddSelf="!isBack"
                                            :atUserList="atUserList"
                                            @addUser="addFollowUser"
                                            @setUser="setFollowUser"
                                            @delUser="delFollowUser"
                                        ></follow-input>
                                    </div>
                                    <el-switch
                                        v-if="item.type == 2"
                                        v-model="item.checked"
                                    />
                                    <img
                                        v-if="item.type == 3"
                                        :src="
                                            require('../../assets/svg/icon-option-checked.svg')
                                        "
                                    />
                                </div>
                            </div>
                            <!-- 机器人 -->
                            <div class="anti-bot-wrapper">
                                <div class="label">
                                    <img
                                        :src="
                                            require('../../assets/svg/icon-anti-bot.svg')
                                        "
                                        class="icon-bot"
                                    />
                                    Anti Bot
                                    <img
                                        :src="
                                            require('../../assets/svg/icon-beta.svg')
                                        "
                                        class="icon-beta"
                                    />
                                    <img
                                        :src="
                                            require('../../assets/svg/icon-question.svg')
                                        "
                                        class="icon-question"
                                    />
                                </div>
                                <el-switch v-model="openAntiBot" />
                            </div>
                            <!-- 提示 -->
                            <div class="tips-wrapper">
                                <div class="title">TIPS</div>
                                <div class="row">
                                    1. Only after the user completes the
                                    tasks you set, they can claim your red
                                    envelopes
                                </div>
                                <div class="row">
                                    2. Each user can only receive one red
                                    envelope
                                </div>
                                <div class="row">
                                    3. The red envelope issued is valid for
                                    7 days. Please promote your red envelope
                                    as much as possible within the validity
                                    period. After the red envelope expires,
                                    the red envelope will be returned to
                                    your DeNet wallet.
                                </div>
                                <div class="more">More</div>
                            </div>

                            <div class="submit-btn-wrapper">
                                <div class="submit-btn"
                                    :class="{ 'disabled-submit': iptErrMsgTxt != '' }"
                                    @click="confirm">
                                    <img
                                        class="icon-loading"
                                        v-if="submitIng"
                                        :src="
                                            require('../../assets/svg/icon-btn-loading.svg')
                                        "
                                    />
                                    {{iptErrMsgTxt ? iptErrMsgTxt : 'NEXT'}}
                                </div>
                            </div>
                        </div>
                        <!-- 预览 -->
                        <template v-else-if="showComType == 'preview'">
                            <preview-card
                                :currentCurrencyInfo="currentCurrencyInfo"
                                :postData="publishRes"
                                :baseFormData="baseFormData"
                            ></preview-card>
                        </template>
                        <!-- paypal支付按钮 -->
                        <div v-show="showComType == 'preview'">
                            <paypal-button
                                :finalAmountData="finalAmountData"
                                :payConfig="{
                                    paypalClientId,
                                    feeDesc: payConfig.feeDesc,
                                    paypalHtml,
                                    amount: baseFormData.amountValue,
                                    postId
                                }"
                                :currentCurrencyInfo="currentCurrencyInfo"
                                @payPalFinsh="payPalFinsh"
                            ></paypal-button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 提示 -->
        <message-box
            :dialogVisible="showMessageBox"
            :title="messageBoxData.title"
            :content="messageBoxData.content"
            @cancel="messageBoxCancel"
            @confirm="messageBoxConfirm"
        ></message-box>
    </div>
</template>

<script setup>
import { ref, watch, reactive, defineProps, defineEmits, onMounted } from "vue";
import { postPublish, verifyPaypalResult, syncChainTokenRechargeRecord } from "../../http/publishApi";
import { payCalcFee, getPayConfig } from "../../http/pay";
import { getFrontConfig } from "../../http/account";
import { scaleNumber } from "../../uilts/help"
import { ElMessage, ElLoading } from "element-plus";
import "element-plus/es/components/message/style/css";

import {create, all} from "mathjs";

import previewCard from "./preview-card";
import paypalButton from "./paypal-button";
import followInput from "./follow-input";
import messageBox from "./message-box.vue";
import currencyList from "./currency-list.vue";
import topUp from "./top-up.vue"

const config = {
    number: 'BigNumber',
}
const math = create(all, config);

let tempCurrentCurrencyInfo = {};

let paypalClientId = ref("");
let payConfig = ref({})
let paypalHtml = ref("");

let publishRes = reactive({});

let currentComData = {
    default: {
        title: "Giveaways",
    },
    preview: {
        title: "Preview",
    },
    topUp: {
        title: "Top Up",
    },
};

let visible = ref(false);
let showComType = ref("default"); // default(表单)  preview(预览)  topUp(充值)
let openAntiBot = ref(false);
let dialogHeight = ref(680);
// 是否正在提交
let submitIng = ref(false);
// 艾特关注人列表
let atUserList = ref([]);

let iptErrMsgTxt = ref("Please enter the ‘reward’ amount");

// 是否返回
let isBack = ref(false);
// 展示消息提示 
let showMessageBox = ref(false);
// 展示货币列表pop
let showCurrencyPop = ref(false);

let showMoreOption = ref(false);

let currencyListDom = ref(null);

let refreshRotate = ref(false);

let postId = ref('');

let messageBoxData = ref({
    title: "",
    content: "",
});

// 真实支付金额数据
let finalAmountData = ref({
    currencyCode: '',
    feeAmountValue: 0,
    finalAmountValue: 0,
    requestAmountValue: 0,
});

// 表单数据
let baseFormData = reactive({
    amountCurrencyCode: '',
    amountValue: "",
    totalCount: "",
});

// 当前选择的货币信息
let currentCurrencyInfo = ref({
    currencyCode: "",
    currencyName: "",
    balance: "",
    currencyType: "",
    iconPath: "",
    minAmount: "",
    tokenChain: "",
    tokenSymbol: "",
    usdEstimateBalance: ""
});

let formList = reactive([
    {
        label: "Follow",
        icon: require("../../assets/svg/icon-follow.svg"),
        nodeType: "textarea",
        type: 1,
        text: [],
        checked: true,
    },
    {
        label: "Retweet",
        icon: require("../../assets/svg/icon-retweet.svg"),
        nodeType: "div",
        type: 3,
        checked: true,
    },
    {
        label: "Like tweet",
        icon: require("../../assets/svg/icon-like.svg"),
        nodeType: "div",
        type: 2,
        checked: true,
    },
]);

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: false,
    },
});

watch(
    () => props.dialogVisible,
    (newVal) => {
        console.log("watch", newVal);
        if (newVal) {
            setTimeout(() => {
                setDialogHeight();
            }, 300);
        }
        visible.value = newVal;
    }
);

const emits = defineEmits(["close", "confirm", "payPalFinsh"]);

const close = () => {
    if (showComType.value != "default") {
        showComType.value = "default";
        isBack.value = true;
    } else {
        initParams();
        emits("close", false);
    }
};

/**
 * 设置弹窗高度
 */
const setDialogHeight = () => {
    let clientHeight = window.innerHeight;
    let gapSafe = 40;

    if (dialogHeight.value > clientHeight - gapSafe) {
        dialogHeight.value = clientHeight - gapSafe;
    }
};

/**
 * 获取实际支付金额
 */
const getPayAmount = async (amountValue) => {
    let res = await payCalcFee({
        params: {
            amountValue,
            currencyCode: currentCurrencyInfo.value.currencyCode,
            payChannel: 'paypal',
        },
    });
    if (res.code == 0) {
        let { finalAmountValue, feeDesc } = res.data;
        payConfig.value.feeDesc = feeDesc;
        if (finalAmountValue > 0) {
            finalAmountData.value = res.data;
        }
    }
    return res.data;
};

const confirm = () => {
    if (submitIng.value || iptErrMsgTxt.value) {
        return;
    }
    let { totalCount = 0 } = baseFormData;
    if (!totalCount) {
        return;
    }
    submitRequest();
};

const selectCurrency = (params) => {
    tempCurrentCurrencyInfo = params;
    if(params.currencyCode != "USD" && params.balance < params.minAmount) {
        let tokenSymbol = params.currencyCode == 'USD' ? 'USD' : params.tokenSymbol;
        messageBoxBlock({
            title: `是否要充值 ${tokenSymbol}`,
            content: `${tokenSymbol} 可用余额为${params.balance}，是否要去充值？`,
        });
    } else {
        currentCurrencyInfo.value = params;
        showCurrencyPop.value = false;
        finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
    }
};

/**
 * 设置默认使用货币
 */

const setCurrentCurrencyInfo = (params) => {
    let {list} = params;
    if(list && list.length && list[0].data && list[0].data.length) {
        currentCurrencyInfo.value = list[0].data[0];
        finalAmountData.value.currencyCode = currentCurrencyInfo.value.currencyCode;
    }
}

const messageBoxBlock = ({ title = "", content = "" }) => {
    showMessageBox.value = true;
    messageBoxData.value.title = title;
    messageBoxData.value.content = content;
};

const messageBoxCancel = () => {
    currentCurrencyInfo.value = tempCurrentCurrencyInfo;
    showMessageBox.value = false;
    showCurrencyPop.value = false;
};

const messageBoxConfirm = () => {
    showMessageBox.value = false;
    showComType.value = "topUp";
};

/**
 * 去充值
 */
const goTopUp = () => {
    showComType.value = 'topUp';
}

/**
 * 充值done事件
 * 更新货币列表
 */
const topUpDone = () => {
    currentCurrencyInfo.value = tempCurrentCurrencyInfo;
    asyncTokenRechRecord((data) => {
        showCurrencyPop.value = false;
        showComType.value = 'default';
        if(data && data.length) {
            let currencyInfo = data[0];
            if(currencyInfo.currencyCode == currentCurrencyInfo.value.currencyCode) {
                currentCurrencyInfo.value.balance = currencyInfo.balance;
            }
        }
    })
}

const updateCurrencyBanlce = () => {
    if(!refreshRotate.value) {
        refreshRotate.value = true;
        setTimeout(() => {
            refreshRotate.value = false;
        }, 1000)
    }
    asyncTokenRechRecord((data) => {
        if(data && data.length) {
            let currencyInfo = data[0];
            if(currencyInfo.currencyCode == currentCurrencyInfo.value.currencyCode) {
                currentCurrencyInfo.value.balance = currencyInfo.balance;
            }
        }
    })
}

/**
 * 同步链上交易
 */
const asyncTokenRechRecord = (cb) => {
    syncChainTokenRechargeRecord({
        params: {
            currencyCode: currentCurrencyInfo.value.currencyCode
        }
    }).then(res => {
        if(res.code == 0) {
            cb && cb(res.data)
        }
    })
}

/**
 * 提交表单请求
 */
const submitRequest = async () => {
    let { amountValue = 0, totalCount = 0 } = baseFormData;
    baseFormData.amountCurrencyCode = currentCurrencyInfo.value.currencyCode;
    // 组装提交参数
    formList[0]["text"] = atUserList.value;

    let finishConditions = [];
    for (let i = 0; i < formList.length; i++) {
        let item = {};
        item.type = formList[i]["type"];
        if (item.type == 1 && formList[i]["text"]) {
            // follow 参数
            let relatedUsers = formList[i]["text"];
            item.relatedUsers = relatedUsers;
            finishConditions.push(item);
        } else if (formList[i]["checked"]) {
            finishConditions.push(item);
        }
    }
    let receiveConditions = openAntiBot.value ? "" : [];

    // 提交参数
    let formData = {
        amountCurrencyCode: baseFormData.amountCurrencyCode,
        amountValue,
        totalCount,
        finishConditions,
        receiveConditions,
        payAmountValue: amountValue
    };
    submitIng.value = true;

    // 法币支付需要计算费率
    if(formData.amountCurrencyCode == "USD") { 
        let payAmountRes = await getPayAmount(amountValue);
        formData["payAmountValue"] = payAmountRes.finalAmountValue;
    }
    let data = {
        params: {
            postBizData: JSON.stringify(formData),
            postSrc: 1, //1 twitter
            postType: 1, //1 红包
        },
    };
    postPublish(data).then((res) => {
        submitIng.value = false;
        if (res.code == 0) {
            publishRes = res.data;
            postId.value = res.data.postId;
            showComType.value = "preview";
            isBack.value = false;
        } else {
            console.log(res);
        }
    })
    .catch((err) => {
        console.log(err);
    });
};

/**
 * 初始化提交参数
 */
const initParams = () => {
    baseFormData.amountValue = "";
    baseFormData.totalCount = "";
    formList[0].text = [];
    atUserList.value = [];
    submitIng.value = false;
    isBack.value = false;
    showCurrencyPop.value = false;
};

/**
 * 支付完成回调
 */
const payPalFinsh = (params) => {
    let {payNetwork, payStatus} = params;
    // token 支付
    if(payNetwork == 'bsc') {
        payStatusHandle(payStatus);
    } else {
        // 法币支付
        let transaction = params.transaction;
        let loadingInstance = ElLoading.service({
            background: "rgba(0,0,0,.3)",
        });
        verifyPaypalResult({
            params: {
                paypalTransactionId: transaction.id,
                postId: publishRes.postId,
                paypalClientId: paypalClientId.value,
            },
        }).then((res) => {
            loadingInstance.close();
            if (res.code == 0) {
                if (res.data) {
                    payStatusHandle(res.data.payStatus)
                }
            }
        })
        .catch(() => {
            loadingInstance.close();
        });
    }
};

const payStatusHandle = (payStatus) => {
    //支付状态 0：未支付，1：支付成功，2：支付失败，3：已关闭，4：已退款
    switch (payStatus) {
        case 1:
            emits("payPalFinsh", { publishRes });
            showComType.value = "default";
            initParams();
            break;
        case 2:
            ElMessage({
                message: "Pay Fail",
                type: "warning",
            });
            break;
        case 3:
            ElMessage({
                message: "Pay Exceptions",
                type: "warning",
            });
            break;
        case 4:
            ElMessage({
                message: "Pay Exceptions",
                type: "warning",
            });
            break;
    }
}

/**
 * follow组件触发新增关注人
 */
const addFollowUser = (params) => {
    atUserList.value.push(params);
};

const setFollowUser = (params) => {
    atUserList.value[params.index]["name"] = params.name;
};

const delFollowUser = (params) => {
    atUserList.value.splice(params.index, 1);
};

const onAmountInput = () => {
    let val = baseFormData.amountValue;
    // val = val.replace(/[^\d^\.]+/g, "");
    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
    baseFormData.amountValue = val;
    setInputErrorMsg({from: 'amount', type:'input'});

    return val;
};

const onCountInput = () => {
    let val = baseFormData.totalCount;
    if (val == 0) {
        val = "";
    }
    // val = val.replace(/[^\d]/g, "");
    val = val.replace(/^\D*(\d*(?:\.\d{0,18})?).*$/g, '$1');
    if (val > 9999) {
        val = 9999;
    }
    baseFormData.totalCount = val;
    setInputErrorMsg({from: 'count', type:'input'});
    return val;
};

/**
 * 金额输入失焦
 */
const onAmountBlur = () => {
    setInputErrorMsg({from: 'amount', type:'blur'});
};

/**
 * count失焦，校验输入结果
 */
const onCountBlur = () => {
    setInputErrorMsg({from: 'count', type:'blur'});
};

/**
 * 输入结果金额和数量 （金额/数量）是否小于最小货币单位
 */
const calcIptValue = (cb) => {
    let amountValue = baseFormData.amountValue;
    let totalCount = baseFormData.totalCount;
    let flag = true;

    if (!amountValue || !totalCount) {
        return {
            flag
        };
    }

    // let num = amountValue, scale = 1;
    // if(amountValue.indexOf('.') > -1) {
    //     num = amountValue.toString();
    //     let obj = scaleNumber(num);
    //     num = obj.val;
    //     scale = obj.scale;
    // }
    // let minAmount = currentCurrencyInfo.value.minAmount;
    // // 输入的token数量或者法币金额，平均分到每个红包，是否小于最小单位
    // if (num / totalCount  < minAmount * scale) {
    //     flag = false;
    // }

    // return {
    //     flag,
    //     count: Math.floor((num / minAmount * scale)/ (scale * scale))
    // };
    // console.log('baseFormData',`${baseFormData.amountValue} / ${baseFormData.totalCount}`)

    if (math.format(math.evaluate(`${baseFormData.amountValue} / ${baseFormData.totalCount}`)) < +currentCurrencyInfo.value.minAmount) {
        flag = false;
    }
    return {
        flag,
        count: Math.floor(math.format(math.evaluate(`${baseFormData.amountValue} / ${currentCurrencyInfo.value.minAmount}`)))
    }
};

/**
 * 设置输入提示语
 */
const setInputErrorMsg = (params, cb) => {
    let {from, type} = params;

    // let amountValue = baseFormData.amountValue;
    // let num = amountValue, scale = 1;
    // if(amountValue.indexOf('.') > -1) {
    //     num = amountValue.toString();
    //     let obj = scaleNumber(num);
    //     num = obj.val;
    //     scale = obj.scale;
    // }

    if(type == 'input') {
        onIptSetErrorTxt({...params});
    } else if(type == 'blur') {
        setIsEmptyTxt();
    }
};

/**
 * 设置参数为空的提示语
 */
const setIsEmptyTxt = () => {
    if (!baseFormData.amountValue) {
        iptErrMsgTxt.value = "Please enter the ‘reward’ amount";
    } else {
        if (!baseFormData.totalCount) {
            iptErrMsgTxt.value = "Please enter the ‘winners’ amount";
        } else {
            let res = calcIptValue();
            if (!res.flag) {
                iptErrMsgTxt.value = `Please reduce the 'winners' amount to ${res.count}`;
            } else {
                iptErrMsgTxt.value = "";
            }
        }
    }
}

/**
 * 输入时 检测设置错误信息
 */
const onIptSetErrorTxt = (params) => {
    let {from, type,} = params;
    if(baseFormData.amountValue < currentCurrencyInfo.value.balance) {
        let res = calcIptValue();
        if (!res.flag) {
            iptErrMsgTxt.value = `Please reduce the 'winners' amount to ${res.count}`;
        } else {
            setIsEmptyTxt();
        }
    } else if(currentCurrencyInfo.value.currencyCode != 'USD') {
        iptErrMsgTxt.value = `Insufficient ${currentCurrencyInfo.value.currencyName} balance, please recharge`;
    } 
}

/**
 * 获取支付配置（paypalClientId）
 */
const setPayConfig = () => {
    getPayConfig({
        params: {},
    }).then((res) => {
        if (res.code == 0) {
            payConfig.value = res.data;
            paypalClientId.value = res.data.paypalClientId;
        }
    });
};

/**
 * 获取配置
 */
const setFrontConfig = () => {
    getFrontConfig({
        params: {},
    }).then((res) => {
        if (res.code == 0) {
            paypalHtml.value = res.data.paypalHtml;
        }
    });
};

const goTransactionsList = () => {
    window.open(`${chrome.runtime.getURL('/iframe/home.html#/transactions')}`)
}

onMounted(() => {
    setFrontConfig();
    setPayConfig();
    document.onkeydown = function (e) {
        var keyNum = window.event ? e.keyCode : e.which;
        let escKey = 27;
        if (keyNum == escKey) {
            if (visible.value) {
                close();
            }
        }
    };
});
</script>

<style lang="scss" scoped>
.ql-container {
    height: 100px;
}

.overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;

    .content {
        height: 620px;
        background: #ffffff;
        border-radius: 20px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-sizing: border-box;

        .pop-mask {
            width: 100%;
            height:100%;    
            position: absolute;
            z-index:900;
        }

        .head {
            border-bottom: 1px solid #ececec;
            height: 48px;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 14px;

            .left {
                display: flex;
                align-items: center;
                .title {
                    font-size: 16px;
                    font-weight: 500;
                }

                .close-btn {
                    display: flex;
                    align-items: center;
                    width: max-content;
                    margin-right: 12px;
                    cursor: pointer;
                }
            }

            .right {
                .more {
                    cursor: pointer;
                }

                .area-option {
                    width: 100%;
                    height: 100%;
                    position: absolute;
                    top: 0;
                    left: 0;
                    z-index: 111;

                    .option {
                        position: absolute;
                        top: 43px;
                        right: 15px;
                        background: #fff;
                        filter: drop-shadow(0px 3px 20px rgba(0, 0, 0, 0.2));
                        width: 240px;
                        border-radius: 15px;
                        overflow: hidden;

                        .item {
                            width: 100%;
                            height: 50px;
                            display: flex;
                            align-items: center;
                            cursor: pointer;
                            border-top: 1px solid #E9E9E9;

                            img {
                                margin-left: 15px;
                                width: 30px;
                                height: 30px;
                                margin-right: 6px;
                            }

                            span {
                                font-weight: 500;
                                font-size: 14px;
                            }
                        }

                        .item:first-child {
                            border-top: 0;
                        }

                        .item:hover {
                                background: #F5F5F5;
                        }
                    }
                }
            }
        }

        .body {
            box-sizing: border-box;
            height: calc(100% - 48px);
            display: flex;
            position: relative;

            .body-content {
                display:flex;
                width:100%;
            }

            .currency-pop {
                position: absolute;
                width: 375px;
                height: 480px;
                top: 85px;
                left: 88px;
                z-index: 1000;
                box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.3);
                background-color: #fff;
                border-radius: 20px;
                overflow-y: scroll;
            }

            .left,
            .right {
                height: 100%;
            }

            .left {
                width: 50px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;

                .gift-pack-wrapper {
                    width: 100%;
                    height: 54px;
                    background: #f5f5f5;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                }

                .bottom {
                    .icon {
                        display: block;
                        margin-bottom: 26px;
                    }
                }
            }

            .right {
                width: calc(100% - 50px);
                box-sizing: border-box;
                position: relative;
                border-left: 1px solid #ececec;

                .form-wrapper {
                    padding: 0px 18px 18px 18px;
                    height: calc(100% - 80px);
                    overflow-y: scroll;
                    overflow-x: hidden;
                    box-sizing: border-box;

                    .img-mode {
                        width: 553px;
                        margin-left: -20px;
                    }

                    .form-base-help {
                        display: flex;
                        justify-content: space-between;
                        margin-top: 10px;

                        .currency-operation {
                            width: 217px;
                            height: 45px;
                            background: url("../../assets/svg/icon-form-bg-border.svg");
                            box-sizing: border-box;
                            padding: 14px 10px 10px 10px;
                            display: flex;
                            align-items: center;
                            justify-content: space-around;

                            .balance,
                            .amount {
                                display: flex;
                                align-items: center;
                            }

                            .balance {
                                font-weight: 400;
                                font-size: 13px;
                                img {
                                    width: 16px;
                                    height: 16px;
                                    margin-right: 3px;
                                }
                            }

                            .amount {
                                font-weight: 500;
                                font-size: 13px;
                                color: #4e4e4e;
                                img {
                                    margin-left: 5px;
                                    cursor: pointer;
                                }
                            }

                            .top-up {
                                font-weight: 500;
                                font-size: 12px;
                                color: #ff9839;
                                cursor: pointer;
                            }

                            .icon-refresh-rotate {
                                transform: rotate(360deg);
                                transition-duration: 1s;
                            }
                        }

                        .msg {
                            font-weight: 400;
                            font-size: 12px;
                            color: #acacac;
                        }
                    }

                    .form-base {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        margin-top: 14px;

                        .item {
                            width: 250px;
                            height: 50px;
                            box-sizing: border-box;
                            border-radius: 12px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            padding: 16px 14px;
                            box-shadow: 0px 2px 10px 0px #0000001A;

                            input {
                                width: 102px;
                                text-align: right;
                                font-weight: 500;
                                font-size: 18px;
                                border: none;
                                outline: none;
                                box-sizing: border-box;
                            }
                            .label {
                                font-weight: 500;
                                font-size: 15px;
                                display: flex;
                                align-items: center;

                                .icon {
                                    width: 20px;
                                    height: 20px;
                                    margin-right: 8px;
                                }
                            }
                        }

                        .currency-select-wrapper {
                            padding: 0 !important;
                            input {
                                padding-right: 14px;
                            }
                            .currency-select {
                                max-width: 124px;
                                box-shadow: 5px 0 10px -5px #0000001A;
                                padding: 16px 0 16px 14px;
                                border-bottom-left-radius: 12px;
                                border-top-left-radius: 12px;
                                cursor: pointer;
                                .text {
                                    max-width: 68px;
                                    overflow: hidden;
                                    white-space: nowrap;
                                    text-overflow: ellipsis;
                                }
                                .arrow {
                                    margin-left: 5px;
                                    margin-right: 10px;
                                }
                            }
                        }
                    }

                    .form-label {
                        margin-top: 14px;
                        margin-bottom: 10px;
                        font-weight: 500;
                        font-size: 14px;
                    }

                    .form-require {
                        box-sizing: border-box;
                        border-radius: 15px;
                        margin-top: 12px;
                        box-shadow: 0px 3px 27px 0px #0000001a;

                        .form-item {
                            min-height: 50px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            margin: 0 16px;
                            border-bottom: 1px solid #ececec;

                            .label {
                                min-width: 88px;
                                display: flex;
                                align-items: center;
                                font-size: 15px;
                                font-weight: 500;

                                .icon {
                                    margin-right: 10px;
                                }
                            }

                            .control {
                                width: 100%;
                                min-height: 50px;
                                margin-left: 18px;
                                box-sizing: border-box;
                            }
                        }
                    }
                }

                .anti-bot-wrapper {
                    width: 100%;
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    box-sizing: border-box;
                    border-radius: 15px;
                    padding: 0 18px;
                    margin-top: 14px;
                    box-shadow: 0px 3px 27px 0px #0000001a;

                    .label {
                        display: flex;
                        align-items: center;
                        font-size: 15px;
                        font-weight: 500;

                        .icon-bot {
                            margin-right: 8px;
                        }

                        .icon-beta {
                            margin-left: 5px;
                            margin-right: 8px;
                        }

                        .icon-question {
                            cursor: pointer;
                        }
                    }
                }

                .tips-wrapper {
                    margin-top: 23px;
                    .title,
                    .row {
                        font-weight: 400;
                        font-size: 13px;
                        color: rgba(0, 0, 0, 0.3);
                    }

                    .row {
                        box-sizing: border-box;
                        padding-left: 4px;
                    }

                    .more {
                        color: #389aff;
                        font-size: 13px;
                        padding-left: 4px;
                        cursor: pointer;
                    }
                }

                .submit-btn-wrapper {
                    width: 100%;
                    background: #fff;
                    position: absolute;
                    bottom: 18px;
                    left: 0;
                    box-sizing: border-box;
                    padding: 16px 18px 0 18px;

                    .submit-btn {
                        width: 100%;
                        height: 46px;
                        text-align: center;
                        line-height: 46px;
                        background: #4a99e9;
                        border-radius: 100px;
                        color: #fff;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        font-weight: 500;
                        cursor: pointer;

                        .icon-loading {
                            width: 20px;
                            height: 20px;
                            margin-right: 3px;
                        }
                    }

                    .disabled-submit {
                        background-color: #D9D9D9; 
                    }
                }
            }
        }
    }
}
</style>