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

<template>
    <view class="con-body">
        <view class="con-bg">
            <!-- 头部 -->
            <customHeader ref="customHeaderRef" :title="'消息'" :leftFlag="false" :rightFlag="true">
                <template #right>
                    <view class="head-right" @click="handleReady">
                        <img :src="'static/images/notice/icon-clean@2x.png'" />清除未读
                    </view>
                </template>
            </customHeader>
            <!-- 高度来避免头部遮挡 -->
            <view class="top-height"></view>

            <!-- 搜索 -->
            <view class="search">
                <!-- @confirm="handleSearch" -->
                <uni-search-bar class="custom-search" radius="28" placeholder="请输入您想查询的内容或服务" clearButton="auto"
                    cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" 
                    @focus="handleFocus"
                />
            </view>

            <!-- 消息列表 -->
            <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
                :up="upOption" :down="downOption" :fixed="false" class="scroll-h" :class="{'loading-scroll':cssFlag}">
                <view class="white-bg" v-if="list.length">
                    <view class="notice-list" v-for="(item, index) in list" :key="index">
                        <img :src="item.imgSrc" />
                        <view class="notice-item">
                            <view :class="{ 'notice-title': true, bold: item.isReady }">{{ item.title }}</view>
                            <view class="notice-date">{{ formatDateStr(item.date) }}</view>
                            <view class="dot" v-if="item.isReady"></view>
                        </view>
                    </view>
                </view>
            </mescroll-uni>
        </view>
    </view>
</template>

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

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

// 获取input 焦点跳转
let handleFocus=()=>{
    uni.navigateTo({url:'/pages/search/search?type=3'})
}

// 查询搜索跳转
let handleSearch = () => {

}

const formatDateStr = (times) => {
    return formatTimestamp(times)
}

// 清除未读
const handleReady = () => {
    list.value.forEach(item => {
        item.isReady = false;
    })
}

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

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

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

// 下拉刷新
const downCallback = async (mescroll) => {
    try {
        setTimeout(async ()=>{
            const res = await getNoticeList(1, upOption.value.page.size);
            cssFlag.value = false;
            list.value = res.list;
            mescroll.resetUpScroll();
        },500);
    } catch (error) {
        mescroll.endErr();
    } finally {
        setTimeout(async ()=>{
            mescroll.endSuccess();
        },500);
    }
}
// 上拉加载更多
const upCallback = async (mescroll) => {
    try {
        setTimeout(async ()=>{
            const res = await getNoticeList(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);
        },500);
    } catch (error) {
        mescroll.endErr();
    }
}

// 获取数据列表
const getNoticeList = (pageIndex, pageSize) => {
    return new Promise(async (resolve) => {
        let param = {
            pageIndex,
            pageSize
        }
        
        // let res = await noticeList(param);
        let res = {
            list:[
                {id:1,date:'2025-06-30',isReady:true,title:'临时调整本周工作时间的通知',imgSrc:'static/images/notice/icon-TiXing@2x.png'},
                {id:2,date:'2025-06-27',isReady:false,title:'8月个税扣缴申报已完成',imgSrc:'static/images/notice/icon-RiCheng@2x.png'},
                {id:3,date:'2025-09-10 17:29:00',isReady:true,title:'公司班车北五环线路调整的通知',imgSrc:'static/images/notice/icon-DaiBan@2x.png'},
                {id:4,date:'2025-09-09 15:36:00',isReady:true,title:'祝贺“友晟夏季封装外壳发布会”圆满成功',imgSrc:'static/images/notice/icon-TongZhi@2x.png'},
                {id:5,date:'2025-09-07 08:41:00',isReady:false,title:'研发部采购验收流程【2025】修改版',imgSrc:'static/images/notice/icon-FuWu@2x.png'},
                {id:6,date:'2025-09-07 08:08:00',isReady:false,title:'加强公司安全管理 迎接全市年度检查',imgSrc:'static/images/notice/icon-TongZhi@2x.png'},
                {id:7,date:'2025-09-05 13:18:00',isReady:false,title:'2025年国庆节放假安排通知',imgSrc:'static/images/notice/icon-TiXing@2x.png'},
                {id:8,date:'2025-06-30',isReady:true,title:'临时调整本周工作时间的通知',imgSrc:'static/images/notice/icon-TiXing@2x.png'},
                {id:9,date:'2025-06-27',isReady:false,title:'8月个税扣缴申报已完成',imgSrc:'static/images/notice/icon-RiCheng@2x.png'},
                {id:10,date:'2025-09-10 17:29:00',isReady:true,title:'公司班车北五环线路调整的通知',imgSrc:'static/images/notice/icon-DaiBan@2x.png'},
                // {id:11,date:'2025-09-09 15:36:00',isReady:true,title:'祝贺“友晟夏季封装外壳发布会”圆满成功',imgSrc:'static/images/notice/icon-TongZhi@2x.png'},
                // {id:12,date:'2025-09-07 08:41:00',isReady:false,title:'研发部采购验收流程【2025】修改版',imgSrc:'static/images/notice/icon-FuWu@2x.png'},
                // {id:13,date:'2025-09-07 08:08:00',isReady:false,title:'加强公司安全管理 迎接全市年度检查',imgSrc:'static/images/notice/icon-TongZhi@2x.png'},
                // {id:14,date:'2025-09-05 13:18:00',isReady:false,title:'2025年国庆节放假安排通知',imgSrc:'static/images/notice/icon-TiXing@2x.png'},
            ],
            totalCount:14
        }
        resolve({
            list: res.list,
            total: res.totalCount
        });
    });

}
</script>

<style scoped>
.all-body{
    position: absolute;
    /* #ifdef APP-PLUS */
    top:150rpx;
    height: calc(100vh - 75px);
    /* #endif */
    /* #ifndef APP-PLUS */
    top:120rpx;
    height: calc(100vh - 64px);
    /* #endif */
    overflow: hidden;
}


:deep(.mescroll-downwarp .downwarp-progress){
    border-color:#fff !important;
}

:deep(.mescroll-downwarp .downwarp-tip){
    color:#fff;
}


.white-bg {
    width: 750rpx;
    padding: 40rpx 0 ;
    margin-bottom:0;
    border-radius: 8px 8px 0 0;
}
.scroll-h{
    /* #ifdef APP-PLUS */
    height: calc(100vh - 120px);
    /* #endif */
    /* #ifndef APP-PLUS */
    height: calc(100vh - 140px);
    /* #endif */
}

.white-bg .notice-list {
    display: flex;
    padding: 0 30rpx 0 40rpx;
    margin-bottom: 30rpx;
}

.white-bg .notice-list img {
    width: 80rpx;
    height: 80rpx;
    margin-right: 30rpx;
}

.white-bg .notice-list .notice-item {
    border-bottom: 1px solid #E7E7E7;
    width: 570rpx;
    padding-bottom: 30rpx;
    position: relative;
}

.white-bg .notice-list:last-child .notice-item {
    border-bottom: none;
    padding-bottom: 0;
}

.white-bg .notice-list .notice-title {
    font-size: 32rpx;
    width: 530rpx;
    white-space: nowrap;
    /* 禁止换行 */
    overflow: hidden;
    /* 隐藏溢出内容 */
    text-overflow: ellipsis;
    /* 显示省略号 */
}

.white-bg .notice-list .notice-title.bold {
    font-weight: bold;
}

.white-bg .notice-list .notice-date {
    color: #BFBFBF;
    font-size: 28rpx;
    margin-top: 10rpx;
}

.white-bg .notice-list .notice-item .dot {
    position: absolute;
    right: 0;
    top: 14rpx;
}
</style>