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

<!-- 客户充值界面 -->
<template>
    <div class="customer-top-up">
        <!-- 搜索条件区 -->
        <div class="search-section">
            <a-form :model="searchForm" layout="inline">
                <a-form-item field="customerName" label="客户名称">
                    <a-input v-model="searchForm.customerName" placeholder="请输入客户名称" allow-clear />
                </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' }">
        </a-table>
        <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="topsUpStatus" label="充值类型">
                    <a-radio-group v-model="formAdd.topsUpStatus" :options="options" />
                </a-form-item>
                <a-form-item field="customerName" label="客户名称">
                    <a-input v-model="formAdd.customerName" placeholder="请输入客户" />
                </a-form-item>
                <a-form-item field="money" label="充值金额">
                    <!-- <a-input v-model="formAdd.money" placeholder="请输入金额" /> -->
                    <a-input-number v-model="formAdd.money" placeholder="请输入金额" class="input-demo" :min="10"
                        :max="100" />
                </a-form-item>
                <a-form-item field="topsUpOpinion" label="备注">
                    <a-textarea placeholder="请输入" v-model="formAdd.topsUpOpinion" allow-clear />
                </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.建议上传尺寸为360*240px的图片
                        </div>
                        <div class="text">
                            2.图片仅支持jpg或png格式
                        </div>
                        <div class="text">
                            3.图片不得大于2M
                        </div>
                    </div>
                </a-form-item>
            </a-form>
        </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({
    customerName: '',
});

const columns = [
    { title: '序号', dataIndex: 'index', align: 'center', render: ({ rowIndex }) => rowIndex + 1 },
    {
        title: '客户编号', dataIndex: 'customerNumber', ellipsis: true,
        tooltip: true,
        width: 100
    },
    { title: '客户名称', dataIndex: 'customerName' },
    { title: '客户账号', dataIndex: 'customerAccountNumber' },
    { title: '充值金额(元)', dataIndex: 'topsUpMoney' },
    { title: '账户可用余额(元)', dataIndex: 'balance' },
    { title: '充值类型', dataIndex: 'topsUpStatus' },
    { title: '更新时间', dataIndex: 'updateTime' },
    { title: '详情', slotName: 'detail', align: 'center' },
];
const tableData = ref([
    {
        customerNumber: '13800138000',
        customerName: '张三',
        topsUpStatus: '1',
        customerAccountNumber: 'jhl001',
        topsUpMoney: '100',
        balance: '100',
        updateTime: '2024-10-11'
        // operate:'上传合同'
    },
    {
        customerNumber: '13800138000',
        customerName: '李四',
        topsUpStatus: '2',
        customerAccountNumber: 'jhl001',
        topsUpMoney: '100',
        balance: '100',
        updateTime: '2024-10-11'
        // operate:'上传合同'
    },
    {
        customerNumber: '13800138000',
        customerName: '王五',
        topsUpStatus: '3',
        customerAccountNumber: 'jhl001',
        topsUpMoney: '100',
        balance: '100',
        updateTime: '2024-10-11'
        // operate:'上传合同'
    },
    {
        customerNumber: '13800138000',
        customerName: '赵六',
        topsUpStatus: '1',
        customerAccountNumber: 'jhl001',
        topsUpMoney: '100',
        balance: '100',
        updateTime: '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: null,
    topsUpStatus: '',
    topsUpOpinion: '',
    fileList: []
})
const submitAdd = () => {
    window.setTimeout(() => {
        showAdd.value = false;
    }, 1000)
}
</script>
<style scoped lang="less">
.customer-top-up {
    padding: 20px !important;

    .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;
    }
}
</style>