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

<template>
    <cwg-page-wrapper class="create-page" :isHeaderFixed="true">
        <cwg-header :title="t('wallet.item62')" />
        <uni-loading v-if="loading" />
        <view class="container" v-else>
            <view class="row">
                <view class="col-lg-12 col-sm-12">
                    <view class="card">
                        <view class="border-0 card-header">
                            <uni-forms ref="formRef" :model="form" :rules="rules" label-position="top"
                                validate-trigger="submit">
                                <view class="row">
                                    <view class="col-lg-6">
                                        <h5 class="mb-3" v-t="'wallet.item63'"></h5>
                                        <uni-forms-item name="walletbalance">
                                            <uni-easyinput v-model="walletbalanceDisplay" disabled
                                                class="disabled-input" />
                                        </uni-forms-item>
                                    </view>
                                    <view class="col-lg-6">
                                        <h5 class="mb-3" v-t="'Custom.Transfer.IntoAccount'"></h5>
                                        <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="col-lg-6 mb-3">
                                        <h5 class="mb-3" v-t="'Label.Amount'"></h5>
                                        <view class="card-row amount-box">
                                            <uni-forms-item name="amount" :error-message="amountErrorMessage"
                                                class="amount-input">
                                                <uni-easyinput v-model="form.amount"
                                                    :placeholder="t('placeholder.input')" @blur="validateAmount" />
                                            </uni-forms-item>
                                            <view class="btn btn-gray waves-effect waves-light" v-t="'State.All'"
                                                @click="setAllAmount"></view>
                                        </view>
                                    </view>


                                    <button hover-class="" @click="toTransfer"
                                        class="btn btn-dark waves-effect waves-light"><i class="fi fi-rs-check"></i>
                                        <text v-t="'Btn.Submit'"></text></button>
                                </view>
                            </uni-forms>
                        </view>
                    </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" />
    </cwg-page-wrapper>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch } 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, locale } = useI18n()
import { useFilters } from '@/composables/useFilters'
const { numberDecimal } = useFilters()
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 ''
}

// 单位类型
function groupCurrency(type) {
    const map = { GBP: ': £', USD: ': $', EUR: ': €', USC: ': ￠' }
    return map[type] || ': $'
}
const toOptionsDisplay = computed(() => {
    return toOptions.value.map(item => ({
        text: `${item.login} - ${groupTypeName(item.type)} - ${t('Custom.Deposit.AvailableBalance')}${groupCurrency(item.currency)}${numberDecimal(item.balance)}`,
        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 = computed(() => ({
    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) => {
                    value = Number(value)
                    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
                }
            }
        ]
    }
}));
watch(locale, () => {
    formRef.value?.clearValidate()
    amountErrorMessage.value = ''
})
const amountErrorMessage = ref('')
const setAllAmount = () => {
    form.amount = Number(walletbalance.value)
    validateAmount()
}
function validateAmount() {
    const value = form.amount
    if (!value) {
        amountErrorMessage.value = t('vaildate.amount.format')
        return false
    } else if (!/^[0-9]+([.]{1}[0-9]{1,2})?$/.test(value)) {
        amountErrorMessage.value = t('vaildate.amount.format')
    }
    amountErrorMessage.value = ''
    return true
}
const formRef = ref(null)

const closeDia = () => {
    if (formRef.value) {
        form.amount = ''
        form.login = null
        amountErrorMessage.value = ''
        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
            uni.$emit('updatePayment')
        } else {
            RES.value = res.msg
            dialogCheck.value = true
            dialogVisible.value = false
            flag.value = false
        }
        dialogCheckWait.value = false
    } catch (e) {
        if (e.code == 400) {
            dialogCheckWait.value = false
            RES.value = e.msg
            dialogCheck.value = true
            dialogVisible.value = false
            flag.value = false
        }
    }
}

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";

.amount-box {
    display: flex;
    align-items: center;
    gap: px2rpx(12);

    .amount-input {
        flex: 1;
    }

    .btn {
        margin-bottom: px2rpx(22);
    }
}

.transfer-page {
    width: 100%;
    padding-bottom: px2rpx(20);

    .main-content {
        text-align: left;

        .box {
            padding-top: px2rpx(5);
            color: #303133;

            .b-card {
                border: 1px solid var(--bs-border-color);
                background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
                margin-bottom: px2rpx(10);
                border-radius: px2rpx(6);
                box-shadow: 0 px2rpx(1) px2rpx(6) 0 rgba(0, 0, 0, 0.05);

                &:hover {
                    box-shadow: 0 px2rpx(2) px2rpx(8) 0 rgba(0, 0, 0, 0.1);
                }

                .card-top {
                    padding: px2rpx(15) px2rpx(20);

                    .card-row {
                        margin-bottom: px2rpx(30);

                        &:last-child {
                            margin-bottom: 0;
                        }
                    }



                    .card-tit {
                        margin-bottom: px2rpx(0) !important;
                    }

                    .tit {
                        font-size: px2rpx(16);
                        font-weight: 600;
                        margin-bottom: px2rpx(16);
                        display: flex;
                        align-items: center;
                        color: var(--bs-heading-color);
                        position: relative;
                        padding-left: 20px;

                        &:after {
                            content: '';
                            position: absolute;
                            left: 0;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 0;
                            height: 0;
                            border-top: 6px solid transparent;
                            border-bottom: 6px solid transparent;
                            border-left: 8px solid currentColor;
                        }

                        .iconfont {
                            margin-right: px2rpx(8);
                            color: var(--color-primary);
                            font-size: px2rpx(18);
                        }
                    }

                    .title-wrapper {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                    }
                }
            }
        }

        .box-step2 {
            .form-row {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: px2rpx(12);
                gap: px2rpx(12);

                &:last-child {
                    margin-bottom: 0;
                }

                .form-col {
                    flex: 1;
                    min-width: px2rpx(140);

                    @media screen and (max-width: 991px) {
                        flex: 0 0 100%;
                        width: 100%;
                    }
                }

                .form-col-full {
                    width: 100%;
                    padding: 0 px2rpx(5);
                }
            }

            .tips {
                line-height: 1.8;
                font-size: px2rpx(12);
                color: var(--bs-heading-color);
                background-color: rgba(var(--bs-body-bg-rgb), 1) !important;
                padding: px2rpx(12);
                border-radius: px2rpx(4);
                border-left: px2rpx(2) solid #cf1322;

                .title {
                    font-weight: 600;
                    margin-bottom: px2rpx(6);
                    color: var(--bs-heading-color);
                }
            }
        }
    }

    .picker-select {
        background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        border: 1px solid #dcdfe6;
        border-radius: px2rpx(4);
        padding: px2rpx(12) px2rpx(14);
        font-size: px2rpx(14);
        color: #606266;
        line-height: 1.4;
        width: 100%;
        box-sizing: border-box;

        &:hover {
            border-color: #409eff;
        }

        &.picker-disabled {
            background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
            color: #c0c4cc;
            cursor: not-allowed;
        }
    }

    .disabled-input {
        // background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        // border: 1px solid #dcdfe6;
        border-radius: px2rpx(4);
        // padding: px2rpx(12) px2rpx(14);
        font-size: px2rpx(14);
        color: #606266;
        width: 100%;
        box-sizing: border-box;
    }

    .m-input {
        background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
        border: 1px solid #dcdfe6;
        border-radius: px2rpx(4);
        padding: px2rpx(12) px2rpx(14);
        font-size: px2rpx(14);
        width: 100%;
        box-sizing: border-box;

        &:focus {
            border-color: #409eff;
            outline: none;
            box-shadow: 0 0 0 px2rpx(1) rgba(64, 158, 255, 0.2);
        }
    }


    .popup-content {
        padding: px2rpx(30) px2rpx(20);
        text-align: center;
        min-width: px2rpx(250);
        max-width: 80%;
        margin: 0 auto;

        @media screen and (max-width: 991px) {
            min-width: 80%;
            max-width: 90%;
            margin: 0 px2rpx(10);
        }

        position: relative;

        .icon {
            .iconfont {
                font-size: px2rpx(60);
                display: block;
                margin: 0 auto;
            }

            .icon-chenggong {
                color: #67c23a;
            }

            .icon-jingshi {
                color: #f56c6c;
            }

            .icon-dengdai {
                color: #e6a23c;
            }
        }

        .des1 {
            font-weight: 600;
            font-size: px2rpx(16);
            margin: px2rpx(20) 0 px2rpx(15);
            color: #303133;
            line-height: 1.4;
            padding: 0 px2rpx(10);
        }

        .dialog-footer {
            display: flex;
            justify-content: center;
            gap: px2rpx(10);
            margin-top: px2rpx(10);

            @media (max-width: 750rpx) {
                flex-direction: column;
                align-items: center;
                gap: px2rpx(6);
            }

            button {
                min-width: px2rpx(90);
                padding: 0 px2rpx(12);
                border-radius: px2rpx(4);
                font-size: px2rpx(14);
                transition: all 0.3s ease;
                cursor: pointer;

                &[type="primary"] {
                    background-color: #409eff;
                    color: var(--bs-emphasis-color);
                    border: none;

                    &:hover {
                        background-color: #66b1ff;
                        transform: translateY(px2rpx(-1));
                        box-shadow: 0 px2rpx(2) px2rpx(6) 0 rgba(64, 158, 255, 0.3);
                    }

                    &:active {
                        background-color: #3a8ee6;
                        transform: translateY(0);
                    }
                }

                &:not([type="primary"]) {
                    background-color: rgba(var(--bs-body-bg-rgb), var(--bs-bg-opacity)) !important;
                    border: 1px solid #dcdfe6;
                    color: #606266;

                    &:hover {
                        border-color: #409eff;
                        color: #409eff;
                        transform: translateY(px2rpx(-1));
                    }

                    &:active {
                        transform: translateY(0);
                    }
                }
            }
        }
    }

    .wait-popup {
        .des1 {
            margin-top: px2rpx(10);
        }

        .icon {
            .iconfont {
                animation: spin 1s linear infinite;
            }
        }
    }
}

// 动画
@keyframes popupFadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(px2rpx(10));
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

// 表单错误信息样式
.uni-forms-item__error {
    font-size: px2rpx(12);
    color: #f56c6c;
    margin-top: px2rpx(4);
}

// 适配不同屏幕尺寸（媒体查询中的 750rpx 保持不变）
@media (max-width: 750rpx) {
    .transfer-page {
        .main-content {
            padding: px2rpx(8);

            .box {
                .b-card {
                    .card-top {
                        padding: px2rpx(12) px2rpx(16);

                        .tit {
                            font-size: px2rpx(14);

                            .iconfont {
                                font-size: px2rpx(16);
                            }
                        }
                    }
                }
            }
        }

        .s-btn {
            font-size: px2rpx(14);
            padding: px2rpx(10) px2rpx(16);
        }

        .popup-content {
            padding: px2rpx(20) px2rpx(16);

            .icon {
                .iconfont {
                    font-size: px2rpx(50);
                }
            }

            .des1 {
                font-size: px2rpx(14);
                margin: px2rpx(15) 0 px2rpx(10);
            }

            .dialog-footer {
                button {
                    min-width: px2rpx(80);
                    font-size: px2rpx(13);
                }
            }
        }
    }
}
</style>