gypsy-crm-frontend-vu/pages/customer/components/digitalPayConfirmPopup.vue

<template>
    <cwg-popup v-model:visible="visible" type="center" :mask-click="false" :showFooters="true"
        :title="t('Custom.Deposit.DigitalAcc')" @close="close">
        <view class="popup-content">
            <view class="dia-content digital-pay-confirm-body">
                <view class="digital-pay-info">
                    <view class="digital-pay-info__fields">
                        <view class="digital-pay-field">
                            <span class="digital-pay-field__label" v-t="'Custom.Deposit.DigitalName'"></span>
                            <view class="digital-pay-field__value digital-pay-field__value--currency">
                                {{
                                    WireTransferAccount.name + "-" + WireTransferAccount.type
                                }}
                            </view>
                        </view>
                        <view class="digital-pay-field">
                            <span class="digital-pay-field__label" v-t="'Custom.Withdraw.Title6'"></span>
                            <view class="digital-pay-field__value digital-pay-field__value--address">
                                {{ WireTransferAccount.address || "--" }}
                            </view>
                        </view>
                    </view>
                    <view class="digital-pay-info__qr">
                        <view class="digital-pay-info__qr-inner">
                            <image :src="Host05 + WireTransferAccount.url" alt="" mode="widthFix" />
                        </view>
                    </view>
                </view>
                <view class="digital-pay-divider" role="presentation"></view>
                <view class="digital-pay-upload-wrap">
                    <view class="digital-pay-upload__label" v-t="'Custom.Deposit.UploadRemittanceVoucher'">
                    </view>
                    <cwg-file-picker-wrapper v-model="imageUrl" :limit="1" :fileMediatype="'all'"
                        :imageWidth="142" :imageHeight="142" uploadUrl="/common/upload" />
                </view>
                <view class="digital-pay-upload-wrap mt-3">
                    <view class="digital-pay-upload__label" v-t="'Custom.Deposit.HashCode'">
                    </view>
                    <uni-easyinput :placeholder="t('Custom.Deposit.HashCodePlaceholder')" v-model.trim="hashCode"></uni-easyinput>
                </view>
            </view>
        </view>
        <template #footer>
            <button @click="close">{{ t('Btn.Cancel') }}</button>
            <button type="primary" @click="handleConfirm">{{ t('Btn.Confirm') }}</button>
        </template>
    </cwg-popup>
</template>

<script setup>
import { computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import Config from '@/config/index'
const { Code, Host05, Host04 } = Config
const props = defineProps({
    visible: { type: Boolean, default: false },
    data: { type: Object, default: () => ({ balance: 0, income: 0 }) },
    WireTransferAccount: { type: Object, default: () => ({ name: '', type: '', address: '', url: '' }) },
});
const emit = defineEmits(['update:visible', 'confirm']);
const hashCode = ref('')

const { t } = useI18n();
const visible = computed({
    get: () => props.visible,
    set: (val) => emit('update:visible', val)
});
const imageUrl = ref('');
const handleConfirm = () => {
    if (!imageUrl.value) {
        uni.showToast({
            title: t('Custom.Deposit.UploadRemittanceVoucher'),
            icon: 'none'
        })
        return
    }
    if (!hashCode.value) {
        uni.showToast({
            title: t("vaildate.depositHashCode.empty"),
            icon: 'error'
        })
        return
    }
    emit('confirm', { voucherUrl: imageUrl.value, hashCode: hashCode.value })
    close()
}
const close = () => {
  imageUrl.value = '';
  hashCode.value = ''
  visible.value = false;
};
</script>

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

.popup-content {
    padding: px2rpx(20);
    text-align: center;

    .des1 {
        font-size: px2rpx(16);
        line-height: 1.6;
        margin: px2rpx(30) 0 px2rpx(50);
    }

    .myRED {
        color: #f56c6c;
        font-weight: bold;
    }
}

.digital-pay-confirm-body {
    text-align: left;
    padding: 0 0 px2rpx(4);
    box-sizing: border-box;

    .digital-pay-info {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 8px 0 px2rpx(4);
    }

    .digital-pay-info__fields {
        flex: 1;
        min-width: 0;
    }

    .digital-pay-field {
        margin-bottom: px2rpx(18);

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

    .digital-pay-field__label {
        display: block;
        font-size: px2rpx(16);
        font-weight: bold;
        margin-bottom: px2rpx(8);
        line-height: 1.4;
        color: var(--bs-emphasis-color);
    }

    .digital-pay-field__value {
        font-size: px2rpx(16);
        line-height: 1.55;
        word-break: break-all;
        overflow-wrap: anywhere;
    }

    .digital-pay-field__value--currency {
        max-width: 100%;
        padding: px2rpx(10) px2rpx(14);
        border-radius: px2rpx(4);
        border: 1px solid var(--bs-border-color);
        color: var(--bs-emphasis-color);
        box-sizing: border-box;
    }

    .digital-pay-field__value--address {
        padding: 0;
        border: none;
        background: transparent;
        font-size: px2rpx(16);
        color: var(--bs-emphasis-color);
        line-height: 1.6;
    }

    .digital-pay-info__qr {
        flex-shrink: 0;
        align-self: center;
    }

    .digital-pay-info__qr-inner {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: px2rpx(10);
        border: 1px solid var(--bs-border-color);
        border-radius: px2rpx(6);
        background: var(--bs-bg-color);
        box-sizing: border-box;

        image {
            display: block;
            width: px2rpx(120);
            height: px2rpx(120);
            object-fit: contain;
        }
    }

    .digital-pay-divider {
        border: none;
        border-top: 1px solid var(--bs-border-color);
        margin: px2rpx(20) 0 px2rpx(22);
    }

    .digital-pay-upload-wrap {
        margin-top: 0;
      :deep(.uni-easyinput__content){
        height: px2rpx(43);
      }
    }

    .digital-pay-upload__label {
        font-size: px2rpx(16);
        font-weight: bold;
        margin-bottom: px2rpx(10);
        line-height: 1.4;
        color: var(--bs-emphasis-color);
    }
}

.dialog-digital-pay {
    border-radius: px2rpx(8);
    overflow: hidden;

    .el-dialog__header {
        padding: px2rpx(18) px2rpx(20) px2rpx(8);
    }

    .el-dialog__title {
        font-size: px2rpx(16);
        font-weight: bold;
        color: var(--bs-emphasis-color);
    }

    .el-dialog__body {
        padding: px2rpx(4) px2rpx(28) px2rpx(8);
    }

    .el-dialog__footer {
        padding: px2rpx(8) px2rpx(22);
    }
}
</style>