SmartCommunity/operationSupport/src/views/payService/propertyFee/stepPage/details.vue

<template>
    <div class="lookDetail">
        <div class="formContent-item_title">{{ thisItem.billNumber }}-{{ thisItem.assets }}</div>
        <el-form ref="form" label-width="110px">
            <template v-for="(item, index) in formLook">
                <el-col :span="12" :key="index">
                    <el-form-item :label="labelType(item.label, item.prop)">
                        <template v-if="item.slot">
                            <template v-if="item.slot == 'assetsArea' && thisItem['chargeType'] == 4">
                                {{ !!thisItem['parkingDetail'] ? thisItem['parkingDetail'] : '--' }}
                            </template>
                            <template v-else-if="item.slot == 'chargeMode'">
                                {{ !!chargeModeValue[thisItem[item.prop]] ? chargeModeValue[thisItem[item.prop]] : '--' }}
                            </template>
                            <template v-else-if="item.slot === 'chargeStatus'">
                                <span v-if="thisItem['chargeStatus'] == 1" class="redText">未缴费</span>
                                <span v-else class="greenText">已缴费</span>
                            </template>
                            <template v-else-if="item.slot === 'payEndTime'">
                                <div style="white-space: nowrap">{{ thisItem['payBeginTime'] }} - {{ thisItem['payEndTime'] }}</div>
                            </template>

                            <template v-else>
                                {{ thisItem[item.prop] || '--' }}
                            </template>
                        </template>
                        <template v-else>
                            {{ thisItem[item.prop] || '--' }}
                        </template>
                    </el-form-item>
                </el-col>
            </template>
        </el-form>
    </div>
</template>
<script >
export default {
    props: ['params'],
    data() {
        return {
            chargeModeValue: {
                1: '固定收费',
                2: '价格*面积收费',
                4: '单价*用量'
            },
            formLook: [
                {
                    label: '费用名称:',
                    prop: 'chargeName'
                },
                {
                    label: '计费标准:',
                    prop: 'chargeModeDict'
                },
                {
                    label: '面积(㎡):',
                    prop: 'assetsArea',
                    slot: 'assetsArea'
                },
                {
                    label: '单价(元):',
                    prop: 'chargePrice'
                },
                {
                    label: '费用金额(元):',
                    prop: 'amount'
                },
                {
                    label: '账期:',
                    prop: 'paymentDays'
                },
                {
                    label: '账单计费日期:',
                    prop: 'payEndTime',
                    slot: 'payEndTime'
                },
                {
                    label: '滞纳金(元):',
                    prop: 'lateFee'
                },
                {
                    label: '缴费状态:',
                    prop: 'chargeStatus',
                    slot: 'chargeStatus'
                },
                {
                    label: '业主:',
                    prop: 'residentName'
                },
                {
                    label: '业主手机号:',
                    prop: 'phone'
                },
                {
                    label: '支付方式:',
                    prop: 'payTypeDict'
                },
                {
                    label: '收款人:',
                    prop: 'payee'
                },
                {
                    label: '收款时间:',
                    prop: 'chargeDate'
                },
                {
                    label: '应收金额(元):',
                    prop: 'receivableAmount'
                },
                {
                    label: '实收金额(元):',
                    prop: 'receivedAmount'
                },
                {
                    label: '备注:',
                    prop: 'remark'
                }
            ],
            thisItem: {}
        };
    },

    methods: {
        getDatali(id) {
            this.$http
                .get('/sc-charge/charge/bill/findUserBillDetail', { id: id })
                .then(({ data, msg, status }) => {
                    if (status == 0) {
                        this.thisItem = data;
                    }
                })
                .catch(() => {});
        },
        labelType(lab, val) {
            let type = this.thisItem['chargeType'];
            if (val == 'assetsArea') {
                if (type == 2) {
                    lab = '用量(吨):';
                } else if (type == 3) {
                    lab = '用量(度):';
                } else if (type == 4) {
                    lab = '车位:';
                }
            } else if (val == 'chargePrice') {
                if (type == 2) {
                    lab = '价格(元/吨):';
                } else if (type == 3) {
                    lab = '价格(元/度):';
                }
            }
            return lab;
        }
    },
    created() {
        this.getDatali(this.params.id);
    }
};
</script>
<style lang="scss" scoped>
@import '@assets/css/public-style.scss';
.lookDetail {
    /deep/ .el-form-item__label,
    /deep/.el-form-item__content {
        font-size: 12px;
        white-space: nowrap;
    }
}
</style>