523 lines
15 KiB
Vue
523 lines
15 KiB
Vue
<template>
|
|
<JeepayBackground :bgColorStyle="{ background: 'linear-gradient(270deg,#238FFC 0%, #1A66FF 100%)' }">
|
|
<view>
|
|
<JeepayCustomNavbar title="统计报表" textColor="#fff" bgDefaultColor="linear-gradient(270deg,#238FFC 0%, #1A66FF 100%)" backCtrl="back" />
|
|
<!-- 统计时间选择部分 -->
|
|
<view class="screen-time">
|
|
<block v-for="(v, i) in screenList" :key="i">
|
|
<view class="time-main" :class="{ 'active-screen': vdata.selected == v.value }" @tap="selectedTime(v)">{{ v.title }}</view>
|
|
</block>
|
|
</view>
|
|
<template v-if="vdata.selected == 'custom'">
|
|
<view class="time-selection time-custom">
|
|
<image src="/static/iconImg/icon-calendar.svg" mode="scaleToFill" />
|
|
<view class="selection-main" @tap="startTime.show()">{{ vdata.startTime || '请选择开始时间' }}</view>
|
|
<view style="color: #fff">---</view>
|
|
<view class="selection-main" @tap="endTime.show()">{{ vdata.endTime || '请选择结束时间' }}</view>
|
|
<image src="/static/iconImg/icon-arrow-downWhite.svg" mode="scaleToFill" />
|
|
</view>
|
|
</template>
|
|
<view class="time-selection flex-center" v-else @tap="timeSelected.show()">
|
|
<image src="/static/iconImg/icon-calendar.svg" mode="scaleToFill" />
|
|
<view class="selection-main">
|
|
{{ vdata.time }}
|
|
<text v-if="isToDay()">今天</text>
|
|
</view>
|
|
<image src="/static/iconImg/icon-arrow-downWhite.svg" mode="scaleToFill" />
|
|
</view>
|
|
<!-- 统计卡片部分 -->
|
|
<view class="stat-card" @click="go.to('PAGES_PAY_ORDER', {}, 'switchTab')">
|
|
<view class="stat-money">
|
|
<view class="stat-title">入账金额 (元)</view>
|
|
<view class="stat-num-title">{{ vdata.totalFinalAmt }}</view>
|
|
<view class="stat-tips"><uni-icons type="help-filled" size="20" color="#c6c6c6" @tap.stop="openTips()" /></view>
|
|
</view>
|
|
<view class="stat-card-info">
|
|
<block v-for="(v, i) in vdata.infoList" :key="i">
|
|
<view class="stat-item">
|
|
<view class="stat-title">{{ v.title }}</view>
|
|
<view class="stat-num" v-if="v.value == 'totalSuccAmt' || v.value == 'totalFeeAmt' || v.value == 'totalRefundAmt'">
|
|
{{ cal.cert2Dollar(v.text) }}
|
|
</view>
|
|
<view class="stat-num" v-else>
|
|
<template v-if="v.value == 'succRate'">{{ v.text }}%</template>
|
|
<template v-else>{{ v.text }}</template>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</view>
|
|
<!-- 统计选择门店等方式部分 -->
|
|
<view class="stat-selection">
|
|
<block v-for="v in vdata.statList" :key="v.value">
|
|
<view class="stat-item" :class="{ 'active-stat': vdata.statSelected == v.value }" @tap="switchStatType(v.value)">{{ v.title }}</view>
|
|
</block>
|
|
</view>
|
|
|
|
<StatInfoCard :dev="vdata.statSelected == 'device'" @sortClick="switchField" @device="switchDevType">
|
|
<JeepayTableList ref="refTable" :reqTableDataFunc="reqTableDataFunc" :searchData="params" :showListNull="false">
|
|
<template #tableBody="{ record }">
|
|
<statCell
|
|
:reality="record.succRate"
|
|
:title="record[vdata.namObj[vdata.statSelected]]"
|
|
:money="money(record)"
|
|
round
|
|
:iconPre="vdata.cardSelected == 'totalSuccAmt' || vdata.cardSelected == 'totalRefundAmt'"
|
|
:iconNext="vdata.cardSelected == 'succRate'"
|
|
:devImage="vdata.statSelected == 'wayCodeType' ? record.wayType : vdata.statSelected == 'store' ? 'store' : record.deviceType"
|
|
@tap="showDetail(params, record)"
|
|
></statCell>
|
|
</template>
|
|
</JeepayTableList>
|
|
</StatInfoCard>
|
|
<!-- 占位 -->
|
|
<view class="store-block"></view>
|
|
<!-- 选择门店按钮 -->
|
|
<view class="store-name" @tap="selectedStore">
|
|
{{ vdata.store?.storeName }}
|
|
<image src="/static/iconImg/icon-arrow-black.svg" mode="scaleToFill" />
|
|
</view>
|
|
<JeepayBizinfoSelect :isShowAllBiz="true" ref="jeepayPopupListSelect" />
|
|
<JTipsPopupContent ref="tips" title="统计释义" buttonText="我知道了" @cancel="vdata.flag = true">
|
|
<block v-for="(v, i) in tipsList" :key="i">
|
|
<view class="tips-wrapper">
|
|
<view class="tips-title">{{ v.title }}</view>
|
|
<view class="tips-info">{{ v.info }}</view>
|
|
</view>
|
|
</block>
|
|
</JTipsPopupContent>
|
|
<xp-picker @confirm="dayConfirm" ref="timeSelected" mode="ymd" v-if="vdata.selected == 'date'" />
|
|
<xp-picker @confirm="dayConfirm" ref="timeSelected" mode="ym" v-if="vdata.selected == 'month'" />
|
|
<xp-picker @confirm="dayConfirm" ref="timeSelected" mode="y" v-if="vdata.selected == 'year'" />
|
|
<xp-picker ref="startTime" mode="ymd" @confirm="customTime($event, 'startTime')" />
|
|
<xp-picker ref="endTime" mode="ymd" @confirm="customTime($event, 'endTime')" />
|
|
<!-- 选择门店 -->
|
|
|
|
<!-- 详情弹窗 -->
|
|
<statInfoPopup ref="infoPopup" />
|
|
<payInfoPopup ref="payInfo" />
|
|
</view>
|
|
</JeepayBackground>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, reactive, ref, getCurrentInstance, nextTick, computed } from 'vue';
|
|
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
|
|
import { startAndEndTime } from '@/commons/utils/timeInspect';
|
|
import dayjs from 'dayjs';
|
|
import { req, reqLoad, $getStatInfo, $getStatistic, API_URL_MCH_STORE_LIST } from '@/http/apiManager.js';
|
|
import StatInfoCard from './components/StatInfoCard.vue';
|
|
import statInfoPopup from './components/statInfoPopup.vue';
|
|
import payInfoPopup from './components/payInfoPopup.vue';
|
|
// import StoreCell from './components/StoreCell.vue'
|
|
import statCell from './components/statCell.vue';
|
|
|
|
import cal from '@/commons/utils/cal.js';
|
|
import go from '@/commons/utils/go.js';
|
|
|
|
// 提示框
|
|
const tips = ref(null);
|
|
// 时间选怎器
|
|
const timeSelected = ref(null);
|
|
const startTime = ref(null);
|
|
const endTime = ref(null);
|
|
// 获取表格实例
|
|
const refTable = ref(null);
|
|
// 获取门店实例
|
|
const jeepayPopupListSelect = ref(null);
|
|
const infoPopup = ref(null);
|
|
const payInfo = ref(null);
|
|
const vdata = reactive({
|
|
selected: 'date',
|
|
statSelected: 'store',
|
|
totalSuccNum: '0.00',
|
|
originalData: {}, //原始数据 计算进度条
|
|
infoList: [
|
|
{ title: '退款金额 (元)', money: '13.15', value: 'totalRefundAmt' },
|
|
{ title: '退款笔数', money: '13.15', value: 'totalRefundNum' },
|
|
{ title: '成交订单笔数', money: '13.15', value: 'totalSuccNum' },
|
|
{ title: '成交订单金额 (元)', money: '6365876.15', value: 'totalSuccAmt' },
|
|
{ title: '手续费（元）', money: '13.15', value: 'totalFeeAmt' },
|
|
{ title: '交易成功率', money: '98.25%', value: 'succRate' }
|
|
],
|
|
statList: [
|
|
{ title: '门店统计', value: 'store' },
|
|
{ title: '支付类型统计', value: 'wayCodeType' },
|
|
{ title: '设备统计', value: 'device' }
|
|
],
|
|
|
|
namObj: {
|
|
store: 'storeName',
|
|
device: 'deviceName',
|
|
wayCodeType: 'name'
|
|
},
|
|
cardSelected: 'totalSuccAmt',
|
|
store: {
|
|
storeId: '',
|
|
storeName: '全部门店'
|
|
}
|
|
});
|
|
const screenList = reactive([
|
|
{ title: '日报', value: 'date' },
|
|
{ title: '月报', value: 'month' },
|
|
{ title: '年报', value: 'year' },
|
|
{ title: '自定义', value: 'custom' }
|
|
]);
|
|
const timeFormat = {
|
|
date: 'YYYY/MM/DD',
|
|
month: 'YYYY/MM',
|
|
year: 'YYYY'
|
|
};
|
|
const tipsList = reactive([
|
|
{ title: '入账金额：', info: '扣除已退款金额及手续费，入账金额为商户实际到账金额。' },
|
|
{ title: '退款笔数：', info: '实际退款订单笔数，若一笔已成交订单退款多次，则计多次。' },
|
|
{ title: '成交订单金额：', info: '支付成功的订单金额，包含部分退款及全额退款的订单。' },
|
|
{ title: '成交订单笔数：', info: '支付成功的订单笔数，包含已全额退款的订单。' },
|
|
{ title: '交易成功率：', info: '成交笔数与全部订单笔数除得的百分比。' }
|
|
]);
|
|
// 选择年月日
|
|
let orgSelectedTime = undefined;
|
|
const selectedTime = (val) => {
|
|
vdata.selected = val.value;
|
|
if (val.value != 'custom') orgSelectedTime = val.value;
|
|
if (val.value == 'custom') {
|
|
vdata.startTime = dayjs(vdata.time).startOf(orgSelectedTime).format(timeFormat['date']);
|
|
vdata.endTime = dayjs(vdata.time).endOf(orgSelectedTime).format(timeFormat['date']);
|
|
return;
|
|
}
|
|
dayConfirm({ value: dayjs(new Date()).format(timeFormat[vdata.selected]) });
|
|
};
|
|
const params = {
|
|
method: 'store',
|
|
queryDateRange: '',
|
|
sortOrder: 'ascend', //排序默认正序
|
|
sortField: 'totalSuccAmt' //默认字段
|
|
};
|
|
// 日报时间选择器确认
|
|
const dayConfirm = (e) => {
|
|
vdata.time = dayjs(e.value).format(timeFormat[vdata.selected]);
|
|
params.queryDateRange = `customDateTime_${dayjs(e.value).startOf('date').format('YYYY-MM-DD HH:mm:ss')}_${dayjs(e.value).endOf(vdata.selected).format('YYYY-MM-DD HH:mm:ss')}`;
|
|
nextTick(() => {
|
|
getStatList();
|
|
refTable.value.refTable(true);
|
|
// refTable.value.refTable(true);
|
|
});
|
|
};
|
|
// 自定义时间选择器
|
|
const customTime = (e, val) => {
|
|
vdata[val] = dayjs(e.value).format('YYYY/MM/DD');
|
|
if (vdata.endTime) {
|
|
if (!startAndEndTime(vdata.startTime, vdata.endTime)) return;
|
|
params.queryDateRange = `customDateTime_${dayjs(vdata.startTime).startOf('date').format('YYYY-MM-DD HH:mm:ss')}_${dayjs(vdata.endTime)
|
|
.endOf('date')
|
|
.format('YYYY-MM-DD HH:mm:ss')}`;
|
|
getStatList();
|
|
refTable.value.refTable(true);
|
|
// refTable.value.refTable(true);
|
|
}
|
|
};
|
|
const getStatList = () => {
|
|
$getStatInfo(params).then(({ bizData }) => {
|
|
vdata.originalData = JSON.parse(JSON.stringify(bizData)); //储存原始数据
|
|
// bizData.totalRefundAmt = cal.cert2Dollar(bizData.totalRefundAmt);
|
|
bizData.allAmount = cal.cert2Dollar(bizData.allAmount);
|
|
bizData.fee = cal.cert2Dollar(bizData.fee);
|
|
vdata.totalFinalAmt =
|
|
cal.cert2Dollar(bizData.totalSuccAmt - bizData.totalFeeAmt - bizData.totalRefundAmt) < 0
|
|
? 0
|
|
: cal.cert2Dollar(bizData.totalSuccAmt - bizData.totalFeeAmt - bizData.totalRefundAmt);
|
|
bizData.round = bizData.round + '%';
|
|
vdata.infoList.forEach((v) => {
|
|
v.text = bizData[v.value];
|
|
});
|
|
});
|
|
};
|
|
//切换字段 切换排序
|
|
const switchField = (val) => {
|
|
vdata.cardSelected = val.value;
|
|
params.sortOrder = val.sort;
|
|
params.sortField = val.value;
|
|
refTable.value.refTable(true);
|
|
// refTable.value.refTable(true);
|
|
};
|
|
const reqTableDataFunc = (params) => {
|
|
return $getStatistic(params);
|
|
};
|
|
const openTips = () => {
|
|
tips.value.open();
|
|
};
|
|
// 判断是不是当天
|
|
const isToDay = () => {
|
|
return dayjs(vdata.time).format('YYYY/MM/DD') == dayjs(new Date()).format('YYYY/MM/DD');
|
|
};
|
|
// 计算进度条
|
|
const calcReality = (val, totalNum) => {
|
|
return (val / totalNum) * 100;
|
|
};
|
|
|
|
// 计算数据需不需要除以 100
|
|
const calcData = (val) => {
|
|
if (vdata.cardSelected == 'totalSuccNum' || vdata.cardSelected == 'totalRefundAmt') return cal.cert2Dollar(val);
|
|
return val;
|
|
};
|
|
const switchStatType = (val) => {
|
|
vdata.statSelected = val;
|
|
params.method = val;
|
|
nextTick(() => {
|
|
refTable.value.refTable(true);
|
|
// refTable.value.refTable(true);
|
|
// getStatList();
|
|
});
|
|
};
|
|
|
|
// 显示列表明细
|
|
function showDetail(params, record) {
|
|
if (vdata.statSelected == 'store') {
|
|
// payInfo.value.open(params, record);
|
|
infoPopup.value.open(params, record);
|
|
} else if (vdata.statSelected == 'device') {
|
|
infoPopup.value.open(params, record);
|
|
}
|
|
}
|
|
|
|
// 切换设备类型
|
|
const switchDevType = (val) => {
|
|
params.deviceType = val;
|
|
refTable.value.refTable(true);
|
|
refTable.value.refTable(true);
|
|
};
|
|
// 获取门店数据
|
|
function reqTableDataByStoreFunc(params) {
|
|
return reqLoad.list(API_URL_MCH_STORE_LIST, params);
|
|
}
|
|
// 选择门店
|
|
const selectedStore = () => {
|
|
jeepayPopupListSelect.value.open(vdata.store).then((selected) => {
|
|
if (selected) {
|
|
vdata.store = selected;
|
|
params.storeId = selected.storeId;
|
|
getStatList();
|
|
refTable.value.refTable(true);
|
|
}
|
|
});
|
|
};
|
|
|
|
// 根据类型计算值
|
|
const money = (record) => {
|
|
if (vdata.cardSelected == 'totalSuccAmt') {
|
|
return cal.cert2Dollar(record.totalSuccAmt);
|
|
} else if (vdata.cardSelected == 'totalSuccNum') {
|
|
return record.totalSuccNum;
|
|
} else if (vdata.cardSelected == 'totalRefundAmt') {
|
|
return cal.cert2Dollar(record.totalRefundAmt);
|
|
} else {
|
|
return record.succRate;
|
|
}
|
|
};
|
|
|
|
// 进入页面初始化数据
|
|
onLoad(() => {
|
|
params.queryDateRange = `customDateTime_${dayjs(new Date()).startOf('date').format('YYYY-MM-DD HH:mm:ss')}_${dayjs(new Date()).endOf('date').format('YYYY-MM-DD HH:mm:ss')}`;
|
|
vdata.time = dayjs().format('YYYY/MM/DD');
|
|
getStatList();
|
|
});
|
|
onReachBottom(() => {});
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.screen-time {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
margin: 10rpx 30rpx;
|
|
margin-top: 20rpx;
|
|
height: 100rpx;
|
|
border-radius: 20rpx;
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
|
|
.time-main {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
border-radius: 20rpx;
|
|
color: rgba(255, 255, 255, 0.75);
|
|
font-size: 32rpx;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.active-screen {
|
|
width: 171rpx;
|
|
background-color: #fff;
|
|
color: $J-color-t21;
|
|
}
|
|
}
|
|
|
|
.time-selection {
|
|
margin-bottom: 10rpx;
|
|
height: 100rpx;
|
|
|
|
image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.selection-main {
|
|
height: auto;
|
|
margin: 0 10rpx 0 20rpx;
|
|
font-size: 30rpx;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.stat-card {
|
|
position: relative;
|
|
margin: 0 30rpx;
|
|
background-color: $J-bg-ff;
|
|
border-radius: $J-b-r32;
|
|
|
|
.stat-title {
|
|
white-space: nowrap;
|
|
margin-bottom: 10rpx;
|
|
font-size: 24rpx;
|
|
color: #a6a6a6;
|
|
}
|
|
|
|
.stat-money {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 202rpx;
|
|
box-shadow: 0 50rpx 70rpx -60rpx rgba(107, 130, 153, 0.2);
|
|
|
|
.stat-num-title {
|
|
font-size: 60rpx;
|
|
font-weight: 700;
|
|
color: #2980fd;
|
|
}
|
|
}
|
|
|
|
.stat-card-info {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
padding: 0 68rpx 50rpx 68rpx;
|
|
|
|
.stat-item {
|
|
width: 175rpx;
|
|
margin-top: 50rpx;
|
|
text-align: center;
|
|
|
|
.stat-num {
|
|
font-size: 30rpx;
|
|
font-weight: 700;
|
|
}
|
|
}
|
|
}
|
|
|
|
.stat-tips {
|
|
position: absolute;
|
|
top: 30rpx;
|
|
right: 30rpx;
|
|
}
|
|
}
|
|
|
|
.stat-selection {
|
|
position: sticky;
|
|
top: 88rpx;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 99;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 46rpx;
|
|
height: 110rpx;
|
|
background-color: #f7f7f7;
|
|
|
|
.stat-item {
|
|
flex-grow: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
font-size: 27rpx;
|
|
color: $J-color-t80;
|
|
background-color: #f7f7f7;
|
|
}
|
|
|
|
.active-stat {
|
|
font-weight: 500;
|
|
color: #2980fd;
|
|
}
|
|
}
|
|
|
|
.tips-wrapper {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
padding: 0 50rpx;
|
|
height: 170rpx;
|
|
|
|
.tips-title {
|
|
margin-bottom: 12rpx;
|
|
font-size: 30rpx;
|
|
}
|
|
|
|
.tips-info {
|
|
font-size: 26rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
|
|
.store-name {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding-bottom: 60rpx;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
height: 100rpx;
|
|
border-top: 1rpx solid #ededed;
|
|
font-size: 30rpx;
|
|
backdrop-filter: blur(20rpx);
|
|
background-color: rgba(252, 252, 252, 0.85);
|
|
}
|
|
|
|
.store-block {
|
|
height: 90rpx;
|
|
}
|
|
|
|
.time-custom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 60rpx;
|
|
}
|
|
|
|
.store-name {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
padding-bottom: 60rpx;
|
|
text-align: center;
|
|
line-height: 100rpx;
|
|
height: 100rpx;
|
|
border-top: 1rpx solid #ededed;
|
|
font-size: 30rpx;
|
|
background-color: rgba(252, 252, 252, 0.85);
|
|
|
|
image {
|
|
margin-left: 10rpx;
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
}
|
|
</style>
|