gypsy-crm-frontend-vu/pages/customer/wallet-transfer.vue

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('wallet.item62')" />
        <view id="custom_WalletTransfer" class="transfer-page">
            <view class="main-content">
                <view class="box box-step2">
                    <view class="b-card">
                        <view class="card-top">
                            <uni-forms ref="formRef" :model="form" :rules="rules" label-position="top"
                                validate-trigger="submit">
                                
                                <view class="card-row card-tit">
                                    <view class="title-wrapper">
                                        <view class="tit">
                                            <text class="iconfont icon-caret-right"></text>
                                            <span>{{ t('wallet.item63') }}</span>
                                        </view>
                                    </view>
                                </view>
                                <view class="card-row">
                                    <uni-forms-item name="walletbalance">
                                        <uni-easyinput v-model="walletbalanceDisplay" disabled class="disabled-input" />
                                    </uni-forms-item>
                                </view>

                                <view class="card-row card-tit">
                                    <view class="title-wrapper">
                                        <view class="tit">
                                            <text class="iconfont icon-caret-right"></text>
                                            <span>{{ t('Custom.Transfer.IntoAccount') }}</span>
                                        </view>
                                    </view>
                                </view>
                                <view class="card-row">
                                    <uni-forms-item name="login">
                                        <cwg-combox v-model:value="form.login" :clearable="false"
                                            :options="toOptionsDisplay" :placeholder="t('placeholder.choose')" />
                                    </uni-forms-item>
                                </view>

                                <view class="card-row card-tit">
                                    <view class="title-wrapper">
                                        <view class="tit">
                                            <text class="iconfont icon-caret-right"></text>
                                            <span>{{ t('Label.Currency') }}</span>
                                        </view>
                                    </view>
                                </view>
                                <view class="card-row">
                                    <uni-forms-item name="currency">
                                        <cwg-combox v-model:value="form.currency" :clearable="false"
                                            :options="currencyOptions" :placeholder="t('placeholder.choose')" />
                                    </uni-forms-item>
                                </view>

                                <view class="card-row card-tit">
                                    <view class="title-wrapper">
                                        <view class="tit">
                                            <text class="iconfont icon-caret-right"></text>
                                            <span>{{ t('Label.Amount') }}</span>
                                        </view>
                                    </view>
                                </view>
                                <view class="card-row">
                                    <uni-forms-item name="amount">
                                        <uni-easyinput v-model="form.amount" :placeholder="t('placeholder.input')" />
                                    </uni-forms-item>
                                </view>

                                <view class="form-row">
                                    <button class="s-btn reselect" type="primary" @click="toTransfer">{{ t('Btn.Submit') }}</button>
                                </view>
                            </uni-forms>
                        </view>
                    </view>
                </view>
            </view>
            <!-- 失败弹窗 -->
            <cwg-error-popup v-model:visible="dialogError" @confirm="closeDia" :responseMessage="RES" />
            <!-- 成功弹窗 -->
            <cwg-success-popup v-model:visible="dialogSuccess" @confirm="closeDia" />
            <!-- 等待弹窗 -->
            <cwg-wait-popup v-model:visible="dialogCheckWait" type="center" :mask-click="false" :showFooters="false" />
        </view>
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import { useI18n } from 'vue-i18n'
import { customApi } from '@/service/custom'
import { drawApi } from '@/service/draw'
import Config from '@/config/index'

const { Code } = Config
const { t } = useI18n()

const loading = ref(false)
const flag = ref(false)
const RES = ref('')
const walletbalance = ref('0')
const toOptions = ref([])

const form = reactive({
    currency: 'USD',
    login: null,
    amount: ''
})

const currencyOptions = [{ text: 'USD', value: 'USD' }]

const walletbalanceDisplay = computed(() => `$ ${walletbalance.value}`)

const groupTypeName = (type) => {
    if (type == '1') return t("AccountType.ClassicAccount")
    if (type == '2') return t("AccountType.SeniorAccount")
    if (type == '5') return t("AccountType.SpeedAccount")
    if (type == '6') return t("AccountType.SpeedAccount")
    if (type == '7') return t("AccountType.StandardAccount")
    if (type == '8') return t("AccountType.CentAccount")
    return ''
}

const toOptionsDisplay = computed(() => {
    return toOptions.value.map(item => ({
        text: `${item.login} - ${item.platform} - ${groupTypeName(item.type)}`,
        value: item.login
    }))
})

const dialogCheck = ref(false)
const dialogVisible = ref(false)
const dialogCheckWait = ref(false)

const dialogSuccess = computed(() => dialogCheck.value && dialogVisible.value)
const dialogError = computed(() => dialogCheck.value && !dialogVisible.value)

const rules = {
    login: {
        rules: [{ required: true, errorMessage: t('vaildate.select.empty') }]
    },
    currency: {
        rules: [{ required: true, errorMessage: t('vaildate.select.empty') }]
    },
    amount: {
        rules: [
            { required: true, errorMessage: t('vaildate.amount.format') },
            {
                validateFunction: (rule, value, data, callback) => {
                    if (!value) {
                        callback(t('vaildate.amount.format'))
                    } else if (!/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(value)) {
                        callback(t('vaildate.amount.format'))
                    }
                    return true
                }
            }
        ]
    }
}

const formRef = ref(null)

const closeDia = () => {
    if (formRef.value) {
        form.amount = ''
        form.login = null
        formRef.value.clearValidate()
    }
    dialogCheck.value = false
    dialogVisible.value = false
}

const toTransfer = async () => {
    try {
        await formRef.value.validate()
        
        if (walletbalance.value == '0' || Number(walletbalance.value) < Number(form.amount)) {
            uni.showToast({ title: t('wallet.item64'), icon: 'none' })
            return
        }

        if (flag.value) return
        flag.value = true
        dialogCheckWait.value = true

        let res = await customApi.walletTransferApply({ ...form })
        
        if (res.code == Code.StatusOK) {
            dialogCheck.value = true
            dialogVisible.value = true
            flag.value = false
            getWalletList() // refresh balance after success
        } else {
            RES.value = res.msg
            dialogCheck.value = true
            dialogVisible.value = false
            flag.value = false
        }
        dialogCheckWait.value = false
    } catch (e) {
        console.log(e)
    }
}

const getToDateList = async () => {
    try {
        let res = await customApi.CustomDropdown({})
        if (res.code == Code.StatusOK) {
            toOptions.value = res.data || []
        } else {
            uni.showToast({ title: res.msg, icon: 'none' })
        }
    } catch (e) {
        console.log(e)
    }
}

const getWalletList = async () => {
    try {
        let res = await drawApi.walletbalance({})
        if (res.code == Code.StatusOK) {
            walletbalance.value = res.data != null ? res.data : '0'
        } else {
            uni.showToast({ title: res.msg, icon: 'none' })
        }
    } catch (e) {
        console.log(e)
    }
}

onMounted(() => {
    getToDateList()
    getWalletList()
})
</script>

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

:deep(.disabled-input) {
    .uni-easyinput__content {
        background-color: #f5f7fa !important;
        input {
            color: #c0c4cc !important;
        }
    }
}
</style>