|
|
|
<template>
|
|
|
|
<div>
|
|
|
|
<layout-body>
|
|
|
|
<p slot="title">交易服务明细</p>
|
|
|
|
<layout-filter ref="filter" :model="filters" class="box-filter" :inline="true" :col="1">
|
|
|
|
<filter-item label="起止时间">
|
|
|
|
<Date-picker
|
|
|
|
v-model="filters.createTime.model"
|
|
|
|
type="datetimerange"
|
|
|
|
format="yyyy-MM-dd"
|
|
|
|
placeholder="选择日期和时间"
|
|
|
|
@on-change="createTimeChange"
|
|
|
|
></Date-picker>
|
|
|
|
<div class="quick">
|
|
|
|
<template v-for="(option, key) in quickOptions">
|
|
|
|
<a :key="key" href="javascript:;" @click="timeFlag(key)">{{ option }}</a>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Select v-model.trim="filters.status.model" :placeholder="filters.status.label" clearable>
|
|
|
|
<Option v-for="(option, key) in filters.status.options" :key="key" :value="+key">
|
|
|
|
{{ option }}
|
|
|
|
</Option>
|
|
|
|
</Select>
|
|
|
|
</div>
|
|
|
|
</filter-item>
|
|
|
|
<filter-item>
|
|
|
|
<div class="select-container">
|
|
|
|
<Input v-model.trim="filters.orderCode.model" :placeholder="filters.orderCode.label" />
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Input v-model.trim="filters.productSku.model" :placeholder="filters.productSku.label" />
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Input v-model.trim="filters.productName.model" :placeholder="filters.productName.label" />
|
|
|
|
</div>
|
|
|
|
<div class="select-container">
|
|
|
|
<Button type="primary" @click="search">查询</Button>
|
|
|
|
<Button type="primary" @click="reset">全部</Button>
|
|
|
|
<Button type="warning" @click="exportList">导出</Button>
|
|
|
|
</div>
|
|
|
|
</filter-item>
|
|
|
|
</layout-filter>
|
|
|
|
<layout-list>
|
|
|
|
<Table border :columns="tableCols" :data="tableData"></Table>
|
|
|
|
<Page
|
|
|
|
:total="pageData.total"
|
|
|
|
:current="pageData.current"
|
|
|
|
:page-size="pageData.pageSize"
|
|
|
|
show-total
|
|
|
|
@on-change="pageChange"
|
|
|
|
></Page>
|
|
|
|
</layout-list>
|
|
|
|
</layout-body>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import _ from 'lodash';
|
|
|
|
import moment from 'moment';
|
|
|
|
import qs from 'querystringify';
|
|
|
|
import FinanceService from 'services/finance/finance-service';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
filters: {
|
|
|
|
createTime: {
|
|
|
|
label: '创建时间',
|
|
|
|
model: '',
|
|
|
|
},
|
|
|
|
beginTime: {
|
|
|
|
model: '',
|
|
|
|
},
|
|
|
|
endTime: {
|
|
|
|
model: '',
|
|
|
|
},
|
|
|
|
timeFlag: {
|
|
|
|
label: '时间标志',
|
|
|
|
model: '',
|
|
|
|
},
|
|
|
|
status: {
|
|
|
|
label: '提现状态',
|
|
|
|
model: '',
|
|
|
|
options: {
|
|
|
|
'0': '冻结中',
|
|
|
|
'1': '可提现',
|
|
|
|
'2': '提现中',
|
|
|
|
'3': '提现成功',
|
|
|
|
'-1': '提现失败',
|
|
|
|
},
|
|
|
|
},
|
|
|
|
orderCode: {
|
|
|
|
label: '订单号',
|
|
|
|
model: '',
|
|
|
|
},
|
|
|
|
productSku: {
|
|
|
|
label: 'SKU',
|
|
|
|
model: '',
|
|
|
|
},
|
|
|
|
productName: {
|
|
|
|
label: '商品名称',
|
|
|
|
model: '',
|
|
|
|
},
|
|
|
|
pageNo: 1,
|
|
|
|
pageSize: 10,
|
|
|
|
},
|
|
|
|
tableCols: [
|
|
|
|
{
|
|
|
|
title: '账务ID',
|
|
|
|
key: 'id',
|
|
|
|
width: 60,
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '结算时间',
|
|
|
|
key: 'businessTime',
|
|
|
|
align: 'center',
|
|
|
|
render(h, params) {
|
|
|
|
const time = moment.unix(params.row.businessTime);
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div>{time.format('YYYY/MM/DD')}</div>
|
|
|
|
<div>{time.format('HH:mm:ss')}</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '订单号',
|
|
|
|
key: 'orderCode',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: 'SKU',
|
|
|
|
key: 'productSku',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '数量',
|
|
|
|
key: 'quantity',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '商品名称',
|
|
|
|
key: 'productName',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '账务类型',
|
|
|
|
key: 'billTypeDesc',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '业务描述',
|
|
|
|
key: 'clearingTypeName',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '成交价/优惠价',
|
|
|
|
key: 'lastPrice',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '商家应收/分摊比例',
|
|
|
|
key: 'clearingDiscount',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '商家应收',
|
|
|
|
key: 'shopDeserveAmount',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '提现服务费',
|
|
|
|
key: 'withdrawServiceAmount',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '商家实收',
|
|
|
|
key: 'shopNetAmount',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '提现状态',
|
|
|
|
key: 'statusName',
|
|
|
|
align: 'center',
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '可提现日期',
|
|
|
|
key: 'withdrawalTime',
|
|
|
|
align: 'center',
|
|
|
|
render(h, params) {
|
|
|
|
if (!params.row.withdrawalTime) {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
const appSuTime = moment.unix(params.row.withdrawalTime);
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div>{appSuTime.format('YYYY/MM/DD')}</div>
|
|
|
|
<div>{appSuTime.format('HH:mm:ss')}</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
{
|
|
|
|
title: '提现申请日期',
|
|
|
|
key: 'withdrawApplyTime',
|
|
|
|
align: 'center',
|
|
|
|
render(h, params) {
|
|
|
|
if (!params.row.withdrawApplyTime) {
|
|
|
|
return '';
|
|
|
|
}
|
|
|
|
const applyTime = moment.unix(params.row.withdrawApplyTime);
|
|
|
|
return (
|
|
|
|
<div>
|
|
|
|
<div>{applyTime.format('YYYY/MM/DD')}</div>
|
|
|
|
<div>{applyTime.format('HH:mm:ss')}</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
},
|
|
|
|
},
|
|
|
|
],
|
|
|
|
tableData: [],
|
|
|
|
pageData: {
|
|
|
|
total: 0,
|
|
|
|
current: 1,
|
|
|
|
pageSize: 10,
|
|
|
|
},
|
|
|
|
quickOptions: {
|
|
|
|
1: '今天',
|
|
|
|
2: '昨天',
|
|
|
|
3: '最近7天',
|
|
|
|
4: '最近30天',
|
|
|
|
},
|
|
|
|
};
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.financeService = new FinanceService();
|
|
|
|
this.search();
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
filterValues() {
|
|
|
|
const queryParams = {};
|
|
|
|
if (this.enableFilter) {
|
|
|
|
_.each(this.filters, (value, key) => {
|
|
|
|
queryParams[key] = value.model;
|
|
|
|
});
|
|
|
|
}
|
|
|
|
const { current, pageSize } = this.pageData;
|
|
|
|
return { ...queryParams, pageNo: current, pageSize };
|
|
|
|
},
|
|
|
|
search() {
|
|
|
|
this.enableFilter = true;
|
|
|
|
this.pageData.current = 1;
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
reset() {
|
|
|
|
this.enableFilter = false;
|
|
|
|
this.pageData.current = 1;
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
timeFlag(flag) {
|
|
|
|
this.enableFilter = false;
|
|
|
|
this.timeFlag.model = flag;
|
|
|
|
this.pageData.current = 1;
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
createTimeChange(time) {
|
|
|
|
if (!_.isArray(time)) {
|
|
|
|
time = time.split(' - ');
|
|
|
|
}
|
|
|
|
if ((time[0] + '').length) {
|
|
|
|
this.filters.beginTime.model = moment(time[0]).format('YYYY-MM-DD');
|
|
|
|
this.filters.endTime.model = moment(time[1]).format('YYYY-MM-DD');
|
|
|
|
} else {
|
|
|
|
this.filters.beginTime.model = '';
|
|
|
|
this.filters.endTime.model = '';
|
|
|
|
}
|
|
|
|
},
|
|
|
|
pageChange(page) {
|
|
|
|
this.pageData.current = page;
|
|
|
|
this.list();
|
|
|
|
},
|
|
|
|
list() {
|
|
|
|
const params = this.filterValues();
|
|
|
|
this.financeService.shopBillList(params).then(ret => {
|
|
|
|
this.tableData = _.get(ret, 'data.records', []);
|
|
|
|
this.pageData.total = _.get(ret, 'data.totalCount', 0);
|
|
|
|
this.pageData.current = _.get(ret, 'data.pageNo', 1);
|
|
|
|
});
|
|
|
|
},
|
|
|
|
//导出列表
|
|
|
|
exportList() {
|
|
|
|
const queryString = qs.stringify(this.filterValues, true);
|
|
|
|
const href = `${FinanceService.exportSettlementDetail}${queryString}`;
|
|
|
|
window.open(href, '_blank');
|
|
|
|
},
|
|
|
|
},
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
.layout-container {
|
|
|
|
min-height: 200px;
|
|
|
|
margin: 15px;
|
|
|
|
overflow: hidden;
|
|
|
|
background: #fff;
|
|
|
|
border-radius: 4px;
|
|
|
|
|
|
|
|
.layout-filter .line {
|
|
|
|
border-top: none;
|
|
|
|
margin-bottom: 0;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.shop-card {
|
|
|
|
margin-top: 10px;
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.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-value {
|
|
|
|
font-size: 20px;
|
|
|
|
font-weight: 600;
|
|
|
|
}
|
|
|
|
|
|
|
|
i {
|
|
|
|
display: inline-block;
|
|
|
|
width: 20px;
|
|
|
|
height: 20px;
|
|
|
|
font-size: 22px;
|
|
|
|
text-align: center;
|
|
|
|
margin-top: -7px;
|
|
|
|
vertical-align: middle;
|
|
|
|
margin-right: 3px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.box-filter {
|
|
|
|
.ivu-date-picker {
|
|
|
|
margin-left: 0;
|
|
|
|
width: 220px !important;
|
|
|
|
}
|
|
|
|
|
|
|
|
.quick {
|
|
|
|
display: inline-block;
|
|
|
|
margin-left: 20px;
|
|
|
|
margin-right: 50px;
|
|
|
|
|
|
|
|
a {
|
|
|
|
margin-right: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.select-container {
|
|
|
|
display: inline-block;
|
|
|
|
width: 200px;
|
|
|
|
margin-right: 15px;
|
|
|
|
margin-top: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.ivu-table-cell {
|
|
|
|
padding-left: 6px;
|
|
|
|
padding-right: 6px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.action-column {
|
|
|
|
.cell-action-row {
|
|
|
|
margin-top: 10px;
|
|
|
|
|
|
|
|
&:last-child {
|
|
|
|
margin-bottom: 10px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
