✨ 我的钱包-交易记录增加时间段检索功能
This commit is contained in:
ronger
parent
31954866d6
commit
b36c2fdcf4
186
components/common/bank/account/records.vue
Normal file
186
components/common/bank/account/records.vue
Normal file
@ -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>
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<el-row>
|
||||
|
||||
<el-col>
|
||||
<el-col>
|
||||
<h4>所属作品集</h4>
|
||||
|
||||
172
pages/wallet.vue
172
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>
|
||||
|
||||
@ -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 => {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user