<template>
|
<!--
|
作者：luoyiming
|
时间：2019-10-24
|
描述：财务-财务概况
|
-->
|
<div class="home" v-loading="loading">
|
<div class="cash cash_t_common cash_t_brief">
|
<div class="cash-header">
|
<div>
|
<span class="cash_t_title">平台概况 </span>
|
</div>
|
</div>
|
<div class="cash-body">
|
<div class="content">
|
<p class="title">订单销售总金额（元）</p>
|
<p class="money">{{tj_data.total_money}}</p>
|
</div>
|
<div class="content">
|
<p class="title">供应商订单销售总金额（元）</p>
|
<p class="money">{{tj_data.supplier_money}}</p>
|
</div>
|
<div class="content">
|
<p class="title">平台订单抽成（元）</p>
|
<p class="money">{{tj_data.sys_money}}</p>
|
</div>
|
</div>
|
</div>
|
<div class="cash cash_t_common cash_t_brief">
|
<div class="cash-header">
|
<div>
|
<span class="cash_t_title">店铺概况</span>
|
</div>
|
</div>
|
<div class="cash-body">
|
<div class="content">
|
<p class="title">店铺结算总金额(元)</p>
|
<p class="money">{{supplier_data.total_money}}</p>
|
</div>
|
<div class="content">
|
<p class="title">店铺待结算费用(元)</p>
|
<p class="money">{{supplier_data.nosettled_money}}</p>
|
</div>
|
<div class="content">
|
<p class="title">店铺总保证金(元)</p>
|
<p class="money">{{supplier_data.deposit_money}}</p>
|
</div>
|
<!-- <div class="content">
|
<p class="title">已提现金额(元)</p>
|
<p class="money">{{supplier_data.cash_money}}<span class="subhead withdrawal ns-text-color" @click="onExport(0)">导出</span></p>
|
</div>
|
<div class="content">
|
<p class="title">提现中金额(元)</p>
|
<p class="money">{{supplier_data.freeze_money}}<span class="subhead withdrawal ns-text-color" @click="onExport(1)">导出</span></p>
|
</div>
|
<div class="content">
|
<p class="title">剩余可提现(元)</p>
|
<p class="money">{{supplier_data.money}}<span class="subhead withdrawal ns-text-color" @click="onExport(2)">导出</span></p>
|
</div> -->
|
</div>
|
</div>
|
<div class="cash cash_t_common cash_t_brief">
|
<div class="cash-header">
|
<div>
|
<span class="cash_t_title">提现概况</span>
|
<el-form size="small":inline="true" :model="searchForm" class="demo-form-inline">
|
<el-form-item label="">
|
<el-autocomplete class="inline-input" v-model="searchForm.supplier_name" :fetch-suggestions="querySearch"
|
placeholder="请输入商户名称"></el-autocomplete>
|
</el-form-item>
|
<!-- <el-form-item label="起始时间">
|
<div class="block">
|
<span class="demonstration"></span>
|
<el-date-picker
|
size="small"
|
v-model="searchForm.create_time"
|
type="daterange"
|
value-format="yyyy-MM-dd"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
></el-date-picker>
|
</div>
|
</el-form-item> -->
|
<el-form-item><el-button size="small" type="primary" icon="el-icon-search" @click="getData">查询</el-button></el-form-item>
|
</el-form>
|
</div>
|
|
</div>
|
<div class="cash-body">
|
<div class="content">
|
<p class="title">已提现金额(元)</p>
|
<p class="money">{{supplier_data.cash_money}}<span class="subhead withdrawal ns-text-color" @click="onExport(2)">导出</span></p>
|
</div>
|
<div class="content">
|
<p class="title">提现中金额(元)</p>
|
<p class="money">{{supplier_data.freeze_money}}<span class="subhead withdrawal ns-text-color" @click="onExport(1)">导出</span></p>
|
</div>
|
<div class="content">
|
<p class="title">剩余可提现(元)</p>
|
<p class="money">{{supplier_data.money}}<span class="subhead withdrawal ns-text-color" @click="onExport(0)">导出</span></p>
|
</div>
|
</div>
|
</div>
|
<div class="cash cash_t_common cash_t_brief">
|
<div class="cash-header">
|
<div>
|
<span class="cash_t_title">分销概况</span>
|
</div>
|
</div>
|
<div class="cash-body">
|
<div class="content">
|
<p class="title">分销总佣金(元)</p>
|
<p class="money">{{agent_data.all_money}}</p>
|
</div>
|
<div class="content">
|
<p class="title">剩余可提现(元)</p>
|
<p class="money">{{agent_data.money}}</p>
|
</div>
|
<div class="content">
|
<p class="title">提现中佣金(元)</p>
|
<p class="money">{{agent_data.freeze_money}}</p>
|
</div>
|
<div class="content">
|
<p class="title">已提现佣金(元)</p>
|
<p class="money">{{agent_data.total_money}}</p>
|
</div>
|
</div>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import CashApi from '@/api/cash.js';
|
import qs from 'qs';
|
export default {
|
data() {
|
return {
|
/*是否加载完成*/
|
loading: true,
|
/*统计数据*/
|
tj_data: {},
|
/*供应商数据*/
|
supplier_data: {},
|
/*分销商数据*/
|
agent_data: {},
|
restaurants: [],
|
supplier_list:[],
|
/*横向表单数据模型*/
|
searchForm: {
|
create_time: '',
|
supplier_name:'',
|
is_settled:'-1'
|
},
|
};
|
},
|
created() {
|
/*获取数据*/
|
this.getData();
|
},
|
methods: {
|
/*获取数据*/
|
getData() {
|
let self = this;
|
self.loading = true;
|
let Params = this.searchForm;
|
CashApi.index(Params, true).then(res => {
|
self.tj_data = res.data.tj_data;
|
self.supplier_data = res.data.supplier_data;
|
self.agent_data = res.data.agent_data;
|
self.supplier_list = res.data.supplier_list;
|
self.loading = false;
|
})
|
.catch(error => {
|
self.loading = false;
|
});
|
},
|
onExport: function(e) {
|
this.searchForm.is_settled = e;
|
let baseUrl = window.location.protocol + '//' + window.location.host;
|
window.location.href = baseUrl + '/index.php/shop/cash.cash/export?' + qs.stringify(this.searchForm);
|
},
|
querySearch(queryString, cb) {
|
let self = this;
|
if (self.restaurants.length == 0) {
|
self.supplier_list.forEach((item, index) => {
|
self.restaurants.push({
|
value: item.name
|
})
|
})
|
}
|
var restaurants = this.restaurants;
|
var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
|
// 调用 callback 返回建议列表的数据
|
cb(results);
|
},
|
createFilter(queryString) {
|
return (restaurant) => {
|
return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
|
};
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.apply-container {
|
padding: 50px 0;
|
}
|
|
.cash {
|
background-color: #fff;
|
font: 14px;
|
}
|
|
.cash_t_common {
|
margin-top: 15px;
|
margin-bottom: 0;
|
box-shadow: initial;
|
|
.cash_t_title {
|
font-size: 16px;
|
font-weight: 600;
|
}
|
|
.cash-header {
|
padding: 10px 20px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
}
|
}
|
|
.cash_t_brief .cash-header {
|
border-bottom: 0;
|
padding-bottom: 0;
|
}
|
|
.cash-header {
|
position: relative;
|
height: 42px;
|
line-height: 42px;
|
padding: 0 15px;
|
border-bottom: 1px solid #f6f6f6;
|
color: #333;
|
border-radius: 2px 2px 0 0;
|
font-size: 14px;
|
}
|
|
.cash_t_brief .cash_t_title {
|
position: relative;
|
padding-left: 10px;
|
}
|
|
.cash_t_brief .cash_t_title::before {
|
content: '';
|
display: inline-block;
|
width: 3px;
|
height: 14px;
|
background-color: #3a8ee6;
|
position: absolute;
|
left: 0;
|
top: 50%;
|
border-radius: 5px;
|
transform: translateY(-50%);
|
}
|
|
.cash_t_common .cash-body {
|
padding: 20px;
|
}
|
|
.cash-body {
|
display: flex;
|
justify-content: flex-start;
|
padding-bottom: 0 !important;
|
padding-right: 50px !important;
|
padding-left: 50px !important;
|
flex-wrap: wrap;
|
position: relative;
|
padding: 10px 15px;
|
line-height: 24px;
|
|
.content {
|
width: 33.3%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 30px;
|
justify-content: center;
|
}
|
|
.content {
|
width: 33.3%;
|
display: flex;
|
flex-direction: column;
|
margin-bottom: 30px;
|
justify-content: center;
|
}
|
|
.money {
|
font-size: 20px;
|
color: #666;
|
font-weight: bold;
|
margin-top: 10px;
|
max-width: 250px;
|
}
|
|
.subhead {
|
font-size: 12px;
|
margin-left: 3px;
|
cursor: pointer;
|
}
|
}
|
|
.ns-text-color {
|
color: #3a8ee6;
|
}
|
|
.date_section {
|
display: flex;
|
justify-content: flex-end;
|
align-items: center;
|
}
|
</style>
|
