订单管理静态页面接客户充值静态页面

src/views/financialManagement/accountBalance/index.vue

@@ -316,6 +316,8 @@ const detailCancel = () => {
 </script>
 <style scoped lang="less">
 .customer-top-up {
+    padding: 20px;
+
     .search-section {
         margin-bottom: 20px;
     }

src/views/financialManagement/customerTopsUp/index.vue

@@ -0,0 +1,205 @@
+<!-- 客户充值界面 -->
+<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>

src/views/financialManagement/trafficDetails/index.vue

@@ -201,6 +201,8 @@ const openDetail = () => {
 </script>
 <style scoped lang="less">
 .customer-top-up {
+    padding: 20px;
+
     .search-section {
         margin-bottom: 20px;
     }

src/views/order/BuyCard/index.vue

@@ -23,7 +23,7 @@
         <template #icon>
           <icon-plus-circle />
         </template>
-        <template #default>购卡</template>
+        <template #default>审核</template>
       </a-button>
     </div>
     <!-- 数据表格 -->
@@ -52,7 +52,7 @@
         </a-form-item>
       </a-form>
     </a-modal>
-    <a-modal v-model:visible="showAudit" title="购卡" @cancel="showAudit = false" @before-ok="submitAudit" okText="确定审核"
+    <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit" okText="确定审核"
       cancelText="关闭">
       <a-form :model="formAudit" auto-label-width>
         <a-form-item field="customerName" label="客户">

src/views/order/CancelOrder/index.vue

@@ -26,7 +26,7 @@
                 <template #icon>
                     <icon-plus-circle />
                 </template>
-                <template #default>注销</template>
+                <template #default>审核</template>
             </a-button>
         </div>
         <!-- 数据表格 -->
@@ -36,7 +36,7 @@
                 <a-button @click="openDetail(record)" type="text">订单详情</a-button>
             </template>
         </a-table>
-        <a-modal v-model:visible="showAudit" title="卡注销" @cancel="showAudit = false" @before-ok="submitAudit"
+        <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit"
             okText="确定审核" cancelText="关闭">
             <a-form :model="formAudit" auto-label-width>
                 <a-form-item field="customerName" label="客户">

src/views/order/ChangeOrder/index.vue

@@ -26,7 +26,7 @@
                 <template #icon>
                     <icon-plus-circle />
                 </template>
-                <template #default>变更</template>
+                <template #default>审核</template>
             </a-button>
         </div>
         <!-- 数据表格 -->
@@ -36,7 +36,7 @@
                 <a-button @click="openDetail(record)" type="text">订单详情</a-button>
             </template>
         </a-table>
-        <a-modal v-model:visible="showAudit" title="卡变更" @cancel="showAudit = false" @before-ok="submitAudit"
+        <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit"
             okText="确定审核" cancelText="关闭">
             <a-form :model="formAudit" auto-label-width>
                 <a-form-item field="customerName" label="客户">

src/views/order/PackageRecharge/index.vue

@@ -23,7 +23,7 @@
                 <template #icon>
                     <icon-plus-circle />
                 </template>
-                <template #default>购卡</template>
+                <template #default>审核</template>
             </a-button>
         </div>
         <!-- 数据表格 -->
@@ -52,7 +52,7 @@
                 </a-form-item>
             </a-form>
         </a-modal>
-        <a-modal v-model:visible="showAudit" title="购卡" @cancel="showAudit = false" @before-ok="submitAudit"
+        <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit"
             okText="确定审核" cancelText="关闭">
             <a-form :model="formAudit" auto-label-width>
                 <a-form-item field="customerName" label="客户">

src/views/order/RenewalOrder/index.vue

@@ -26,7 +26,7 @@
                 <template #icon>
                     <icon-plus-circle />
                 </template>
-                <template #default>续费</template>
+                <template #default>审核</template>
             </a-button>
         </div>
         <!-- 数据表格 -->
@@ -36,7 +36,7 @@
                 <a-button @click="openDetail(record)" type="text">订单详情</a-button>
             </template>
         </a-table>
-        <a-modal v-model:visible="showAudit" title="卡续期" @cancel="showAudit = false" @before-ok="submitAudit"
+        <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit"
             okText="确定审核" cancelText="关闭">
             <a-form :model="formAudit" auto-label-width>
                 <a-form-item field="customerName" label="客户">

src/views/order/ReturnCard/index.vue

@@ -23,7 +23,7 @@
         <template #icon>
           <icon-plus-circle />
         </template>
-        <template #default>退卡</template>
+        <template #default>审核</template>
       </a-button>
     </div>
     <!-- 数据表格 -->
@@ -33,7 +33,7 @@
         <a-button @click="openDetail(record)" type="text">订单详情</a-button>
       </template>
     </a-table>
-    <a-modal v-model:visible="showAudit" title="退卡" @cancel="showAudit = false" @before-ok="submitAudit" okText="确定审核"
+    <a-modal v-model:visible="showAudit" title="审核" @cancel="showAudit = false" @before-ok="submitAudit" okText="确定审核"
       cancelText="关闭">
       <a-form :model="formAudit" auto-label-width>
         <a-form-item field="customerName" label="客户">