269 lines
7.5 KiB
Vue
269 lines
7.5 KiB
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">{{ list.sale.incomeAmountAll}}</view>
|
|
</view>
|
|
<view class="money-list">
|
|
<view class="money-item">
|
|
<text class="money-title">消费笔数</text>
|
|
<view class="money-num">{{ list.vip.useNum }}</view>
|
|
</view>
|
|
<view class="money-item">
|
|
<text class="money-title">退款金额 (元)</text>
|
|
<view class="money-num">{{ list.sale.outAmount}}</view>
|
|
</view>
|
|
<view class="money-item">
|
|
<text class="money-title">消费笔数</text>
|
|
<view class="money-num">{{ list.count.useNum }}</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>
|
|
<view>
|
|
<!-- <text class="money-title">展开全部</text> -->
|
|
</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 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';
|
|
import dayjs from 'dayjs' //时间格式库
|
|
import {
|
|
summaryTrade,
|
|
} from '@/http/yskApi/requestAll.js';
|
|
onMounted(() => {
|
|
vdata.memberIsShow = ent.has('ENT_MCH_MEMBER') && storageManage.userInfo().isHasMemberEnt;
|
|
if (ent.has('ENT_MCH_MEMBER') && storageManage.userInfo().isHasMemberEnt) {
|
|
getMemberData();
|
|
}
|
|
getList()
|
|
});
|
|
const emits = defineEmits(['click']);
|
|
const timeList = [
|
|
{ title: '今天', value: 'today' },
|
|
{ title: '昨天', value: 'yesterday' },
|
|
{ title: '近7天', value: 'circumference' },
|
|
{ title: '近30天', value: 'moon' }
|
|
];
|
|
let list = ref()
|
|
const vdata = reactive({
|
|
timeSelected: 'today', // 当前时间选择器的
|
|
payAmount: -1, // 实收金额
|
|
payCount: -1, // 交易笔数
|
|
refundAmount: -1, // 退款金额
|
|
refundCount: -1, // 退款笔数
|
|
memberIsShow: false //是否开启会员模块
|
|
});
|
|
const memberData = reactive({});
|
|
function getList(){
|
|
let startTime, endTime;
|
|
if (vdata.timeSelected == 'today') {
|
|
startTime = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
|
|
endTime = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
|
|
} else if (vdata.timeSelected == 'yesterday') {
|
|
startTime = formatTime() + ' 00:00:00'
|
|
endTime = formatTime() + ' 23:59:59'
|
|
} else if (vdata.timeSelected == 'circumference') {
|
|
startTime = dayjs().add(-7, 'day').format('YYYY-MM-DD 00:00:00')
|
|
endTime = dayjs().format('YYYY-MM-DD 23:59:59')
|
|
} else if (vdata.timeSelected == 'moon') {
|
|
startTime = dayjs().add(-30, 'day').format('YYYY-MM-DD 00:00:00')
|
|
endTime = dayjs().format('YYYY-MM-DD 23:59:59')
|
|
} else if (vdata.timeSelected == 'custom') {
|
|
startTime = start
|
|
endTime = end
|
|
}
|
|
summaryTrade({
|
|
shopId: uni.getStorageSync('shopId'),
|
|
startTime,
|
|
endTime,
|
|
}).then((res) => {
|
|
list.value = res
|
|
})
|
|
}
|
|
// 切换 时间卡片
|
|
function changeTimeFunc(val) {
|
|
vdata.timeSelected = val;
|
|
getList()
|
|
// console.log(vdata.timeSelected,'调试121')
|
|
// 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 });
|
|
}
|
|
});
|
|
}
|
|
// 获取当前时间
|
|
function getdate() {
|
|
const dt = new Date();
|
|
const y = dt.getFullYear();
|
|
const m = (dt.getMonth() + 1 + "").padStart(2, "0");
|
|
const d = (dt.getDate() + "").padStart(2, "0");
|
|
const hh = (dt.getHours() + "").padStart(2, "0");
|
|
const mm = (dt.getMinutes() + "").padStart(2, "0");
|
|
const ss = (dt.getSeconds() + "").padStart(2, "0");
|
|
return `${y}-${m}-${d}`;
|
|
}
|
|
// 获取昨天时间
|
|
const formatTime = () => {
|
|
let strDate = getdate()
|
|
let dateFormat = new Date(strDate);
|
|
dateFormat = dateFormat.setDate(dateFormat.getDate() - 1);
|
|
dateFormat = new Date(dateFormat);
|
|
let y = dateFormat.getFullYear()
|
|
let m = (dateFormat.getMonth() + 1).toString().padStart(2, '0')
|
|
let d = dateFormat.getDate().toString().padStart(2, '0')
|
|
return `${y}-${m}-${d}`
|
|
}
|
|
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>
|