295 lines
7.8 KiB
Vue
295 lines
7.8 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 { timeList } from '@/data/index.js'
|
|
|
|
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"]);
|
|
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>
|