✨ 我的钱包-交易记录增加时间段检索功能

pages/wallet.vue

@@ -7,14 +7,29 @@
       <span style="font-size: 24px;"> 账号:</span> <span style="color: red;">{{ bankAccount.bankAccount }}</span>
     </el-col>
     <el-col class="bank-account-item">
-      <span style="font-size: 24px;"> 余额:</span> <span style="color: red;">{{ bankAccount.accountBalance }}</span> <span style="font-size: 24px;">巴旦木</span>
+      <span style="font-size: 24px;"> 余额:</span> <span style="color: red;">{{ bankAccount.accountBalance }}</span> <span
+      style="font-size: 24px;">巴旦木</span>
     </el-col>
     <el-col>
       <h1>交易记录</h1>
     </el-col>
+    <el-col style="margin-bottom: 10px;">
+      <el-date-picker
+        v-model="searchDate"
+        type="daterange"
+        align="right"
+        unlink-panels
+        value-format="yyyy-MM-dd"
+        range-separator="至"
+        start-placeholder="开始月份"
+        end-placeholder="结束月份"
+        :picker-options="pickerOptions"
+        @change="searchTransactionRecord">
+      </el-date-picker>
+    </el-col>
     <el-col>
       <el-table
-        :data="transactionRecords"
+        :data="records"
         style="width: 100%">
         <el-table-column
           label="流水号"
@@ -80,6 +95,18 @@
         </el-table-column>
       </el-table>
     </el-col>
+    <el-col>
+      <el-pagination
+        :hide-on-single-page="true"
+        @size-change="handleSizeChange"
+        @current-change="handleCurrentChange"
+        :current-page="pagination.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="pagination.total">
+      </el-pagination>
+    </el-col>
   </el-row>
 </template>
 
@@ -92,21 +119,109 @@ export default {
     return Promise.all([
       store
         .dispatch('wallet/fetchDetail', {idUser: store.state.oauth.idUser})
+        .catch(err => error({statusCode: 404})),
+      store
+        .dispatch('wallet/fetchTransactionRecordList', {idUser: store.state.oauth.idUser})
         .catch(err => error({statusCode: 404}))
     ])
   },
   computed: {
     ...mapState({
       bankAccount: state => state.wallet.detail.data,
-      transactionRecords: state => state.wallet.detail.data.transactionRecords,
+      records: state => state.wallet.list.data.records,
+      pagination: state => state.wallet.list.data.pagination
     })
   },
   data() {
     return {
+      pickerOptions: {
+        shortcuts: [{
+          text: '本月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setDate(1);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近 30 天',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setMonth(start.getMonth() - 1);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近三个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setMonth(start.getMonth() - 3);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '最近六个月',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date();
+            start.setMonth(start.getMonth() - 6);
+            picker.$emit('pick', [start, end]);
+          }
+        }, {
+          text: '今年至今',
+          onClick(picker) {
+            const end = new Date();
+            const start = new Date(new Date().getFullYear(), 0);
+            picker.$emit('pick', [start, end]);
+          }
+        }]
+      },
+      searchDate: []
+    }
+  },
+  methods: {
+    handleSizeChange(pageSize) {
+      let _ts = this;
+      let startDate = _ts.searchDate[0]
+      let endDate = _ts.searchDate[1]
+      _ts.$store.dispatch('wallet/fetchTransactionRecordList', {
+        idUser: _ts.$store.state.oauth.idUser,
+        startDate: startDate,
+        endDate: endDate,
+        page: _ts.pagination.currentPage,
+        rows: pageSize
+      })
+    },
+    handleCurrentChange(page) {
+      let _ts = this;
+      let startDate = _ts.searchDate[0]
+      let endDate = _ts.searchDate[1]
+      _ts.$store.dispatch('wallet/fetchTransactionRecordList', {
+        idUser: _ts.$store.state.oauth.idUser,
+        startDate: startDate,
+        endDate: endDate,
+        page: page,
+        rows: _ts.pagination.pageSize
+      })
+    },
+    searchTransactionRecord(dates) {
+      let _ts = this
+      let startDate = dates[0]
+      let endDate = dates[1]
+      _ts.$store.dispatch('wallet/fetchTransactionRecordList', {
+        idUser: _ts.$store.state.oauth.idUser,
+        startDate: startDate,
+        endDate: endDate
+      })
     }
   },
   mounted() {
     this.$store.commit('setActiveMenu', 'wallet');
+    const end = new Date();
+    const start = new Date();
+    start.setMonth(start.getMonth() - 1);
+    let searchDate = [start, end]
+    this.searchDate = searchDate
   }
 }
 </script>

store/wallet.js

@@ -22,10 +22,10 @@ export const state = () => {
 
 export const mutations = {
   // 消费记录列表
-  updateListFetching(state, action) {
+  updateTransactionRecordListFetching(state, action) {
     state.list.fetching = action
   },
-  updateListData(state, action) {
+  updateTransactionRecordListData(state, action) {
     state.list.data = action
   },
   // 账户详情
@@ -41,13 +41,8 @@ export const actions = {
   // 获取账户详情
   fetchDetail({commit}, params = {}) {
     commit('updateDetailFetching', true)
-    console.log(params)
     return this.$axios
-      .$get(`${WALLET_API_PATH}/${params.idUser}`, {
+      .$get(`${WALLET_API_PATH}/${params.idUser}`)
-        params: {
-          type: 3
-        }
-      })
       .then(response => {
         return new Promise(resolve => {
           commit('updateDetailData', response)
@@ -62,5 +57,31 @@ export const actions = {
         commit('updateDetailFetching', false)
         return Promise.reject(error)
       })
+  },
+  // 获取账户详情
+  fetchTransactionRecordList({commit}, params = {}) {
+    commit('updateTransactionRecordListFetching', true)
+    return this.$axios
+      .$get(`${WALLET_API_PATH}/transaction-records`, {
+        params: {
+          idUser: params.idUser,
+          startDate: params.startDate,
+          endDate: params.endDate
+        }
+      })
+      .then(response => {
+        return new Promise(resolve => {
+          commit('updateTransactionRecordListData', response)
+          commit('updateTransactionRecordListFetching', false)
+          resolve(response)
+          // delay(() => {
+          //   resolve(response)
+          // })
+        })
+      })
+      .catch(error => {
+        commit('updateTransactionRecordListFetching', false)
+        return Promise.reject(error)
+      })
   }
 }