client-app/pages/work-order/index.vue

<template>
    <hc-sys id="app-sys" class="hc-work-order-page" navBarUi='work-order-nav-bar'>
        <template #navBar>
            <hc-nav-back-bar ui='work-order-nav' title="消息动态圈">
                <text class="i-ri-add-circle-fill text-40 mr-1"/>
                <text class="i-ri-message-3-fill text-40 ml-2"/>
            </hc-nav-back-bar>
        </template>
        <!--下拉刷新区域-->
        <z-paging ref="pageRef" :style="pagingStyle" v-model="dataList" @query="getDataList">
            <template v-for="item in dataList" :key="item.id">
                <view class="relative bg-white mb-2 p-3">
                    <view class="hc-flex">
                        <view class="hc-flex-center mr-3">
                            <hc-img class="round" :width="40" :height="40" :src="item.avatar" v-if="item.avatar"/>
                            <hc-img class="round" :width="40" :height="40" src="/static/image/avatar.png" v-else/>
                        </view>
                        <view class="relative flex-1">
                            <view class="text-black mb-1">{{item.createUserName ?? '用户名异常'}}</view>
                            <view class="text-24 text-gray-4">{{item.createTime}}</view>
                        </view>
                        <view class="text-24 text-gray-4">已解决</view>
                    </view>
                    <view class="relative ml-12.5 text-gray-5">
                        <view class="relative mt-3" v-html="item.opinionContent"/>
                        <hc-row :gutter="10" class="mt-3" v-if="item.returnFiles?.length > 0">
                            <hc-col :span="8" class="h-125" v-for="(img, index) in item['returnFiles']">
                                <hc-image class="radius" un-border="1 solid gray-2" :src="img"/>
                            </hc-col>
                            <hc-col :span="8" class="h-125" v-for="(img, index) in item['returnFiles']">
                                <hc-image class="radius" un-border="1 solid gray-2" :src="img"/>
                            </hc-col>
                            <hc-col :span="8" class="h-125" v-for="(img, index) in item['returnFiles']">
                                <hc-image class="radius" un-border="1 solid gray-2" :src="img"/>
                            </hc-col>
                        </hc-row>
                    </view>
                </view>
            </template>
        </z-paging>
    </hc-sys>
</template>

<script setup>
import {getCurrentInstance, ref} from "vue";
import mainApi from '~api/other/work-order';
import {onShow, onReady} from '@dcloudio/uni-app'
import {errorToast, querySelect, successToast} from "@/utils/tools";
import {arrToKey, getArrValue, getObjValue} from "js-fast-way";
import {useAppStore} from "@/store";

//初始变量
const store = useAppStore()
const projectId = ref(store.projectId);
const contractId = ref(store.contractId);
const instance = getCurrentInstance().proxy
const isNodes = ref(false)
const pageRef = ref(null)

onReady(() => {
    setPagingStyle()
    isNodes.value = true
})

onShow(() => {
    if (isNodes.value) {
        reloadData()
    }
})

//内容区域
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-nav-bar')
    // #ifdef H5
    pagingStyle.value.height = (appHeight - navHeight) + 'px'
    // #endif
    // #ifdef APP-PLUS
    const {screenHeight, safeArea} = uni.getWindowInfo()
    const content = navHeight + (screenHeight - safeArea.bottom)
    pagingStyle.value.height = (screenHeight - content) + 'px'
    // #endif
}

//重载数据
const reloadData = () => {
    pageRef.value?.reload()
}

//获取数据
const dataList = ref([])
const getDataList = async (pageNo, pageSize) => {
    const { data } = await mainApi.queryUserOpinionPage({
        projectId: projectId.value,
        contractId: contractId.value,
        current: pageNo,
        size: pageSize,
    })
    const res = getObjValue(data)
    isNodes.value = true
    pageRef.value?.complete(getArrValue(res?.records));
}
</script>

<style lang="scss">
@import "@/style/work-order/index.scss";
</style>