From b36c2fdcf49fb7c8b528c35dd075a21f189cbd58 Mon Sep 17 00:00:00 2001
From: ronger <ronger-x@outlook.com>
Date: Tue, 28 Dec 2021 23:20:30 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=88=91=E7=9A=84=E9=92=B1?=
 =?UTF-8?q?=E5=8C=85-=E4=BA=A4=E6=98=93=E8=AE=B0=E5=BD=95=E5=A2=9E?=
 =?UTF-8?q?=E5=8A=A0=E6=97=B6=E9=97=B4=E6=AE=B5=E6=A3=80=E7=B4=A2=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/common/bank/account/records.vue | 186 +++++++++++++++++++++
 components/widget/portfolios.vue           |   1 -
 pages/wallet.vue                           | 172 +------------------
 store/wallet.js                            |   5 +-
 4 files changed, 197 insertions(+), 167 deletions(-)
 create mode 100644 components/common/bank/account/records.vue

diff --git a/components/common/bank/account/records.vue b/components/common/bank/account/records.vue
new file mode 100644
index 0000000..6772688
--- /dev/null
+++ b/components/common/bank/account/records.vue
@@ -0,0 +1,186 @@
+<template>
+  <el-row>
+    <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="records.records"
+        style="width: 100%">
+        <el-table-column
+          label="流水号"
+          prop="transactionNo"
+          width="200">
+        </el-table-column>
+        <el-table-column
+          label="支付账号">
+          <template slot-scope="scope">
+            <el-popover
+              placement="left"
+              trigger="hover">
+              <el-col style="padding: 5px;">
+                开户银行: {{ scope.row.formBankAccountInfo.bankName }}
+              </el-col>
+              <el-col style="padding: 5px;">
+                银行账号: {{ scope.row.formBankAccountInfo.bankAccount }}
+              </el-col>
+              <el-col style="padding: 5px;">
+                所属用户: {{ scope.row.formBankAccountInfo.accountOwnerName }}
+              </el-col>
+              <el-button slot="reference" type="text">{{ scope.row.formBankAccount }}</el-button>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="收款账号">
+          <template slot-scope="scope">
+            <el-popover
+              placement="right"
+              trigger="hover">
+              <el-col style="padding: 5px;">
+                开户银行: {{ scope.row.toBankAccountInfo.bankName }}
+              </el-col>
+              <el-col style="padding: 5px;">
+                银行账号: {{ scope.row.toBankAccountInfo.bankAccount }}
+              </el-col>
+              <el-col style="padding: 5px;">
+                所属用户: {{ scope.row.toBankAccountInfo.accountOwnerName }}
+              </el-col>
+              <el-button slot="reference" type="text">{{ scope.row.toBankAccount }}</el-button>
+            </el-popover>
+          </template>
+        </el-table-column>
+        <el-table-column
+          label="款项"
+          width="180"
+          prop="funds">
+        </el-table-column>
+        <el-table-column
+          label="交易时间"
+          width="180"
+          prop="transactionTime">
+        </el-table-column>
+        <el-table-column
+          label="金额 (巴旦木)">
+          <template slot-scope="scope">
+            <span v-if="scope.row.formBankAccount === bankAccount" style="color: red;font-weight: bold;">
+              - {{ scope.row.money }}
+            </span>
+            <span v-else style="color: springgreen;font-weight: bold;"> + {{ scope.row.money }}</span>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-col>
+    <el-col>
+      <el-pagination
+        :hide-on-single-page="true"
+        @current-change="currentChange"
+        :current-page="records.pagination.currentPage"
+        :page-sizes="[10, 20, 50, 100]"
+        :page-size="records.pagination.pageSize"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="records.pagination.total">
+      </el-pagination>
+    </el-col>
+  </el-row>
+</template>
+
+<script>
+export default {
+  name: "records",
+  props: {
+    bankAccount: '',
+    records: {
+      type: Object
+    }
+  },
+  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: {
+    currentChange(page) {
+      let _ts = this;
+      let startDate = _ts.searchDate[0]
+      let endDate = _ts.searchDate[1]
+      let search = {
+        page: page,
+        startDate: startDate,
+        endDate: endDate
+      }
+      _ts.$emit('currentChange', search);
+    },
+    searchTransactionRecord(dates) {
+      this.$emit('searchTransactionRecord', dates);
+    }
+  },
+  mounted() {
+    const end = new Date();
+    const start = new Date();
+    start.setMonth(start.getMonth() - 1);
+    let searchDate = [start, end]
+    this.searchDate = searchDate
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/components/widget/portfolios.vue b/components/widget/portfolios.vue
index 677f44b..f6fb7d8 100644
--- a/components/widget/portfolios.vue
+++ b/components/widget/portfolios.vue
@@ -1,6 +1,5 @@
 <template>
   <el-row>
-
     <el-col>
       <el-col>
         <h4>所属作品集</h4>
diff --git a/pages/wallet.vue b/pages/wallet.vue
index b723fc8..4651be1 100644
--- a/pages/wallet.vue
+++ b/pages/wallet.vue
@@ -11,110 +11,18 @@
       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="records"
-        style="width: 100%">
-        <el-table-column
-          label="流水号"
-          prop="transactionNo"
-          width="200">
-        </el-table-column>
-        <el-table-column
-          label="支付账号">
-          <template slot-scope="scope">
-            <el-popover
-              placement="right"
-              trigger="hover">
-              <el-col style="padding: 5px;">
-                开户银行: {{ scope.row.formBankAccountInfo.bankName }}
-              </el-col>
-              <el-col style="padding: 5px;">
-                银行账号: {{ scope.row.formBankAccountInfo.bankAccount }}
-              </el-col>
-              <el-col style="padding: 5px;">
-                所属用户: {{ scope.row.formBankAccountInfo.accountOwnerName }}
-              </el-col>
-              <el-button slot="reference" type="text">{{ scope.row.formBankAccount }}</el-button>
-            </el-popover>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="收款账号">
-          <template slot-scope="scope">
-            <el-popover
-              placement="right"
-              trigger="hover">
-              <el-col style="padding: 5px;">
-                开户银行: {{ scope.row.toBankAccountInfo.bankName }}
-              </el-col>
-              <el-col style="padding: 5px;">
-                银行账号: {{ scope.row.toBankAccountInfo.bankAccount }}
-              </el-col>
-              <el-col style="padding: 5px;">
-                所属用户: {{ scope.row.toBankAccountInfo.accountOwnerName }}
-              </el-col>
-              <el-button slot="reference" type="text">{{ scope.row.toBankAccount }}</el-button>
-            </el-popover>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="款项"
-          width="180"
-          prop="funds">
-        </el-table-column>
-        <el-table-column
-          label="交易时间"
-          width="180"
-          prop="transactionTime">
-        </el-table-column>
-        <el-table-column
-          label="金额 (巴旦木)">
-          <template slot-scope="scope">
-            <span v-if="scope.row.formBankAccount === bankAccount.bankAccount" style="color: red;font-weight: bold;">
-              - {{ scope.row.money }}
-            </span>
-            <span v-else style="color: springgreen;font-weight: bold;"> + {{ scope.row.money }}</span>
-          </template>
-        </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>
+      <records :records="records" :bankAccount="bankAccount.bankAccount" @currentChange="handleCurrentChange" @searchTransactionRecord="searchTransactionRecord"></records>
     </el-col>
   </el-row>
 </template>
 
 <script>
 import {mapState} from 'vuex';
+import Records from "../components/common/bank/account/records";
 
 export default {
   name: "wallet",
+  components: {Records},
   fetch({store, error}) {
     return Promise.all([
       store
@@ -128,80 +36,21 @@ export default {
   computed: {
     ...mapState({
       bankAccount: state => state.wallet.detail.data,
-      records: state => state.wallet.list.data.records,
-      pagination: state => state.wallet.list.data.pagination
+      records: state => state.wallet.list.data
     })
   },
   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) {
+    handleCurrentChange(search) {
       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
+        startDate: search.startDate,
+        endDate: search.endDate,
+        page: search.page
       })
     },
     searchTransactionRecord(dates) {
@@ -217,11 +66,6 @@ export default {
   },
   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>
diff --git a/store/wallet.js b/store/wallet.js
index 030f444..10ecda9 100644
--- a/store/wallet.js
+++ b/store/wallet.js
@@ -58,7 +58,7 @@ export const actions = {
         return Promise.reject(error)
       })
   },
-  // 获取账户详情
+  // 获取账户交易记录
   fetchTransactionRecordList({commit}, params = {}) {
     commit('updateTransactionRecordListFetching', true)
     return this.$axios
@@ -66,7 +66,8 @@ export const actions = {
         params: {
           idUser: params.idUser,
           startDate: params.startDate,
-          endDate: params.endDate
+          endDate: params.endDate,
+          page: params.page || 1
         }
       })
       .then(response => {