302 lines
7.6 KiB
Vue
302 lines
7.6 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?list.sale.incomeAmountAll:0}}</view>
|
|
</view>
|
|
<view class="money-list">
|
|
<view class="money-item">
|
|
<text class="money-title">消费笔数</text>
|
|
<view class="money-num">{{ list?list.vip.useNum:0 }}</view>
|
|
</view>
|
|
<view class="money-item">
|
|
<text class="money-title">退款金额 (元)</text>
|
|
<view class="money-num">{{ list?list.sale.outAmount:0}}</view>
|
|
</view>
|
|
<view class="money-item">
|
|
<text class="money-title">消费金额</text>
|
|
<view class="money-num">{{ list?list.vip.useAmount:0 }}</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>
|
|
</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 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 { getTrade } from '@/http/api/summary.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
|
|
}
|
|
getTrade({
|
|
shopId: uni.getStorageSync('shopId'),
|
|
startTime,
|
|
endTime,
|
|
}).then((res) => {
|
|
list.value = res
|
|
})
|
|
}
|
|
// 切换 时间卡片
|
|
function changeTimeFunc(val) {
|
|
vdata.timeSelected = val;
|
|
getList()
|
|
// 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> |