eiru_payments/src/components/froms/CustomerDetails.vue

<template lang="pug">
    .customer-details
        form.form-customer-display
            .form-separatoe
                h3 Detalles Generales
                hr
            .form-item-payments
                label.form-label Nombre
                input.form-input(:value="customer.name || ''" readonly)
            .form-item-payments
                label.form-label R.U.C/C.I.Nº
                input.form-input(:value="customer.ruc || ''" readonly)
            .form-item-payments
                label.form-label Celular
                input.form-input(:value="customer.phone || ''" readonly)
            .form-item-payments
                label.form-label Teléfono
                input.form-input(:value="customer.mobile || ''" readonly)
            .form-item-payments
                label.form-label Email
                input.form-input(:value="customer.email || ''" readonly)
            .form-separatoe
                h3 Finanzas
                hr
            .form-item-payments
                label.form-label Débito
                input.form-input(:value="customer.credit | currency(...currencyCompany)" readonly)
            .form-item-payments
                label.form-label Crédito
                input.form-input(:value="customer.creditLimit | currency(...currencyCompany)" readonly)
</template>

<script>

    export default {
        props: {
            customer: {
                type: Object,
                default: {
                    name: '',
                    ruc: '',
                    phone: '',
                    mobile: '',
                    email: '',
                    credit: 0,
                    creditLimit: 0,
                    symbolPosition: 'before'
                }
            },
            currencyCompany: {
                type: Object,
                default: {
                    name: '',
                    symbol: '',
                    rateSilent: 0,
                    thousandsSeparator: '.',
                    decimalSeparator: ',',
                    decimalPlaces: 0
                }
            }
        },
        // methods: {
        //     // getCurrencyFormat(item) {
        //     //     // return  item.toFixed(0).replace(".", ",").replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1'+'.')
        //     //     // return this.currency.symbol+" "+item.toFixed(this.currency.decimalPlaces).replace(".", ",").replace(/(\d)(?=(\d\d\d)+(?!\d))/g, '$1'+this.currency.thousandsSeparator)
        //     // },
        // }
    }
</script>

<style lang="sass">
    @import '../../assets/variables'
    .customer-details
        width: 320px
        height: 100%
        .form-customer-display
            width: 320px
            height: 100%
            padding: 15px
            .form-separatoe
                h3
                    color: $app-separator-color
                    font-size: 8pt
                hr
            .form-item-payments
                width: 100%
                height: 35px
                margin-bottom: 10px
                .form-label
                    width: 30%
                    height: 35px
                    font-size: 10pt
                .form-input
                    width: 70%
                    height: 35px
                    font-size: 10pt

</style>