client-app/pages/image/index.vue

<template>
    <hc-sys :isNavBar="false">
        <template v-for="(item,index) in dataList" :key="index">
            <template v-if="item.list && item.list.length > 0">
                <view class="p-3">{{item.name}}</view>
                <view class="relative bg-white text-gray-5">
                    <template v-for="(items, indexs) in item.list" :key="indexs">
                        <view class="relative px-3 py-2 flex items-center" un-border-b="1 solid gray-2" @click="toMedialist(items)">
                            <view class="text-60 flex items-center">
                                <text class="i-iconoir-media-image-list" v-if="items.fileType === 2"/>
                                <text class="i-iconoir-media-video" v-else/>
                            </view>
                            <view class="relative ml-3 flex-1">
                                <view class="text-black text-28">{{items.classfName}}</view>
                                <view class="text-24 mt-1 ">
                                    <text>{{items.count}}</text>
                                    <text>{{items.fileType === 2 ? '张照片' : '个视频'}}</text>
                                </view>
                            </view>
                            <view class="text-40 flex items-center justify-end">
                                <text class="i-ri-arrow-right-s-line"/>
                            </view>
                        </view>
                    </template>
                </view>
            </template>
        </template>
    </hc-sys>
</template>

<script setup>
import {ref} from "vue";
import {onShow} from '@dcloudio/uni-app'
import {getArrValue, getObjValue} from "js-fast-way";
import mainApi from '~api/image/index';
import {useAppStore} from "@/store";

//初始变量
const store = useAppStore()
const projectId = ref(store.projectId);
const contractId = ref(store.contractId);

//页面显示
onShow(() => {
    getClassIfyList()
})

//获取数据
const dataList = ref([])
const getClassIfyList = async () => {
    dataList.value = []
    uni.showLoading({title: '获取数据中...', mask: true});
    const { data } = await mainApi.getClassIfyList({
        projectId: projectId.value,
        contractId: contractId.value
    })
    //处理数据
    let newData = [{name:'项目前期', list:[]}, {name:'项目中期', list:[]},{name:'项目后期', list:[]}]
    const arr = getArrValue(data)
    for (let i = 0; i < arr.length; i++) {
        const { projectStage } = getObjValue(arr[i])
        if (projectStage ==='项目前期') {
            newData[0].list.push(arr[i])
        } else if (projectStage ==='项目中期') {
            newData[1].list.push(arr[i])
        } else if (projectStage ==='项目后期') {
            newData[2].list.push(arr[i])
        }
    }
    dataList.value = newData
    uni.hideLoading();
}

//被点击
const toMedialist = ({id, fileType, storageDirectoryFormat}) => {
    const node = encodeURIComponent(JSON.stringify({
        id: id,
        fileType: fileType,
        type: storageDirectoryFormat
    }));
    if (storageDirectoryFormat === 1) {
        uni.navigateTo({
            url: `/pages/image/position?node=${node}`
        });
    } else {
        uni.navigateTo({
            url: `/pages/image/view?node=${node}`
        });
    }
}
</script>