hotel-saas-tenant-frontend/src/views/markets/modules/agreementUnit/agreementAccount.vue

<template>
    <a-card class="container">
        <div class="info">
            <a-row :gutter="[16, 16]">
                <a-col :span="4" class="padding_8">
                    <div class="title">
                        协议单位
                    </div>
                    <div class="value">
                        {{ agreementUnitInfo.customerName }}
                        <a-tag color="cyan">
                            {{ agreementUnitInfo.accountStatus_dictText }}
                        </a-tag>
                    </div>
                </a-col>
                <a-col :span="3" class="padding_8">
                    <div class="title">
                        客户类型
                    </div>
                    <div class="value">
                        {{ agreementUnitInfo.customerType_dictText }}
                    </div>
                </a-col>
                <a-col :span="3" class="padding_8">
                    <div class="title">
                        消费
                    </div>
                    <div class="value">
                        {{ accountModel.consume }}
                    </div>
                </a-col>
                <a-col :span="3" class="padding_8">
                    <div class="title">
                        收款
                    </div>
                    <div class="value">
                        {{ accountModel.payment }}
                    </div>
                </a-col>
                <a-col :span="3" class="padding_8">
                    <div class="title">
                        记账额度
                    </div>
                    <div class="value">
                        {{ agreementUnitInfo.bookkeeping == null || agreementUnitInfo.bookkeeping ==
                            0 ? '无限制' : agreementUnitInfo.bookkeeping }}
                    </div>
                </a-col>
                <a-col :span="4" class="padding_8">
                    <div class="title">
                        已用额度
                    </div>
                    <div class="value">
                        {{ accountModel.used }}
                    </div>
                </a-col>
                <a-col :span="4" class="bak_red padding_8 border_radius_10">
                    <div class="title" style="color: white;">
                        剩余额度
                    </div>
                    <div class="value" style="color: white; font-weight: 600;">
                        {{ (agreementUnitInfo.bookkeeping == null || agreementUnitInfo.bookkeeping == 0 ? '--.--' :
                            (agreementUnitInfo.bookkeeping - accountModel.used)) }}
                    </div>
                </a-col>
            </a-row>
        </div>
        <div class="oper">
            <div class="oper-wrapper">
                <div class="oper-item">
                    <a-button>
                        <a-icon type="file" />
                        商品消费
                    </a-button>
                </div>
                <div class="oper-item">
                    <a-button>
                        <a-icon type="file" />
                        入账
                    </a-button>
                </div>
                <div class="oper-item">
                    <a-button>
                        <a-icon type="file" />
                        转账
                    </a-button>
                </div>
                <div class="oper-item">
                    <a-button>
                        <a-icon type="file" />
                        结算
                    </a-button>
                </div>
                <div class="oper-item">
                    <a-button>
                        <a-icon type="file" />
                        冲账
                    </a-button>
                </div>
            </div>
            <div class="kajimi">
                <a-radio-group button-style="solid" v-model="settleType" @change="onTypeChange">
                    <a-radio-button :value="0">
                        全部
                    </a-radio-button>
                    <a-radio-button :value="1">
                        未结算
                    </a-radio-button>
                    <a-radio-button :value="2">
                        已结算
                    </a-radio-button>
                </a-radio-group>
                <span style="display: inline-block; margin-left: 10px;">
                    <a-range-picker v-model="rangeValue" @change="onRangeChange" :format="dateFormat" />
                </span>
                <span style="display: inline-block; margin-left: 10px;">
                    <a-button>
                        <a-icon type="search" />
                        查询
                    </a-button>
                </span>
                <span style="display: block; margin-left: 10px;">
                    <a-tag color="orange">
                        <pre style="margin: 0;">消费：￥300    收款：￥0    余额：￥-300</pre>
                    </a-tag>
                </span>
            </div>
        </div>
        <div class="cotent">

        </div>
    </a-card>
</template>

<script>
import moment from 'moment';
export default {
    name: 'agreementAccount',
    data() {
        var my_date = new Date();
        var first_date = new Date(my_date.getFullYear(), my_date.getMonth(), 1);
        var last_date = new Date(my_date.getFullYear(), my_date.getMonth() + 1, 0);
        return {
            settleType: 1,
            dateFormat: 'YYYY-MM-DD',
            rangeValue: [moment(first_date), moment(last_date)],
            defaultRange: [first_date.format('yyyy-MM-dd'), last_date.format('yyyy-MM-dd')],
            agreementUnitInfo: {},
            accountModel: {
                consume: '0',
                payment: '0',
                used: '0',
                surplus: '0'
            }
        }
    },
    activated() {
        console.log(99999)
        var agreementUnitInfo = JSON.parse(localStorage.getItem("agreementUnitInfo"));
        this.agreementUnitInfo = Object.assign({}, agreementUnitInfo);
        this.$forceUpdate()
    },
    created() {
        var agreementUnitInfo = JSON.parse(localStorage.getItem("agreementUnitInfo"));
        this.agreementUnitInfo = Object.assign({}, agreementUnitInfo);

        var temp = {
            consume: '0',
            payment: '0',
            used: '0',
            surplus: '0'
        }
        this.accountModel = Object.assign({}, temp);
        // console.log(agreementUnitInfo.customerName)
    },
    methods: {
        moment,
        onRangeChange(e) {
            console.log(this.rangeValue);
        },
        onTypeChange(e) {
            console.log(e);
        }
    }
}
</script>

<style scoped>
.info {
    text-align: center;
}

.title {
    font-size: 16px;
    font-weight: 500;
}

.value {
    padding-top: 10px;
}

.bak_red {
    background-color: red;
}

.padding_8 {
    padding: 8px 0;
    border-radius: 10px;
}

.border_radius_10 {
    border-radius: 10px;
}

.oper-wrapper {
    display: flex;
    width: 100%;
}

.oper-item {
    margin-right: 10px;
}

.kajimi {
    margin-top: 20px;
    display: flex;
    align-items: center;
}
</style>