From ce6453c6100da1bbf09b3cb21fe610b131b8bfd1 Mon Sep 17 00:00:00 2001
From: ihzero <ihzero@163.com>
Date: Fri, 24 May 2024 02:04:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=94=81=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/statement/components/list0.vue | 230 +++++++++++------------
 src/pages/statement/index.vue            | 140 +++++++++-----
 src/static/css/index.scss                |   7 +
 3 files changed, 207 insertions(+), 170 deletions(-)

diff --git a/src/pages/statement/components/list0.vue b/src/pages/statement/components/list0.vue
index 2399e2f..8d76b72 100644
--- a/src/pages/statement/components/list0.vue
+++ b/src/pages/statement/components/list0.vue
@@ -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>
diff --git a/src/pages/statement/index.vue b/src/pages/statement/index.vue
index 4e92319..e60a119 100644
--- a/src/pages/statement/index.vue
+++ b/src/pages/statement/index.vue
@@ -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,
   })
diff --git a/src/static/css/index.scss b/src/static/css/index.scss
index 94fa24b..417faef 100644
--- a/src/static/css/index.scss
+++ b/src/static/css/index.scss
@@ -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;
+  }
+}
\ No newline at end of file