瀏覽代碼

Gamebucket search UI

EthnaYeh 7 年之前
父節點
當前提交
fde655db3b
共有 2 個文件被更改,包括 65 次插入3 次删除
  1. 64 2
      src/views/gambleGameBucket/index.vue
  2. 1 1
      src/views/gambleMember/history/index.vue

+ 64 - 2
src/views/gambleGameBucket/index.vue

@@ -1,6 +1,20 @@
1 1
 <template>
2 2
 <div class="app-container calendar-list-container">
3 3
   <div class="app-container" v-show="visible">
4
+    <div class="app-container">
5
+      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="莊家" v-model="listQuery.name">
6
+      </el-input>
7
+      <el-date-picker
8
+        v-model="date"
9
+        type="datetimerange"
10
+        :picker-options="pickerOptions"
11
+        range-separator="至"
12
+        start-placeholder="開始日期"
13
+        end-placeholder="结束日期"
14
+        align="right">
15
+      </el-date-picker>
16
+      <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜尋</el-button>
17
+    </div>
4 18
     <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
5 19
       style="width: 100%">
6 20
       <el-table-column label="ID" align="center">
@@ -21,7 +35,7 @@
21 35
        <el-table-column align="center" label="操作">
22 36
         <template slot-scope="scope">
23 37
           <router-link to="/gambleGameBucket/index/detail">
24
-            <el-button type="primary" size="mini" @click="handlePage(scope.row)">查看</el-button>
38
+            <el-button type="primary" size="mini" @click="handlePage(scope.row)">查 看</el-button>
25 39
           </router-link>
26 40
         </template>
27 41
       </el-table-column>
@@ -41,9 +55,13 @@
41 55
 
42 56
 import { mapGetters, mapActions } from 'vuex'
43 57
 import { fetchList, fetchGameBid } from '@/api/gambleGameBucket'
58
+import waves from '@/directive/waves' // 水波纹指令
44 59
 import moment from 'moment-timezone'
45 60
 
46 61
 export default {
62
+  directives: {
63
+    waves
64
+  },
47 65
   data() {
48 66
     return {
49 67
       list: null,
@@ -65,7 +83,51 @@ export default {
65 83
         name: '',
66 84
         chips: '',
67 85
         depositChips: ''
68
-      }
86
+      },
87
+      pickerOptions: {
88
+        shortcuts: [{
89
+          text: '最近一周',
90
+          onClick(picker) {
91
+            const end = new Date()
92
+            const start = new Date()
93
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
94
+            picker.$emit('pick', [start, end])
95
+          }
96
+        }, {
97
+          text: '最近一個月',
98
+          onClick(picker) {
99
+            const end = new Date()
100
+            const start = new Date()
101
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
102
+            picker.$emit('pick', [start, end])
103
+          }
104
+        }, {
105
+          text: '最近三個月',
106
+          onClick(picker) {
107
+            const end = new Date()
108
+            const start = new Date()
109
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
110
+            picker.$emit('pick', [start, end])
111
+          }
112
+        }, {
113
+          text: '最近半年',
114
+          onClick(picker) {
115
+            const end = new Date()
116
+            const start = new Date()
117
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 180)
118
+            picker.$emit('pick', [start, end])
119
+          }
120
+        }, {
121
+          text: '最近一年',
122
+          onClick(picker) {
123
+            const end = new Date()
124
+            const start = new Date()
125
+            start.setTime(start.getTime() - 3600 * 1000 * 24 * 365)
126
+            picker.$emit('pick', [start, end])
127
+          }
128
+        }]
129
+      },
130
+      date: null
69 131
     }
70 132
   },
71 133
   created() {

+ 1 - 1
src/views/gambleMember/history/index.vue

@@ -2,7 +2,7 @@
2 2
   <div class="app-container">
3 3
     <div class="app-container">
4 4
         <div class="block">
5
-            <span class="demonstration">時間篩選</span>
5
+            <!-- <span class="demonstration">時間篩選</span> -->
6 6
             <el-date-picker
7 7
             v-model="date"
8 8
             type="datetimerange"