main
parent
3a980c0f20
commit
ce6453c610
|
|
@ -1,134 +1,120 @@
|
|||
<template>
|
||||
<view class="relative">
|
||||
<uv-scroll-list
|
||||
:indicator="true"
|
||||
indicatorColor="#fff0f0"
|
||||
indicatorActiveColor="#f56c6c"
|
||||
>
|
||||
<view>
|
||||
<template v-for="(item, i) in list" :key="i">
|
||||
<view v-if="i == 0" class="flex items-center w-full text-24rpx">
|
||||
<view
|
||||
class="w-140rpx text-center flex-none h-120rpx flex-center td"
|
||||
>
|
||||
<!-- 日期 -->
|
||||
</view>
|
||||
<view>
|
||||
<scroll-view :style="{ height: `${height}px` }" class="cu-scroll-view" scroll-x scroll-y>
|
||||
<view class="">
|
||||
<view class="sticky top-0 bg-white z-11">
|
||||
<template v-for="(item, i) in list" :key="i">
|
||||
<view v-if="i == 0" class="flex items-center w-full text-24rpx">
|
||||
<view
|
||||
class="w-140rpx sticky z-11 bg-white left-0 text-center flex-none h-120rpx flex-center td"
|
||||
>
|
||||
日期
|
||||
</view>
|
||||
|
||||
<view class="w-400rpx text-center leading-60rpx flex-none">
|
||||
<view class="h-60rpx td">总账</view>
|
||||
<template v-if="checkPermission(['admin'])">
|
||||
<view class="h-60rpx grid grid-cols-3">
|
||||
<view class="td">销售</view>
|
||||
<view class="td">支出</view>
|
||||
<view class="td">新增客户</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="isLotteryStore">
|
||||
<view class="h-60rpx grid grid-cols-3">
|
||||
<view class="w-400rpx text-center leading-60rpx flex-none">
|
||||
<view class="h-60rpx td">总账</view>
|
||||
<template v-if="checkPermission(['admin'])">
|
||||
<view class="h-60rpx grid grid-cols-3">
|
||||
<view class="td">销售</view>
|
||||
<view class="td">支出</view>
|
||||
<view class="td">新增客户</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else-if="isLotteryStore">
|
||||
<view class="h-60rpx grid grid-cols-3">
|
||||
<view class="td">销售</view>
|
||||
<view class="td">兑奖</view>
|
||||
<view class="td">新增客户</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="h-60rpx grid grid-cols-3">
|
||||
<view class="td">销售</view>
|
||||
<view class="td">支出</view>
|
||||
<view class="td">新增客户</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view
|
||||
class="text-center leading-60rpx w-200rpx flex-none"
|
||||
v-for="(ty, j) in item.lottery_types"
|
||||
:key="j"
|
||||
>
|
||||
<view class="td">{{ ty.name }}</view>
|
||||
<view class="grid grid-cols-2">
|
||||
<view class="td">销售</view>
|
||||
<view class="td">兑奖</view>
|
||||
<view class="td">新增客户</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="h-60rpx grid grid-cols-3">
|
||||
<view class="td">销售</view>
|
||||
<view class="td">支出</view>
|
||||
<view class="td">新增客户</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
<view
|
||||
class="text-center leading-60rpx w-200rpx flex-none"
|
||||
v-for="(ty, j) in item.lottery_types"
|
||||
:key="j"
|
||||
>
|
||||
<view class="td">{{ ty.name }}</view>
|
||||
<view class="grid grid-cols-2">
|
||||
<view class="td">销售</view>
|
||||
<view class="td">兑奖</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<template v-for="(item, i) in list" :key="i">
|
||||
<view
|
||||
class="flex justify-between text-center text-24rpx items-center card-shadow bg-white rounded-19rpx"
|
||||
>
|
||||
<view class="flex-1 w-140rpx flex-none td flex-center h-60rpx">
|
||||
<!-- {{ timeFormat(item.date, 'mm-dd') }} -->
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 总账 -->
|
||||
<view class="w-400rpx flex flex-none">
|
||||
<template v-if="checkPermission(['admin'])">
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.sales
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.expenditure
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.new_customers
|
||||
}}</view>
|
||||
</template>
|
||||
<template v-else-if="isLotteryStore">
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.sales
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.expenditure
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.new_customers
|
||||
}}</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.sales
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.expenditure
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.new_customers
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
<view class="">
|
||||
<template v-for="(item, i) in list" :key="i">
|
||||
<view
|
||||
class="flex justify-between text-center text-24rpx items-center card-shadow bg-white rounded-19rpx"
|
||||
>
|
||||
<view
|
||||
class="flex-1 w-140rpx flex-none td flex-center h-60rpx sticky left-0 bg-white"
|
||||
>
|
||||
{{ timeFormat(item.date, 'mm-dd') }}
|
||||
</view>
|
||||
|
||||
<!-- 种类 -->
|
||||
<template v-for="(ty, j) in item.lottery_types" :key="j">
|
||||
<view class="flex-1 td h-60rpx flex-center">{{ ty.sales }}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
ty.expenditure
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</uv-scroll-list>
|
||||
<view>
|
||||
<view class="absolute left-0 right-0 top-0 bottom-0 pointer-events-none">
|
||||
<template v-for="(item, i) in list" :key="i">
|
||||
<view v-if="i == 0" class="flex items-center w-full text-24rpx">
|
||||
<view
|
||||
class="w-140rpx text-center flex-none h-120rpx flex-center td bg-white"
|
||||
>
|
||||
日期
|
||||
<!-- 总账 -->
|
||||
<view class="w-400rpx flex flex-none">
|
||||
<template v-if="checkPermission(['admin'])">
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.sales
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.expenditure
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.new_customers
|
||||
}}</view>
|
||||
</template>
|
||||
<template v-else-if="isLotteryStore">
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.sales
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.expenditure
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.new_customers
|
||||
}}</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.sales
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.expenditure
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
item.ledger.new_customers
|
||||
}}</view>
|
||||
</template>
|
||||
</view>
|
||||
|
||||
<!-- 种类 -->
|
||||
|
||||
<template v-for="(ty, j) in item.lottery_types" :key="j">
|
||||
<view class="w-200rpx flex flex-none">
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
ty.sales
|
||||
}}</view>
|
||||
<view class="flex-1 td h-60rpx flex-center">{{
|
||||
ty.expenditure
|
||||
}}</view>
|
||||
</view>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
class="flex justify-between text-center text-24rpx items-center rounded-19rpx"
|
||||
>
|
||||
<view
|
||||
class="flex-1 w-140rpx flex-none td flex-center h-60rpx bg-white"
|
||||
>{{ timeFormat(item.date, 'mm-dd') }}</view
|
||||
>
|
||||
</view>
|
||||
</template>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="h-90vh"></view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
|
@ -148,6 +134,10 @@ const props = defineProps({
|
|||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
height:{
|
||||
type:Number,
|
||||
default:0
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
|
|
|||
|
|
@ -1,65 +1,72 @@
|
|||
<template>
|
||||
<view>
|
||||
<CuNavbar :isBack="false" title="数据报表"></CuNavbar>
|
||||
<uv-sticky bgColor="#fff" v-if="checkPermission(['admin'])">
|
||||
<uv-sticky
|
||||
customNavHeight="44px"
|
||||
:offset-top="offsetTop"
|
||||
bgColor="#fff"
|
||||
v-if="checkPermission(['admin'])"
|
||||
>
|
||||
<StoreDown color="#333333" @change="storeChange"></StoreDown>
|
||||
</uv-sticky>
|
||||
|
||||
<view class="card">
|
||||
<uv-tabs
|
||||
:lineColor="'#ee2c37'"
|
||||
:list="tabsList"
|
||||
:scrollable="false"
|
||||
:current="tabIndex"
|
||||
keyName="label"
|
||||
@change="tabChange"
|
||||
></uv-tabs>
|
||||
<view class="headBox">
|
||||
<uv-tabs
|
||||
:lineColor="'#ee2c37'"
|
||||
:list="tabsList"
|
||||
:scrollable="false"
|
||||
:current="tabIndex"
|
||||
keyName="label"
|
||||
@change="tabChange"
|
||||
></uv-tabs>
|
||||
|
||||
<view class="text-center text-28rpx py-4rpx" v-if="tabIndex != 0"
|
||||
>{{ currentC.start }} 至 {{ currentC.end }}
|
||||
</view>
|
||||
<view class="text-center text-28rpx" v-else>{{ currentC.start }}</view>
|
||||
|
||||
<view class="flex my-20rpx items-center table">
|
||||
<view class="text-center flex-1 tr">
|
||||
<view class="flex-center h-80rpx">销售金额</view>
|
||||
<view class="font-600 flex-center h-80rpx">{{ ledger.sales }}</view>
|
||||
<view class="text-center text-28rpx py-4rpx" v-if="tabIndex != 0"
|
||||
>{{ currentC.start }} 至 {{ currentC.end }}
|
||||
</view>
|
||||
<view class="text-center text-28rpx" v-else>{{ currentC.start }}</view>
|
||||
|
||||
<view class="text-center flex-1 tr">
|
||||
<view
|
||||
class="flex-center h-80rpx"
|
||||
v-if="!isLotteryStore || checkPermission(['admin'])"
|
||||
>
|
||||
<view>支出金额</view>
|
||||
<view class="flex my-20rpx items-center table">
|
||||
<view class="text-center flex-1 tr">
|
||||
<view class="flex-center h-80rpx">销售金额</view>
|
||||
<view class="font-600 flex-center h-80rpx">{{ ledger.sales }}</view>
|
||||
</view>
|
||||
|
||||
<view class="text-center flex-1 tr">
|
||||
<view
|
||||
class="flex-center h-80rpx"
|
||||
v-if="!isLotteryStore || checkPermission(['admin'])"
|
||||
>
|
||||
<view>支出金额</view>
|
||||
</view>
|
||||
<view class="flex-center h-80rpx" v-else>兑奖金额</view>
|
||||
<view class="font-600 flex-center h-80rpx">{{
|
||||
ledger.expenditure
|
||||
}}</view>
|
||||
</view>
|
||||
|
||||
<view class="text-center flex-1 tr">
|
||||
<view class="flex-center h-80rpx">销售涨幅</view>
|
||||
<view
|
||||
class="font-600 flex-center h-80rpx"
|
||||
:class="[
|
||||
ledger.sales_growth_rate > 0 ? 'text-primary' : 'text-green',
|
||||
]"
|
||||
>{{ ledger.sales_growth_rate }}%</view
|
||||
>
|
||||
</view>
|
||||
<view class="flex-center h-80rpx" v-else>兑奖金额</view>
|
||||
<view class="font-600 flex-center h-80rpx">{{
|
||||
ledger.expenditure
|
||||
}}</view>
|
||||
</view>
|
||||
|
||||
<view class="text-center flex-1 tr">
|
||||
<view class="flex-center h-80rpx">销售涨幅</view>
|
||||
<view
|
||||
class="font-600 flex-center h-80rpx"
|
||||
:class="[
|
||||
ledger.sales_growth_rate > 0 ? 'text-primary' : 'text-green',
|
||||
]"
|
||||
>{{ ledger.sales_growth_rate }}%</view
|
||||
>
|
||||
</view>
|
||||
<uv-tabs
|
||||
@change="tabChange1"
|
||||
:lineColor="'#ee2c37'"
|
||||
:list="[{ name: '销售统计' }, { name: '门店统计' }]"
|
||||
:scrollable="false"
|
||||
:current="tabIndex1"
|
||||
></uv-tabs>
|
||||
</view>
|
||||
|
||||
<uv-tabs
|
||||
@change="tabChange1"
|
||||
:lineColor="'#ee2c37'"
|
||||
:list="[{ name: '销售统计' }, { name: '门店统计' }]"
|
||||
:scrollable="false"
|
||||
:current="tabIndex1"
|
||||
></uv-tabs>
|
||||
<template v-if="tabIndex1 == 0">
|
||||
<List0 :list="list"></List0>
|
||||
<List0 :height="boxHeight" :list="list"></List0>
|
||||
</template>
|
||||
<template v-if="tabIndex1 == 1">
|
||||
<List1 :list="list"></List1>
|
||||
|
|
@ -72,16 +79,34 @@ import StoreDown from '@/pages/home/components/store-down.vue'
|
|||
import CuNavbar from '@/components/cu-navbar/index'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { timeFormat } from '@climblee/uv-ui/libs/function/index'
|
||||
import { onShow } from '@dcloudio/uni-app'
|
||||
import { onShow, onReady } from '@dcloudio/uni-app'
|
||||
import { http } from '@/utils/request'
|
||||
import List0 from './components/list0.vue'
|
||||
import List1 from './components/list1.vue'
|
||||
import checkPermission from '@/utils/permission'
|
||||
import dayjs from 'dayjs'
|
||||
import { sys } from '@climblee/uv-ui/libs/function/index'
|
||||
|
||||
import { useUserStore } from '@/store/modules/user'
|
||||
const userStore = useUserStore()
|
||||
|
||||
const getRect = (selector, all) => {
|
||||
return new Promise((resolve) => {
|
||||
|
||||
uni
|
||||
.createSelectorQuery()
|
||||
[all ? 'selectAll' : 'select'](selector)
|
||||
.boundingClientRect((rect) => {
|
||||
if (all && Array.isArray(rect) && rect.length) {
|
||||
resolve(rect)
|
||||
}
|
||||
if (!all && rect) {
|
||||
resolve(rect)
|
||||
}
|
||||
})
|
||||
.exec()
|
||||
})
|
||||
}
|
||||
const isLotteryStore = computed(
|
||||
() => userStore.userInfo?.store?.is_lottery_store
|
||||
)
|
||||
|
|
@ -89,6 +114,7 @@ const tabIndex1 = ref(0)
|
|||
const tabIndex = ref(0)
|
||||
const tabsList = ref(generateTimeArrayWithLastPeriod())
|
||||
const list = ref([])
|
||||
const boxHeight = ref(0)
|
||||
const currentTabs = computed(() => tabsList.value[tabIndex.value])
|
||||
const currentC = computed(() => {
|
||||
const ob = currentTabs.value.current
|
||||
|
|
@ -104,6 +130,9 @@ const currentL = computed(() => {
|
|||
end: timeFormat(ob.endDate),
|
||||
}
|
||||
})
|
||||
const offsetTop = computed(() => {
|
||||
return sys().statusBarHeight
|
||||
})
|
||||
|
||||
const shoreInfo = ref({})
|
||||
|
||||
|
|
@ -125,6 +154,17 @@ onShow(() => {
|
|||
getList()
|
||||
})
|
||||
|
||||
onReady(() => {
|
||||
getBox()
|
||||
})
|
||||
|
||||
const getBox = async () => {
|
||||
getRect('.headBox').then((res) => {
|
||||
const th = checkPermission(['admin']) ? 44 : 0
|
||||
boxHeight.value =sys().windowHeight - res.height - th - 44 - 20 - sys().statusBarHeight - 3
|
||||
})
|
||||
}
|
||||
|
||||
const storeChange = (e) => {
|
||||
shoreInfo.value = e
|
||||
getCount()
|
||||
|
|
@ -268,7 +308,7 @@ const getList = async () => {
|
|||
const url = tabIndex1.value == 0 ? '/statistics/sales' : '/statistics/stores'
|
||||
let params = {
|
||||
start_at: currentC.value.start,
|
||||
end_at: currentC.value.end
|
||||
end_at: currentC.value.end,
|
||||
}
|
||||
if (tabIndex1.value == 0) {
|
||||
params = {
|
||||
|
|
@ -276,7 +316,7 @@ const getList = async () => {
|
|||
...shoreInfo.value,
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const resData = await http.get(url, {
|
||||
params: params,
|
||||
})
|
||||
|
|
|
|||
|
|
@ -19,3 +19,10 @@ page {
|
|||
background: #ffffff;
|
||||
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04);
|
||||
}
|
||||
|
||||
.cu-scroll-view{
|
||||
.uni-scroll-view-content{
|
||||
width: auto !important;
|
||||
position: absolute !important;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue