pdkj
/
store-manage-app
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

锁定

main
ihzero 2024-05-24 02:04:21 +08:00
parent 3a980c0f20
commit ce6453c610
3 changed files with 207 additions and 170 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

230
src/pages/statement/components/list0.vue
View File

@ -1,134 +1,120 @@
<template> <template>
<view class="relative"> <view>
<uv-scroll-list <scroll-view :style="{ height: `${height}px` }" class="cu-scroll-view" scroll-x scroll-y>
:indicator="true" <view class="">
indicatorColor="#fff0f0" <view class="sticky top-0 bg-white z-11">
indicatorActiveColor="#f56c6c" <template v-for="(item, i) in list" :key="i">
> <view v-if="i == 0" class="flex items-center w-full text-24rpx">
<view> <view
<template v-for="(item, i) in list" :key="i"> class="w-140rpx sticky z-11 bg-white left-0 text-center flex-none h-120rpx flex-center td"
<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>
<view class="w-400rpx text-center leading-60rpx flex-none"> <view class="w-400rpx text-center leading-60rpx flex-none">
<view class="h-60rpx td">总账</view> <view class="h-60rpx td">总账</view>
<template v-if="checkPermission(['admin'])"> <template v-if="checkPermission(['admin'])">
<view class="h-60rpx grid grid-cols-3"> <view class="h-60rpx grid grid-cols-3">
<view class="td">销售</view> <view class="td">销售</view>
<view class="td">支出</view> <view class="td">支出</view>
<view class="td">新增客户</view> <view class="td">新增客户</view>
</view> </view>
</template> </template>
<template v-else-if="isLotteryStore"> <template v-else-if="isLotteryStore">
<view class="h-60rpx grid grid-cols-3"> <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 class="td">兑奖</view>
<view class="td">新增客户</view>
</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> </view>
</view> </template>
</template> </view>
<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>
<!-- 总账 --> <view class="">
<view class="w-400rpx flex flex-none"> <template v-for="(item, i) in list" :key="i">
<template v-if="checkPermission(['admin'])"> <view
<view class="flex-1 td h-60rpx flex-center">{{ class="flex justify-between text-center text-24rpx items-center card-shadow bg-white rounded-19rpx"
item.ledger.sales >
}}</view> <view
<view class="flex-1 td h-60rpx flex-center">{{ class="flex-1 w-140rpx flex-none td flex-center h-60rpx sticky left-0 bg-white"
item.ledger.expenditure >
}}</view> {{ timeFormat(item.date, 'mm-dd') }}
<view class="flex-1 td h-60rpx flex-center">{{ </view>
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-400rpx flex flex-none">
<view class="flex-1 td h-60rpx flex-center">{{ ty.sales }}</view> <template v-if="checkPermission(['admin'])">
<view class="flex-1 td h-60rpx flex-center">{{ <view class="flex-1 td h-60rpx flex-center">{{
ty.expenditure item.ledger.sales
}}</view> }}</view>
</template> <view class="flex-1 td h-60rpx flex-center">{{
</view> item.ledger.expenditure
</template> }}</view>
</view> <view class="flex-1 td h-60rpx flex-center">{{
</uv-scroll-list> item.ledger.new_customers
<view> }}</view>
<view class="absolute left-0 right-0 top-0 bottom-0 pointer-events-none"> </template>
<template v-for="(item, i) in list" :key="i"> <template v-else-if="isLotteryStore">
<view v-if="i == 0" class="flex items-center w-full text-24rpx"> <view class="flex-1 td h-60rpx flex-center">{{
<view item.ledger.sales
class="w-140rpx text-center flex-none h-120rpx flex-center td bg-white" }}</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> </template>
<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>
</view> </view>
</view> </scroll-view>
<view class="h-90vh"></view>
</view> </view>
</template> </template>
@ -148,6 +134,10 @@ const props = defineProps({
type: Array, type: Array,
default: () => [], default: () => [],
}, },
height:{
type:Number,
default:0
}
}) })
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

140
src/pages/statement/index.vue
View File

@ -1,65 +1,72 @@
<template> <template>
<view> <view>
<CuNavbar :isBack="false" title="数据报表"></CuNavbar> <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> <StoreDown color="#333333" @change="storeChange"></StoreDown>
</uv-sticky> </uv-sticky>
<view class="card"> <view class="card">
<uv-tabs <view class="headBox">
:lineColor="'#ee2c37'" <uv-tabs
:list="tabsList" :lineColor="'#ee2c37'"
:scrollable="false" :list="tabsList"
:current="tabIndex" :scrollable="false"
keyName="label" :current="tabIndex"
@change="tabChange" keyName="label"
></uv-tabs> @change="tabChange"
></uv-tabs>
<view class="text-center text-28rpx py-4rpx" v-if="tabIndex != 0" <view class="text-center text-28rpx py-4rpx" v-if="tabIndex != 0"
>{{ currentC.start }} 至 {{ currentC.end }} >{{ 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> </view>
<view class="text-center text-28rpx" v-else>{{ currentC.start }}</view>
<view class="text-center flex-1 tr"> <view class="flex my-20rpx items-center table">
<view <view class="text-center flex-1 tr">
class="flex-center h-80rpx" <view class="flex-center h-80rpx">销售金额</view>
v-if="!isLotteryStore || checkPermission(['admin'])" <view class="font-600 flex-center h-80rpx">{{ ledger.sales }}</view>
> </view>
<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>
<view class="flex-center h-80rpx" v-else>兑奖金额</view>
<view class="font-600 flex-center h-80rpx">{{
ledger.expenditure
}}</view>
</view> </view>
<view class="text-center flex-1 tr"> <uv-tabs
<view class="flex-center h-80rpx">销售涨幅</view> @change="tabChange1"
<view :lineColor="'#ee2c37'"
class="font-600 flex-center h-80rpx" :list="[{ name: '销售统计' }, { name: '门店统计' }]"
:class="[ :scrollable="false"
ledger.sales_growth_rate > 0 ? 'text-primary' : 'text-green', :current="tabIndex1"
]" ></uv-tabs>
>{{ ledger.sales_growth_rate }}%</view
>
</view>
</view> </view>
<uv-tabs
@change="tabChange1"
:lineColor="'#ee2c37'"
:list="[{ name: '销售统计' }, { name: '门店统计' }]"
:scrollable="false"
:current="tabIndex1"
></uv-tabs>
<template v-if="tabIndex1 == 0"> <template v-if="tabIndex1 == 0">
<List0 :list="list"></List0> <List0 :height="boxHeight" :list="list"></List0>
</template> </template>
<template v-if="tabIndex1 == 1"> <template v-if="tabIndex1 == 1">
<List1 :list="list"></List1> <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 CuNavbar from '@/components/cu-navbar/index'
import { computed, reactive, ref } from 'vue' import { computed, reactive, ref } from 'vue'
import { timeFormat } from '@climblee/uv-ui/libs/function/index' 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 { http } from '@/utils/request'
import List0 from './components/list0.vue' import List0 from './components/list0.vue'
import List1 from './components/list1.vue' import List1 from './components/list1.vue'
import checkPermission from '@/utils/permission' import checkPermission from '@/utils/permission'
import dayjs from 'dayjs' import dayjs from 'dayjs'
import { sys } from '@climblee/uv-ui/libs/function/index'
import { useUserStore } from '@/store/modules/user' import { useUserStore } from '@/store/modules/user'
const userStore = useUserStore() 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( const isLotteryStore = computed(
() => userStore.userInfo?.store?.is_lottery_store () => userStore.userInfo?.store?.is_lottery_store
) )
@ -89,6 +114,7 @@ const tabIndex1 = ref(0)
const tabIndex = ref(0) const tabIndex = ref(0)
const tabsList = ref(generateTimeArrayWithLastPeriod()) const tabsList = ref(generateTimeArrayWithLastPeriod())
const list = ref([]) const list = ref([])
const boxHeight = ref(0)
const currentTabs = computed(() => tabsList.value[tabIndex.value]) const currentTabs = computed(() => tabsList.value[tabIndex.value])
const currentC = computed(() => { const currentC = computed(() => {
const ob = currentTabs.value.current const ob = currentTabs.value.current
@ -104,6 +130,9 @@ const currentL = computed(() => {
end: timeFormat(ob.endDate), end: timeFormat(ob.endDate),
} }
}) })
const offsetTop = computed(() => {
return sys().statusBarHeight
})
const shoreInfo = ref({}) const shoreInfo = ref({})
@ -125,6 +154,17 @@ onShow(() => {
getList() 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) => { const storeChange = (e) => {
shoreInfo.value = e shoreInfo.value = e
getCount() getCount()
@ -268,7 +308,7 @@ const getList = async () => {
const url = tabIndex1.value == 0 ? '/statistics/sales' : '/statistics/stores' const url = tabIndex1.value == 0 ? '/statistics/sales' : '/statistics/stores'
let params = { let params = {
start_at: currentC.value.start, start_at: currentC.value.start,
end_at: currentC.value.end end_at: currentC.value.end,
} }
if (tabIndex1.value == 0) { if (tabIndex1.value == 0) {
params = { params = {
@ -276,7 +316,7 @@ const getList = async () => {
...shoreInfo.value, ...shoreInfo.value,
} }
} }
const resData = await http.get(url, { const resData = await http.get(url, {
params: params, params: params,
}) })

7
src/static/css/index.scss
View File

@ -19,3 +19,10 @@ page {
background: #ffffff; background: #ffffff;
box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.04); 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;
}
}