new-cashier/jeepay-ui-uapp-merchant/pages/index/components/Stats.vue

<template>
	<view class="index-header" @tap="go.to('PAGES_STAT')">
		<view class="index-selected">
			<view class="index-time">
				<block v-for="v in timeList" :key="v.value">
					<view class="time-item flex-center" :class="{ 'time-active': vdata.timeSelected == v.value }" @tap.stop="changeTimeFunc(v.value)">
						{{ v.title }}
					</view>
				</block>
			</view>
			<view class="index-scan flex-center" @click.stop="scanFunc">
				<image src="/static/iconImg/icon-scan-index.svg" mode="scaleToFill" />
			</view>
		</view>
		<view class="receipts-money">
			<text class="money-title">成交金额 (元)</text>
			<view class="money-num">{{ vdata.payAmount <= -1 ? '--' : cal.cert2Dollar(vdata.payAmount) }}</view>
		</view>
		<view class="money-list">
			<view class="money-item">
				<text class="money-title">成交笔数</text>
				<view class="money-num">{{ vdata.payCount <= -1 ? '--' : vdata.payCount }}</view>
			</view>
			<view class="money-item">
				<text class="money-title">退款金额 (元)</text>
				<view class="money-num">{{ vdata.refundAmount <= -1 ? '--' : cal.cert2Dollar(vdata.refundAmount) }}</view>
			</view>
			<view class="money-item">
				<text class="money-title">退款笔数</text>
				<view class="money-num">{{ vdata.refundCount <= -1 ? '--' : vdata.refundCount }}</view>
			</view>
		</view>
		<view class="money-list" v-if="vdata.memberIsShow">
			<view class="money-item">
				<text class="money-title">会员充值(元)</text>
				<view class="money-num">{{ cal.cert2Dollar(memberData.payAmount) }}</view>
			</view>
			<view class="money-item">
				<text class="money-title">会员消费(元)</text>
				<view class="money-num">{{ cal.cert2Dollar(Math.abs(memberData.changeAmount)) }}</view>
			</view>

			<view class="money-item">
				<text class="money-title">会员消费笔数</text>
				<view class="money-num">{{ memberData.changeCount }}</view>
			</view>
		</view>
		<button v-if="ak.ent.has('ENT_C_QUICKCASHIER')" class="quick-money flex-center" @tap.stop="go.to('PAGES_QUICK_PAY')">快捷收银</button>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { $indexStatistics, $memberInfoCount } from '@/http/apiManager.js';
import cal from '@/commons/utils/cal.js';
import go from '@/commons/utils/go.js';
import ak from '@/commons/utils/ak.js';
import ent from '@/commons/utils/ent.js';
import unionScan from '@/commons/utils/unionScan.js';
import storageManage from '@/commons/utils/storageManage.js';

onMounted(() => {
	vdata.memberIsShow = ent.has('ENT_MCH_MEMBER') && storageManage.userInfo().isHasMemberEnt;
	if (ent.has('ENT_MCH_MEMBER') && storageManage.userInfo().isHasMemberEnt) {
		getMemberData();
	}
});
const emits = defineEmits(['click']);
const timeList = [
	{ title: '今天', value: 'today' },
	{ title: '昨天', value: 'yesterday' },
	{ title: '近7天', value: 'near2now_7' },
	{ title: '近30天', value: 'near2now_30' }
];

const vdata = reactive({
	timeSelected: 'today', // 当前时间选择器的
	payAmount: -1, // 实收金额
	payCount: -1, // 交易笔数
	refundAmount: -1, // 退款金额
	refundCount: -1, // 退款笔数
	memberIsShow: false //是否开启会员模块
});
const memberData = reactive({});
// 切换 时间卡片
function changeTimeFunc(val) {
	vdata.timeSelected = val;
	refData();
	if (vdata.memberIsShow) {
		getMemberData();
	}
}
// 根据选择请求数据
function refData() {
	// 获取 统计数据
	$indexStatistics(vdata.timeSelected).then(({ bizData }) => {
		vdata.payAmount = bizData.totalSuccAmt;
		vdata.payCount = bizData.totalSuccNum;
		vdata.refundAmount = bizData.totalRefundAmt;
		vdata.refundCount = bizData.totalRefundNum;
	});
}

// 扫码动作
function scanFunc() {
	unionScan.scan(true).then((res) => {
		// 登录类型
		if (res.type == unionScan.QR_TYPE_LOGIN) {
			return go.to('PAGES_SCAN_LOGIN', { qrcodeNo: res.originQrVal });
		}

		// 二维码
		if (res.type == unionScan.QR_TYPE_QRC) {
			return go.to('PAGES_APP_CODE_BIND', { qrcId: res.bizValue });
		}
	});
}
const getMemberData = () => {
	$memberInfoCount({ queryDateRange: vdata.timeSelected }).then(({ bizData }) => {
		Object.assign(memberData, bizData);
	});
};
defineExpose({ refData });
</script>

<style lang="scss" scoped>
.index-header {
	width: 680rpx;
	margin: 0 auto;
	transform: translateY(30rpx);
	margin-bottom: 25rpx;
	padding: 20rpx;
	box-sizing: border-box;
	border-radius: $J-b-r32;
	background: $jeepay-bg-primary;
	backdrop-filter: blur(20rpx);
	box-shadow: 0 50rpx 70rpx -60rpx rgba(0, 65, 164, 0.5);
	.index-selected {
		display: flex;
		justify-content: space-between;
		.index-time {
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 490rpx;
			height: 90rpx;
			border-radius: 20rpx;
			padding: 10rpx;
			background-color: rgba($color: #fff, $alpha: 0.1);
			.time-item {
				flex: 1;
				// width: 120rpx;
				height: 100%;
				font-size: 32rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 0.75);
			}
			.time-active {
				background-color: $J-bg-ff;
				color: $J-color-t21;
				border-radius: 12rpx;
			}
		}
		.index-scan {
			width: 110rpx;
			height: 110rpx;
			border-radius: 20rpx;
			background-color: rgba($color: #fff, $alpha: 0.1);
			image {
				width: 41rpx;
				height: 35rpx;
			}
		}
	}
	.receipts-money {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin: 30rpx 0;
		color: $J-color-tff;
		.money-num {
			font-size: 70rpx;
			font-weight: 500;
		}
	}
	.money-list {
		display: flex;
		justify-content: space-between;
		padding: 0 72rpx;
		margin-bottom: 50rpx;
		text-align: center;
		color: $J-color-tff;
		.money-item {
			.money-num {
				font-size: 32rpx;
				font-weight: 500;
			}
		}
	}
	.money-title {
		margin-bottom: 10rpx;
		font-size: 26rpx;
		font-weight: 400;
		color: $J-color-tSff;
	}
	.quick-money {
		height: 110rpx;
		border-radius: 20rpx;
		color: $J-color-t29;
	}
}
</style>