|
@@ -0,0 +1,150 @@
|
|
|
|
|
+<template>
|
|
|
|
|
+ <div class="list-view" v-loading="loading">
|
|
|
|
|
+ <page-title> </page-title>
|
|
|
|
|
+ <div class="filters-container">
|
|
|
|
|
+ <el-date-picker
|
|
|
|
|
+ start-placeholder="开始日期"
|
|
|
|
|
+ end-placeholder="结束日期"
|
|
|
|
|
+ :picker-options="pickerOptions"
|
|
|
|
|
+ type="daterange"
|
|
|
|
|
+ class="filter-item"
|
|
|
|
|
+ value-format="yyyy-MM-dd"
|
|
|
|
|
+ v-model="range"
|
|
|
|
|
+ ></el-date-picker>
|
|
|
|
|
+ <el-select v-model="merchantId" class="filter-item" placeholder="请选支付通道">
|
|
|
|
|
+ <el-option v-for="item in merchantList" :value="item.id" :key="item.id" :label="item.name"></el-option>
|
|
|
|
|
+ </el-select>
|
|
|
|
|
+ <el-input v-model="userId" placeholder="用户ID" class="filter-item"></el-input>
|
|
|
|
|
+ <el-button @click="getData" class="filter-item" type="primary">查询</el-button>
|
|
|
|
|
+ </div>
|
|
|
|
|
+ <el-table
|
|
|
|
|
+ :height="tableHeight"
|
|
|
|
|
+ :data="tableData"
|
|
|
|
|
+ row-key="id"
|
|
|
|
|
+ ref="table"
|
|
|
|
|
+ header-row-class-name="table-header-row"
|
|
|
|
|
+ header-cell-class-name="table-header-cell"
|
|
|
|
|
+ row-class-name="table-row"
|
|
|
|
|
+ cell-class-name="table-cell"
|
|
|
|
|
+ >
|
|
|
|
|
+ <el-table-column type="index" label="#" width="60"></el-table-column>
|
|
|
|
|
+ <el-table-column prop="settle_date" label="日期" width="100"> </el-table-column>
|
|
|
|
|
+ <el-table-column prop="card_name" label="姓名" width="100"> </el-table-column>
|
|
|
|
|
+ <el-table-column prop="card_no" label="卡号"> </el-table-column>
|
|
|
|
|
+ <el-table-column prop="settle_amt" label="金额" width="120"> </el-table-column>
|
|
|
|
|
+ <el-table-column prop="settle_stat" label="状态" width="100" align="center">
|
|
|
|
|
+ <template v-slot="{ row }">
|
|
|
|
|
+ <el-tag :type="row.settle_stat === 'succeeded' ? 'success' : 'danger'">{{
|
|
|
|
|
+ row.settle_stat === 'succeeded' ? '成功' : '失败'
|
|
|
|
|
+ }}</el-tag>
|
|
|
|
|
+ </template>
|
|
|
|
|
+ </el-table-column>
|
|
|
|
|
+ <el-table-column prop="settle_message" label="描述" show-overflow-tooltip></el-table-column>
|
|
|
|
|
+ </el-table>
|
|
|
|
|
+ <div class="pagination-wrapper">
|
|
|
|
|
+ <!-- <div class="multiple-mode-wrapper">
|
|
|
|
|
+ <el-button v-if="!multipleMode" @click="toggleMultipleMode(true)">批量编辑</el-button>
|
|
|
|
|
+ <el-button-group v-else>
|
|
|
|
|
+ <el-button @click="operation1">批量操作1</el-button>
|
|
|
|
|
+ <el-button @click="operation2">批量操作2</el-button>
|
|
|
|
|
+ <el-button @click="toggleMultipleMode(false)">取消</el-button>
|
|
|
|
|
+ </el-button-group>
|
|
|
|
|
+ </div> -->
|
|
|
|
|
+ </div>
|
|
|
|
|
+ </div>
|
|
|
|
|
+</template>
|
|
|
|
|
+<script>
|
|
|
|
|
+import { mapState } from 'vuex';
|
|
|
|
|
+import { parse, format, addDays, addMonths } from 'date-fns';
|
|
|
|
|
+export default {
|
|
|
|
|
+ data() {
|
|
|
|
|
+ return {
|
|
|
|
|
+ tableHeight: 200,
|
|
|
|
|
+ loading: false,
|
|
|
|
|
+ tableData: [],
|
|
|
|
|
+ range: null,
|
|
|
|
|
+ userId: null,
|
|
|
|
|
+ merchantList: [],
|
|
|
|
|
+ merchantId: null,
|
|
|
|
|
+ userId: null,
|
|
|
|
|
+ pickerOptions: {
|
|
|
|
|
+ shortcuts: [
|
|
|
|
|
+ {
|
|
|
|
|
+ text: '今天',
|
|
|
|
|
+ onClick(picker) {
|
|
|
|
|
+ picker.$emit('pick', [new Date(), new Date()]);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ text: '昨天',
|
|
|
|
|
+ onClick(picker) {
|
|
|
|
|
+ picker.$emit('pick', [addDays(new Date(), -1), new Date()]);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ text: '最近一周',
|
|
|
|
|
+ onClick(picker) {
|
|
|
|
|
+ picker.$emit('pick', [addDays(new Date(), -7), new Date()]);
|
|
|
|
|
+ }
|
|
|
|
|
+ },
|
|
|
|
|
+ {
|
|
|
|
|
+ text: '最近一月',
|
|
|
|
|
+ onClick(picker) {
|
|
|
|
|
+ picker.$emit('pick', [addMonths(new Date(), -1), new Date()]);
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+ ]
|
|
|
|
|
+ }
|
|
|
|
|
+ };
|
|
|
|
|
+ },
|
|
|
|
|
+ computed: {},
|
|
|
|
|
+ created() {
|
|
|
|
|
+ this.$http.post('/adapayMerchant/all', { size: 1000 }, { body: 'json' }).then(res => {
|
|
|
|
|
+ this.merchantList = res.content;
|
|
|
|
|
+ });
|
|
|
|
|
+ this.range = [format(addDays(new Date(), -7), 'yyyy-MM-dd'), format(new Date(), 'yyyy-MM-dd')];
|
|
|
|
|
+ },
|
|
|
|
|
+ mounted() {
|
|
|
|
|
+ this.tableHeight = document.querySelector('.el-table').getBoundingClientRect().height;
|
|
|
|
|
+ },
|
|
|
|
|
+ methods: {
|
|
|
|
|
+ getData() {
|
|
|
|
|
+ if (!(this.range && this.range.length == 2)) {
|
|
|
|
|
+ this.$message.error('请选择日期');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!this.merchantId) {
|
|
|
|
|
+ this.$message.error('请选支付通道');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ if (!this.userId) {
|
|
|
|
|
+ this.$message.error('请输入用户ID');
|
|
|
|
|
+ return;
|
|
|
|
|
+ }
|
|
|
|
|
+ this.loading = true;
|
|
|
|
|
+ this.$http
|
|
|
|
|
+ .post('/adapayMerchant/querySettle', {
|
|
|
|
|
+ start: this.range[0],
|
|
|
|
|
+ end: this.range[1],
|
|
|
|
|
+ id: this.merchantId,
|
|
|
|
|
+ userId: this.userId
|
|
|
|
|
+ })
|
|
|
|
|
+ .then(res => {
|
|
|
|
|
+ this.loading = false;
|
|
|
|
|
+ console.log(res);
|
|
|
|
|
+ if (res.status === 'succeeded') {
|
|
|
|
|
+ this.tableData = (res.settle_details || []).filter(i => i.settle_type !== 'B');
|
|
|
|
|
+ } else {
|
|
|
|
|
+ this.$message.error(res.error_msg);
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .catch(e => {
|
|
|
|
|
+ this.loading = false;
|
|
|
|
|
+ this.$message.error(e.error || '查询失败');
|
|
|
|
|
+ });
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+};
|
|
|
|
|
+</script>
|
|
|
|
|
+<style lang="less" scoped>
|
|
|
|
|
+</style>
|