204 lines
5.6 KiB
Vue
204 lines
5.6 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">
|
|
<!-- <image :src="imgObj[vdata.record.deviceType]" mode="scaleToFill" /> -->
|
|
<view class="info-content">
|
|
<view class="info-name">
|
|
<text>{{ vdata.record?.storeName || vdata.record?.deviceName }}</text>
|
|
<view class="icon-close" @tap="popup.close()">
|
|
<image src="/static/iconImg/icon-x.svg" mode="scaleToFill" />
|
|
</view>
|
|
</view>
|
|
<view class="sub-name">{{ vdata.record?.storeId || vdata.record?.deviceNo }}</view>
|
|
</view>
|
|
</view>
|
|
<view class="stat-card">
|
|
<view class="stat-money">
|
|
<view class="stat-title">入账金额 (元)</view>
|
|
<view class="stat-num-title">{{ cal.cert2Dollar(vdata.totalSuccAmt - vdata.totalFeeAmt - vdata.totalRefundAmt) }}</view>
|
|
</view>
|
|
<view class="stat-card-info">
|
|
<view class="stat-item">
|
|
<view class="stat-title">成交订单金额 (元)</view>
|
|
<view class="stat-num">{{ cal.cert2Dollar(vdata.totalSuccAmt) }}</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-title">成交订单笔数</view>
|
|
<view class="stat-num">{{ vdata.totalSuccNum }}</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-title">交易成功率</view>
|
|
<view class="stat-num">{{ vdata.succRate }}%</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-title">交易手续费</view>
|
|
<view class="stat-num">{{ cal.cert2Dollar(vdata.totalFeeAmt) }}</view>
|
|
</view>
|
|
<!-- <view class="stat-item">
|
|
<view class="stat-title">垫资手续费</view>
|
|
<view class="stat-num">---</view>
|
|
</view> -->
|
|
<!-- <view class="stat-item">
|
|
<view class="stat-title">优惠金额</view>
|
|
<view class="stat-num">{{ cal.cert2Dollar(vdata.totalDiscountAmt) }}%</view>
|
|
</view> -->
|
|
<view class="stat-item">
|
|
<view class="stat-title">退款金额 (元)</view>
|
|
<view class="stat-num">{{ cal.cert2Dollar(vdata.totalRefundAmt) }}</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-title">退款笔数</view>
|
|
<view class="stat-num">{{ vdata.totalRefundNum }}</view>
|
|
</view>
|
|
<!-- <view class="stat-item">
|
|
<view class="stat-title">补贴金额</view>
|
|
<view class="stat-num">---</view>
|
|
</view> -->
|
|
<!-- <view class="stat-item">
|
|
<view class="stat-title">交易成功笔数</view>
|
|
<view class="stat-num">{{ vdata.totalSuccNum }}</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-title">成功交易金额 (元)</view>
|
|
<view class="stat-num">{{ cal.cert2Dollar(vdata.totalSuccAmt) }}</view>
|
|
</view>
|
|
<view class="stat-item">
|
|
<view class="stat-title">总交易笔数</view>
|
|
<view class="stat-num">{{ vdata.totalNum }}</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { onMounted, reactive, ref, inject } from 'vue';
|
|
import { $getStatInfo, $getStatistic } from '@/http/apiManager.js';
|
|
import cal from '@/commons/utils/cal.js';
|
|
|
|
// 获取弹窗实例
|
|
const popup = ref(null);
|
|
const vdata = reactive({
|
|
record: {}
|
|
});
|
|
const imgObj = reactive({
|
|
store: '/static/indexImg/icon-store.svg',
|
|
qr_code: '/pageDevice/static/devIconImg/icon-code.svg',
|
|
scan_pos: '/pageDevice/static/devIconImg/icon-pos.svg',
|
|
auto_pos: '/pageDevice/static/devIconImg/icon-scanPos.svg',
|
|
cash_plugin: '/pageDevice/static/devIconImg/icon-horn.svg'
|
|
});
|
|
const getInfo = (params) => {
|
|
$getStatInfo(params).then(({ bizData }) => {
|
|
Object.assign(vdata, bizData);
|
|
});
|
|
};
|
|
const open = (params, record) => {
|
|
const obj = JSON.parse(JSON.stringify(params));
|
|
vdata.record = record;
|
|
if (!vdata.record.deviceType) vdata.record.deviceType = 'store';
|
|
obj.deviceNo = record.deviceNo ? record.deviceNo : '';
|
|
obj.storeId = record.storeId ? record.storeId : '';
|
|
getInfo(obj);
|
|
popup.value.open();
|
|
};
|
|
let changePageMetaOverflowFunc = inject('changePageMetaOverflowFunc');
|
|
const change = (e) => {
|
|
if (changePageMetaOverflowFunc) {
|
|
changePageMetaOverflowFunc(!e.show);
|
|
}
|
|
};
|
|
defineExpose({ open });
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.info-wrapper {
|
|
// height: 777rpx;
|
|
border-radius: 32rpx 32rpx 0 0;
|
|
background-color: #fff;
|
|
padding-bottom: 32upx;
|
|
}
|
|
.info-title {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 40rpx;
|
|
height: 160rpx;
|
|
border-bottom: 1rpx solid #ededed;
|
|
image {
|
|
margin-right: 20rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
.info-content {
|
|
flex: 1;
|
|
.info-name {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 30rpx;
|
|
font-weight: 500;
|
|
.icon-close {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #f2f2f2;
|
|
image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
.sub-name {
|
|
font-size: 26rpx;
|
|
color: #808080;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
}
|
|
}
|
|
</style>
|