<template>
|
<div class="finance-del">
|
<v-header
|
title="线下奖励支出明细"
|
></v-header>
|
|
<div class="total-nav">
|
<div class="lie">
|
<p>今日实际支出</p>
|
<p class="num">¥{{Overview.dayTotal || '0.00'}}</p>
|
</div>
|
<div class="lie">
|
<p>本月实际支出</p>
|
<p class="num">¥{{Overview.monthTotal || '0.00'}}</p>
|
</div>
|
<div class="lie">
|
<p>累计实际支出</p>
|
<p class="num">¥{{Overview.total || '0.00'}}</p>
|
</div>
|
</div>
|
|
<el-form :inline="true" class="demo-form-inline">
|
<el-form-item label="关键字" style="width: 350px" >
|
<el-input style="width:280px" size="small" v-model="bar.keyWord" placeholder="请输入姓名、账号等关键词进行查找"></el-input>
|
</el-form-item>
|
<el-form-item label="金额排序">
|
<el-radio-group v-model="bar.sort" size="medium">
|
<el-radio-button label="1">升序</el-radio-button>
|
<el-radio-button label="2">降序</el-radio-button>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item>
|
<div class="block">
|
<span class="demonstration">支出时间</span>
|
<el-date-picker
|
v-model="bar.time"
|
type="daterange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期">
|
</el-date-picker>
|
</div>
|
</el-form-item>
|
<el-form-item>
|
<el-button size="small" type="primary" @click="onSearch">查询</el-button>
|
<el-button @click="Reset" size="small">重置</el-button>
|
</el-form-item>
|
</el-form>
|
|
<div class="add">
|
<button class="m_btn bgc_primary" @click="exports()">导出</button>
|
</div>
|
|
<div
|
class="Tips"
|
v-show="Change"
|
>
|
<i
|
style="color: #409EFF"
|
class="el-icon-info"
|
></i>
|
<div class="Tips-cont">已选择<span>{{ids.length}}</span>项</div>
|
<el-button
|
type="text"
|
@click="cancel"
|
>取消</el-button>
|
</div>
|
|
<div class="tab">
|
<v-tool-table
|
:trs="trs"
|
:tds="tds"
|
first
|
>
|
<template v-slot:first-th>
|
<div>
|
<el-checkbox @change="cheAll" v-model="alls"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:first-td="item">
|
<div>
|
<el-checkbox @change="change" v-model="item.scope.che"></el-checkbox>
|
</div>
|
</template>
|
<template v-slot:btn="{scope}">
|
<div class="table_flex">
|
<span @click="exports(scope.id)">导出</span>
|
</div>
|
</template>
|
</v-tool-table>
|
</div>
|
<v-tool-page
|
:item="paged"
|
@on-page="onPage"
|
></v-tool-page>
|
<div class="total-num">当前页总计：<span class="num">¥{{totalSumAll || 0}}</span> 合计：<span class="num">¥{{totalNum || 0}} </span></div>
|
</div>
|
</template>
|
<script>
|
export default {
|
props: [],
|
components: {},
|
data() {
|
return {
|
bar: {
|
keyWord:'',
|
sort:"",
|
time:'',
|
},
|
os: {},
|
trs: [
|
{ text: "支出金额（元）", val: "amount" },
|
{ text: "支出用户", val: "userName" },
|
{ text: "支出账号", val: "phone" },
|
{ text: "支出时间", val: "createAt" },
|
{ text: "备注", val: "createAt" },
|
{ text: "操作人", val: "operationUserName" },
|
{ text: "操作", val: "btn" ,slot:"btn"},
|
],
|
tds: [],
|
paged: { page: 0, total: 0, r: 0, limit: 10 },
|
search: {},
|
Overview:{},
|
totalNum:'',
|
Change:false,
|
ids:[], //选中的id集合
|
alls: false, //全选状态
|
};
|
},
|
|
computed:{
|
totalSumAll(){
|
let totalSumAlls = 0;
|
this.tds.map((item) => {totalSumAlls += item.amount})
|
return totalSumAlls
|
},
|
},
|
|
mounted() {
|
this.getstatistics();
|
this.totalNumber();
|
},
|
|
methods: {
|
onSearch(v) {
|
this.paged.page = 1;
|
this.init();
|
},
|
|
Reset() {
|
this.bar.keyWord = '',
|
this.bar.sort = '',
|
this.bar.time = ''
|
},
|
|
// 分页点击
|
onPage(v) {
|
if (v.page === this.paged.page && v.page && !v.reset) {
|
return 0;
|
}
|
this.paged.page = v.page;
|
this.paged.limit = v.limit;
|
this.init();
|
},
|
|
init() {
|
let v = {
|
keyWord:this.bar.keyWord,
|
sort:this.bar.sort,
|
endTime:this.bar.time ? this.$$moment(this.bar.time[1]).format('YYYY-MM-DD HH:mm:ss') :'',
|
startTime:this.bar.time ? this.$$moment(this.bar.time[0]).format('YYYY-MM-DD HH:mm:ss') :'',
|
changeType:"2"
|
}
|
this.$api.post("user/wallet/trade/page", v, (e) => {
|
this.paged.total = e.total;
|
this.paged.r++;
|
this.tds = (e.records || []).map((v) => {
|
this.$set(v, 'che', false)
|
return v;
|
});
|
});
|
},
|
|
cancel() {
|
//取消
|
this.Change = false;
|
this.alls = false
|
this.tds.map(item=>{
|
item.che = false
|
})
|
},
|
|
getstatistics() {
|
let v = {
|
changeType:"2"
|
}
|
this.$api.post("user/wallet/trade/user/statistics", v, (e) => {
|
this.Overview = e;
|
});
|
},
|
|
totalNumber() {
|
let v = {
|
changeType:"2"
|
}
|
this.$api.post("user/wallet/trade/user/total", v, (e) => {
|
this.totalNum = e;
|
});
|
},
|
|
//导出
|
exports(v) {
|
|
if(!this.ids.length) {
|
demo.toast("请勾选需要下载的内容");
|
return
|
}
|
|
let t = this
|
let params = {
|
tradeIds:t.ids,
|
keyWord:this.bar.keyWord,
|
sort:this.bar.sort,
|
endTime:this.bar.time[1],
|
startTime:this.bar.time[0],
|
changeType:"2",
|
pageSize:this.paged.limit,
|
pageNum:this.paged.page
|
|
}
|
this.$api.post("user/wallet/trade/export", params, (e) => {
|
window.location.href = e;
|
});
|
},
|
|
cheAll () {
|
this.Change = !this.Change
|
//全选
|
this.tds.map(item => {
|
item.che = this.alls
|
})
|
this.change()
|
},
|
|
change () {
|
//单个选择
|
this.ids = []
|
this.tds.map(item => {
|
if (item.che) {
|
this.ids.push(item.id)
|
} else {
|
this.alls = false
|
}
|
})
|
},
|
|
},
|
|
};
|
</script>
|
<style scoped lang="less">
|
.finance-del {
|
overflow: scroll;
|
}
|
.add {
|
text-align: right;
|
}
|
.total-nav {
|
height: 50px;
|
padding-bottom: 18px;
|
.lie {
|
float: left;
|
margin-right: 40px;
|
p {
|
line-height: 25px;
|
}
|
.num {
|
font-weight: 700;
|
}
|
}
|
}
|
.bgc_primary {
|
margin-bottom: 15px;
|
}
|
.total-num{
|
padding-bottom: 30px;
|
.num {
|
font-size:16px;
|
font-weight: 700;
|
color: #F56C6C;
|
margin-right: 60px;
|
}
|
}
|
.Tips {
|
margin: 10px 0;
|
box-sizing: border-box;
|
width: 100%;
|
display: flex;
|
align-items: center;
|
background: #e6f7ff;
|
border: #bae7ff 1px solid;
|
border-radius: 6px;
|
height: 40px;
|
padding: 0 20px;
|
}
|
.Tips-cont {
|
padding: 0 10px;
|
font-size: 16px;
|
color: #606266;
|
}
|
.Tips-cont > span {
|
padding: 0 4px;
|
color: #409eff;
|
font-weight: 600;
|
}
|
</style>
|
