czg_team/cashier_admin_app
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
YeMingfei666
2024-09-10 10:49:08 +08:00
parent b5fd06b800
commit dd4f5938da
6391 changed files with 722800 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
pages/statPage/components/statInfoPopup.vue Normal file
View File

@@ -0,0 +1,203 @@
<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>