114 lines
3.1 KiB
Vue
114 lines
3.1 KiB
Vue
<template>
|
|
<uni-popup ref="popup" type="bottom" mask-background-color="rgba(0,0,0,.5)" @change="change" :safe-area="false">
|
|
<view class="info-wrapper">
|
|
<view class="info-title">
|
|
<text>支付方式统计明细</text>
|
|
<view class="icon-close" @tap="popup.close()"><image src="/static/iconImg/icon-x.svg" mode="scaleToFill" /></view>
|
|
</view>
|
|
<StatInfoCard @sortClick="switchField" :fixed="true">
|
|
<JTableList ref="refTable" :reqTableDataFunc="reqTableDataFunc" :initData="false" height="220rpx" :searchData="vdata.params">
|
|
<template #tableBody="{ record }">
|
|
<statCell
|
|
:imgNone="false"
|
|
:title="record.wayCode"
|
|
:money="calcData(record[vdata.cardSelected])"
|
|
:reality="calcReality(record.totalSuccNum, record.totalNum)"
|
|
:round="vdata.cardSelected == 'round'"
|
|
:iconPre="vdata.cardSelected == 'totalFinalAmt' || vdata.cardSelected == 'totalRefundAmt '"
|
|
:iconNext="vdata.cardSelected == 'round'"
|
|
/>
|
|
</template>
|
|
</JTableList>
|
|
</StatInfoCard>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { nextTick, onMounted, reactive, ref, inject } from 'vue';
|
|
import { onReachBottom } from '@dcloudio/uni-app';
|
|
import { $getStatistic } from '@/http/apiManager.js';
|
|
import StatInfoCard from './StatInfoCard.vue';
|
|
import statCell from './statCell.vue';
|
|
import cal from '@/commons/utils/cal.js';
|
|
// 获取弹窗实例
|
|
const popup = ref(null);
|
|
const refTable = ref(null);
|
|
const vdata = reactive({
|
|
cardSelected: 'totalFinalAmt',
|
|
record: {},
|
|
params: {}
|
|
});
|
|
const open = (params, record) => {
|
|
const obj = JSON.parse(JSON.stringify(params));
|
|
vdata.record = record;
|
|
obj.wayCodeType = record.wayType;
|
|
obj.method = 'wayCode';
|
|
vdata.params = obj;
|
|
popup.value.open();
|
|
nextTick(() => {
|
|
refTable.value.refTable(true);
|
|
});
|
|
};
|
|
const reqTableDataFunc = (params) => {
|
|
return $getStatistic(params);
|
|
};
|
|
//切换字段 切换排序
|
|
const switchField = (val) => {
|
|
vdata.cardSelected = val.value;
|
|
vdata.params.sortOrder = val.sort;
|
|
vdata.params.sortField = val.value;
|
|
refTable.value.refTable(true);
|
|
};
|
|
// 计算数据需不需要除以 100
|
|
const calcData = (val) => {
|
|
if (vdata.cardSelected == 'totalFinalAmt' || vdata.cardSelected == 'totalRefundAmt') return cal.cert2Dollar(val);
|
|
return val;
|
|
};
|
|
// 计算进度条
|
|
const calcReality = (val, totalNum) => {
|
|
return (val / totalNum) * 100;
|
|
};
|
|
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc');
|
|
const change = (e) => {
|
|
if (changePageMetaOverflowFunc) {
|
|
changePageMetaOverflowFunc(!e.show);
|
|
}
|
|
};
|
|
onReachBottom(() => {});
|
|
defineExpose({ open });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.info-wrapper {
|
|
height: 70vh;
|
|
overflow-y: scroll;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
background-color: #fff;
|
|
}
|
|
.info-title {
|
|
position: sticky;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 0 40rpx;
|
|
height: 110rpx;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
border-bottom: 1rpx solid #ededed;
|
|
.icon-close {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #f2f2f2;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|