ys-app/src/pages/notice/waitApprove.vue

<template>
<view class="con-body">
    <view class="con-bg">
        <!-- 头部 -->
        <customHeader ref="customHeaderRef" :title="'待审批'" :leftFlag="true" :rightFlag="true"></customHeader>

        <!-- 高度来避免头部遮挡 -->
        <view class="top-height"></view>

        <!-- 正文内容 -->
        <view class="all-body">
        
            <!-- 分页部分  -->
            <mescroll-uni ref="mescrollRef" 
                @init="mescrollInit" 
                @down="downCallback" 
                @up="upCallback"
                :up="upOption" 
                :down="downOption" 
                :fixed="false" 
                textColor="#ffffff" 
                bgColor="#ffffff"
                class="scroll-h"  
                :class="{'loading-scroll':cssFlag}"
            >
                <view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index" @click="handleJump(item)">
                    <view class="report-list">
                        <view class="r-list">
                            <view class="r-name">{{ item.subject }}</view>
                            <view class="r-right btn-orange" size="mini" v-if="item.status==1">待处理</view>
                            <view v-else-if="item.status==2">已处理</view>
                        </view>
                        <view class="r-list">
                            <view class="r-left">来自 <text>{{ item.appName }}</text></view>
                            <view class="r-right">
                                <text style="color:#FF2B44" v-if="item.status==1 && (item.level==1 || item.level==2)">
                                    {{ formatLevel(item.level) }}
                                </text>
                                <text v-else>{{ formatLevel(item.level) }}</text>
                            </view>
                        </view>
                        <view class="border-bottom"></view>
                        <view class="r-list">
                            <view class="r-left">创建人 <text>{{ item.createUser.userId }}</text></view>
                            <view class="r-right">{{ parseTime(item.createTime,'{y}-{m}-{d} {h}:{i}') }}</view>
                        </view>
                    </view>
                </view>
            </mescroll-uni>
        </view>
    </view>
</view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import { getNavBarPaddingTop } from '@/utils/system.js'
import { flowList } from '@/api/notice.js'
import {formatLevel} from '@/utils/status.js'
import { parseTime } from '@/utils/datetime.js'

// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
    navBarPaddingTop.value = getNavBarPaddingTop() * 2;
})

// 查询列表
let list = ref([]);
const mescrollRef = ref(null);
const upOption = ref({
    page: { num: 0, size: 10 },
    noMoreSize: 5,
    empty: { 
        tip: '~ 空空如也 ~',
        icon: "../../static/images/mescroll-empty.png"
    },
    textLoading: '加载中...',
    textNoMore: '已经到底了'
});

const downOption = ref({
    auto: false,
    textInOffset: '下拉刷新',
    textOutOffset: '释放更新',
    textLoading: '刷新中...'
});

let cssFlag=ref(false);//控制样式
const mescrollInit = (mescroll) => {
    console.log("mescrollInit=>")
    cssFlag.value = true;
    mescrollRef.value = mescroll;
};


// 下拉刷新
const downCallback = async (mescroll) => {
    try {
        console.log("downCallback=>下拉刷新")
        const res = await getFlowList(1, upOption.value.page.size);
        cssFlag.value = false;
        list.value = res.list;
        mescroll.resetUpScroll();
    } catch (error) {
        mescroll.endErr();
    } finally {
        mescroll.endSuccess();
    }
}
// 上拉加载更多
const upCallback = async (mescroll) => {
    try {
        console.log("upCallback=>上拉加载更多")
        const res = await getFlowList(mescroll.num, mescroll.size);
        if (mescroll.num === 1) {
            list.value = res.list;
        } else {
            list.value.push(...res.list);
        }
        mescroll.endBySize(res.list.length, res.total);
    } catch (error) {
        mescroll.endErr();
    }
}

// 获取数据列表
const getFlowList = (pageIndex, pageSize) => {
    return new Promise(async (resolve) => {
        let param = {
            pageIndex,
            pageSize
        }
        let res = await flowList(param);
        let list = res.list || [];
        resolve({
            list,
            total: res.recordCount
        });
    });

}

// 跳转webview
const handleJump = (item)=>{
    uni.navigateTo({
        url: `/pages/notice/waitApproveDetail?detail=${encodeURIComponent(JSON.stringify(item))}`
    });
    
}
</script>

<style scoped>
.all-body {
    /* #ifdef APP-PLUS */
    top: 150rpx;
    height: calc(100vh - 75px);
    /* #endif */
    /* #ifndef APP-PLUS */
    top:120rpx;
    height: calc(100vh);
    /* #endif */
}
.search{
    display: flex;
}
.search .btn-search{
    border:none;
    background: none;
    line-height: normal;
    color:#fff;
    line-height: 56rpx !important;
    padding:10rpx 0 0;
    text-align: left;
    cursor: pointer;
}
.search .btn-search::after{
    display: none;
}
.search .custom-search{
    width:80%;
    
}
.search .custom-search.uni-searchbar{
    padding-right:0 !important;
}

.scroll-h{
    /* #ifdef APP-PLUS */
    height:calc(100vh - 78px) !important;
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 65px) !important;
    /* #endif */
}
.white-bg{
    padding-top:0rpx;
    padding-bottom:10rpx;
}

 /* .report-list .r-list{
    padding: 10rpx 0;
} */
.report-list .r-list:first-child{
    padding-bottom:10rpx;
}

.report-list .r-list .r-name {
    color: #3384DF;
    font-size: 38rpx;
    font-weight: bold;
}
.report-list .r-list .r-left text{
    font-size: 28rpx;
    color:#919191;
}

</style>