新增后台用户账单列表页界面

components/menu/data.js

@@ -61,6 +61,11 @@ export default [
 				title: '工资账单明细',
 				path: baseUrl + 'work_bill',
 				hidden: false
+			},
+			{
+				title: '用户账单列表',
+				path: baseUrl + 'user_bills',
+				hidden: false
 			}
 		]
 	},

pages/main/index/balance_change.vue

@@ -1,91 +1,107 @@
-<template>
-  <div>
-    <el-form ref="form" label-width="40px" :model="form">
-      <el-row :gutter="20">
-        <el-col :span="3">
-          <el-form-item label="用户">
-            <el-input placeholder="UID/昵称"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="3">
-          <el-form-item label="编号">
-            <el-input placeholder="订单编号"></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="7">
-          <el-form-item label="时间范围" label-width="80px">
-            <el-date-picker
-              v-model="value1"
-              type="daterange"
-              range-separator="至"
-              start-placeholder="开始时间"
-              end-placeholder="结束时间">
-            </el-date-picker>
-          </el-form-item>
-        </el-col>
-        <el-button type="primary" plain>筛选</el-button>
-        <el-button plain>导出报表</el-button>
-      </el-row>
-    </el-form>
-    <el-table
-      :data="tableData" border
-      style="width: 100%">
-      <el-table-column
-        prop="date"
-        label="ID"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="name"
-        label="用户"
-        width="180">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="变动金额">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="变动后总金额">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="变动前总金额">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="变动后充值余额">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="变动后收入余额">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="变动前收入余额">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="创建时间">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="更新时间">
-      </el-table-column>
-      <el-table-column
-        prop="address"
-        label="订单编号">
-      </el-table-column>
-    </el-table>
-  </div>
-</template>
-
-<script>
-export default {
-  
-}
-</script>
-
-<style lang="scss" scoped>
-  
+<template>
+  <div>
+    <el-form ref="form" label-width="40px" :model="form">
+      <el-row :gutter="20">
+        <el-col :span="3">
+          <el-form-item label="用户">
+            <el-input placeholder="UID/昵称"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="3">
+          <el-form-item label="编号">
+            <el-input placeholder="订单编号"></el-input>
+          </el-form-item>
+        </el-col>
+        <el-col :span="7">
+          <el-form-item label="时间范围" label-width="80px">
+            <el-date-picker
+              v-model="value1"
+              type="daterange"
+              range-separator="至"
+              start-placeholder="开始时间"
+              end-placeholder="结束时间">
+            </el-date-picker>
+          </el-form-item>
+        </el-col>
+        <el-button type="primary" plain>筛选</el-button>
+        <el-button plain>导出报表</el-button>
+      </el-row>
+    </el-form>
+    <el-table
+      :data="tableData" border
+      style="width: 100%">
+      <el-table-column
+        prop="date"
+        label="ID"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="用户"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="变动金额">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="变动后总金额">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="变动前总金额">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="变动后充值余额">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="变动后收入余额">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="变动前收入余额">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="创建时间">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="更新时间">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="订单编号">
+      </el-table-column>
+    </el-table>
+    <div class="order-footer">
+      <el-pagination
+        background
+        @current-change="getTableData"
+        @size-change="changePageSize"
+        :current-page.sync="currentPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="20"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalCount"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  
+}
+</script>
+
+<style lang="scss" scoped>
+  .order-footer {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+  }
 </style>

pages/main/index/user_bills.vue

@@ -0,0 +1,80 @@
+<template>
+  <div>
+    <div class="user-name">用户：开发者大汪(123132)</div>
+    <div class="user-info">订单数量：100（支付成功 50），收入金额：123.45元（成功 34.45元），支出金额：543.21元（成功 43.21元），当前余额 1000.00元</div>
+    <el-table
+      :data="tableData" border
+      style="width: 100%">
+      <el-table-column
+        prop=""
+        label="订单名称">
+      </el-table-column>
+      <el-table-column
+        prop=""
+        label="实际金额">
+      </el-table-column>
+      <el-table-column
+        prop=""
+        label="当前余额">
+      </el-table-column>
+      <el-table-column
+        prop=""
+        label="支付方式">
+      </el-table-column>
+      <el-table-column
+        prop=""
+        label="订单状态">
+      </el-table-column>
+      <el-table-column
+        prop=""
+        label="创建时间">
+      </el-table-column>
+      <el-table-column
+        prop=""
+        label="订单编号">
+      </el-table-column>
+      <el-table-column
+        prop=""
+        label="人工">
+      </el-table-column>
+      <el-table-column
+        prop=""
+        label="备注说明">
+      </el-table-column>
+    </el-table>
+    <div class="order-footer">
+      <el-pagination
+        background
+        @current-change="getTableData"
+        @size-change="changePageSize"
+        :current-page.sync="currentPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="20"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalCount"
+      ></el-pagination>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  
+}
+</script>
+
+<style lang="scss" scoped>
+  .user-name {
+    margin-bottom: 10px;
+  }
+
+  .user-info {
+    margin-bottom: 10px;
+  }
+
+  .order-footer {
+    position: absolute;
+    bottom: 10px;
+    left: 10px;
+  }
+</style>

pages/main/index/work_bill.vue

@@ -5,7 +5,7 @@
         <span>工资账单明细</span>
       </div>
       <el-row :gutter="20">
-        <el-col class="" :span="12">
+        <el-col :span="12">
           <div class="module-title">企业方 需求方大汪（12313）</div>
           <div class="module-content">
             <div>实际费用：￥1070.00</div>