merchant_feedov_web/src/views/financialManagement/accountBalance/index.vue

<!-- 账户余额-总览界面 -->
<template>
    <div class="customer-top-up">
        <div class="item-box">
            <div class="item-title">总览</div>
            <div class="item-grid-box">
                <div class="grid-item" v-for="item in 5" :key="item">
                    <div class="grid-item-title">客户消费总金额/人名币</div>
                    <div class="grid-item-num">
                        <div class="item-num">48000</div>
                        <div class="item-dw">元</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="item-box">
            <div class="item-title">账单明细</div>
            <!-- 搜索条件区 -->
            <div class="search-section">
                <a-form :model="searchForm" layout="inline">
                    <a-form-item field="startTime" label="开始时间">
                        <a-date-picker style="width: 220px; margin: 0 24px 24px 0;" show-time
                            v-model="searchForm.startTime" :time-picker-props="{ defaultValue: '09:09:06' }"
                            format="YYYY-MM-DD HH:mm:ss" @ok="onOkStart" />
                    </a-form-item>
                    <a-form-item field="endTime" label="结束时间">
                        <a-date-picker style="width: 220px; margin: 0 24px 24px 0;" show-time
                            v-model="searchForm.endTime" :time-picker-props="{ defaultValue: '09:09:06' }"
                            format="YYYY-MM-DD HH:mm:ss" @ok="onOkEnd" />
                    </a-form-item>
                    <a-form-item>
                        <a-space>
                            <a-button type="primary" @click="handleSearch">搜索</a-button>
                            <a-button @click="resetSearch">重置</a-button>
                        </a-space>
                    </a-form-item>
                </a-form>
            </div>
            <div class="audit-btn">
                <a-button @click="openTopsUp" type="text">
                    <template #icon>
                        <icon-plus-circle />
                    </template>
                    <template #default>充值</template>
                </a-button>
            </div>
            <!-- 数据表格 -->
            <a-table row-key="customerName" v-model:selectedKeys="selectedKeys" :row-selection="rowSelection"
                :columns="columns" :data="tableData" :pagination="pagination" :scroll="{ x: '100%', y: '400px' }">
                <template #detail="{ record }">
                    <a-button @click="openDetail(record)" type="text">查看</a-button>
                    <a-button @click="openTopsUp(record)" type="text">结算</a-button>
                </template>
                <template #status="{ record }">
                    <div v-if="record.status == 1" class="status-table" style="color:rgba(43, 164, 113, 1);">
                        <div class="status-icon" style="background-color: rgba(43, 164, 113, 1);"></div>
                        已出账
                    </div>
                    <div v-if="record.status == 2" class="status-table">
                        <div class="status-icon"></div>
                        欠费中
                    </div>
                </template>
            </a-table>
        </div>
        <a-modal v-model:visible="showAdd" title="结算" @cancel="showAdd = false" @before-ok="submitAdd" okText="确定"
            width="800px" cancelText="关闭">
            <a-form :model="formAdd" auto-label-width>
                <a-form-item field="customerName" label="客户名称">
                    <!-- <a-input v-model="formAdd.customerName" placeholder="请输入客户" /> -->
                    泰国栗
                </a-form-item>
                <a-form-item field="money" label="当前帐单应收金额">
                    <!-- <a-input-number v-model="formAdd.money" placeholder="请输入金额" class="input-demo" :min="10"
                        :max="100" /> -->
                    1242113.00元
                </a-form-item>
                <a-form-item field="topsUpOpinion" label="结算金额">
                    <!-- <a-textarea placeholder="请输入" v-model="formAdd.topsUpOpinion" allow-clear /> -->
                    123111.00元
                </a-form-item>
                <a-form-item field="fileList" label="打款凭证">
                    <a-upload action="/" :default-file-list="formAdd.fileList" style="width: auto;max-width: 400px;" />
                    <div class="text-box">
                        <div class="text">
                            1.请上传客户银行转账等同等性质的支付凭证文件
                        </div>
                        <div class="text">
                            2.图片仅支持jpg或png格式
                        </div>
                        <div class="text">
                            3.图片不得大于2M
                        </div>
                    </div>
                </a-form-item>
            </a-form>
        </a-modal>
        <a-modal v-model:visible="showDetail" width="1000px" title="订单详情" :hide-cancel="true" @cancel="detailCancel">
            <div class="detail">
                <div class="detail-box">
                    <div class="detail-title">账单信息(泰国李总)</div>
                    <div class="detail-item-box">
                        <div class="detail-item">
                            <div class="item-label">订单状态</div>
                            <div class="item-content" style="color:rgba(253, 63, 90, 1);">欠款中</div>
                        </div>
                        <div class="detail-item">
                            <div class="item-label">账单单号</div>
                            <div class="item-content">1223423422435343</div>
                        </div>
                    </div>
                    <div class="detail-item-box">
                        <div class="detail-item">
                            <div class="item-label">订单结算周期</div>
                            <div class="item-content">2024-10-24~2025-10-23</div>
                        </div>
                        <div class="detail-item">
                            <div class="item-label">出账日期</div>
                            <div class="item-content">2024-10-24</div>
                        </div>
                    </div>
                    <div class="detail-item-box">
                        <div class="detail-item">
                            <div class="item-label">结算时间</div>
                            <div class="item-content">2024-10-24</div>
                        </div>
                        <div class="detail-item">
                            <div class="item-label">账单结算金额</div>
                            <div class="item-content">103849美金</div>
                        </div>
                    </div>
                    <div class="detail-title">结算详情</div>
                    <div class="js-detail" v-for="item in 4" :key="item">
                        <div class="detail-item-box">
                            <div class="detail-item">
                                <div class="item-label">运营商</div>
                                <div class="item-content" style="color:rgba(43, 164, 113, 1);">泰国AIS</div>
                            </div>
                        </div>
                        <div class="detail-item-box">
                            <div class="detail-item">
                                <div class="item-label">套餐流量消耗</div>
                                <div class="item-content">7129.76G</div>
                            </div>
                            <div class="detail-item">
                                <div class="item-label">套餐流量计费方式</div>
                                <div class="item-content">按单流量消耗计费</div>
                            </div>
                        </div>
                        <div class="detail-item-box">
                            <div class="detail-item">
                                <div class="item-label">套餐流量价格</div>
                                <div class="item-content">0.65美金/G</div>
                            </div>
                            <div class="detail-item">
                                <div class="item-label">结算周期</div>
                                <div class="item-content">月</div>
                            </div>
                        </div>
                        <div class="detail-item-box">
                            <div class="detail-item">
                                <div class="item-label">叠加流量消耗</div>
                                <div class="item-content">11244G</div>
                            </div>
                            <div class="detail-item">
                                <div class="item-label">叠加流量计费方式</div>
                                <div class="item-content">按周期计算</div>
                            </div>
                        </div>
                        <div class="detail-item-box">
                            <div class="detail-item">
                                <div class="item-label">叠加流量价格</div>
                                <div class="item-content">0.8美金/月</div>
                            </div>
                            <div class="detail-item">
                                <div class="item-label">结算周期</div>
                                <div class="item-content">月</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="detail-table">
                    <a-table :columns="columnsDetail" :data="dataDetail" />
                </div>
            </div>
        </a-modal>
    </div>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { Message } from '@arco-design/web-vue';
const selectedKeys = ref([]);
const rowSelection = reactive({
    type: 'checkbox',
    showCheckedAll: true,
    onlyCurrent: false,
});
const searchForm = reactive({
    startTime: '',
    endTime: ''
});

const columns = [
    { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
    {
        title: '账单号', dataIndex: 'accountNumber', ellipsis: true,
        tooltip: true,
        width: 100
    },
    { title: '客户名称', dataIndex: 'customerName' },
    { title: '结算金额(元)', dataIndex: 'money' },
    { title: '消耗流量', dataIndex: 'deplete' },
    { title: '账单生成时间', dataIndex: 'createTime' },
    { title: '结算周期时间段', dataIndex: 'createTime' },
    { title: '状态', slotName: 'status' },
    { title: '详情', slotName: 'detail', align: 'center' },
];
const tableData = ref([
    {
        accountNumber: '13800138000',
        customerName: '张三',
        status: '1',
        customerAccountNumber: 'jhl001',
        money: '100美金',
        deplete: '100G',
        createTime: '2024-10-11'
        // operate:'上传合同'
    },
    {
        accountNumber: '13800138000',
        customerName: '李四',
        status: '2',
        customerAccountNumber: 'jhl001',
        money: '100美金',
        deplete: '100G',
        createTime: '2024-10-11'
        // operate:'上传合同'
    },
    {
        accountNumber: '13800138000',
        customerName: '王五',
        status: '2',
        customerAccountNumber: 'jhl001',
        money: '100美金',
        deplete: '100G',
        createTime: '2024-10-11'
        // operate:'上传合同'
    },
    {
        accountNumber: '13800138000',
        customerName: '赵六',
        status: '1',
        customerAccountNumber: 'jhl001',
        money: '100美金',
        deplete: '100G',
        createTime: '2024-10-11'
        // operate:'上传合同'
    },

]);
const pagination = reactive({
    total: tableData.value.length,
    current: 1,
    pageSize: 10,
});
const handleSearch = () => {
    console.log('Search form data:', searchForm);
    Message.success('执行搜索操作');
};

const resetSearch = () => {
    Object.keys(searchForm).forEach(key => {
        if (Array.isArray(searchForm[key])) {
            searchForm[key] = [];
        } else {
            searchForm[key] = null;
        }
    });
    Message.success('搜索条件已重置');
};
const options = [
    { label: '充值', value: '1' },
    { label: '抵充', value: '2' },
    { label: '消费扣除', value: '3' },
];
const openTopsUp = () => {
    showAdd.value = true;
}
const showAdd = ref(false);
const formAdd = reactive({
    customerName: '',
    cardType: '',
    money: '',
    status: '',
    topsUpOpinion: '',
    fileList: []
})
const submitAdd = () => {
    window.setTimeout(() => {
        showAdd.value = false;
    }, 1000)
}
// 选择时间
const onOkStart = () => {
    console.log(searchForm.startTime, '开始时间')
};
const onOkEnd = () => {
    console.log(searchForm.endTime, '结束时间')
};
const showDetail = ref(false);
const openDetail = () => {
    showDetail.value = true;
}
const detailCancel = () => {
}
</script>
<style scoped lang="less">
.customer-top-up {
    padding: 20px;

    .search-section {
        margin-bottom: 20px;
    }

    .audit-btn {
        margin-bottom: 10px;
    }
}

.text-box {
    width: 100%;
    margin-left: 10px;

    .text {
        font-family: PingFang SC;
        font-size: 12px;
        font-weight: 400;
        line-height: 19px;
        color: rgba(153, 153, 153, 1);
        text-align: left;
    }
}

.item-box {
    margin-bottom: 20px;

    .item-title {
        font-family: PingFang SC;
        font-size: 20px;
        font-weight: 400;
        line-height: 28px;
        color: rgba(0, 0, 0, 0.9);
        margin-bottom: 10px;
    }

    .item-grid-box {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        grid-gap: 20px;

        .grid-item {
            background: rgba(247, 247, 247, 1);
            padding: 20px;
            box-sizing: border-box;
            border-radius: 6px;
            box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.1);

            .grid-item-title {
                font-family: PingFang SC;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                text-align: left;
                color: rgba(0, 0, 0, 0.6);
            }

            .grid-item-num {
                display: flex;
                justify-content: space-between;
                align-items: center;
                font-family: PingFang SC;
                font-size: 28px;
                font-weight: 400;
                line-height: 36px;
                color: rgba(0, 0, 0, 0.9);

                .item-num {}

                .item-dw {}
            }
        }
    }
}

.status-table {
    display: flex;
    align-items: center;
    //styleName: Body/Medium;
    font-family: PingFang SC;
    font-size: 14px;
    font-weight: 400;
    line-height: 22px;
    text-align: left;
    color: rgba(253, 63, 90, 1);

    .status-icon {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        margin-right: 5px;
        background: rgba(253, 63, 90, 1);
    }
}

.detail {
    height: 600px;
    overflow-y: auto;

    .detail-box {
        .detail-title {
            font-family: PingFang SC;
            font-size: 20px;
            font-weight: 400;
            line-height: 28px;
            text-align: left;
            color: rgba(0, 0, 0, 0.9);
            margin-bottom: 20px;
        }

        .detail-item-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;

            .detail-item {
                //styleName: Body/Medium;
                font-family: PingFang SC;
                font-size: 14px;
                font-weight: 400;
                line-height: 22px;
                text-align: left;
                display: flex;
                align-items: center;
                min-width: 350px;

                .item-label {
                    color: rgba(0, 0, 0, 0.4);
                    width: 120px;
                    text-align: right;
                    margin-right: 10px;
                }

                .item-content {
                    color: rgba(51, 51, 51, 1);
                }
            }
        }
    }

    .detail-table {
        margin-top: 20px;
    }
}
</style>