108 lines
2.6 KiB
Vue
108 lines
2.6 KiB
Vue
<template>
|
|
<view>
|
|
<view>
|
|
<StoreDropDown></StoreDropDown>
|
|
</view>
|
|
|
|
<view class="bg-primary p-base text-center text-white relative">
|
|
<view class="absolute top-20rpx right-20rpx">
|
|
<uv-icon color="#fff" size="48rpx" name="chat"></uv-icon>
|
|
</view>
|
|
<view class="mt-60rpx">昨日累计金额</view>
|
|
<view class="mt-20rpx">截止{{ yesterday }}</view>
|
|
<view class="flex items-center mt-40rpx">
|
|
<view class="flex-1 text-center">
|
|
<view>销售</view>
|
|
<view>{{ yesday_ledger.sales }}</view>
|
|
</view>
|
|
<view class="h-80rpx flex-none flex-center">
|
|
<uv-line direction="vertical"></uv-line>
|
|
</view>
|
|
<view class="flex-1 text-center">
|
|
<view>支出</view>
|
|
<view>{{ yesday_ledger.expenditure }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view class="h-80rpx leading-80rpx px-base">近30天趋势数据</view>
|
|
</view>
|
|
<view>
|
|
<uv-tabs
|
|
:activeStyle="{ color: '#ee2c37' }"
|
|
lineColor="#ee2c37"
|
|
:list="list"
|
|
:current="tabIndex"
|
|
@click="onTabClick"
|
|
:scrollable="false"
|
|
></uv-tabs>
|
|
|
|
<ChartComp :data="countData"></ChartComp>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import { ref, reactive, computed } from 'vue'
|
|
import ChartComp from './components/chart.vue'
|
|
import StoreDropDown from '@/pages/home/components/store-drop-down/index.vue'
|
|
import { http } from '@/utils/request'
|
|
import { onShow } from '@dcloudio/uni-app'
|
|
import { timeFormat } from '@climblee/uv-ui/libs/function'
|
|
const list = ref([
|
|
{
|
|
name: '销售金额',
|
|
key: 'sales',
|
|
},
|
|
{
|
|
name: '支出金额',
|
|
key: 'expenditure',
|
|
},
|
|
])
|
|
const tabIndex = ref(0)
|
|
const detail = ref({
|
|
yesday_ledger: {
|
|
sales: 0,
|
|
expenditure: 0,
|
|
},
|
|
})
|
|
const yesday_ledger = computed(() => detail.value.yesday_ledger)
|
|
const trends_of_30days = computed(() => detail.value.trends_of_30days)
|
|
|
|
const yesterday = computed(() => {
|
|
return timeFormat(Number(new Date()) - 1000 * 60 * 60 * 24)
|
|
})
|
|
const tabObj = computed(() => list.value[tabIndex.value])
|
|
const countData = computed(() => {
|
|
const arr =
|
|
trends_of_30days?.value?.reduce((p, c) => {
|
|
p.push({
|
|
key: timeFormat(c.date, 'mm月dd日'),
|
|
value: c[tabObj.value.key],
|
|
})
|
|
return p
|
|
}, []) ?? []
|
|
return arr
|
|
})
|
|
|
|
const onTabClick = (e) => {
|
|
console.log(e)
|
|
tabIndex.value = e.index
|
|
}
|
|
|
|
onShow(() => {
|
|
getData()
|
|
})
|
|
|
|
const getData = () => {
|
|
http
|
|
.get('/statistics/dashboard', {
|
|
params: {
|
|
date: yesterday.value,
|
|
},
|
|
})
|
|
.then((res) => {
|
|
detail.value = res
|
|
})
|
|
}
|
|
</script>
|