add 我的钱包前端页面 table

Andy
1 parent 613d2a9c
Showing 7 changed files with 411 additions and 33 deletions
package.json
src/components/Breadcrumb/index.vue
src/components/Pagination/index.vue
src/styles/element-ui.scss
src/styles/index.scss
src/utils/scroll-to.js
src/views/account/index.vue
@@ -19,7 +19,7 @@
     "element-ui": "2.7.2",
     "js-cookie": "2.2.0",
     "normalize.css": "7.0.0",
-    "nprogress": "0.2.0",
+    "nprogress": "^0.2.0",
     "path-to-regexp": "2.4.0",
     "vue": "2.6.10",
     "vue-router": "3.0.6",
@@ -33,7 +33,7 @@ export default {
       const first = matched[0]
  
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
+        matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
       }
  
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
@@ -43,7 +43,7 @@ export default {
       if (!name) {
         return false
       }
-      return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase()
+      return name.trim().toLocaleLowerCase() === '首页'.toLocaleLowerCase()
     },
     pathCompile(path) {
       // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
+<template>
+  <div :class="{'hidden':hidden}" class="pagination-container">
+    <el-pagination
+      :background="background"
+      :current-page.sync="currentPage"
+      :page-size.sync="limit"
+      :layout="layout"
+      :page-sizes="pageSizes"
+      :total="total"
+      v-bind="$attrs"
+      @size-change="handleSizeChange"
+      @current-change="handleCurrentChange"
+    />
+  </div>
+</template>
+
+<script>
+import { scrollTo } from '@/utils/scroll-to'
+
+export default {
+  name: 'Pagination',
+  props: {
+    total: {
+      required: true,
+      type: Number
+    },
+    page: {
+      type: Number,
+      default: 1
+    },
+    limit: {
+      type: Number,
+      default: 20
+    },
+    pageSizes: {
+      type: Array,
+      default() {
+        return [10, 20, 30, 50]
+      }
+    },
+    layout: {
+      type: String,
+      default: 'total, sizes, prev, pager, next, jumper'
+    },
+    background: {
+      type: Boolean,
+      default: true
+    },
+    autoScroll: {
+      type: Boolean,
+      default: true
+    },
+    hidden: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {
+    currentPage: {
+      get() {
+        return this.page
+      },
+      set(val) {
+        this.$emit('update:page', val)
+      }
+    },
+    pageSize: {
+      get() {
+        return this.limit
+      },
+      set(val) {
+        this.$emit('update:limit', val)
+      }
+    }
+  },
+  methods: {
+    handleSizeChange(val) {
+      this.$emit('pagination', { page: this.currentPage, limit: val })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    },
+    handleCurrentChange(val) {
+      this.$emit('pagination', { page: val, limit: this.pageSize })
+      if (this.autoScroll) {
+        scrollTo(0, 800)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+  .pagination-container {
+    background: #fff;
+    /**margin-top: 16px;**/
+    margin-bottom: 16px;
+    float: right;
+  }
+  .pagination-container.hidden {
+    display: none;
+  }
+</style>
@@ -42,3 +42,34 @@
     display: block
   }
 }
+// fix date-picker ui bug in filter-item
+.el-range-editor.el-input__inner {
+  display: inline-flex !important;
+}
+
+.el-table thead {
+  color: #515a6e !important;
+  font-weight: 500;
+}
+.el-table th{
+  white-space: nowrap !important;
+  overflow: hidden !important;
+  background-color: #f8f8f9 !important;
+}
+.el-table{
+  color: #515A6E !important;
+}
+.el-table thead{
+  color: #1F2D3D !important;
+}
+
+.el-form-item__label{
+  font-size: 12px !important;
+  color: #515a6e !important;
+  vertical-align:middle;
+}
+label{
+  font-weight:500 !important;
+  font-size: 14px !important;
+  cursor: default !important;
+}
@@ -104,3 +104,6 @@ p{
 .font-size24{
   font-size: 24px;
 }
+.margin-top-24{
+  margin-top: 24px;
+}
+Math.easeInOutQuad = function(t, b, c, d) {
+  t /= d / 2
+  if (t < 1) {
+    return c / 2 * t * t + b
+  }
+  t--
+  return -c / 2 * (t * (t - 2) - 1) + b
+}
+
+// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
+var requestAnimFrame = (function() {
+  return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
+})()
+
+/**
+ * Because it's so fucking difficult to detect the scrolling element, just move them all
+ * @param {number} amount
+ */
+function move(amount) {
+  document.documentElement.scrollTop = amount
+  document.body.parentNode.scrollTop = amount
+  document.body.scrollTop = amount
+}
+
+function position() {
+  return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
+}
+
+/**
+ * @param {number} to
+ * @param {number} duration
+ * @param {Function} callback
+ */
+export function scrollTo(to, duration, callback) {
+  const start = position()
+  const change = to - start
+  const increment = 20
+  let currentTime = 0
+  duration = (typeof (duration) === 'undefined') ? 500 : duration
+  var animateScroll = function() {
+    // increment the time
+    currentTime += increment
+    // find the value with the quadratic in-out easing function
+    var val = Math.easeInOutQuad(currentTime, start, change, duration)
+    // move the document.body
+    move(val)
+    // do the animation unless its over
+    if (currentTime < duration) {
+      requestAnimFrame(animateScroll)
+    } else {
+      if (callback && typeof (callback) === 'function') {
+        // the animation is done so lets callback
+        callback()
+      }
+    }
+  }
+  animateScroll()
+}
 <template>
-  <!--汇总卡片-->
-  <el-row :gutter="16" class="card-second-top">
-    <el-col :span="12">
-      <el-card class="box-card">
-        <el-row :gutter="24">
-          <el-col :span="8" style="text-align: center">
-            <svg-icon icon-class="recharge" class="svg-icon" style="width: 48px;height: 48px" />
-          </el-col>
-          <el-col :span="12" :offset="4">
-            <el-row :gutter="16"><el-col :span="24">充值账户(元)</el-col></el-row>
-            <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">240.0</el-col></el-row>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-col>
-    <el-col :span="12">
-      <el-card class="box-card">
-        <el-row :gutter="24">
-          <el-col :span="8" style="text-align: center">
-            <svg-icon icon-class="give" style="width: 48px;height: 48px" />
-          </el-col>
-          <el-col :span="12" :offset="4">
-            <el-row :gutter="16"><el-col :span="24">赠送账户(元)</el-col></el-row>
-            <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">140.0</el-col></el-row>
-          </el-col>
-        </el-row>
-      </el-card>
-    </el-col>
-  </el-row>
+  <div class="app-container">
+    <!--卡片-->
+    <el-row :gutter="16" class="card-second-top">
+      <el-col :span="12">
+        <el-card class="box-card">
+          <el-row :gutter="24">
+            <el-col :span="8" style="text-align: center">
+              <svg-icon icon-class="recharge" class="svg-icon" style="width: 48px;height: 48px" />
+            </el-col>
+            <el-col :span="12" :offset="4">
+              <el-row :gutter="16"><el-col :span="24">充值账户(元)</el-col></el-row>
+              <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">240.0</el-col></el-row>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+      <el-col :span="12">
+        <el-card class="box-card">
+          <el-row :gutter="24">
+            <el-col :span="8" style="text-align: center">
+              <svg-icon icon-class="give" style="width: 48px;height: 48px" />
+            </el-col>
+            <el-col :span="12" :offset="4">
+              <el-row :gutter="16"><el-col :span="24">赠送账户(元)</el-col></el-row>
+              <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">140.0</el-col></el-row>
+            </el-col>
+          </el-row>
+        </el-card>
+      </el-col>
+    </el-row>
+    <!--账户明细 sta-->
+    <el-card shadow="always" class="card-second-top margin-top-24">
+      <el-tabs :tab-position="left" >
+        <el-tab-pane label="充值记录">
+          <el-table
+            :data="paytableData"
+            style="width: 100%;"
+            :show-overflow-tooltip="true">
+            <el-table-column
+              prop="parkName"
+              label="账户类型"
+              :show-overflow-tooltip="true">
+            </el-table-column>
+            <el-table-column
+              prop="license"
+              label="充值金额"
+              :show-overflow-tooltip="true">
+            </el-table-column>
+            <el-table-column
+              prop="money"
+              label="充值后余额">
+            </el-table-column>
+            <el-table-column
+              prop="inTime"
+              label="充值时间"
+              :show-overflow-tooltip="true">
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            :page-size="10"
+            :pager-count="11"
+            layout="prev, pager, next"
+            :total="total">
+          </el-pagination>
+        </el-tab-pane>
+        <el-tab-pane label="支出记录">
+          <el-table
+            :data="outtableData"
+            style="width: 100%;"
+            :show-overflow-tooltip="true">
+            <el-table-column
+              prop="parkName"
+              label="账户类型"
+              :show-overflow-tooltip="true">
+            </el-table-column>
+            <el-table-column
+              prop="license"
+              label="交易金额"
+              :show-overflow-tooltip="true">
+            </el-table-column>
+            <el-table-column
+              prop="money"
+              label="交易后余额">
+            </el-table-column>
+            <el-table-column
+              prop="outtype"
+              label="交易类型">
+            </el-table-column>
+            <el-table-column
+              prop="inTime"
+              label="交易时间"
+              :show-overflow-tooltip="true">
+            </el-table-column>
+          </el-table>
+          <el-pagination
+            :page-size="10"
+            :pager-count="21"
+            layout="prev, pager, next"
+            :total="total">
+          </el-pagination>
+        </el-tab-pane>
+      </el-tabs>
+
+     <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+        <el-tab-pane label="充值" name="first">
+
+        </el-tab-pane>
+        <el-tab-pane label="支出" name="second">配置管理</el-tab-pane>
+      </el-tabs>-->
+
+    </el-card>
+  </div>
 </template>
  
 <script>
 // import { getList } from '@/api/table'
+import pagination from '@/components/Pagination/index.vue';
+import LoadingBar from 'nprogress' // progress bar
+import 'nprogress/nprogress.css' // progress bar style
  
 export default {
+  components:{
+    'i-pagination': pagination
+  },
   filters: {
  
   },
   data() {
     return {
       list: null,
-      listLoading: true
+      listLoading: true,
+      btnLoading:false,
+      loading:false,
+      paytableData: [
+        {
+          parkName: '个人账户',
+          license: '21',
+          money: '31',
+          inTime: '2019-06-02 09:00:00',
+        },
+        {
+          parkName: '个人账户',
+          license: '10',
+          money: '31',
+          inTime: '2019-06-02 00:23:00',
+        },
+        {
+          parkName: '个人账户',
+          license: '21',
+          money: '31',
+          inTime: '2019-06-02 09:00:00',
+        },
+        {
+          parkName: '个人账户',
+          license: '10',
+          money: '31',
+          inTime: '2019-06-02 00:23:00',
+        },{
+          parkName: '个人账户',
+          license: '10',
+          money: '31',
+          inTime: '2019-06-02 00:23:00',
+        },
+      ],
+      outtableData: [
+        {
+          parkName: '个人账户',
+          license: '21',
+          money: '31',
+          outtype: '停车支付',
+          inTime: '2019-06-02 09:00:00',
+        },
+        {
+          parkName: '个人账户',
+          license: '10',
+          money: '31',
+          outtype: '停车支付',
+          inTime: '2019-06-02 00:23:00',
+        },
+        {
+          parkName: '个人账户',
+          license: '21',
+          money: '31',
+          outtype: '停车支付',
+          inTime: '2019-06-02 09:00:00',
+        },
+        {
+          parkName: '个人账户',
+          license: '10',
+          money: '31',
+          outtype: '停车支付',
+          inTime: '2019-06-02 00:23:00',
+        },
+      ],
+      /** 分页*/
+      total: 32,
+      currentPage: 1,
+      pageSize: 10,
     }
   },
+  computed: {
+  },
   created() {
  
   },
+  mounted:function () {
+  },
   methods: {
+    queryBtn:function () {
+      LoadingBar.start();
+      this.btnLoading=true;
+      this.loading = true;
+
+    },
+    /**获取子组件页码方法*/
+    handleSizeChange: function(pages) {
+      this.currentPage = pages.page;
+      this.pageSize = pages.limit;
+      /** 调用表格数据.*/
+      this.queryBtn();
+    },
  
   }
 }
 </script>
+<style lang="scss" scoped >
+  .serch-wrap{
+    background-color: #FFF;
+    padding: 15px;
+  }
+  .el-card__header{
+    padding:10px 20px!important;;
+  }
+
+</style>