同步代码
This commit is contained in:
GaoHao
248
pages/index/components/statistics.vue
Normal file
248
pages/index/components/statistics.vue
Normal file
@@ -0,0 +1,248 @@
|
||||
<template>
|
||||
<view class="statistics">
|
||||
<view class="statisticsBox">
|
||||
<view class="time-wrapper">
|
||||
<view v-for="(v, i) in timeList" :key="i" class="timelistbox">
|
||||
<view class="time-item" @tap="changeTime(v.value)" :class="{ 'time-selected':v.value==selected }">
|
||||
{{v.label}}
|
||||
</view>
|
||||
<view class="xian" v-if="v.value==selected "> </view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="payList">
|
||||
<view class="li" v-for="(item,index) in list" :key="index">
|
||||
<view style="text-align: center;">
|
||||
{{item.payType}}
|
||||
</view>
|
||||
<view style="text-align: center;" class="u-m-t-6">
|
||||
{{item.payAmount}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<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 {
|
||||
summaryTrade,
|
||||
} from '@/http/yskApi/requestAll.js';
|
||||
import dayjs from 'dayjs' //时间格式库
|
||||
import {
|
||||
getCurrentInstance,
|
||||
ref
|
||||
} from 'vue';
|
||||
import datePickerview from './my-date-pickerview.vue'
|
||||
import {
|
||||
onShow
|
||||
} from '@dcloudio/uni-app';
|
||||
let selected = ref('today')
|
||||
let showAll = ref(false);
|
||||
let $list = []
|
||||
|
||||
function toggleShowAll() {
|
||||
showAll.value = !showAll.value
|
||||
setList()
|
||||
}
|
||||
|
||||
function setList() {
|
||||
list.value = showAll.value ? $list : $list.slice(0, 4)
|
||||
}
|
||||
let list = ref()
|
||||
const emit = defineEmits(['totalRevenue'])
|
||||
const timeList = [{
|
||||
label: '今天',
|
||||
value: 'today'
|
||||
},
|
||||
{
|
||||
label: '昨天',
|
||||
value: 'yesterday'
|
||||
},
|
||||
{
|
||||
label: '本周',
|
||||
value: 'circumference'
|
||||
}, {
|
||||
label: '本月',
|
||||
value: 'moon'
|
||||
},
|
||||
{
|
||||
label: '自定义',
|
||||
value: 'custom'
|
||||
}
|
||||
]
|
||||
const currentInstance = getCurrentInstance()
|
||||
onShow((options) => {
|
||||
let iToken = uni.getStorageSync('iToken')
|
||||
if (iToken) {
|
||||
getlist()
|
||||
} else {
|
||||
uni.redirectTo({
|
||||
url: '/pages/login/index'
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
function getlist(start, end) {
|
||||
let startTime, endTime;
|
||||
if (selected.value == 'today') {
|
||||
startTime = dayjs().format('YYYY-MM-DD') + ' 00:00:00'
|
||||
endTime = dayjs().format('YYYY-MM-DD') + ' 23:59:59'
|
||||
} else if (selected.value == 'yesterday') {
|
||||
startTime = formatTime() + ' 00:00:00'
|
||||
endTime = formatTime() + ' 23:59:59'
|
||||
} else if (selected.value == 'circumference') {
|
||||
var now = new Date();
|
||||
var nowTime = now.getTime();
|
||||
var day = now.getDay();
|
||||
var oneDayTime = 24 * 60 * 60 * 1000;
|
||||
//显示周一
|
||||
var MondayTime = nowTime - (day - 1) * oneDayTime;
|
||||
//显示周日
|
||||
var SundayTime = nowTime + (7 - day) * oneDayTime;
|
||||
startTime = dayjs(MondayTime).format('YYYY-MM-DD 00:00:00')
|
||||
endTime = dayjs(SundayTime).format('YYYY-MM-DD 23:59:59')
|
||||
} else if (selected.value == 'moon') {
|
||||
startTime = dayjs().startOf('month').format('YYYY-MM-DD') + ' 00:00:00'
|
||||
endTime = dayjs().endOf('month').format('YYYY-MM-DD') + ' 23:59:59'
|
||||
} else if (selected.value == 'custom') {
|
||||
let s = start.substring(0, start.indexOf(' '))
|
||||
let e = end.substring(0, end.indexOf(' '))
|
||||
startTime = s + ' 00:00:00'
|
||||
endTime = e + ' 23:59:59'
|
||||
}
|
||||
summaryTrade({
|
||||
shopId: uni.getStorageSync('shopId'),
|
||||
startTime,
|
||||
endTime,
|
||||
}).then((res) => {
|
||||
$list = res.sale.payCount
|
||||
setList()
|
||||
emit('totalRevenue', res.sale.incomeAmountAll)
|
||||
})
|
||||
}
|
||||
|
||||
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) {
|
||||
selected.value = e
|
||||
if (e == 'custom') {
|
||||
currentInstance.ctx.$refs.datePicker.toggle()
|
||||
} else {
|
||||
getlist()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
ul,
|
||||
li {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
|
||||
.statistics {
|
||||
padding: 0 28rpx;
|
||||
|
||||
.statisticsBox {
|
||||
width: 694rpx;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(0, 0, 0, 0.16);
|
||||
border-radius: 16rpx 16rpx 16rpx 16rpx;
|
||||
padding: 32rpx 22rpx;
|
||||
box-sizing: border-box;
|
||||
margin-top: 54rpx;
|
||||
|
||||
.time-wrapper {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
.payList {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 32rpx;
|
||||
|
||||
.li {
|
||||
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
color: #666666;
|
||||
width: 25%;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 24rpx;
|
||||
|
||||
>view {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user