src/views/money/detail/index.vue

@@ -1,43 +1,38 @@
 <template>
   <div>
-    <h1>充值明细</h1>
-    <el-divider></el-divider>
     <el-table
-      :data="listDate"
-      style="width: 150%">
+      :data="tableData"
+      style="width: 100%">
       <el-table-column
-        label="序号"
+        label="日期"
         width="180">
         <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.id }}</span>
+          <i class="el-icon-time"></i>
+          <span style="margin-left: 10px">{{ scope.row.date }}</span>
         </template>
       </el-table-column>
       <el-table-column
-        label="充值编号"
+        label="姓名"
         width="180">
         <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.outTradeNo }}</span>
+          <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>
         </template>
       </el-table-column>
-      <el-table-column
-        label="充值金额"
-        width="180">
+      <el-table-column label="操作">
         <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.totalAmount }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="充值类型"
-        width="180">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.productCode }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column
-        label="充值时间"
-        width="180">
-        <template slot-scope="scope">
-          <span style="margin-left: 10px">{{ scope.row.createTime }}</span>
+          <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>
         </template>
       </el-table-column>
     </el-table>
@@ -45,28 +40,34 @@
 </template>
 
 <script>
-import { userPayinfo } from "@/api/system/user";
 export default {
   data() {
     return {
-      listDate: [],
-      total: 0,
-      queryParams: {
-        pageNum: 1,
-        pageSize: 10,
-      }
+      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 弄'
+      }]
     }
   },
-  created() {
-    this.getList();
-  },
   methods: {
-    getList() {
-      userPayinfo(this.addDateRange(this.queryParams)).then(response => {
-          this.listDate = response.data.rows;
-          this.total = response.data.total;
-        }
-      );
+    handleEdit(index, row) {
+      console.log(index, row);
+    },
+    handleDelete(index, row) {
+      console.log(index, row);
     }
   }
 }