BJ_web_developers / HSpark

Commit e4acf226b47f0ebf0d6dfeef910363f016501806

Authored by Andy
1 parent 613d2a9c

add 我的钱包前端页面 table

Inline Side-by-side
Showing 7 changed files with 411 additions and 33 deletions
package.json
  View file @e4acf22
@@ -19,7 +19,7 @@ @@ -19,7 +19,7 @@
19 "element-ui": "2.7.2", 19 "element-ui": "2.7.2",
20 "js-cookie": "2.2.0", 20 "js-cookie": "2.2.0",
21 "normalize.css": "7.0.0", 21 "normalize.css": "7.0.0",
22 - "nprogress": "0.2.0", 22 + "nprogress": "^0.2.0",
23 "path-to-regexp": "2.4.0", 23 "path-to-regexp": "2.4.0",
24 "vue": "2.6.10", 24 "vue": "2.6.10",
25 "vue-router": "3.0.6", 25 "vue-router": "3.0.6",
src/components/Breadcrumb/index.vue
  View file @e4acf22
@@ -33,7 +33,7 @@ export default { @@ -33,7 +33,7 @@ export default {
33 const first = matched[0] 33 const first = matched[0]
34 34
35 if (!this.isDashboard(first)) { 35 if (!this.isDashboard(first)) {
36 - matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched) 36 + matched = [{ path: '/dashboard', meta: { title: '首页' }}].concat(matched)
37 } 37 }
38 38
39 this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false) 39 this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)
@@ -43,7 +43,7 @@ export default { @@ -43,7 +43,7 @@ export default {
43 if (!name) { 43 if (!name) {
44 return false 44 return false
45 } 45 }
46 - return name.trim().toLocaleLowerCase() === 'Dashboard'.toLocaleLowerCase() 46 + return name.trim().toLocaleLowerCase() === '首页'.toLocaleLowerCase()
47 }, 47 },
48 pathCompile(path) { 48 pathCompile(path) {
49 // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561 49 // To solve this problem https://github.com/PanJiaChen/vue-element-admin/issues/561
src/components/Pagination/index.vue 0 → 100644
  View file @e4acf22
  1 +<template>
  2 + <div :class="{'hidden':hidden}" class="pagination-container">
  3 + <el-pagination
  4 + :background="background"
  5 + :current-page.sync="currentPage"
  6 + :page-size.sync="limit"
  7 + :layout="layout"
  8 + :page-sizes="pageSizes"
  9 + :total="total"
  10 + v-bind="$attrs"
  11 + @size-change="handleSizeChange"
  12 + @current-change="handleCurrentChange"
  13 + />
  14 + </div>
  15 +</template>
  16 +
  17 +<script>
  18 +import { scrollTo } from '@/utils/scroll-to'
  19 +
  20 +export default {
  21 + name: 'Pagination',
  22 + props: {
  23 + total: {
  24 + required: true,
  25 + type: Number
  26 + },
  27 + page: {
  28 + type: Number,
  29 + default: 1
  30 + },
  31 + limit: {
  32 + type: Number,
  33 + default: 20
  34 + },
  35 + pageSizes: {
  36 + type: Array,
  37 + default() {
  38 + return [10, 20, 30, 50]
  39 + }
  40 + },
  41 + layout: {
  42 + type: String,
  43 + default: 'total, sizes, prev, pager, next, jumper'
  44 + },
  45 + background: {
  46 + type: Boolean,
  47 + default: true
  48 + },
  49 + autoScroll: {
  50 + type: Boolean,
  51 + default: true
  52 + },
  53 + hidden: {
  54 + type: Boolean,
  55 + default: false
  56 + }
  57 + },
  58 + computed: {
  59 + currentPage: {
  60 + get() {
  61 + return this.page
  62 + },
  63 + set(val) {
  64 + this.$emit('update:page', val)
  65 + }
  66 + },
  67 + pageSize: {
  68 + get() {
  69 + return this.limit
  70 + },
  71 + set(val) {
  72 + this.$emit('update:limit', val)
  73 + }
  74 + }
  75 + },
  76 + methods: {
  77 + handleSizeChange(val) {
  78 + this.$emit('pagination', { page: this.currentPage, limit: val })
  79 + if (this.autoScroll) {
  80 + scrollTo(0, 800)
  81 + }
  82 + },
  83 + handleCurrentChange(val) {
  84 + this.$emit('pagination', { page: val, limit: this.pageSize })
  85 + if (this.autoScroll) {
  86 + scrollTo(0, 800)
  87 + }
  88 + }
  89 + }
  90 +}
  91 +</script>
  92 +
  93 +<style scoped>
  94 + .pagination-container {
  95 + background: #fff;
  96 + /**margin-top: 16px;**/
  97 + margin-bottom: 16px;
  98 + float: right;
  99 + }
  100 + .pagination-container.hidden {
  101 + display: none;
  102 + }
  103 +</style>
src/styles/element-ui.scss
  View file @e4acf22
@@ -42,3 +42,34 @@ @@ -42,3 +42,34 @@
42 display: block 42 display: block
43 } 43 }
44 } 44 }
  45 +// fix date-picker ui bug in filter-item
  46 +.el-range-editor.el-input__inner {
  47 + display: inline-flex !important;
  48 +}
  49 +
  50 +.el-table thead {
  51 + color: #515a6e !important;
  52 + font-weight: 500;
  53 +}
  54 +.el-table th{
  55 + white-space: nowrap !important;
  56 + overflow: hidden !important;
  57 + background-color: #f8f8f9 !important;
  58 +}
  59 +.el-table{
  60 + color: #515A6E !important;
  61 +}
  62 +.el-table thead{
  63 + color: #1F2D3D !important;
  64 +}
  65 +
  66 +.el-form-item__label{
  67 + font-size: 12px !important;
  68 + color: #515a6e !important;
  69 + vertical-align:middle;
  70 +}
  71 +label{
  72 + font-weight:500 !important;
  73 + font-size: 14px !important;
  74 + cursor: default !important;
  75 +}
src/styles/index.scss
  View file @e4acf22
@@ -104,3 +104,6 @@ p{ @@ -104,3 +104,6 @@ p{
104 .font-size24{ 104 .font-size24{
105 font-size: 24px; 105 font-size: 24px;
106 } 106 }
  107 +.margin-top-24{
  108 + margin-top: 24px;
  109 +}
src/utils/scroll-to.js 0 → 100644
  View file @e4acf22
  1 +Math.easeInOutQuad = function(t, b, c, d) {
  2 + t /= d / 2
  3 + if (t < 1) {
  4 + return c / 2 * t * t + b
  5 + }
  6 + t--
  7 + return -c / 2 * (t * (t - 2) - 1) + b
  8 +}
  9 +
  10 +// requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
  11 +var requestAnimFrame = (function() {
  12 + return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
  13 +})()
  14 +
  15 +/**
  16 + * Because it's so fucking difficult to detect the scrolling element, just move them all
  17 + * @param {number} amount
  18 + */
  19 +function move(amount) {
  20 + document.documentElement.scrollTop = amount
  21 + document.body.parentNode.scrollTop = amount
  22 + document.body.scrollTop = amount
  23 +}
  24 +
  25 +function position() {
  26 + return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
  27 +}
  28 +
  29 +/**
  30 + * @param {number} to
  31 + * @param {number} duration
  32 + * @param {Function} callback
  33 + */
  34 +export function scrollTo(to, duration, callback) {
  35 + const start = position()
  36 + const change = to - start
  37 + const increment = 20
  38 + let currentTime = 0
  39 + duration = (typeof (duration) === 'undefined') ? 500 : duration
  40 + var animateScroll = function() {
  41 + // increment the time
  42 + currentTime += increment
  43 + // find the value with the quadratic in-out easing function
  44 + var val = Math.easeInOutQuad(currentTime, start, change, duration)
  45 + // move the document.body
  46 + move(val)
  47 + // do the animation unless its over
  48 + if (currentTime < duration) {
  49 + requestAnimFrame(animateScroll)
  50 + } else {
  51 + if (callback && typeof (callback) === 'function') {
  52 + // the animation is done so lets callback
  53 + callback()
  54 + }
  55 + }
  56 + }
  57 + animateScroll()
  58 +}
src/views/account/index.vue
  View file @e4acf22
1 <template> 1 <template>
2 - <!--汇总卡片-->  
3 - <el-row :gutter="16" class="card-second-top">  
4 - <el-col :span="12">  
5 - <el-card class="box-card">  
6 - <el-row :gutter="24">  
7 - <el-col :span="8" style="text-align: center">  
8 - <svg-icon icon-class="recharge" class="svg-icon" style="width: 48px;height: 48px" />  
9 - </el-col>  
10 - <el-col :span="12" :offset="4">  
11 - <el-row :gutter="16"><el-col :span="24">充值账户(元)</el-col></el-row>  
12 - <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">240.0</el-col></el-row>  
13 - </el-col>  
14 - </el-row>  
15 - </el-card>  
16 - </el-col>  
17 - <el-col :span="12">  
18 - <el-card class="box-card">  
19 - <el-row :gutter="24">  
20 - <el-col :span="8" style="text-align: center">  
21 - <svg-icon icon-class="give" style="width: 48px;height: 48px" />  
22 - </el-col>  
23 - <el-col :span="12" :offset="4">  
24 - <el-row :gutter="16"><el-col :span="24">赠送账户(元)</el-col></el-row>  
25 - <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">140.0</el-col></el-row>  
26 - </el-col>  
27 - </el-row>  
28 - </el-card>  
29 - </el-col>  
30 - </el-row> 2 + <div class="app-container">
  3 + <!--卡片-->
  4 + <el-row :gutter="16" class="card-second-top">
  5 + <el-col :span="12">
  6 + <el-card class="box-card">
  7 + <el-row :gutter="24">
  8 + <el-col :span="8" style="text-align: center">
  9 + <svg-icon icon-class="recharge" class="svg-icon" style="width: 48px;height: 48px" />
  10 + </el-col>
  11 + <el-col :span="12" :offset="4">
  12 + <el-row :gutter="16"><el-col :span="24">充值账户(元)</el-col></el-row>
  13 + <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">240.0</el-col></el-row>
  14 + </el-col>
  15 + </el-row>
  16 + </el-card>
  17 + </el-col>
  18 + <el-col :span="12">
  19 + <el-card class="box-card">
  20 + <el-row :gutter="24">
  21 + <el-col :span="8" style="text-align: center">
  22 + <svg-icon icon-class="give" style="width: 48px;height: 48px" />
  23 + </el-col>
  24 + <el-col :span="12" :offset="4">
  25 + <el-row :gutter="16"><el-col :span="24">赠送账户(元)</el-col></el-row>
  26 + <el-row :gutter="16" class="common-color font-size24" style="margin-top: 4px"><el-col :span="24">140.0</el-col></el-row>
  27 + </el-col>
  28 + </el-row>
  29 + </el-card>
  30 + </el-col>
  31 + </el-row>
  32 + <!--账户明细 sta-->
  33 + <el-card shadow="always" class="card-second-top margin-top-24">
  34 + <el-tabs :tab-position="left" >
  35 + <el-tab-pane label="充值记录">
  36 + <el-table
  37 + :data="paytableData"
  38 + style="width: 100%;"
  39 + :show-overflow-tooltip="true">
  40 + <el-table-column
  41 + prop="parkName"
  42 + label="账户类型"
  43 + :show-overflow-tooltip="true">
  44 + </el-table-column>
  45 + <el-table-column
  46 + prop="license"
  47 + label="充值金额"
  48 + :show-overflow-tooltip="true">
  49 + </el-table-column>
  50 + <el-table-column
  51 + prop="money"
  52 + label="充值后余额">
  53 + </el-table-column>
  54 + <el-table-column
  55 + prop="inTime"
  56 + label="充值时间"
  57 + :show-overflow-tooltip="true">
  58 + </el-table-column>
  59 + </el-table>
  60 + <el-pagination
  61 + :page-size="10"
  62 + :pager-count="11"
  63 + layout="prev, pager, next"
  64 + :total="total">
  65 + </el-pagination>
  66 + </el-tab-pane>
  67 + <el-tab-pane label="支出记录">
  68 + <el-table
  69 + :data="outtableData"
  70 + style="width: 100%;"
  71 + :show-overflow-tooltip="true">
  72 + <el-table-column
  73 + prop="parkName"
  74 + label="账户类型"
  75 + :show-overflow-tooltip="true">
  76 + </el-table-column>
  77 + <el-table-column
  78 + prop="license"
  79 + label="交易金额"
  80 + :show-overflow-tooltip="true">
  81 + </el-table-column>
  82 + <el-table-column
  83 + prop="money"
  84 + label="交易后余额">
  85 + </el-table-column>
  86 + <el-table-column
  87 + prop="outtype"
  88 + label="交易类型">
  89 + </el-table-column>
  90 + <el-table-column
  91 + prop="inTime"
  92 + label="交易时间"
  93 + :show-overflow-tooltip="true">
  94 + </el-table-column>
  95 + </el-table>
  96 + <el-pagination
  97 + :page-size="10"
  98 + :pager-count="21"
  99 + layout="prev, pager, next"
  100 + :total="total">
  101 + </el-pagination>
  102 + </el-tab-pane>
  103 + </el-tabs>
  104 +
  105 + <!-- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  106 + <el-tab-pane label="充值" name="first">
  107 +
  108 + </el-tab-pane>
  109 + <el-tab-pane label="支出" name="second">配置管理</el-tab-pane>
  110 + </el-tabs>-->
  111 +
  112 + </el-card>
  113 + </div>
31 </template> 114 </template>
32 115
33 <script> 116 <script>
34 // import { getList } from '@/api/table' 117 // import { getList } from '@/api/table'
  118 +import pagination from '@/components/Pagination/index.vue';
  119 +import LoadingBar from 'nprogress' // progress bar
  120 +import 'nprogress/nprogress.css' // progress bar style
35 121
36 export default { 122 export default {
  123 + components:{
  124 + 'i-pagination': pagination
  125 + },
37 filters: { 126 filters: {
38 127
39 }, 128 },
40 data() { 129 data() {
41 return { 130 return {
42 list: null, 131 list: null,
43 - listLoading: true 132 + listLoading: true,
  133 + btnLoading:false,
  134 + loading:false,
  135 + paytableData: [
  136 + {
  137 + parkName: '个人账户',
  138 + license: '21',
  139 + money: '31',
  140 + inTime: '2019-06-02 09:00:00',
  141 + },
  142 + {
  143 + parkName: '个人账户',
  144 + license: '10',
  145 + money: '31',
  146 + inTime: '2019-06-02 00:23:00',
  147 + },
  148 + {
  149 + parkName: '个人账户',
  150 + license: '21',
  151 + money: '31',
  152 + inTime: '2019-06-02 09:00:00',
  153 + },
  154 + {
  155 + parkName: '个人账户',
  156 + license: '10',
  157 + money: '31',
  158 + inTime: '2019-06-02 00:23:00',
  159 + },{
  160 + parkName: '个人账户',
  161 + license: '10',
  162 + money: '31',
  163 + inTime: '2019-06-02 00:23:00',
  164 + },
  165 + ],
  166 + outtableData: [
  167 + {
  168 + parkName: '个人账户',
  169 + license: '21',
  170 + money: '31',
  171 + outtype: '停车支付',
  172 + inTime: '2019-06-02 09:00:00',
  173 + },
  174 + {
  175 + parkName: '个人账户',
  176 + license: '10',
  177 + money: '31',
  178 + outtype: '停车支付',
  179 + inTime: '2019-06-02 00:23:00',
  180 + },
  181 + {
  182 + parkName: '个人账户',
  183 + license: '21',
  184 + money: '31',
  185 + outtype: '停车支付',
  186 + inTime: '2019-06-02 09:00:00',
  187 + },
  188 + {
  189 + parkName: '个人账户',
  190 + license: '10',
  191 + money: '31',
  192 + outtype: '停车支付',
  193 + inTime: '2019-06-02 00:23:00',
  194 + },
  195 + ],
  196 + /** 分页*/
  197 + total: 32,
  198 + currentPage: 1,
  199 + pageSize: 10,
44 } 200 }
45 }, 201 },
  202 + computed: {
  203 + },
46 created() { 204 created() {
47 205
48 }, 206 },
  207 + mounted:function () {
  208 + },
49 methods: { 209 methods: {
  210 + queryBtn:function () {
  211 + LoadingBar.start();
  212 + this.btnLoading=true;
  213 + this.loading = true;
  214 +
  215 + },
  216 + /**获取子组件页码方法*/
  217 + handleSizeChange: function(pages) {
  218 + this.currentPage = pages.page;
  219 + this.pageSize = pages.limit;
  220 + /** 调用表格数据.*/
  221 + this.queryBtn();
  222 + },
50 223
51 } 224 }
52 } 225 }
53 </script> 226 </script>
  227 +<style lang="scss" scoped >
  228 + .serch-wrap{
  229 + background-color: #FFF;
  230 + padding: 15px;
  231 + }
  232 + .el-card__header{
  233 + padding:10px 20px!important;;
  234 + }
  235 +
  236 +</style>