锁定

src/pages/statement/components/list0.vue

@@ -1,17 +1,14 @@
 <template>
-  <view class="relative">
-    <uv-scroll-list
-      :indicator="true"
-      indicatorColor="#fff0f0"
-      indicatorActiveColor="#f56c6c"
-    >
   <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 text-center flex-none h-120rpx flex-center td"
+                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">
@@ -51,12 +48,17 @@
               </view>
             </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">
+              <view
-              <!-- {{ timeFormat(item.date, 'mm-dd') }} -->
+                class="flex-1 w-140rpx flex-none td flex-center h-60rpx sticky left-0 bg-white"
+              >
+                {{ timeFormat(item.date, 'mm-dd') }}
               </view>
 
               <!-- 总账 -->
@@ -97,38 +99,22 @@
               </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="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>
           </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>
-          </view>
+    </scroll-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 class="h-90vh"></view>
   </view>
 </template>
 
@@ -148,6 +134,10 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  height:{
+    type:Number,
+    default:0
+  }
 })
 </script>
 <style lang="scss" scoped>

src/pages/statement/index.vue

@@ -1,11 +1,17 @@
 <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">
+      <view class="headBox">
         <uv-tabs
           :lineColor="'#ee2c37'"
           :list="tabsList"
@@ -58,8 +64,9 @@
           :scrollable="false"
           :current="tabIndex1"
         ></uv-tabs>
+      </view>
       <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 = {

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;
+  }
+}