ucard-person-app-front/pages/wallet/vaultody.vue

<template>
    <cwg-page-wrapper>
        <view class="page">
            <u-form ref="formRef" :rules="rules" :model="form" class="payment-form">
                <cwg-input v-model:value="form.blockchain" fkey="blockchain" type="select" :required="true"
                    :columns="blockchainList" :label="t('Blockchain.addP2')" rulesKey="blockchain"
                    @change="handleChange" />
                <cwg-input v-if="text1" v-model:value="text1" fkey="text1" type="text" :label="t('Blockchain1.p2')"
                    :readonly="true" :disabled="true" />
            </u-form>

            <QrCode v-if="text1" :text="text1"></QrCode>

            <view class="fixed-btn">
                <view v-if="!text1" class="cwg-button ok-button">
                    <u-button type="primary" block @click="getVaultodyAddress">{{
                        t("Blockchain1.p3")
                        }}</u-button>
                </view>
                <view v-else class="cwg-button ok-button">
                    <u-button type="primary" block @click="cardCopy">{{
                        t("Blockchain1.p4")
                        }}</u-button>
                </view>
            </view>
        </view>
    </cwg-page-wrapper>
</template>
<script setup lang="ts">
import { ref, onMounted, computed } from "vue";
import { showToast } from "@/utils/toast";
import { useI18n } from "vue-i18n";
import { ucardApi } from "@/api/ucard";
import useUserStore from "@/stores/use-user-store";
import QrCode from "@/components/QrCode.vue";
import { Validators } from "@/utils/validators";
const { t } = useI18n();
const userStore = useUserStore();
const userInfo = computed(() => userStore.userInfo);
const formRef = ref();
const form = ref<{
    emailCode: string;
    cardNumber?: string;
    password?: string;
    country?: string;
    email?: string;
}>({
    blockchain: "",
});
const text1 = ref("");
const blockchainList = ref([]);
// 表单验证规则
const rules = {
    blockchain: [Validators.required(t("Blockchain.addP2"))],
    address: [Validators.required(t("WalletApply.p2"))],
    amount: [
        Validators.required(t("global.validator.v15"))
    ],
};
// 初始化表单
function initForm() {
    if (userInfo.value) {
        const a = { uniqueId: userInfo.value.uniqueId, country: userInfo.value.country, email: userInfo.value.email }
        if (userInfo.value) {
            form.value = {
                ...a,
            };
        }
    }
}

//生成支付地址
async function getVaultodyAddress() {
    try {
        await formRef.value?.validate();
        let res = await ucardApi.getVaultodyAddress({
            ...form.value,
        });
        if (res.code == 200) {
            text1.value = res.data;
        } else {
            text1.value = "";
            showToast(res.msg);
        }
    } catch (error) {
        console.log(error, 1111);

    }
}
//获取区块链
async function getBlockchainDropdown() {
    let res = await ucardApi.getBlockchainDropdown({
        ...form.value,
    });
    if (res.code == 200) {
        res.data.map((item: any) => {
            item.text = item.alias;
            item.value = item.blockchain;
        });
        blockchainList.value = res.data;
    } else {
        blockchainList.value = []
        showToast(res.msg);
    }
}

// 表单字段变化
function handleChange(value: any) {
    if (value.key === "emailCode") {
        form.value.emailCode = value.value;
    }
}


// 复制 CVV
function cardCopy() {
    let title = t("card.Msg.m8");
    uni.setClipboardData({
        data: text1.value,
        success: () => {
            uni.showToast({
                title,
            });
        },
    });
}
onMounted(() => {
    initForm();
    getBlockchainDropdown();
});
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.no-button {
    width: 100%;
    margin: px2rpx(12) 0;

    .u-button {
        background-color: #ffbdc8 !important;
    }
}

.ok-button {
    margin: px2rpx(4) 0;
    /* background-color: #EA002A; */
}


.code-input-label {
    font-size: var(--font-size-16);
    line-height: px2rpx(44);
    letter-spacing: px2rpx(1);
    color: #474747;
}

.code-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.code-input {
    flex: 1;
}

.get-code-btn {
    min-width: px2rpx(100);
    margin-bottom: px2rpx(12);
    margin-left: px2rpx(10);

    .cwg-button .u-button {
        border-radius: px2rpx(8);
    }
}

.submit-section {
    margin: px2rpx(20) 0;
}

.submit-btn {
    width: 100%;
}
</style>