✨ 我的钱包-交易记录增加时间段检索功能
This commit is contained in:
ronger
parent
b3ff5e1a0c
commit
31954866d6
145
pages/wallet.vue
145
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="流水号"
|
||||
@ -27,15 +42,15 @@
|
||||
<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-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>
|
||||
@ -47,13 +62,13 @@
|
||||
placement="right"
|
||||
trigger="hover">
|
||||
<el-col style="padding: 5px;">
|
||||
开户银行: {{scope.row.toBankAccountInfo.bankName}}
|
||||
开户银行: {{ scope.row.toBankAccountInfo.bankName }}
|
||||
</el-col>
|
||||
<el-col style="padding: 5px;">
|
||||
银行账号: {{scope.row.toBankAccountInfo.bankAccount}}
|
||||
银行账号: {{ scope.row.toBankAccountInfo.bankAccount }}
|
||||
</el-col>
|
||||
<el-col style="padding: 5px;">
|
||||
所属用户: {{scope.row.toBankAccountInfo.accountOwnerName}}
|
||||
所属用户: {{ scope.row.toBankAccountInfo.accountOwnerName }}
|
||||
</el-col>
|
||||
<el-button slot="reference" type="text">{{ scope.row.toBankAccount }}</el-button>
|
||||
</el-popover>
|
||||
@ -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>
|
||||
|
||||
@ -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
|
||||
},
|
||||
// 账户详情
|
||||
@ -39,15 +39,10 @@ export const mutations = {
|
||||
|
||||
export const actions = {
|
||||
// 获取账户详情
|
||||
fetchDetail({ commit }, params = {}) {
|
||||
fetchDetail({commit}, params = {}) {
|
||||
commit('updateDetailFetching', true)
|
||||
console.log(params)
|
||||
return this.$axios
|
||||
.$get(`${WALLET_API_PATH}/${params.idUser}`, {
|
||||
params: {
|
||||
type: 3
|
||||
}
|
||||
})
|
||||
.$get(`${WALLET_API_PATH}/${params.idUser}`)
|
||||
.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)
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user