316 行
9.9 KiB
HTML
可执行文件
316 行
9.9 KiB
HTML
可执行文件
<!--[1.6.48]-->
|
|
<style>
|
|
.list-table th > .cell {
|
|
white-space: nowrap !important;
|
|
text-align: center;
|
|
}
|
|
|
|
.list-table th, .list-table td {
|
|
text-align: center;
|
|
line-height: 30px;
|
|
padding: 0;
|
|
}
|
|
|
|
.list-table th {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
color: #4c4c4c;
|
|
}
|
|
|
|
.list-table td {
|
|
color: #717171;
|
|
}
|
|
|
|
.list-table th > .cell, .list-table td > .cell {
|
|
text-align: center;
|
|
}
|
|
|
|
.list-table tr > td:nth-child(9) > .cell {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.list-table tr:nth-child(2n-1) > td {
|
|
background-color: rgb(246, 248, 249);;
|
|
}
|
|
|
|
.list-table tr > td {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.center-content {
|
|
margin: 20px 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.list-table .el-table td, .list-table .el-table th {
|
|
padding: 8px 0;
|
|
}
|
|
|
|
.el-pagination {
|
|
padding: 8px 15px;
|
|
background-color: white;
|
|
}
|
|
|
|
.col-md-4 {
|
|
text-align: center;
|
|
background-color: #ffffff;
|
|
line-height: 40px;
|
|
border: 1px solid #eee;
|
|
margin: 0 20px;
|
|
flex: 1;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
margin: 20px 0;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
color: #666;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.col-md-4 > span {
|
|
display: inline-block;
|
|
margin: 5px 0;
|
|
}
|
|
|
|
.Trade-money {
|
|
font-size: 18px;
|
|
color: #409EFF;
|
|
}
|
|
|
|
.Trade-count {
|
|
font-size: 18px;
|
|
color: #62b900;
|
|
}
|
|
|
|
.benefit-money {
|
|
font-size: 18px;
|
|
color: #e4393c;
|
|
}
|
|
|
|
.flex {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 30px 0 15px;
|
|
}
|
|
|
|
.quick-list {
|
|
padding: 5px 15px;
|
|
border-radius: 4px;
|
|
border: 1px solid #dcdfe6;
|
|
color: #666;
|
|
line-height: 12px;
|
|
font-size: 12px;
|
|
background-color: white;
|
|
margin: 0 5px;
|
|
cursor: pointer;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.quick-list::selection {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.content {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0 30px;
|
|
}
|
|
|
|
.isSelected {
|
|
background-color: #409EFF;
|
|
border-color: #409EFF;
|
|
color: white;
|
|
}
|
|
|
|
.el-input--small {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.el-range-editor--small .el-range-input {
|
|
font-size: 12px;
|
|
}
|
|
|
|
.el-range-editor--small .el-range-separator {
|
|
font-size: 12px;
|
|
}
|
|
</style>
|
|
<div id="app" v-cloak>
|
|
<div class="aside">
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<span>订单总金额</span><br>
|
|
<span class="Trade-money">{{allMoney}}</span>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<span>订单总退款金额</span><br>
|
|
<span class="Trade-money">{{refundMoney}}</span>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<span>交易笔数</span><br>
|
|
<span class="Trade-count">{{transaction}}</span>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<span>代理商净分润（除退款）</span><br>
|
|
<span class="benefit-money">{{agent_profit}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="flex">
|
|
<el-date-picker
|
|
@change="toSelectDate"
|
|
size="small"
|
|
v-model="selectDate"
|
|
type="daterange"
|
|
range-separator="至"
|
|
start-placeholder="开始日期"
|
|
end-placeholder="结束日期"
|
|
value-format="yyyy-MM-dd"
|
|
:picker-options="pickerOptions">
|
|
</el-date-picker>
|
|
<div class="content">
|
|
<template v-for="(item) in quickList">
|
|
<span v-text="item.name" class="quick-list" :class="selectType==item.type?'isSelected':''"
|
|
@click="doSelectType(item.type)"></span>
|
|
</template>
|
|
</div>
|
|
<div class="content">
|
|
<el-select size="small" filterable @change="doSelectMerchant($event)" v-model="selectMerchant"
|
|
placeholder="选择商户">
|
|
<el-option
|
|
v-for="item in merchantList"
|
|
:key="item.id"
|
|
:label="item.name"
|
|
:value="item.id">
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="list-table" style="border: 1px solid #e6e6e6;">
|
|
<el-table border :data="orderList" style="width: 100%;border: none;">
|
|
<el-table-column prop="index" label="序号" width="60"></el-table-column>
|
|
<el-table-column prop="storetag" label="门店名称" min-width="60" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="merchant_name" label="所属商户" min-width="80"></el-table-column>
|
|
<el-table-column prop="out_trade_no" label="订单号" min-width="100" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="cdate" label="交易时间" min-width="60" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="trade_amount" label="交易金额" min-width="60"></el-table-column>
|
|
<el-table-column prop="pay_type" label="交易方式" min-width="60"></el-table-column>
|
|
<el-table-column prop="merchant_rate" label="商家费率" min-width="60"></el-table-column>
|
|
<el-table-column prop="agent_rate" label="代理商费率" min-width="80"></el-table-column>
|
|
<el-table-column prop="agent_profit" label="代理商分润" min-width="80"></el-table-column>
|
|
<el-table-column prop="agent_refund_profit" label="代理商退款分润" width="110"></el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
@size-change="handleSizeChange"
|
|
@current-change="handleCurrentChange"
|
|
:current-page="currentPage"
|
|
:page-sizes="[10, 15, 20, 25, 30, 35, 40, 45, 50]"
|
|
:page-size="100"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:total="len">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
var app = new Vue({
|
|
el: '#app',
|
|
data: function () {
|
|
return {
|
|
allMoney: 0,
|
|
refundMoney: 0,
|
|
transaction: 0,
|
|
agent_profit: 0,
|
|
orderList: [],
|
|
len: 0,
|
|
currentPage: 1,
|
|
currentLimit: 10,
|
|
quickList: [{
|
|
type: 'today',
|
|
name: '今天'
|
|
}, {
|
|
type: 'yesterday',
|
|
name: '昨天'
|
|
}, {
|
|
type: 'lastMonth',
|
|
name: '上个月'
|
|
}, {
|
|
type: 'threeMonth',
|
|
name: '前三个月'
|
|
}],
|
|
selectType: 'today',
|
|
selectDate: '',
|
|
merchantList: {$merchants},
|
|
selectMerchant: 0,
|
|
pickerOptions: {
|
|
disabledDate(time) {
|
|
return time.getTime() > Date.now();
|
|
}
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
toSelectDate: function (maxDate) {
|
|
if (maxDate) {
|
|
this.selectType = '';
|
|
}
|
|
this.getData();
|
|
},
|
|
doSelectMerchant: function (e) {
|
|
this.getData();
|
|
},
|
|
doSelectType: function (name) {
|
|
if (this.selectType != name) {
|
|
this.selectType = name;
|
|
this.selectDate = '';
|
|
this.getData();
|
|
}
|
|
},
|
|
handleSizeChange(val) {
|
|
this.currentLimit = val;//切换每页数量
|
|
this.currentPage = 1;
|
|
this.getData();
|
|
},
|
|
handleCurrentChange(val) {
|
|
this.currentPage = val;
|
|
this.getData();//切换页数
|
|
},
|
|
getData: function () {
|
|
var that = this;
|
|
|
|
$.post("{:U(getOrder)}", {
|
|
page: this.currentPage,
|
|
limit: this.currentLimit,
|
|
merchant_id: this.selectMerchant,
|
|
selectType: this.selectType,
|
|
selectDate: this.selectDate
|
|
}, function (res) {
|
|
if (res.status == 1) {
|
|
that.orderList = [];
|
|
that.orderList = res.data;
|
|
that.allMoney = res.allMoney;
|
|
that.transaction = res.transaction;
|
|
that.agent_profit = res.agent_profit;
|
|
that.refundMoney = res.refundMoney;
|
|
that.len = res.count;
|
|
that.currentPage = res.page;
|
|
|
|
} else {
|
|
that.$confirm(res.msg, '提示', {
|
|
confirmButtonText: '确定',
|
|
type: 'warning'
|
|
});
|
|
}
|
|
})
|
|
}
|
|
},
|
|
created: function () {
|
|
this.getData();
|
|
}
|
|
})
|
|
</script>
|