SmartCommunity/operationSupport/src/views/payService/depositManagement/stepPage/collections.vue

<template>
    <div class="lookDetail">
        <div class="formContent-item_title">房屋：{{ thisItem.assets }} <br />租户/业主：{{ thisItem.residentName }}</div>
        <el-form ref="form" :model="formData" :rules="formRules" label-width="90px">
            <div class="grid">
                <div>
                    <div class="mrB20">
                        <div class="labelText">费用类型：</div>
                        <span class="contentText">
                            {{
                                !!thisItem['depositType'] && !!thisItem['depositType'] == 1
                                    ? '装修押金'
                                    : thisItem['depositType'] == 2
                                    ? '租赁押金'
                                    : thisItem['depositType'] == 3
                                    ? '出入证押金'
                                    : '门禁卡押金'
                            }}
                        </span>
                    </div>
                    <div class="mrB20">
                        <div class="labelText">应收时间：</div>
                        <span class="contentText">{{ thisItem.receivableDate }}</span>
                    </div>
                </div>
                <div>
                    <div class="mrB20">
                        <div class="labelText">费用金额(元)：</div>
                        <span class="contentText">{{ thisItem.amount }}</span>
                    </div>
                    <div class="mrB20">
                        <div class="labelText">缴费状态：</div>
                        <span class="redText">未缴费</span>
                    </div>
                </div>
            </div>
            <div class="inline">
                <el-form-item label="支付方式" prop="payType">
                    <el-select v-model="formData.payType">
                        <el-option
                            :label="item.label"
                            :value="item.value"
                            v-for="(item, index) in $publicArray.paymentType()"
                            :key="index"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <div>
                    <div class="labelText">应收金额(元)：</div>
                    <span class="contentText" style="white-space: nowrap">{{ thisItem.amount }}</span>
                </div>
                <el-form-item label="实收金额(元)" required
                    ><el-input oninput="value=value.replace(/[^0-9.]/g,'')" disabled v-model="thisItem.amount"></el-input
                ></el-form-item>
            </div>

            <el-form-item label="备注信息">
                <el-input
                    type="textarea"
                    maxlength="100"
                    v-model="formData.remark"
                    show-word-limit
                    resize="none"
                    rows="3"
                    placeholder="请输入备注信息"
                ></el-input>
            </el-form-item>
        </el-form>
    </div>
</template>
<script >
export default {
    props: ['params'],
    data() {
        return {
            thisItem: {},
            formData: {
                payType: '',
                remark: ''
            },
            formRules: {
                payType: [this.$valid.selectRequired('支付方式')],
                amount: [this.$valid.inputRequired('实收金额')]
            }
        };
    },

    methods: {
        submit() {
            this.$refs.form.validate((valid) => {
                if (valid) {
                    var loading = this.$loading();
                    let { id, amount } = this.thisItem;
                    let installData = {
                        paymentMode: this.formData.payType,
                        remarks: this.formData.remark,
                        id: id,
                        amount: amount
                    };
                    this.$http
                        .post('/sc-charge/deposit/collect/money', installData)
                        .then(({ status, msg }) => {
                            if (status == 0) {
                                this.$message.success(msg);
                                this.params.callback();
                                this.$emit('close');
                            } else {
                                this.$message.error(msg);
                            }
                            loading.close();
                        })
                        .catch(() => {
                            loading.close();
                        });
                }
            });
        },
        getDatali(id) {
            this.$http
                .post('/sc-charge/deposit/find/' + id)
                .then(({ data, msg, status }) => {
                    if (status == 0) {
                        this.thisItem = data;
                    }
                })
                .catch(() => {});
        }
    },
    created() {
        this.thisItem = this.params.data;
    }
};
</script>
<style lang="scss" scoped>
.lookDetail {
    /deep/ .el-form-item__label,
    /deep/.el-form-item__content {
        font-size: 12px;
        white-space: nowrap;
    }
    .formContent-item_title {
        font-weight: 600;
    }
}
.inline {
    display: grid;
    column-gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    font-size: 12px;
}
.labelText {
    width: 90px;
    line-height: 30px;
    text-align: right;
    display: inline-block;
}
.grid {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    & > div {
        width: 33%;
    }
}
.mrB20 {
    margin-bottom: 20px;
}
</style>