|
|
|
<template>
|
|
|
|
<div class="stat-shop">
|
|
|
|
<layout-body>
|
|
|
|
<p slot="title">服务费账单</p>
|
|
|
|
<layout-filter class="box-filter" :inline="true" :col="1">
|
|
|
|
<filter-item :label="filters.dateRange.label" >
|
|
|
|
<Date-picker type="datetimerange"
|
|
|
|
:placeholder="filters.dateRange.label"
|
|
|
|
@on-change="dateRange"
|
|
|
|
v-model="filters.dateRange.model"
|
|
|
|
format="yyyy-MM-dd">
|
|
|
|
</Date-picker>
|
|
|
|
<div class="quick">
|
|
|
|
<a href="javascript:;" @click="() => {changeLimit(0)}">今日</a>
|
|
|
|
<a href="javascript:;" @click="() => {changeLimit(1)}">昨天</a>
|
|
|
|
<a href="javascript:;" @click="() => {changeLimit(7)}">近7天</a>
|
|
|
|
<a href="javascript:;" @click="() => {changeLimit(30)}">近30天</a>
|
|
|
|
</div>
|
|
|
|
</filter-item>
|
|
|
|
</layout-filter>
|
|
|
|
</layout-body>
|
|
|
|
</div>
|
|
|
|
<div class="stat-shop">
|
|
|
|
<layout-body>
|
|
|
|
<p slot="title">服务费账单</p>
|
|
|
|
<layout-filter class="box-filter" :inline="true" :col="1">
|
|
|
|
<filter-item :label="filters.dateRange.label">
|
|
|
|
<Date-picker type="datetimerange"
|
|
|
|
:placeholder="filters.dateRange.label"
|
|
|
|
@on-change="dateRange"
|
|
|
|
v-model="filters.dateRange.model"
|
|
|
|
format="yyyy-MM-dd">
|
|
|
|
</Date-picker>
|
|
|
|
<div class="quick">
|
|
|
|
<a href="javascript:;" @click="() => {changeLimit(0)}">今日</a>
|
|
|
|
<a href="javascript:;" @click="() => {changeLimit(1)}">昨天</a>
|
|
|
|
<a href="javascript:;" @click="() => {changeLimit(7)}">近7天</a>
|
|
|
|
<a href="javascript:;" @click="() => {changeLimit(30)}">近30天</a>
|
|
|
|
</div>
|
|
|
|
</filter-item>
|
|
|
|
</layout-filter>
|
|
|
|
</layout-body>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import moment from "moment";
|
|
|
|
import {ServiceList} from './store';
|
|
|
|
import FinanceService from 'services/finance/finance-service';
|
|
|
|
import moment from "moment";
|
|
|
|
import {ServiceList} from './store';
|
|
|
|
import FinanceService from 'services/finance/finance-service';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data(){
|
|
|
|
return ServiceList.call(this);
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return ServiceList.call(this);
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.financeService = new FinanceService();
|
|
|
|
this.financeService = new FinanceService();
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
this.loadData();
|
|
|
|
this.loadData();
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
date() {
|
|
|
|
this.loadData();
|
|
|
|
},
|
|
|
|
day(newDay) {
|
|
|
|
let curDay = moment().format('YYYY-MM-DD');
|
|
|
|
if (newDay === this.beginTime || !newDay) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.dateRange = newDay !== this.curDay ? [newDay, curDay] : [newDay, newDay];
|
|
|
|
},
|
|
|
|
dateRange(newDate) {
|
|
|
|
this.beginTime = moment(Array.isArray(newDate) ? newDate[0] : newDate).format('YYYY-MM-DD');
|
|
|
|
this.endTime = moment(Array.isArray(newDate) ? newDate[1] : newDate).format('YYYY-MM-DD');
|
|
|
|
this.day = this.beginTime === this.endTime === this.today ? '' : this.beginTime;
|
|
|
|
this.pageData.current = 1;
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
date() {
|
|
|
|
this.loadData();
|
|
|
|
},
|
|
|
|
day(newDay) {
|
|
|
|
let curDay = moment().format('YYYY-MM-DD');
|
|
|
|
if (newDay === this.beginTime || !newDay) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.dateRange = newDay !== this.curDay ? [newDay, curDay] : [newDay, newDay];
|
|
|
|
},
|
|
|
|
dateRange(newDate) {
|
|
|
|
this.beginTime = moment(Array.isArray(newDate) ? newDate[0] : newDate).format('YYYY-MM-DD');
|
|
|
|
this.endTime = moment(Array.isArray(newDate) ? newDate[1] : newDate).format('YYYY-MM-DD');
|
|
|
|
this.day = this.beginTime === this.endTime === this.today ? '' : this.beginTime;
|
|
|
|
this.pageData.current = 1;
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
loadData() {
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
changeLimit(limit) {
|
|
|
|
if (limit > 1) {
|
|
|
|
this.dateRange = [this[`day${limit}`], this.today];
|
|
|
|
} else if (limit === 1) {
|
|
|
|
this.dateRange = [this.yesterday, this.today];
|
|
|
|
} else {
|
|
|
|
this.dateRange = [this.today, this.today];
|
|
|
|
}
|
|
|
|
this.pageData.current = 1;
|
|
|
|
},
|
|
|
|
pageChange() {
|
|
|
|
this.pageData.current = page;
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
filtersParams() {
|
|
|
|
let params = {};
|
|
|
|
let fts = this.filters;
|
|
|
|
let withdrawStatus = fts.withdrawStatus.model,
|
|
|
|
statementSn = fts.statementSn.model === '' || fts.brand.model === null ?
|
|
|
|
null : fts.statementSn.model;
|
|
|
|
let pageNo = this.pageData.current;
|
|
|
|
let pageSize = this.pageData.pageSize;
|
|
|
|
|
|
|
|
if (this.filters.withdrawStatus.model) {
|
|
|
|
if (this.isNumber(this.filters.withdrawStatus.mode)) {
|
|
|
|
params.withdrawStatus = this.filters.withdrawStatus.model;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (this.filters.statementSn.model) {
|
|
|
|
if (this.isString(this.filters.statementSn.mode)) {
|
|
|
|
params.statementSn = this.filters.statementSn.model;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
params.pageSize = this.pageData.pageSize;
|
|
|
|
params.pageNo = this.pageData.current;
|
|
|
|
loadData() {
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
changeLimit(limit) {
|
|
|
|
if (limit > 1) {
|
|
|
|
this.dateRange = [this[`day${limit}`], this.today];
|
|
|
|
} else if (limit === 1) {
|
|
|
|
this.dateRange = [this.yesterday, this.today];
|
|
|
|
} else {
|
|
|
|
this.dateRange = [this.today, this.today];
|
|
|
|
}
|
|
|
|
this.pageData.current = 1;
|
|
|
|
},
|
|
|
|
pageChange() {
|
|
|
|
this.pageData.current = page;
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
filtersParams() {
|
|
|
|
let params = {};
|
|
|
|
let fts = this.filters;
|
|
|
|
let withdrawStatus = fts.withdrawStatus.model,
|
|
|
|
statementSn = fts.statementSn.model === '' || fts.brand.model === null ?
|
|
|
|
null : fts.statementSn.model;
|
|
|
|
let pageNo = this.pageData.current;
|
|
|
|
let pageSize = this.pageData.pageSize;
|
|
|
|
|
|
|
|
return Promise.resolve({
|
|
|
|
params,
|
|
|
|
withdrawStatus,
|
|
|
|
statementSn,
|
|
|
|
pageNo,
|
|
|
|
pageSize
|
|
|
|
});
|
|
|
|
},
|
|
|
|
list() {
|
|
|
|
this.$Loading.start();
|
|
|
|
return this.filtersParams().then((params) => {
|
|
|
|
let filter = {
|
|
|
|
beginTime: this.beginDate,
|
|
|
|
endTime: this.endDate,
|
|
|
|
pageNo: params.pageNo,
|
|
|
|
};
|
|
|
|
if (this.withdrawStatus && this.withdrawStatus !== '-1') {
|
|
|
|
filter = Object.assign({}, filter, {withdrawStatus: this.withdrawStatus});
|
|
|
|
}
|
|
|
|
return this.FinanceService.shopWithdrawServiceList(filter);
|
|
|
|
}).then(result => {
|
|
|
|
if (!result.data) {
|
|
|
|
result.data = {
|
|
|
|
pageNo: 1,
|
|
|
|
pageSize: 1,
|
|
|
|
totalCount: 1,
|
|
|
|
totalPage: 1,
|
|
|
|
records: []
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.pageData.total = result.data.totalCount;
|
|
|
|
this.pageData.current = result.data.pageNo;
|
|
|
|
this.tableData = result.data.records;
|
|
|
|
this.$Loading.finish();
|
|
|
|
}).catch(() => {
|
|
|
|
this.$Loading.finish();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
reset() {
|
|
|
|
this.filters.withdrawStatus.model = null;
|
|
|
|
this.filters.statementSn.model = null;
|
|
|
|
this.filters.timeFlag.model = null;
|
|
|
|
this.filters.beginTime.model = null;
|
|
|
|
this.filters.endTime.model = null;
|
|
|
|
this.pageData.pageNo = 1;
|
|
|
|
this.pageData.total = 0;
|
|
|
|
this.list();
|
|
|
|
if (this.filters.withdrawStatus.model) {
|
|
|
|
if (this.isNumber(this.filters.withdrawStatus.mode)) {
|
|
|
|
params.withdrawStatus = this.filters.withdrawStatus.model;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
if (this.filters.statementSn.model) {
|
|
|
|
if (this.isString(this.filters.statementSn.mode)) {
|
|
|
|
params.statementSn = this.filters.statementSn.model;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
params.pageSize = this.pageData.pageSize;
|
|
|
|
params.pageNo = this.pageData.current;
|
|
|
|
|
|
|
|
return Promise.resolve({
|
|
|
|
params,
|
|
|
|
withdrawStatus,
|
|
|
|
statementSn,
|
|
|
|
pageNo,
|
|
|
|
pageSize
|
|
|
|
});
|
|
|
|
},
|
|
|
|
list() {
|
|
|
|
this.$Loading.start();
|
|
|
|
return this.filtersParams().then((params) => {
|
|
|
|
let filter = {
|
|
|
|
beginTime: this.beginDate,
|
|
|
|
endTime: this.endDate,
|
|
|
|
pageNo: params.pageNo,
|
|
|
|
};
|
|
|
|
if (this.withdrawStatus && this.withdrawStatus !== '-1') {
|
|
|
|
filter = Object.assign({}, filter, {withdrawStatus: this.withdrawStatus});
|
|
|
|
}
|
|
|
|
return this.FinanceService.shopWithdrawServiceList(filter);
|
|
|
|
}).then(result => {
|
|
|
|
if (!result.data) {
|
|
|
|
result.data = {
|
|
|
|
pageNo: 1,
|
|
|
|
pageSize: 1,
|
|
|
|
totalCount: 1,
|
|
|
|
totalPage: 1,
|
|
|
|
records: []
|
|
|
|
}
|
|
|
|
}
|
|
|
|
this.pageData.total = result.data.totalCount;
|
|
|
|
this.pageData.current = result.data.pageNo;
|
|
|
|
this.tableData = result.data.records;
|
|
|
|
this.$Loading.finish();
|
|
|
|
}).catch(() => {
|
|
|
|
this.$Loading.finish();
|
|
|
|
});
|
|
|
|
},
|
|
|
|
reset() {
|
|
|
|
this.filters.withdrawStatus.model = null;
|
|
|
|
this.filters.statementSn.model = null;
|
|
|
|
this.filters.timeFlag.model = null;
|
|
|
|
this.filters.beginTime.model = null;
|
|
|
|
this.filters.endTime.model = null;
|
|
|
|
this.pageData.pageNo = 1;
|
|
|
|
this.pageData.total = 0;
|
|
|
|
this.list();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.stat-shop {
|
|
|
|
.ivu-tabs-tabpane {
|
|
|
|
height: 400px;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
.stat-shop {
|
|
|
|
.ivu-tabs-tabpane {
|
|
|
|
height: 400px;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.layout-container {
|
|
|
|
min-height: 200px;
|
|
|
|
margin: 15px;
|
|
|
|
overflow: hidden;
|
|
|
|
background: #fff;
|
|
|
|
border-radius: 4px;
|
|
|
|
.layout-container {
|
|
|
|
min-height: 200px;
|
|
|
|
margin: 15px;
|
|
|
|
overflow: hidden;
|
|
|
|
background: #fff;
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
|
|
.layout-filter .line {
|
|
|
|
border-top: none;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
.layout-filter .line {
|
|
|
|
border-top: none;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.shop-card {
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
.shop-card {
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-title {
|
|
|
|
font-weight: 700;
|
|
|
|
color: #495060;
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 22px;
|
|
|
|
margin: 5px;
|
|
|
|
.box-title {
|
|
|
|
font-weight: 700;
|
|
|
|
color: #495060;
|
|
|
|
font-size: 16px;
|
|
|
|
line-height: 22px;
|
|
|
|
margin: 5px;
|
|
|
|
|
|
|
|
&:before {
|
|
|
|
content: " ";
|
|
|
|
display: inline-block;
|
|
|
|
width: 5px;
|
|
|
|
margin-right: 2px;
|
|
|
|
height: 22px;
|
|
|
|
vertical-align: top;
|
|
|
|
background-color: #999;
|
|
|
|
}
|
|
|
|
&:before {
|
|
|
|
content: " ";
|
|
|
|
display: inline-block;
|
|
|
|
width: 5px;
|
|
|
|
margin-right: 2px;
|
|
|
|
height: 22px;
|
|
|
|
vertical-align: top;
|
|
|
|
background-color: #999;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-item {
|
|
|
|
width: 90%;
|
|
|
|
height: 50px;
|
|
|
|
padding: 0 0 0 15px;
|
|
|
|
line-height: 50px;
|
|
|
|
font-size: 14px;
|
|
|
|
overflow: hidden;
|
|
|
|
border-radius: 5px;
|
|
|
|
color: #fff;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
.box-item-label {
|
|
|
|
display: inline-block;
|
|
|
|
min-width: 75px;
|
|
|
|
vertical-align: top;
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
.box-item {
|
|
|
|
width: 90%;
|
|
|
|
height: 50px;
|
|
|
|
padding: 0 0 0 15px;
|
|
|
|
line-height: 50px;
|
|
|
|
font-size: 14px;
|
|
|
|
overflow: hidden;
|
|
|
|
border-radius: 5px;
|
|
|
|
color: #fff;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
|
|
|
.box-item-value {
|
|
|
|
font-size: 20px;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
.box-item-label {
|
|
|
|
display: inline-block;
|
|
|
|
min-width: 75px;
|
|
|
|
vertical-align: top;
|
|
|
|
font-weight: normal;
|
|
|
|
}
|
|
|
|
|
|
|
|
i {
|
|
|
|
display: inline-block;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
font-size: 22px;
|
|
|
|
text-align: center;
|
|
|
|
margin-top: -7px;
|
|
|
|
vertical-align: middle;
|
|
|
|
margin-right: 3px;
|
|
|
|
}
|
|
|
|
.box-item-value {
|
|
|
|
font-size: 20px;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-filter {
|
|
|
|
.ivu-date-picker {
|
|
|
|
margin-left: 0;
|
|
|
|
width: 220px !important;
|
|
|
|
}
|
|
|
|
i {
|
|
|
|
display: inline-block;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
font-size: 22px;
|
|
|
|
text-align: center;
|
|
|
|
margin-top: -7px;
|
|
|
|
vertical-align: middle;
|
|
|
|
margin-right: 3px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.quick {
|
|
|
|
display: inline-block;
|
|
|
|
margin-left: 20px;
|
|
|
|
margin-right: 50px;
|
|
|
|
.box-filter {
|
|
|
|
.ivu-date-picker {
|
|
|
|
margin-left: 0;
|
|
|
|
width: 220px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
a {
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.quick {
|
|
|
|
display: inline-block;
|
|
|
|
margin-left: 20px;
|
|
|
|
margin-right: 50px;
|
|
|
|
|
|
|
|
.select-container {
|
|
|
|
display: inline-block;
|
|
|
|
width: 220px;
|
|
|
|
}
|
|
|
|
a {
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-table-cell {
|
|
|
|
padding-left: 6px;
|
|
|
|
padding-right: 6px;
|
|
|
|
.select-container {
|
|
|
|
display: inline-block;
|
|
|
|
width: 220px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-table-cell {
|
|
|
|
padding-left: 6px;
|
|
|
|
padding-right: 6px;
|
|
|
|
}
|
|
|
|
</style> |
|
|
\ No newline at end of file |
...
|
...
|
|
