first commit

src/pages/notice/notice.vue

@@ -0,0 +1,234 @@
+<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">
+                <uni-search-bar class="custom-search" radius="28" placeholder="请输入您想查询的内容或服务" clearButton="auto"
+                    cancelButton="none" bgColor="#6FA2F8" textColor="#ffffff" @confirm="handleSearch" />
+            </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;
+})
+
+// 查询搜索跳转
+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);
+        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>