400 lines
9.0 KiB
Vue
400 lines
9.0 KiB
Vue
<template>
|
|
<view class="statistics">
|
|
<view class="title">
|
|
<text>数据统计</text>
|
|
</view>
|
|
<view class="statisticsBox">
|
|
<view class="time-wrapper u-m-l-10 u-m-r-10">
|
|
<view v-for="(v, i) in timeList" :key="i" class="timelistbox">
|
|
<view
|
|
class="time-item"
|
|
@tap="changeTime(v.value, i)"
|
|
:class="[v.value == selected ? 'time-selected' : '']"
|
|
>
|
|
{{ v.label }}
|
|
</view>
|
|
<!-- <view class="xian" v-if="v.value==selected "> </view> -->
|
|
</view>
|
|
</view>
|
|
<view class="time_bootom_line">
|
|
<view
|
|
class="block"
|
|
:style="{
|
|
transform: 'translateX(' + comBlockX + 'rpx) rotate(45deg) ',
|
|
}"
|
|
></view>
|
|
</view>
|
|
<view class="bottom"></view>
|
|
<div class="u-flex u-row-between u-font-28 color-333">
|
|
<div class="u-flex-1">
|
|
<view class="u-m-t-32">
|
|
<view class="">营业额</view>
|
|
<view class="u-m-t-16">
|
|
<up-text
|
|
bold
|
|
color="#318AFE"
|
|
size="20"
|
|
mode="price"
|
|
:text="yingyeE"
|
|
></up-text>
|
|
</view>
|
|
</view>
|
|
<view class="u-m-t-20">
|
|
<view class="">退款</view>
|
|
<view class="u-m-t-14">
|
|
<up-text
|
|
color="#333"
|
|
size="14"
|
|
bold
|
|
mode="price"
|
|
:text="refundAmount"
|
|
></up-text>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
<view class="line"></view>
|
|
<view class="payList u-flex-1 u-p-l-40">
|
|
<view
|
|
class="li w-full u-flex u-row-between u-font-24 color-333"
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
>
|
|
<view class="u-flex">
|
|
<view
|
|
:style="returnColorStyle(item, index)"
|
|
class="circle"
|
|
></view>
|
|
<view class="u-m-l-8">
|
|
{{ item.payType }}
|
|
</view>
|
|
</view>
|
|
|
|
<view style="text-align: center" class="u-m-t-6">
|
|
{{ item.payAmount }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</div>
|
|
|
|
<!-- <view class="u-m-t-8 u-flex u-row-center u-font-24 u-col-center color-666">
|
|
<view class="u-flex" @click="toggleShowAll">
|
|
<view>{{!showAll?'展开全部':'收起全部' }}</view>
|
|
<view class="u-flex u-col-center u-m-t-4 tranistion-2" :class="{rotate:showAll}">
|
|
<up-icon color="#666" name="arrow-down" :size="12"></up-icon>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
</view>
|
|
<datePickerview
|
|
@confirm="datePickerConfirm"
|
|
ref="datePicker"
|
|
style="z-index: 999"
|
|
></datePickerview>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, reactive, computed } from "vue";
|
|
import { onShow } from "@dcloudio/uni-app";
|
|
import { timeList } from "@/data/index.js";
|
|
import dayjs from "dayjs"; //时间格式库
|
|
import datePickerview from "./my-date-pickerview.vue";
|
|
|
|
import { getTrade } from "@/http/api/summary.js";
|
|
|
|
let selected = ref("today");
|
|
let showAll = ref(false);
|
|
let list = ref();
|
|
const pageData = reactive({
|
|
list: [
|
|
{
|
|
payType: "微信小程序",
|
|
key: "wechatPayAmount",
|
|
payAmount: 0,
|
|
bgcolor: "#5AA25F",
|
|
},
|
|
{
|
|
payType: "支付宝小程序",
|
|
key: "aliPayAmount",
|
|
payAmount: 0,
|
|
bgcolor: "#31ACFE",
|
|
},
|
|
{
|
|
payType: "主扫收款",
|
|
key: "scanPayAmount",
|
|
payAmount: 0,
|
|
bgcolor: "#FF5C6D",
|
|
},
|
|
{
|
|
payType: "现金",
|
|
key: "cashPayAmount",
|
|
payAmount: 0,
|
|
bgcolor: "#FC843F",
|
|
},
|
|
{
|
|
payType: "充值",
|
|
key: "rechargeAmount",
|
|
payAmount: 0,
|
|
bgcolor: "#9090FF",
|
|
},
|
|
{
|
|
payType: "挂账",
|
|
key: "creditPayAmount",
|
|
payAmount: 0,
|
|
bgcolor: "#7BA7A4",
|
|
},
|
|
// {payType: '收款码收款', key:'', payAmount: 0,bgcolor:'#5AA25F'},
|
|
],
|
|
});
|
|
|
|
function returnColorStyle(item) {
|
|
return {
|
|
backgroundColor: item.bgcolor,
|
|
};
|
|
}
|
|
|
|
function toggleShowAll() {
|
|
showAll.value = !showAll.value;
|
|
setList();
|
|
}
|
|
|
|
function setList() {
|
|
// list.value = showAll.value ? pageData.list : pageData.list.slice(0, 4)
|
|
list.value = pageData.list;
|
|
}
|
|
|
|
const emit = defineEmits(["totalRevenue"]);
|
|
|
|
const timeSleIndex = ref(0);
|
|
|
|
const datePicker = ref();
|
|
onShow((options) => {
|
|
let iToken = uni.getStorageSync("iToken").tokenValue;
|
|
if (iToken) {
|
|
getlist();
|
|
} else {
|
|
uni.redirectTo({
|
|
url: "/pages/login/index",
|
|
});
|
|
}
|
|
});
|
|
|
|
const yingyeE = ref(0);
|
|
const refundAmount = ref(0);
|
|
/**
|
|
* 获取统计数据
|
|
* @param {Object} start
|
|
* @param {Object} end
|
|
*/
|
|
function getlist(start, end) {
|
|
let beginDate, endDate;
|
|
const rangeType = timeList[timeSleIndex.value].value;
|
|
if(rangeType == "custom"){
|
|
beginDate = start.split(" ")[0];
|
|
endDate = end.split(" ")[0];
|
|
}else{
|
|
beginDate = timeList[timeSleIndex.value].beginDate;
|
|
endDate = timeList[timeSleIndex.value].endDate;
|
|
}
|
|
getTrade({
|
|
beginDate: beginDate,
|
|
endDate: endDate,
|
|
shopId: uni.getStorageSync("shopId"),
|
|
rangeType: rangeType,
|
|
}).then((res) => {
|
|
refundAmount.value = res.refundAmount;
|
|
for (var key in res) {
|
|
pageData.list.map((item) => {
|
|
if (item.key == key) {
|
|
item.payAmount = res[key];
|
|
}
|
|
});
|
|
}
|
|
setList();
|
|
let incomeAmountAll = 0;
|
|
pageData.list.map((item) => {
|
|
incomeAmountAll += item.payAmount || 0;
|
|
});
|
|
|
|
yingyeE.value = incomeAmountAll;
|
|
emit("totalRevenue", incomeAmountAll);
|
|
});
|
|
}
|
|
|
|
/**
|
|
* 日期筛选确认
|
|
* @param {Object} e
|
|
*/
|
|
function datePickerConfirm(e) {
|
|
getlist(e.start, e.end);
|
|
}
|
|
|
|
// 获取当前时间
|
|
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}`;
|
|
};
|
|
|
|
function changeTime(e, index) {
|
|
selected.value = e;
|
|
timeSleIndex.value = index;
|
|
if (e == "custom") {
|
|
datePicker.value.toggle();
|
|
} else {
|
|
getlist();
|
|
}
|
|
}
|
|
|
|
const xArr = [0, 134, 262, 390, 532];
|
|
const comBlockX = computed(() => {
|
|
return xArr[timeSleIndex.value];
|
|
});
|
|
</script>
|
|
<style scoped lang="less">
|
|
ul,
|
|
li {
|
|
list-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
.rotate {
|
|
transform: rotate(180deg);
|
|
}
|
|
|
|
.statistics {
|
|
padding: 0 28rpx;
|
|
margin-top: 50rpx;
|
|
position: relative;
|
|
|
|
.title {
|
|
position: absolute;
|
|
width: 170rpx;
|
|
left: 18rpx;
|
|
height: 50rpx;
|
|
line-height: 50rpx;
|
|
font-weight: 700;
|
|
font-size: 26rpx;
|
|
color: #fff;
|
|
text-align: center;
|
|
background: linear-gradient(109deg, #70b9ff 0%, #629ffa 100%);
|
|
border-radius: 12rpx 12rpx 12rpx 0rpx;
|
|
top: -16px;
|
|
}
|
|
|
|
.statisticsBox {
|
|
width: 694rpx;
|
|
background: #ffffff;
|
|
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
|
padding: 48rpx 32rpx 32rpx;
|
|
box-sizing: border-box;
|
|
margin-top: 54rpx;
|
|
|
|
.bottom {
|
|
}
|
|
|
|
.time-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.timelistbox {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.time-item {
|
|
font-size: 28rpx;
|
|
text-align: center;
|
|
padding-bottom: 10rpx;
|
|
}
|
|
|
|
.xian {
|
|
width: 40rpx;
|
|
height: 3rpx;
|
|
background-color: #318afe;
|
|
// position: absolute;
|
|
// left: 16rpx;
|
|
// bottom: 0;
|
|
}
|
|
}
|
|
|
|
.time-selected {
|
|
color: #318afe;
|
|
font-size: 32rpx !important;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.line {
|
|
width: 0rpx;
|
|
height: 170rpx;
|
|
border: 2rpx solid #eee8e8;
|
|
}
|
|
|
|
.payList {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
flex-wrap: wrap;
|
|
|
|
.li {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
margin-top: 12rpx;
|
|
|
|
> view {
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.circle {
|
|
width: 8rpx;
|
|
height: 8rpx;
|
|
border-radius: 8rpx;
|
|
}
|
|
|
|
.time_bootom_line {
|
|
height: 16rpx;
|
|
position: relative;
|
|
border-bottom: 1px solid #629ffa;
|
|
|
|
.block {
|
|
width: 18rpx;
|
|
height: 18rpx;
|
|
box-sizing: border-box;
|
|
background: #fff;
|
|
position: absolute;
|
|
border-top: 0.5rpx solid #629ffa;
|
|
border-left: 0.5rpx solid #629ffa;
|
|
left: 30rpx;
|
|
top: 6rpx;
|
|
transform: rotate(45deg);
|
|
transform-origin: center;
|
|
transition: all 0.2s linear;
|
|
}
|
|
}
|
|
</style>
|