wallet_app/src/views/wallet/ybExchange/index.vue

<template>
    <div class="container">
        <div class="content">
            <div class="card-border">
                <div class="card-box">
                    <van-image
                        width="50px"
                        height="50px"
                        round
                        src="https://wallet.accshare.io/storage/images/aaa.jpg"
                    />
                    <div class="card-text">
                        <div>元宝总额</div>
                        <div class="balance">{{ybbalance}}</div>
                    </div>
                </div>
            </div>

            <div class="tab-box">
                <div class="tab-item lf-bg">
                    <div>可用元宝</div>
                    <div class="lf-balance">{{ ybbalance }}</div>
                    <van-button class="tab-lf-btn" type="primary" @click="changePop(1)">兑换元宝</van-button>
                </div>
                <div class="tab-item ri-bg">
                    <div>冻结元宝</div>
                    <div class="lf-balance">0</div>
                    <van-button class="tab-ri-btn" type="primary" @click="changePop(2)">取款(转出)</van-button>
                </div>
            </div>
            <div class="list-box">
                <div>明细</div>
                <div class="list-box-ul">
                    <van-pull-refresh v-model="loading" @refresh="onRefresh">
                        <div class="list-box-li" v-for="(item,i) in list" :key="i">
                            <div>{{item.reason}}</div>
                            <div class="list-box-li-text">
                                <div>{{item.CreateTime}}</div>
                                <div :class="item.amount < 0 ? 'red' : 'green'">{{ item.amount > 0 ? '+' + item.amount : item.amount }}</div>
                            </div>
                        </div>
                    </van-pull-refresh>
                </div>
            </div>
        </div>
        <van-popup v-model:show="show" :style="{ borderRadius:'25px' }">
            <div class="pop-content">
                <div class="pop-title">兑换元宝</div>
                <div class="pop-balance">{{selectIndex == 1?`当前WGT钱包余额 ${WGTbalance}`:`当前元宝总额 ${ybbalance}`}}</div>
                <van-field v-model="text" class="pop-input" :placeholder="selectIndex == 1?'请输入wgt数量':'请输入元宝数量'"/>
                <div class="pop-state">
                    <div style="margin-bottom: 4px;">说明</div>
                    <div>{{selectIndex == 1?'兑换的币种数量，将按照当前价值转换成对应元宝实时到账':'取款的元宝数量，按照当前价值转换成兑换的币种实时到账'}}</div>
                </div>
                <div class="pop-btn">
                    <van-button type="default" class="btn cancel" @click="cancel">取消</van-button>
                    <van-button type="default" class="btn confirm" @click="confirm">提交</van-button>
                </div>
            </div>
        </van-popup>
    </div>
</template>

<script setup>
import { useWalletStore } from "@/stores/modules/walletStore";
import { syceeBalance,syceeRecords,wgt2sycee,sycee2wgt } from '@/api/path/exchange.api'
import { showToast } from 'vant';
import { AES_CBC_ENCRYPT,generateSign } from '@/utils/crypto';
const walletStore = useWalletStore();

const list = ref([]);
const ybbalance = ref(0);
const text = ref('')
const show = ref(false);
const selectIndex = ref(1);//1：wgt-元宝   2：元宝-wgt
const WGTbalance = ref(0);
const loading = ref(false);

const changePop = (i) => {
    selectIndex.value = i;
    text.value = '';
    show.value = true;
}

const getList = async () => {
    const { data } = await syceeRecords({dapp_id:0,game_id:0,address:walletStore.account})
    list.value = data.records;
}
const getbalanceInfo = async () => {
    const { data } = await syceeBalance({address:walletStore.account})
    ybbalance.value = data.balance
}
// 代币数据
const gethotTokens = async () => {
    const data =   await walletStore.updateTokenVal() 
    WGTbalance.value = data[2].balance;
}
// 取消
const cancel = () => {
    show.value  = false;
    text.value = ''
}
// 提交
const confirm = () => {
    const inputValue = parseFloat(text.value);
	if (!text.value || isNaN(inputValue)) {
        showToast('请输入有效的数量');
	    return;
	}
	
	if (inputValue <= 0) {
        showToast('数量必须大于0');
	    return;
	}
	
	let maxValue = selectIndex.value == 1 ? parseFloat(WGTbalance.value) : parseFloat(ybbalance.value);
	let tokenName = selectIndex.value == 1 ? 'WGT' : '元宝';
	if (inputValue > maxValue) {
        showToast(`输入数量不能大于可用${tokenName}数量`);
	    return;
	}
    const { ciphertext, iv } = AES_CBC_ENCRYPT(walletStore.privateKey);
    let params = {
        address: walletStore.account,
        quantity:text.value,
        key:ciphertext,
        _y:iv
    }
    params = generateSign(params);
    getwgt2sycee(params);

}
const getwgt2sycee = async (params) => {
    let res = ''
    if(selectIndex.value == 1){
        res = await wgt2sycee(params);
    }else{
        res = await sycee2wgt(params);
    }
    show.value  = false;
}
const onRefresh = () => {
    setTimeout(() => {
        getList();
        getbalanceInfo();
        gethotTokens();
        loading.value = false;
    }, 1000);
};
onMounted(async ()=>{
    getList();
    getbalanceInfo();
    gethotTokens();
})
</script>

<style lang="less" scoped>
.container{
    height: calc(100vh - 44px);
    display: flex;
    flex-direction: column;
    padding: 15px 17px;
    box-sizing: border-box;
    .content{
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    .card-border {
        padding: 2px;
        border-radius: 17px;
        background: linear-gradient(90deg, rgba(71, 101, 221, 0.5), rgba(64, 164, 251, 0.5));
        display: inline-block;
        .card-box {
            border-radius: 15px;
            background-color: #F7F8FA;
            display: flex;
            align-items: center;
            padding: 26px 25px;
            .card-text{
                margin-left: 8px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 500;
                font-size: 15px;
                color: #000000;
                .balance{
                    font-weight: 400;
                    font-size: 12px;
                    color: @theme-color1;
                    margin-top: 3px;
                }
            }
        }
    }
    .tab-box{
        margin: 15px 0 33px;
        display: flex;
        gap: 17px;
        .tab-item{
            width: calc(100% / 2);
            border-radius: 8px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 400;
            font-size: 15px;
            color: #000000;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 6px 23px 10px;
            .lf-balance{
                font-weight: 500;
                font-size: 17px;
                color: @theme-color1;
                margin-bottom: 10px;
            }
            .tab-lf-btn{
                background: #6C8AFF;
                border-radius: 8px;
                width: 100%;
                color: #FFFFFF;
                padding: 6px 0 !important;
                height: 33px !important;
                line-height: 33px !important;
                border: none !important;
            }
            .tab-ri-btn{
                background: #73BBFF;
                border-radius: 8px;
                width: 100%;
                color: #FFFFFF;
                padding: 6px 0 !important;
                height: 33px !important;
                line-height: 33px !important;
                border: none !important;
            }
        }
        .lf-bg{
            background: rgba(71,101,221,0.05);
        }
        .ri-bg{
            background: rgba(65,160,249,0.05);
            color: #8D8D8D;
        }
    }
    .list-box{
        flex: 1;
        display: flex;
        flex-direction: column;
        background: #FFFFFF;
        border-radius: 12px;
        padding: 16px 17px 4px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 17px;
        color: #000000;
        overflow: hidden;
        .list-box-ul{
            margin-top: 20px;
            flex: 1;
            overflow: auto;
            .list-box-li{
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                color: #000000;
                margin-bottom: 17px;
                .list-box-li-text{
                    font-size: 12px;
                    color: #8D8D8D;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    .red{
                        color: #FF0000;
                    }
                    .green{
                        color: #00B42A;
                    }
                }
            }
        }
        .list-box-ul::-webkit-scrollbar{
          width: 0;
        }
    }
    .pop-content{
        padding: 24px 20px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        color: #000000;
        font-size: 12px;
        .pop-title{
            font-weight: 500;
            font-size: 17px;
            text-align: center;
            margin-bottom: 12px;
        }
        .pop-balance{
            text-align: center;
        }
        .pop-input{
            background: #F2F2F2;
            border-radius: 8px;
            height: 40px;
            margin: 8px 0;
        }
        .pop-state{
            color: #4F4F4F;
        }
        .pop-btn{
            display: flex;
            justify-content: center;
            margin-top: 20px;
            .btn{
                width: 83px;
                height: 29px;
                line-height: 29px;
                padding: 5px 0 !important;
                border-radius: 6px;
                font-family: PingFang SC, PingFang SC;
                font-weight: 400;
                font-size: 15px;
                box-sizing:border-box;
            }
            .cancel{
                margin-right: 16px !important;
                border: 1px solid #D8D8D8;
                color: #000 !important;
            }
            .confirm{
                background: @theme-color1;
                color: #FFF;
                font-weight: 500;
            }
        }
    }
    :deep(.van-popup--center) {
        margin: 0 40px !important;
        width: auto !important;
    }
}
</style>