367 行
18 KiB
HTML
可执行文件
367 行
18 KiB
HTML
可执行文件
<!--[1.9.20]-->
|
|
<style>
|
|
.table-cell-content > div > span {
|
|
color: #999;
|
|
}
|
|
</style>
|
|
<div id="PayFlowIndex" v-cloak style="width: 100%">
|
|
<el-form :inline="true" size="small">
|
|
<el-form-item>
|
|
<el-form-item>
|
|
<el-tooltip class="item" effect="dark" content="默认查询当月订单" placement="top-start">
|
|
<el-button type="text"><i class="el-icon-question"></i></el-button>
|
|
</el-tooltip>
|
|
<date-picker-range :date-time.sync="seek_data.time_slot" :clearable="false"></date-picker-range>
|
|
</el-form-item>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input :placeholder="seek_data.order_no_type==1?'支付流水单号':'购买商品单号'"
|
|
type="text"
|
|
size="small"
|
|
v-model="seek_data.order_number"
|
|
@keydown.enter.exact.native.prevent="currentChange(1)"
|
|
clearable>
|
|
<el-select v-model="seek_data.order_no_type" style="width: 100px" background slot="prepend">
|
|
<el-option label="流水单号" :value="1"></el-option>
|
|
<el-option label="商品单号" :value="2"></el-option>
|
|
</el-select>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item v-if="!mecPayType">
|
|
<el-input placeholder="手机号/实体卡号"
|
|
type="text"
|
|
size="small"
|
|
v-model="seek_data.vip_phone"
|
|
@keydown.enter.exact.native.prevent="currentChange(1)"
|
|
clearable>
|
|
<span style="width: 100px" background slot="prepend">会员</span>
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<select-cashier :cashier-id.sync="seek_data.cashier_id"></select-cashier>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select v-model="seek_data.scene_type" size="small" clearable placeholder="订单类型">
|
|
<el-option label="付款订单" value="1"></el-option>
|
|
<el-option label="退款订单" value="2"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-select v-model="seek_data.order_type" size="small" clearable placeholder="消费类型">
|
|
<el-option label="购买商品" value="1"></el-option>
|
|
<el-option label="会员充值" value="2"></el-option>
|
|
<el-option label="购买礼品卡" value="4"></el-option>
|
|
<el-option label="购买plus会员" value="5"></el-option>
|
|
<el-option label="快捷收银" value="6"></el-option>
|
|
<el-option label="购买次卡" value="7"></el-option>
|
|
<el-option label="积分商城" value="8"></el-option>
|
|
<el-option label="退款订单" value="3"></el-option>
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<select-pay-order-pay-type :pay-type.sync="seek_data.pay_type"></select-pay-order-pay-type>
|
|
</el-form-item>
|
|
<template v-if="mecPayType">
|
|
<el-form-item>
|
|
<el-input placeholder="德育币会员ID/名称" type="text" class="page-input" v-model="seek_data.mec_vip_key"
|
|
clearable @keydown.enter.exact.native.prevent="currentChange(1)" style="width:193px">
|
|
</el-input>
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-input placeholder="德育币村镇ID" type="text" class="page-input" v-model="seek_data.mec_villages_id"
|
|
clearable @keydown.enter.exact.native.prevent="currentChange(1)" style="width:193px">
|
|
</el-input>
|
|
</el-form-item>
|
|
</template>
|
|
<el-form-item style="display: flex;text-align: center;">
|
|
<el-button type="primary" @click="currentChange(1)" size="small">查询</el-button>
|
|
<el-button @click="reset" size="small">重置</el-button>
|
|
<if condition="$authArr['exportSPayFlow'] eq true">
|
|
<el-button @click="exportExcel" size="small">导出</el-button>
|
|
</if>
|
|
</el-form-item>
|
|
</el-form>
|
|
<div class="table-top-card-box">
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">进账总额</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.total_money }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">总额-不含余额支付</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.net_income_money }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">购买商品</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.goods_money }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">会员充值</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.recharge_money }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">购买礼品卡</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.gift_card_money }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">购买plus会员</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.plus_money }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">快捷收银</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.quick_money }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">购买次卡</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.card_money }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">积分商城</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.score_mall_money }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">退款总额</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.refund_money }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">代金券优惠金额</div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.pay_coupon_fee }}</div>
|
|
</div>
|
|
<div class="table-top-card">
|
|
<div class="table-top-card-header">代金券退款金额 </div>
|
|
<div class="table-top-card-body">{{ pay_flow_total.refund_pay_coupon_fee }}</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div v-loading="loading">
|
|
<el-table :data="pay_flow_list" :highlight-current-row="true" border size="small">
|
|
<el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
|
|
<el-table-column label="订单号" min-width="180px">
|
|
<template slot-scope="scope" slot="header">
|
|
<el-tooltip class="item"
|
|
effect="dark"
|
|
placement="top-start">
|
|
<div slot="content">
|
|
<p>内部流水号：系统内部生成的流水号</p>
|
|
<p>外部流水号：第三方支付通道的流水号，如：微信、支付宝、新大陆、云闪付</p>
|
|
</div>
|
|
<div>订单号<el-button type="text" size="mini" icon="el-icon-question"></el-button></div>
|
|
</el-tooltip>
|
|
</template>
|
|
<template slot-scope="scope">
|
|
<div class="table-cell-content">
|
|
<div><span>内部流水号: </span>{{scope.row.out_trade_no}}</div>
|
|
<div v-if="scope.row.trade_no"><span>外部流水号: </span>{{scope.row.trade_no}}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="trade_amount" label="支付金额" show-overflow-tooltip>
|
|
<template slot-scope="scope" slot="header">
|
|
<el-tooltip class="item"
|
|
effect="dark"
|
|
content="该值在支付订单中表示支付金额，在退款订单中表示退款金额"
|
|
placement="top-start">
|
|
<div>支付金额
|
|
<el-button type="text" size="mini" icon="el-icon-question"></el-button>
|
|
</div>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="refund_money" label="退款金额" show-overflow-tooltip>
|
|
<template slot-scope="scope" slot="header">
|
|
<el-tooltip class="item"
|
|
effect="dark"
|
|
content="该值表示支付订单的已退金额，并不为退款订单的退款金额，退款订单请忽略这个字段"
|
|
placement="top-start">
|
|
<div>退款金额
|
|
<el-button type="text" size="mini" icon="el-icon-question"></el-button>
|
|
</div>
|
|
</el-tooltip>
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="pay_coupon_fee" label="代金券金额" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="scene_type" label="订单类型" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="order_type" label="支付类型" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="pay_type" label="支付方式" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="m_pay_type" label="支付模式" show-overflow-tooltip></el-table-column>
|
|
<el-table-column prop="trade_date" label="交易时间" min-width="100px"
|
|
show-overflow-tooltip></el-table-column>
|
|
<el-table-column label="人员信息">
|
|
<template slot-scope="scope">
|
|
<div class="table-cell-content">
|
|
<div v-if="scope.row.vip_name"><span>会员: </span>{{scope.row.vip_name}}</div>
|
|
<div v-if="scope.row.third_vip_code && mecPayType"><span>会员ID: </span>{{scope.row.third_vip_code}}</div>
|
|
<div v-if="scope.row.villageId && mecPayType"><span>村镇ID: </span>{{scope.row.villageId}}</div>
|
|
<div v-if="scope.row.cashier_name"><span>收银员: </span>{{scope.row.cashier_name}}</div>
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination
|
|
@size-change="rechargeSizeChange"
|
|
@current-change="currentChange"
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
:pager-count="5"
|
|
:page-sizes="[10,20,30,40,50,60,70,80,90]"
|
|
:page-size="10"
|
|
:total="count">
|
|
</el-pagination>
|
|
</div>
|
|
</div>
|
|
<script src="/Public/Retail/js/select-cashier.js?v=1.0.2"></script>
|
|
<script src="/Public/Retail/js/select-pay-type.js?v=1.0.1"></script>
|
|
<script>
|
|
var PayFlowIndex = new Vue({
|
|
el: '#PayFlowIndex',
|
|
data: function () {
|
|
return {
|
|
seek_data: {
|
|
time_slot: this.getThisMonthTime(), // 时间段
|
|
order_type: '', // 类型
|
|
scene_type: '', // 类型
|
|
pay_type: '', // 支付方式
|
|
mec_vip_key: '', // 德育币会员ID、名称
|
|
mec_villages_id: '', // 德育币会员村镇ID
|
|
vip_phone: '', //会员手机号、实体卡号
|
|
cashier_id: '', //收银员ID
|
|
order_number: '', // 订单号
|
|
order_no_type: 1, // 订单号类型 1支付流水订单号 2购买商品订单号
|
|
},
|
|
loading: false, // 加载
|
|
pay_flow_total: {
|
|
total_money: '0', // 总额
|
|
goods_money: '0', // 购买商品
|
|
recharge_money: '0', // 充值
|
|
gift_card_money: '0', // 购买礼品卡
|
|
plus_money: '0', // 购买plus会员
|
|
refund_money: '0', // 退款
|
|
quick_money: '0', //快捷收银
|
|
card_money: '0', //购买次卡
|
|
score_mall_money: '0', //积分商城
|
|
net_income_money: '0', //不含余额支付的总额
|
|
},
|
|
pay_flow_list: [], // 支付流水列表
|
|
page: 1, // 分页
|
|
limit: 10, // 每页显示条数
|
|
count: 0, // 总数 int类型
|
|
mecPayType: false,//德育币会员
|
|
};
|
|
},
|
|
|
|
methods: {
|
|
/**
|
|
* 获取列表数据
|
|
*/
|
|
getSPayFlowList() {
|
|
var that = this;
|
|
that.loading = true;
|
|
$.ajax({
|
|
url: "{:U('getSPayFlowList')}",
|
|
type: "post",
|
|
data: {page: that.page, limit: that.limit, seek_data: that.seek_data},
|
|
success: function (res) {
|
|
that.loading = false;
|
|
if (res.status == 1) {
|
|
that.pay_flow_total = res.pay_flow_total;
|
|
that.pay_flow_list = res.pay_flow_list;
|
|
that.count = res.count;
|
|
} else {
|
|
that.unsetPayFlowList();
|
|
}
|
|
}
|
|
});
|
|
},
|
|
|
|
/**
|
|
* 清除列表数据
|
|
*/
|
|
unsetPayFlowList() {
|
|
var pay_flow_total = {
|
|
total_money: '0',
|
|
goods_money: '0',
|
|
recharge_money: '0',
|
|
gift_card_money: '0',
|
|
plus_money: '0',
|
|
refund_money: '0',
|
|
quick_money: '0',
|
|
score_mall_money: '0', //积分商城
|
|
net_income_money: '0', //不含余额支付的总额
|
|
};
|
|
this.pay_flow_total = pay_flow_total;
|
|
this.pay_flow_list = [];
|
|
this.page = 1;
|
|
this.limit = 10;
|
|
this.count = 0;
|
|
},
|
|
|
|
/**
|
|
* 分页
|
|
* @param int val 当前选择的页数
|
|
*/
|
|
currentChange(val) {
|
|
this.page = val;
|
|
this.getSPayFlowList();
|
|
},
|
|
|
|
/**
|
|
* 每页显示数量
|
|
* @param int val 数量
|
|
*/
|
|
rechargeSizeChange(val) {
|
|
this.limit = val;
|
|
this.page = 1;
|
|
this.getSPayFlowList();
|
|
},
|
|
|
|
/**
|
|
* 充值
|
|
*/
|
|
reset() {
|
|
var seek_data = {
|
|
time_slot: this.getThisMonthTime(),
|
|
store_id: '',
|
|
order_number: '',
|
|
order_type: '',
|
|
scene_type: '',
|
|
pay_type: '',
|
|
mec_vip_key: '',
|
|
mec_villages_id: '',
|
|
vip_phone: '',
|
|
cashier_id: '',
|
|
order_no_type: 1,
|
|
};
|
|
this.seek_data = seek_data;
|
|
this.page = 1;
|
|
this.limit = 10;
|
|
this.getSPayFlowList();
|
|
},
|
|
|
|
// 导出
|
|
exportExcel() {
|
|
if (!this.seek_data.time_slot.length) {
|
|
this.$confirm('确定导出数据吗？（默认导出当月流水数据）', '提示', {
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning'
|
|
}).then(() => {
|
|
let seek_data = {...this.seek_data};
|
|
seek_data.time_slot = this.getThisMonthTime();
|
|
window.location.href = "{:U('exportSPayFlow')}?seek_data=" + JSON.stringify(this.seek_data);
|
|
}).catch(()=>{});
|
|
} else {
|
|
window.location.href = "{:U('exportSPayFlow')}?seek_data=" + JSON.stringify(this.seek_data);
|
|
}
|
|
},
|
|
},
|
|
|
|
created: function () {
|
|
this.getSPayFlowList();
|
|
this.sendRequest('Retail/Mgoods/getPlatformType', {
|
|
success: (res) => {
|
|
if (res.status == 1 && res.moral_education_coin) {
|
|
this.mecPayType = true;
|
|
}
|
|
}
|
|
})
|
|
},
|
|
})
|
|
</script> |