费用

package-lock.json

@@ -15,6 +15,7 @@
       "devDependencies": {
         "@types/node": "^24.10.1",
         "@vitejs/plugin-vue": "^3.2.0",
+        "dayjs": "^1.11.19",
         "sass": "^1.94.2",
         "typescript": "^4.6.4",
         "vite": "^3.2.3",
@@ -765,7 +766,8 @@
     "node_modules/dayjs": {
       "version": "1.11.19",
       "resolved": "https://registry.npmmirror.com/dayjs/-/dayjs-1.11.19.tgz",
-      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw=="
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
+      "license": "MIT"
     },
     "node_modules/de-indent": {
       "version": "1.0.2",

package.json

@@ -16,6 +16,7 @@
   "devDependencies": {
     "@types/node": "^24.10.1",
     "@vitejs/plugin-vue": "^3.2.0",
+    "dayjs": "^1.11.19",
     "sass": "^1.94.2",
     "typescript": "^4.6.4",
     "vite": "^3.2.3",

src/App.vue

@@ -2,12 +2,21 @@
   <div id="app">
     <!-- <Header v-if="!isLoginPage"/> -->
     <main class="main-content">
+       <a-config-provider :locale="zhCN">
       <router-view />
+
+       </a-config-provider>
     </main>
   </div>
 </template>
 
 <script setup>
+import zhCN from 'ant-design-vue/es/locale/zh_CN'
+import dayjs from 'dayjs'
+import 'dayjs/locale/zh-cn'
+
+// 设置 dayjs 语言（RangePicker 依赖 dayjs）
+dayjs.locale('zh-cn')
 import Header from '@/components/Header.vue'
 import { useRoute } from 'vue-router'
 import { computed } from 'vue'
@@ -47,6 +56,11 @@ header {
 
 .main-content {
   /* padding-top: 30px; */
+  overflow: hidden;
   height: 100vh;
 }
+.x-search-bar .ant-form-item{
+      margin-right: 0;
+    margin-bottom: 0;
+}
 </style>

src/components/layout.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script setup lang="ts">
-import Sidebar from './Sidebar.vue'
+import Sidebar from './sidebar.vue'
 </script>
 
 <style scoped>

src/components/sidebar.vue

@@ -63,11 +63,11 @@ const menuItems: MenuItem[] = [
   { path: '/controlPanel/image', name: '镜像', icon: GlobalOutlined },
   { path: '/controlPanel/publicData', name: '公开数据', icon: LaptopOutlined },
   {
-    path: '/controlPanel/fee',
+    path: '/contract',
     name: '费用',
     icon: MoneyCollectOutlined,
     children: [
-      { path: '/controlPanel/fee/detail', name: '详情' },
+      { path: '/contract', name: '合同' },
       { path: '/controlPanel/fee/bill', name: '账单' }
     ]
   },

src/hooks/index.js

@@ -0,0 +1,3 @@
+
+export { default as usePagination } from './usePagination'
+

src/hooks/usePagination.js

@@ -0,0 +1,59 @@
+import { reactive, ref } from 'vue'
+
+export default (options = {}) => {
+    const loading = ref(false)
+    const listData = ref([])
+    const searchFormData = ref({})
+    const paginationState = reactive({
+        total: 0,
+        current: 1,
+        pageSize: 10,
+        showTotal: (total) => `总 ${total} 条数据`,
+        pageSizeOptions: ['10', '20', '30', '40'],
+        ...(options ?? {}),
+    })
+
+    /**
+     * 重置分页
+     */
+    function resetPagination() {
+        paginationState.total = 0
+        paginationState.current = 1
+    }
+
+    /**
+     * 刷新分页
+     * 场景：删除
+     * @param {number} count 受影响数量
+     */
+    function refreshPagination(count = 1) {
+        const { total, current, pageSize } = paginationState
+        const totalPage = Math.ceil((total - count) / pageSize)
+        paginationState.current = current > totalPage ? totalPage : current
+    }
+
+    /**
+     * 显示 loading
+     */
+    function showLoading() {
+        loading.value = true
+    }
+
+    /**
+     * 隐藏 loading
+     */
+    function hideLoading() {
+        loading.value = false
+    }
+
+    return {
+        loading,
+        listData,
+        searchFormData,
+        paginationState,
+        resetPagination,
+        refreshPagination,
+        showLoading,
+        hideLoading,
+    }
+}

src/router/index.ts

@@ -75,19 +75,56 @@ const routes: RouteRecordRaw[] = [
           {
             path: "realnameAuth",
             name: "RealnameAuth",
-            component: () => import("@/views/admin/account/realnameAuth/index.vue"),
+            component: () =>
+              import("@/views/admin/account/realnameAuth/index.vue"),
           },
           {
             path: "enterRealAuth",
             name: "EnterRealAuth",
-            component: () => import("@/views/admin/account/enterRealAuth/index.vue"),
+            component: () =>
+              import("@/views/admin/account/enterRealAuth/index.vue"),
           },
           {
             path: "image",
             name: "Image",
             component: () => import("@/views/admin/image/index.vue"),
           },
+          {
+            path: "contract",
+            name: "contract",
+            component: () => import("@/views/admin/account/cost/contract/index.vue"),
+          },
+          {
+            path: "costDetail",
+            name: "costDetail",
+            component: () => import("@/views/admin/account/cost/costDetail/index.vue"),
+          },
+          {
+            path: "coupon",
+            name: "coupon",
+            component: () => import("@/views/admin/account/cost/coupon/index.vue"),
+          },
+          {
+            path: "flow",
+            name: "flow",
+            component: () => import("@/views/admin/account/cost/flow/index.vue"),
+          },
+           {
+            path: "invoice",
+            name: "invoice",
+            component: () => import("@/views/admin/account/cost/invoice/index.vue"),
+          },
           
+           {
+            path: "myOrder",
+            name: "myOrder",
+            component: () => import("@/views/admin/account/cost/myOrder/index.vue"),
+          },
+          {
+            path: "voucher",
+            name: "voucher",
+            component: () => import("@/views/admin/account/cost/voucher/index.vue"),
+          },
         ],
       },
     ],

src/views/admin/account/cost/contract/dayDetail.vue

@@ -0,0 +1,88 @@
+<template>
+    <a-row :gutter="[24, 18]">
+        <a-col :span="24">
+   
+                <a-form :model="searchFormData" labelAlign="left" class="x-search-bar">
+                    <a-row :gutter="24">
+                        <a-col :span="6">
+                            <a-form-item label="合同ID" name="time">
+                                <a-input v-model:value="searchFormData.time" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col class="align-left" :span="6">
+                            <a-space>
+                                <a-button @click="handleResetSearch">重置</a-button>
+                                <a-button ghost type="primary" @click="handleSearch">
+                                    查询
+                                </a-button>
+                            </a-space>
+                        </a-col>
+                    </a-row>
+                </a-form>
+    
+        </a-col>
+        <a-col :span="24">
+
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange"/>
+           
+        </a-col>
+    </a-row>
+
+
+</template>
+<script setup>
+import { ref,onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+    { title: '合同ID/名称', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '合同状态', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '账单状态', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '账单期间', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '账单金额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '付款截止时间', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '账单文件', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '发票文件', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '操作', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(()=>{
+getPageList()
+
+})
+const getPageList=()=>{
+    listData.value=[
+        {flowNum:1}
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/account/cost/contract/flowDetail.vue

@@ -0,0 +1,70 @@
+<template>
+    <a-row :gutter="[24, 18]">
+        <a-col :span="24">
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange"/>
+        </a-col>
+    </a-row>
+
+
+</template>
+<script setup>
+import { ref,onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+    { title: '合同ID/名称', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '主体名称', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '合同类型', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '合同状态', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '合同总金额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '业务类型', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '付款方式', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '合同起止时间', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '账单已支付到', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '进行中的账单', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '本期账单支付截止', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '合同文件', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '创建时间', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '操作', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(()=>{
+getPageList()
+
+})
+const getPageList=()=>{
+    listData.value=[
+        {flowNum:1}
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/account/cost/contract/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <a-card>
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane key="1" tab="合同">
+                <flowDetail />
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="账单">
+                 <day-detail></day-detail>
+            </a-tab-pane>
+        </a-tabs>
+    </a-card>
+
+</template>
+<script setup>
+import { ref } from 'vue'
+import dayDetail from './dayDetail.vue';
+import flowDetail from './flowDetail.vue';
+const activeKey = ref('1')
+</script>

src/views/admin/account/cost/costDetail/index.vue

@@ -0,0 +1,86 @@
+<template>
+    <a-row :gutter="[24, 18]">
+        <a-col :span="24">
+            <a-card>
+                <a-form :model="searchFormData" labelAlign="left" class="x-search-bar">
+                    <a-row :gutter="24">
+                        <a-col :span="6">
+                            <a-form-item label="交易时间" name="time">
+                                <a-range-picker v-model:value="searchFormData.time" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col class="align-left" :span="6">
+                            <a-space>
+                                <a-button @click="handleResetSearch">重置</a-button>
+                                <a-button ghost type="primary" @click="handleSearch">
+                                    查询
+                                </a-button>
+                            </a-space>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </a-card>
+        </a-col>
+        <a-col :span="24">
+            <a-card>
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange"/>
+            </a-card>
+        </a-col>
+    </a-row>
+
+
+</template>
+<script setup>
+import { ref,onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+    { title: '流水号', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '交易时间', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '收支类型', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '交易类型', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '交易渠道', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '账户余额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '备注', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(()=>{
+getPageList()
+
+})
+const getPageList=()=>{
+    listData.value=[
+        {flowNum:1}
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/account/cost/coupon/dayDetail.vue

@@ -0,0 +1,66 @@
+<template>
+    <a-row :gutter="[24, 18]">
+        <a-col :span="24">
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange"/>
+        </a-col>
+    </a-row>
+
+
+</template>
+<script setup>
+import { ref,onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+    { title: '名称', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '类型', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '规则', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '最高抵扣', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '面额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '折扣', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '生效时间/失效时间', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '状态', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '适用产品', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '适用范围', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(()=>{
+getPageList()
+
+})
+const getPageList=()=>{
+    listData.value=[
+        {flowNum:1}
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/account/cost/coupon/flowDetail.vue

@@ -0,0 +1,66 @@
+<template>
+    <a-row :gutter="[24, 18]">
+        <a-col :span="24">
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange"/>
+        </a-col>
+    </a-row>
+
+
+</template>
+<script setup>
+import { ref,onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+    { title: '名称', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '类型', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '规则', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '最高抵扣', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '面额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '折扣', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '生效时间/失效时间', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '状态', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '适用产品', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '适用范围', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(()=>{
+getPageList()
+
+})
+const getPageList=()=>{
+    listData.value=[
+        {flowNum:1}
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/account/cost/coupon/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <a-card>
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane key="1" tab="可用优惠券">
+                <day-detail></day-detail>
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="失效/已使用">
+                <flowDetail />
+            </a-tab-pane>
+        </a-tabs>
+    </a-card>
+
+</template>
+<script setup>
+import { ref } from 'vue'
+import dayDetail from './dayDetail.vue';
+import flowDetail from './flowDetail.vue';
+const activeKey = ref('1')
+</script>

src/views/admin/account/cost/flow/dayDetail.vue

@@ -0,0 +1,85 @@
+<template>
+    <a-row :gutter="[24, 18]">
+        <a-col :span="24">
+   
+                <a-form :model="searchFormData" labelAlign="left" class="x-search-bar">
+                    <a-row :gutter="24">
+                        <a-col :span="6">
+                            <a-form-item label="账单时间" name="time">
+                                <a-range-picker v-model:value="searchFormData.time" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col class="align-left" :span="6">
+                            <a-space>
+                                <a-button @click="handleResetSearch">重置</a-button>
+                                <a-button ghost type="primary" @click="handleSearch">
+                                    查询
+                                </a-button>
+                            </a-space>
+                        </a-col>
+                    </a-row>
+                </a-form>
+    
+        </a-col>
+        <a-col :span="24">
+
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange"/>
+           
+        </a-col>
+    </a-row>
+
+
+</template>
+<script setup>
+import { ref,onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+    { title: '日期', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '交易类型', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '交易金额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '优惠金额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '余额支付', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '代金卷抵扣', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(()=>{
+getPageList()
+
+})
+const getPageList=()=>{
+    listData.value=[
+        {flowNum:1}
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/account/cost/flow/flowDetail.vue

@@ -0,0 +1,97 @@
+<template>
+    <a-row :gutter="[24, 18]">
+        <a-col :span="24">
+                <a-form :model="searchFormData" labelAlign="left" class="x-search-bar">
+                    <a-row :gutter="24">
+                        <a-col :span="6">
+                            <a-form-item label="订单号" name="orderNum">
+                                <a-input v-model:value="searchFormData.orderNum" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="6">
+                            <a-form-item label="子账号" name="proName">
+                                <a-input v-model:value="searchFormData.proName"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="6">
+                            <a-form-item label="账单时间" name="time">
+                                <a-range-picker v-model:value="searchFormData.time" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col class="align-left" :span="6">
+                            <a-space>
+                                <a-button @click="handleResetSearch">重置</a-button>
+                                <a-button ghost type="primary" @click="handleSearch">
+                                    查询
+                                </a-button>
+                            </a-space>
+                        </a-col>
+                    </a-row>
+                </a-form>
+        </a-col>
+        <a-col :span="24">
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange"/>
+        </a-col>
+    </a-row>
+
+
+</template>
+<script setup>
+import { ref,onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+    { title: '流水号', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '交易时间', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '交易类型', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '产品名称', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '交易金额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '原价', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '优惠金额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '余额支付', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '代金劵抵扣', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '子账号', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '订单号', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '账单详情', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(()=>{
+getPageList()
+
+})
+const getPageList=()=>{
+    listData.value=[
+        {flowNum:1}
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/account/cost/flow/index.vue

@@ -0,0 +1,19 @@
+<template>
+    <a-card>
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane key="1" tab="按日">
+                <day-detail></day-detail>
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="明细">
+                <flowDetail />
+            </a-tab-pane>
+        </a-tabs>
+    </a-card>
+
+</template>
+<script setup>
+import { ref } from 'vue'
+import dayDetail from './dayDetail.vue';
+import flowDetail from './flowDetail.vue';
+const activeKey = ref('1')
+</script>

src/views/admin/account/cost/invoice/index.vue

@@ -0,0 +1,249 @@
+<template>
+    <a-row :gutter="[18, 18]">
+        <a-col :span="24">
+            <a-row :gutter="18">
+                <a-col :span="12" style="display: flex;">
+                    <a-card style="flex: 1; display: flex; flex-direction: column;">
+                        <template #title>
+                            <span>可开票:&nbsp;&nbsp;</span>
+                            <span>¥&nbsp;</span><span class="bold">0.00</span>
+                        </template>
+                        <template #extra>
+                            <a-button type="primary" ghost>去开票</a-button>
+                        </template>
+                        <div style="display: flex;justify-content: space-around;align-items: center;line-height: 30px;">
+                            <div>
+                                <div>可开票金额</div>
+                                <div><span>¥&nbsp;</span><span class="bold">0.00</span></div>
+                            </div>
+                            <div>
+                                <div>&nbsp;</div>
+                                <div>=</div>
+                            </div>
+                            <div>
+                                <div>累计充值</div>
+                                <div><span>¥&nbsp;</span><span class="bold">0.00</span></div>
+                            </div>
+                            <div>
+                                <div>&nbsp;</div>
+                                <div>-</div>
+                            </div>
+                            <div>
+                                <div>充值已开票</div>
+                                <div><span>¥&nbsp;</span><span class="bold">0.00</span></div>
+                            </div>
+                            <div>
+                                <div>&nbsp;</div>
+                                <div>-</div>
+                            </div>
+                            <div>
+                                <div>账单已开票</div>
+                                <div><span>¥&nbsp;</span><span class="bold">0.00</span></div>
+                            </div>
+                        </div>
+                    </a-card>
+                </a-col>
+                <a-col :span="12" style="display: flex;">
+                    <a-card style="flex: 1; display: flex; flex-direction: column;">
+                        <template #title>
+                            <span>发票信息:&nbsp;&nbsp;</span>
+                        </template>
+                        <div>
+                            暂无发票信息<a href="javascript:;" @click="visibleOpen = true">去添加</a>
+                        </div>
+                    </a-card>
+                </a-col>
+            </a-row>
+        </a-col>
+        <a-col :span="24">
+            <a-card title="开票记录">
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"
+                    @change="onTableChange" />
+            </a-card>
+        </a-col>
+    </a-row>
+    <a-modal v-model:open="visibleOpen" title="发票信息" @ok="handleOk" style="width: 800px;">
+        <a-card>
+            <a-form ref="formRef" :model="formData" labelAlign="left" :rules="rules">
+                <a-row :gutter="24">
+                    <a-col :span="12">
+                        <a-form-item label="发票抬头" name="title">
+                            <a-input v-model:value="formData.title" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item label="发票类型" name="type">
+                            <a-radio-group v-model:value="formData.type" button-style="solid">
+                                <a-radio-button value="a">增值税发票</a-radio-button>
+                                <a-radio-button value="b">增值税专用发票</a-radio-button>
+                            </a-radio-group>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item label="纳税人识别号" name="number">
+                            <a-input v-model:value="formData.number" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item label="开户银行名称" name="bankName">
+                            <a-input v-model:value="formData.bankName" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item label="基本开户账号" name="bankNumber">
+                            <a-input v-model:value="formData.bankNumber" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item label="注册场所地址" name="address">
+                            <a-input v-model:value="formData.address" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item label="注册固定电话" name="phone">
+                            <a-input v-model:value="formData.phone" />
+                        </a-form-item>
+                    </a-col>
+                          <a-col :span="12">
+                        <a-form-item label="收件人姓名" name="recipientName">
+                            <a-input v-model:value="formData.recipientName" />
+                        </a-form-item>
+                    </a-col>
+                     <a-col :span="12">
+                        <a-form-item label="收件人手机号" name="recipientPhone">
+                            <a-input v-model:value="formData.recipientPhone" />
+                        </a-form-item>
+                    </a-col>
+                    <a-col :span="12">
+                        <a-form-item label="收件人地址" name="recipientAddress">
+                            <a-input v-model:value="formData.recipientAddress" />
+                        </a-form-item>
+                    </a-col>
+                      <a-col :span="12">
+                        <a-form-item label="邮箱地址" name="emailAddress">
+                            <a-input v-model:value="formData.emailAddress" />
+                        </a-form-item>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </a-card>
+    </a-modal>
+
+</template>
+<script setup>
+import { ref, onBeforeMount, computed } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const visibleOpen = ref(false)
+const formData = ref({ type: 'a' })
+const formRef=ref(null)
+const rules = computed(() => ({
+    title: [{ required: true, message: '请输入发票标题', trigger: 'blur' }],
+    type: [{ required: true, message: '请选择发票类型', trigger: 'change' }],
+    recipientName: [{ required: true, message: '请选择收件人姓名', trigger: 'change' }],
+    recipientPhone: [{ required: true, message: '请选择收件人手机号', trigger: 'change' }],
+    recipientAddress: [{ required: true, message: '请选择收件人地址', trigger: 'change' }],
+    number: [
+        {
+            required: formData.value.type === 'b', // 只有“增值税专用发票”(value='b')才必填
+            message: '请输入纳税人识别号',
+            trigger: 'blur'
+        }
+    ],
+    bankName: [
+        {
+            required: formData.value.type === 'b',
+            message: '请输入开户银行名称',
+            trigger: 'blur'
+        }
+    ],
+    bankNumber: [
+        {
+            required: formData.value.type === 'b',
+            message: '请输入基本开户账号',
+            trigger: 'blur'
+        }
+    ],
+    address: [
+        {
+            required: formData.value.type === 'b',
+            message: '请输入注册场所地址',
+            trigger: 'blur'
+        }
+    ],
+    phone: [
+        {
+            required: formData.value.type === 'b',
+            message: '请输入注册固定电话',
+            trigger: 'blur'
+        }
+    ]
+}))
+const columns = ref([
+    { title: '申请时间', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '开票内容', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '发票抬头', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '发票总额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '开票方式', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '发票性质', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '发票状态', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '驳回原因', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '操作', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(() => {
+    getPageList()
+
+})
+const getPageList = () => {
+    listData.value = [
+        { flowNum: 1 }
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+function handleOk() {
+    visibleOpen.value = false
+
+    formRef.value.validateFields().then(async(values)=>{
+        try {
+            
+        } catch (error) {
+            
+        }
+    })
+}
+</script>
+<style scoped lang="scss">
+.bold {
+    font-weight: bold;
+}
+</style>

src/views/admin/account/cost/myOrder/index.vue

@@ -0,0 +1,108 @@
+<template>
+    <a-row :gutter="[24, 18]">
+        <a-col :span="24">
+            <a-card>
+                <a-form :model="searchFormData" labelAlign="left" class="x-search-bar">
+                    <a-row :gutter="24">
+                        <a-col :span="6">
+                            <a-form-item label="订单号" name="orderNum">
+                                <a-input v-model:value="searchFormData.orderNum" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="6">
+                            <a-form-item label="产品名称" name="proName">
+                                <a-input v-model:value="searchFormData.proName"></a-input>
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="6">
+                            <a-form-item label="交易时间" name="time">
+                                <a-range-picker v-model:value="searchFormData.time" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col class="align-left" :span="6">
+                            <a-space>
+                                <a-button @click="handleResetSearch">重置</a-button>
+                                <a-button ghost type="primary" @click="handleSearch">
+                                    查询
+                                </a-button>
+                            </a-space>
+                        </a-col>
+                    </a-row>
+                </a-form>
+            </a-card>
+        </a-col>
+        <a-col :span="24">
+            <a-card>
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"
+                    @change="onTableChange" />
+            </a-card>
+        </a-col>
+    </a-row>
+
+
+</template>
+<script setup>
+import { ref, onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+    // { title: '订单号', dataIndex: 'flowNum', key: 'flowNum' },
+    // { title: '订单创建时间', dataIndex: 'transactionTime', key: 'transactionTime' },
+    // { title: '产品名称', dataIndex: 'flowNum', key: 'flowNum' },
+    // { title: '计费方式', dataIndex: 'flowNum', key: 'flowNum' },
+    // { title: '订单类型', dataIndex: 'flowNum', key: 'flowNum' },
+    // { title: '订单状态', dataIndex: 'flowNum', key: 'flowNum' },
+    // { title: '订单金额', dataIndex: 'flowNum', key: 'flowNum' },
+    // { title: '操作', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '流水号', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '交易时间', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '主机ID', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '实例ID', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '算力型号', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '算力数量', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '计费时间范围', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '计费时长', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '单价', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '交易金额', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(() => {
+    getPageList()
+
+})
+const getPageList = () => {
+    listData.value = [
+        { flowNum: 1 }
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/account/cost/voucher/dayDetail.vue

@@ -0,0 +1,66 @@
+<template>
+    <a-row :gutter="[24, 18]">
+        <a-col :span="24">
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange"/>
+        </a-col>
+    </a-row>
+
+
+</template>
+<script setup>
+import { ref,onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+    { title: '名称', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '类型', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '规则', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '最高抵扣', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '面额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '折扣', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '生效时间/失效时间', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '状态', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '适用产品', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '适用范围', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(()=>{
+getPageList()
+
+})
+const getPageList=()=>{
+    listData.value=[
+        {flowNum:1}
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/account/cost/voucher/flowDetail.vue

@@ -0,0 +1,66 @@
+<template>
+    <a-row :gutter="[24, 18]">
+        <a-col :span="24">
+                <a-table :dataSource="listData" :columns="columns" bordered :pagination="paginationState"  @change="onTableChange"/>
+        </a-col>
+    </a-row>
+
+
+</template>
+<script setup>
+import { ref,onBeforeMount } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+const columns = ref([
+    { title: '名称', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '类型', dataIndex: 'transactionTime', key: 'transactionTime' },
+    { title: '规则', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '最高抵扣', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '面额', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '折扣', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '生效时间/失效时间', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '状态', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '适用产品', dataIndex: 'flowNum', key: 'flowNum' },
+    { title: '适用范围', dataIndex: 'flowNum', key: 'flowNum' },
+])
+onBeforeMount(()=>{
+getPageList()
+
+})
+const getPageList=()=>{
+    listData.value=[
+        {flowNum:1}
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/account/cost/voucher/index.vue

@@ -0,0 +1,91 @@
+<template>
+    <a-card>
+        <template #title>
+            <div style="display: flex;justify-content: space-between;align-items: center;">
+                <div><span>可用代金劵:</span><span style="color: red;font-size: 18px;font-weight: bold;">¥0.00</span></div>
+                <div><a-button type="primary">兑换码兑换</a-button></div>
+            </div>
+        </template>
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane key="1" tab="生效中">
+            </a-tab-pane>
+            <a-tab-pane key="2" tab="已失效">
+            </a-tab-pane>
+        </a-tabs>
+           <a-table :dataSource="listData" :columns="computedColumns" bordered :pagination="paginationState"  @change="onTableChange"/>
+    </a-card>
+
+</template>
+<script setup>
+import { ref,onBeforeMount,computed } from 'vue'
+import { usePagination } from '@/hooks'
+// const listData=ref([ {title:1}])
+// const paginationState=ref({
+//             total: 0,
+//         current: 1,
+//         pageSize: 10,
+//         showTotal: (total) => `总 ${total} 条数据`,
+//         pageSizeOptions: ['10', '20', '30', '40'],
+// })
+const { listData, loading, showLoading, hideLoading, paginationState, resetPagination, searchFormData } = usePagination()
+// 基础列（始终显示）
+const baseColumns = [
+  { title: '代金券名称', dataIndex: 'name', key: 'name' },
+  { title: '使用产品', dataIndex: 'product', key: 'product' },
+  { title: '使用范围', dataIndex: 'scope', key: 'scope' },
+  { title: '生效时间', dataIndex: 'startTime', key: 'startTime' },
+  { title: '失效时间', dataIndex: 'endTime', key: 'endTime' },
+  { title: '余额/原始面值', dataIndex: 'value', key: 'value' },
+]
+const activeKey=ref('1')
+// “自动抵扣消费”列（仅在 activeKey === '1' 时显示）
+const autoDeductColumn = {
+  title: '自动抵扣消费',
+  dataIndex: 'autoDeduct',
+  key: 'autoDeduct',
+  // 可以加自定义渲染，比如显示“是/否”
+  customRender: ({ text }) => (text ? '是' : '否')
+}
+
+// 动态 columns
+const computedColumns = computed(() => {
+  const cols = [...baseColumns]
+  if (activeKey.value === '1') {
+    // 插入到指定位置（比如第5列，即生效时间之后）
+    cols.splice(5, 0, autoDeductColumn)
+  }
+  return cols
+})
+onBeforeMount(()=>{
+getPageList()
+
+})
+const getPageList=()=>{
+    listData.value=[
+        {flowNum:1}
+    ]
+}
+/**
+ * 分页
+ */
+function onTableChange({ current, pageSize }) {
+    paginationState.current = current
+    paginationState.pageSize = pageSize
+    getPageList()
+}
+/**
+ * 搜索
+ */
+function handleSearch() {
+    resetPagination()
+    getPageList()
+}
+/**
+ * 重置
+ */
+function handleResetSearch() {
+    searchFormData.value = {}
+    resetPagination()
+    getPageList()
+}
+</script>

src/views/admin/index.vue

@@ -48,12 +48,17 @@ const menuItems: MenuItem[] = [
   { path: '/layout/admin/image', name: '镜像', icon: GlobalOutlined },
   { path: '/layout/publicData', name: '公开数据', icon: LaptopOutlined },
   {
-    path: '/layout/fee', 
+    path: '', 
     name: '费用',
     icon: MoneyCollectOutlined,
     children: [
-      { path: '/layout/fee/detail', name: '详情' },
-      { path: '/layout/fee/bill', name: '账单' },
+      { path: '/layout/admin/costDetail', name: '收支明细' },
+      { path: '/layout/admin/myOrder', name: '我的订单' },
+      { path: '/layout/admin/flow', name: '账单明细' },
+      { path: '/layout/admin/coupon', name: '优惠券' },
+      { path: '/layout/admin/invoice', name: '发票' },
+      { path: '/layout/admin/voucher', name: '代金券' },
+      { path: '/layout/admin/contract', name: '合同' },
     ],
   },
   {