1

pages/image/view.vue

@@ -1,81 +1,89 @@
 <template>
-    <z-paging ref="pageRef" v-model="dataList" @query="getDataList">
-        <template #top>
-            <view class="hc-paging-top-bar mb-1">
-                <hc-nav-back-bar ui="top" title="声像文件">
-                    <text class="text-26" :class="isDelete?'':'text-red-4'" @click="deleteTap" v-if="dataList.length > 0">
-                        {{isDelete? '取消' : '删除'}}
-                    </text>
-                </hc-nav-back-bar>
-                <view class="cu-bar bg-white search py-2" un-border-t="1 solid gray-2" v-if="pageNode.type === 1">
-                    <view class="search-form radius">
-                        <text class="cuIcon-search"/>
-                        <input v-model="searchForm.queryStr" :adjust-position="false" type="text" placeholder="根据题名，名称或拍摄者搜索" confirm-type="search"/>
-                    </view>
-                    <view class="action">
-                        <button class="cu-btn bg-blue-5 text-white" hover-class="none" @click="searchClick">搜索</button>
-                    </view>
+    <hc-sys id="app-sys" class="hc-images-page" :isNavBar="false">
+        <view id="hc-images-nav-bar" class="hc-images-nav-bar" un-border-b="1 solid gray-2">
+            <hc-nav-back-bar title="声像文件">
+                <view class="more-bar" v-if="dataList.length > 0" @click="deleteTap">
+                    <text class="text-26" :class="isDelete?'':'text-red-4'">{{isDelete? '取消' : '删除'}}</text>
                 </view>
-                <view class="cu-bar bg-white search py-2" un-border-t="1 solid gray-2" v-if="pageNode.type === 2">
-                    <view class="search-form radius">
-                        <uni-datetime-picker type="datetime" v-model="searchForm.queryDate"/>
-                    </view>
-                    <view class="action">
-                        <button class="cu-btn bg-blue-5 text-white" hover-class="none" @click="searchClick">搜索</button>
-                    </view>
+            </hc-nav-back-bar>
+            <view class="cu-bar bg-white search py-2" un-border-t="1 solid gray-2" v-if="pageNode.type === 1">
+                <view class="search-form radius">
+                    <text class="cuIcon-search"/>
+                    <input v-model="searchForm.queryStr" :adjust-position="false" type="text" placeholder="根据题名，名称或拍摄者搜索" confirm-type="search"/>
+                </view>
+                <view class="action">
+                    <button class="cu-btn bg-blue-5 text-white" hover-class="none" @click="searchClick">搜索</button>
+                </view>
+            </view>
+            <view class="cu-bar bg-white search py-2" un-border-t="1 solid gray-2" v-if="pageNode.type === 2">
+                <view class="search-form radius">
+                    <uni-datetime-picker type="datetime" v-model="searchForm.queryDate"/>
+                </view>
+                <view class="action">
+                    <button class="cu-btn bg-blue-5 text-white" hover-class="none" @click="searchClick">搜索</button>
                 </view>
             </view>
-        </template>
+        </view>
 
         <!-- 数据列表 -->
-        <template v-for="(item, index) in dataList" :key="index">
-            <view class="bg-white hc-p hc-flex" un-border-b="1 solid gray-2" @click="itemClick(item)">
-                <view class="hc-flex mr-2" v-if="isDelete" @click.stop="checkClick(item)">
-                    <uni-icons type="checkbox-filled" size="26" color="#ee5b20" v-if="item.check"/>
-                    <uni-icons type="checkbox" size="26" color="#9a9a9a" v-else/>
+        <z-paging ref="pageRef" :style="pagingStyle" v-model="dataList" @query="getDataList">
+            <template v-for="(item, index) in imageList" :key="index">
+                <view class="cu-bar bg-white py-2 mt-1" un-border-b="1 solid gray-1">
+                    <view class="px-3">{{item.name}}</view>
                 </view>
-                <view class="hc-flex">
-                    <video class="h-100 w-100 b-rounded" :src="item.imageUrl" :controls="false" :show-center-play-btn="false" v-if="item.type === 1"/>
-                    <hc-img class="b-rounded" :src="item.imageUrl?.toString()?.split(',')[0]" width="50" height="50" v-if="item.type === 2"/>
+                <template v-for="(items, indexs) in item.child" :key="indexs">
+                    <view class="bg-white hc-p hc-flex" un-border-b="1 solid gray-1" @click="itemClick(items, index, indexs)">
+                        <view class="hc-flex mr-2" v-if="isDelete" @click.stop="checkClick(items, index, indexs)">
+                            <uni-icons type="checkbox-filled" size="26" color="#ee5b20" v-if="items.check"/>
+                            <uni-icons type="checkbox" size="26" color="#9a9a9a" v-else/>
+                        </view>
+                        <view class="hc-flex">
+                            <video class="h-100 w-100 b-rounded" :src="items.imageUrl" :controls="false" :show-center-play-btn="false" v-if="items.type === 1"/>
+                            <hc-img class="b-rounded" :src="items.imageUrl?.toString()?.split(',')[0]" width="50" height="50" v-if="items.type === 2"/>
+                        </view>
+                        <view class="relative flex-1 ml-3">
+                            <view class="text-30 text-black clip-2">{{items.title}}</view>
+                            <view class="text-24 mt-1 text-cut">{{items.textContent}}</view>
+                        </view>
+                    </view>
+                </template>
+            </template>
+        </z-paging>
+
+        <!--底部操作区域 -->
+        <view id="hc-bottom-bar" class="hc-bottom-bar"/>
+        <view id="hc-bottom-btn-bar" class="hc-bottom-btn-bar">
+            <view class="hc-flex" v-if="isDelete">
+                <view class="hc-flex" @click="allCheckClick">
+                    <uni-icons type="checkbox-filled" size="24" color="#ee5b20" v-if="checkList.length === dataList.length"/>
+                    <uni-icons type="checkbox" size="24" color="#9a9a9a" v-else/>
+                    <text class="ml-1">全选</text>
                 </view>
-                <view class="relative flex-1 ml-3">
-                    <view class="text-30 text-black clip-2">{{item.title}}</view>
-                    <view class="text-24 mt-1 text-cut">{{item.textContent}}</view>
+                <view class="flex-1 ml-4 text-gray-5 text-24">
+                    <text class="mr-1">已勾选</text>
+                    <text class="text-red-5">{{checkList.length}}</text>
+                    <text class="ml-1">条数据</text>
                 </view>
+                <button hover-class="none" class="cu-btn bg-red-5 text-white" @click="delCheckList">删除选中</button>
             </view>
-        </template>
-
-        <template #bottom>
-            <hc-tabbars class="hc-paging-bottom-bar">
-                <view class="hc-flex" v-if="isDelete">
-                    <view class="hc-flex" @click="allCheckClick">
-                        <uni-icons type="checkbox-filled" size="24" color="#ee5b20" v-if="checkList.length === dataList.length"/>
-                        <uni-icons type="checkbox" size="24" color="#9a9a9a" v-else/>
-                        <text class="ml-1">全选</text>
-                    </view>
-                    <view class="flex-1 ml-4 text-gray-5 text-24">
-                        <text class="mr-1">已勾选</text>
-                        <text class="text-red-5">{{checkList.length}}</text>
-                        <text class="ml-1">条数据</text>
-                    </view>
-                    <button hover-class="none" class="cu-btn bg-red-5 text-white" @click="delCheckList">删除选中</button>
-                </view>
-                <button hover-class="none" class="cu-btn block bg-purple-8 text-white" @click="addFileData" v-else>新增声像文件</button>
-            </hc-tabbars>
-        </template>
-    </z-paging>
+            <view class="relative" v-else>
+                <button hover-class="none" class="cu-btn block bg-purple-8 text-white" @click="addFileData">新增声像文件</button>
+            </view>
+        </view>
+    </hc-sys>
 </template>
 
 <script setup>
-import {ref} from "vue";
-import {onLoad} from '@dcloudio/uni-app'
+import {getCurrentInstance, ref} from "vue";
+import {onLoad, onReady} from '@dcloudio/uni-app'
 import {useAppStore} from "@/store";
 import mainApi from '~api/image/index';
 import {arrIndex, deepClone, getArrValue} from "js-fast-way";
-import {errorToast, showModal, successToast} from "@/utils/tools";
+import {errorToast, querySelect, showModal, successToast} from "@/utils/tools";
 
 //初始变量
 const store = useAppStore()
+const instance = getCurrentInstance().proxy
 const contractInfo = ref(store.contractInfo);
 const projectId = ref(store.projectId);
 const contractId = ref(store.contractId);
@@ -90,6 +98,32 @@ onLoad(({node}) => {
     pageNode.value = node ? JSON.parse(decodeURIComponent(node)) : {};
 })
 
+onReady(() => {
+    setPagingStyle()
+})
+
+//内容区域
+const pagingStyle = ref({
+    position: 'relative',
+    width: '100%',
+    bottom: 0,
+})
+const setPagingStyle = async () => {
+    const {height: appHeight} = await querySelect(instance, 'app-sys')
+    const {height: navHeight} = await querySelect(instance, 'hc-images-nav-bar')
+    const {height: bottomHeight} = await querySelect(instance, 'hc-bottom-bar')
+    const {height: bottomBtnHeight} = await querySelect(instance, 'hc-bottom-btn-bar')
+    // #ifdef H5
+    let content = navHeight + bottomHeight + bottomBtnHeight
+    pagingStyle.value.height = (appHeight - content) + 'px'
+    // #endif
+    // #ifdef APP-PLUS
+    const {screenHeight, safeArea} = uni.getWindowInfo()
+    content = navHeight + (screenHeight - safeArea.bottom) + bottomBtnHeight
+    pagingStyle.value.height = (screenHeight - content) + 'px'
+    // #endif
+}
+
 //条件搜索
 const searchClick = () => {
     pageRef.value?.reload()
@@ -122,24 +156,41 @@ const getDataList = async (pageNo, pageSize) => {
         contractId: contractId.value,
         classifyId: id,
         current: pageNo,
-        size: pageSize,
+        size: 10,
         isApp: 1,
     })
     //处理数据
-    /*const res = getArrValue(data)
-    console.log(res)
-    let newArr = [];
+    let res = getArrValue(data), newArr = [];
     for (let i = 0; i < res.length; i++) {
-        const item = res[i];
+        const item = res[i].child;
         for (let j = 0; j < item.length; j++) {
             newArr.push(item[j])
         }
     }
-    console.log(newArr)*/
-    pageRef.value?.complete([]);
+    setImageList(deepClone(res)) //处理数据
+    pageRef.value?.complete(newArr);
     uni.hideLoading();
 }
 
+//处理列表显示数据
+const imageList = ref([])
+const setImageList = (data) => {
+    const arr = imageList.value
+    if (arr.length > 0 && data.length > 0) {
+        const item = arr[arr.length - 1]
+        const items = data[0]
+        if (item.name === items.name) {
+            const child = item.child
+            item.child = child.concat(items.child)
+            data.splice(0, 1)
+        }
+        imageList.value = arr.concat(data)
+    } else {
+        imageList.value = data
+    }
+}
+
+
 //批量删除
 const isDelete = ref(false)
 const deleteTap = () => {
@@ -148,16 +199,16 @@ const deleteTap = () => {
 
 //点击选中
 const checkList = ref([])
-const checkClick = (item) => {
+const checkClick = (item, index, indexs) => {
     const list = checkList.value
-    const index = arrIndex(list, 'id', item.id)
+    /*const index = arrIndex(list, 'id', item.id)
     if (item.check) {
         list.splice(index, 1)
         item.check = false
     } else {
         item.check = true
         list.push(item)
-    }
+    }*/
     checkList.value = list
 }
 
@@ -178,9 +229,9 @@ const allCheckClick = () => {
 }
 
 //列表项被点击
-const itemClick = (item) => {
+const itemClick = (item, index, indexs) => {
     if(isDelete.value) {
-        checkClick(item)
+        checkClick(item, index, indexs)
     } else {
         uni.navigateTo({
             url: `/pages/image/info?id=${item.id}`
@@ -224,3 +275,7 @@ const addFileData = () => {
     })
 }
 </script>
+
+<style lang="scss">
+@import "@/style/image/view.scss";
+</style>

style/image/view.scss

@@ -0,0 +1,22 @@
+.hc-images-page {
+    position: relative;
+    height: 100vh;
+    .hc-images-nav-bar {
+        position: relative;
+        background: #FFFFFF;
+        padding-top: calc(var(--status-bar-height) + 10rpx);
+        z-index: 8090;
+    }
+    .hc-bottom-bar {
+        height: var(--window-bottom);
+        position: absolute;
+        z-index: -1;
+        bottom: 0;
+        width: 100%;
+    }
+    .hc-bottom-btn-bar {
+        position: relative;
+        background: white;
+        padding: 20rpx;
+    }
+}