diff --git a/src/views/money/detail/index.vue b/src/views/money/detail/index.vue
index c9a9e8b..8728890 100644
--- a/src/views/money/detail/index.vue
+++ b/src/views/money/detail/index.vue
@@ -1,74 +1,87 @@
 <template>
-  <div>
+  <div style="padding: 20px;">
+    <h1 style="text-align: center; margin-bottom: 30px;">充值明细</h1>
+    <el-divider></el-divider>
     <el-table
-      :data="tableData"
-      style="width: 100%">
+      :data="listDate"
+      style="width: 100%; border-collapse: collapse;">
       <el-table-column
-        label="日期"
-        width="180">
+        label="序号"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
         <template slot-scope="scope">
-          <i class="el-icon-time"></i>
-          <span style="margin-left: 10px">{{ scope.row.date }}</span>
+          {{ scope.row.id }}
         </template>
       </el-table-column>
       <el-table-column
-        label="姓名"
-        width="180">
+        label="充值编号"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
         <template slot-scope="scope">
-          <el-popover trigger="hover" placement="top">
-            <p>姓名: {{ scope.row.name }}</p>
-            <p>住址: {{ scope.row.address }}</p>
-            <div slot="reference" class="name-wrapper">
-              <el-tag size="medium">{{ scope.row.name }}</el-tag>
-            </div>
-          </el-popover>
+          {{ scope.row.outTradeNo }}
         </template>
       </el-table-column>
-      <el-table-column label="操作">
+      <el-table-column
+        label="充值金额"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
         <template slot-scope="scope">
-          <el-button
-            size="mini"
-            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
-          <el-button
-            size="mini"
-            type="danger"
-            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
+          {{ scope.row.totalAmount }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="充值类型"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.productCode }}
+        </template>
+      </el-table-column>
+      <el-table-column
+        label="充值时间"
+        width="300"
+        style="border: 1px solid #ccc; padding: 10px; text-align: center;">
+        <template slot-scope="scope">
+          {{ scope.row.createTime }}
         </template>
       </el-table-column>
     </el-table>
+    <pagination
+      v-show="total > 0"
+      :limit.sync="queryParams.pageSize"
+      :page.sync="queryParams.pageNum"
+      :total="total"
+      @pagination="getList"
+    />
   </div>
 </template>
 
+
 <script>
+import { userPayinfo } from "@/api/system/user";
+import PanelGroup from "@/views/dashboard/PanelGroup.vue";
 export default {
+  components: {PanelGroup},
   data() {
     return {
-      tableData: [{
-        date: '2016-05-02',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1518 弄'
-      }, {
-        date: '2016-05-04',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1517 弄'
-      }, {
-        date: '2016-05-01',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1519 弄'
-      }, {
-        date: '2016-05-03',
-        name: '王小虎',
-        address: '上海市普陀区金沙江路 1516 弄'
-      }]
+      listDate: [],
+      total: 0,
+      queryParams: {
+        pageNum: 1,
+        pageSize: 10,
+      }
     }
   },
+  created() {
+    this.getList();
+  },
   methods: {
-    handleEdit(index, row) {
-      console.log(index, row);
-    },
-    handleDelete(index, row) {
-      console.log(index, row);
-    }
+    getList() {
+      userPayinfo(this.addDateRange(this.queryParams)).then(response => {
+          this.listDate = response.data.rows;
+          this.total = response.data.total;
+        }
+      );}
   }
 }
 </script>