联调接口
This commit is contained in:
@@ -4,8 +4,8 @@
|
||||
<!-- 头部 -->
|
||||
<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 class="head-right" @click="handleRead">
|
||||
<img :src="'static/images/icon-clean@2x.png'" />清除未读
|
||||
</view>
|
||||
</template>
|
||||
</customHeader>
|
||||
@@ -24,13 +24,14 @@
|
||||
<!-- 消息列表 -->
|
||||
<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="white-bg" v-if="list.length>0" :class="{'bg-height':list.length<5}">
|
||||
<view class="notice-list" v-for="(item, index) in list" :key="index" @click="handleJump(item)">
|
||||
<img :src="'static/images/notice/'+item.imgSrc" class="img-w" />
|
||||
<!-- <image :src="item.imgSrc" mode="aspectFit" class="img-w"></image> -->
|
||||
<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 :class="{ 'notice-title': true, bold: item.isRead }">{{ item.subject }}</view>
|
||||
<view class="notice-date">{{ formatDateStr(item.createTime) }}</view>
|
||||
<view class="dot" v-if="item.isRead"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -40,7 +41,7 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import { ref, onMounted,computed } from 'vue'
|
||||
import customHeader from '@/components/customHeader.vue'
|
||||
import { getNavBarPaddingTop } from '@/utils/system.js'
|
||||
import { noticeList } from '@/api/notice.js'
|
||||
@@ -68,12 +69,21 @@ const formatDateStr = (times) => {
|
||||
}
|
||||
|
||||
// 清除未读
|
||||
const handleReady = () => {
|
||||
const handleRead = () => {
|
||||
list.value.forEach(item => {
|
||||
item.isReady = false;
|
||||
item.isRead = false;
|
||||
})
|
||||
}
|
||||
|
||||
// 随机图片数组
|
||||
const images = [
|
||||
'icon-TiXing@2x.png',
|
||||
'icon-RiCheng@2x.png',
|
||||
'icon-DaiBan@2x.png',
|
||||
'icon-TongZhi@2x.png',
|
||||
'icon-TiXing@2x.png'
|
||||
]
|
||||
|
||||
// 查询通知列表
|
||||
let list = ref([]);
|
||||
const mescrollRef = ref(null);
|
||||
@@ -86,7 +96,7 @@ const upOption = ref({
|
||||
});
|
||||
|
||||
const downOption = ref({
|
||||
auto: true,
|
||||
auto: false,
|
||||
textInOffset: '下拉刷新',
|
||||
textOutOffset: '释放更新',
|
||||
textLoading: '刷新中...'
|
||||
@@ -101,12 +111,11 @@ const mescrollInit = (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);
|
||||
console.log("下拉刷新")
|
||||
const res = await getNoticeList(1, upOption.value.page.size);
|
||||
cssFlag.value = false;
|
||||
list.value = res.list;
|
||||
mescroll.resetUpScroll();
|
||||
} catch (error) {
|
||||
mescroll.endErr();
|
||||
} finally {
|
||||
@@ -118,15 +127,14 @@ const downCallback = async (mescroll) => {
|
||||
// 上拉加载更多
|
||||
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);
|
||||
console.log("上拉加载更多")
|
||||
let 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);
|
||||
} catch (error) {
|
||||
mescroll.endErr();
|
||||
}
|
||||
@@ -140,33 +148,26 @@ const getNoticeList = (pageIndex, pageSize) => {
|
||||
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
|
||||
}
|
||||
let res = await noticeList(param);
|
||||
let list = res.list || [];
|
||||
list.forEach(item=>{
|
||||
const randomIndex = Math.floor(Math.random() * images.length)
|
||||
item.imgSrc = images[randomIndex];
|
||||
})
|
||||
resolve({
|
||||
list: res.list,
|
||||
total: res.totalCount
|
||||
list,
|
||||
total: res.recordCount || 0
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 跳转webview
|
||||
const handleJump = (item)=>{
|
||||
uni.navigateTo({
|
||||
url: '/pages/h5-webview/h5-webview?url=' + item.mobileLink+"&title="+item.subject
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@@ -195,16 +196,24 @@ const getNoticeList = (pageIndex, pageSize) => {
|
||||
|
||||
.white-bg {
|
||||
width: 750rpx;
|
||||
padding: 40rpx 0 ;
|
||||
padding: 40rpx 0 20rpx;
|
||||
margin-bottom:0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
.white-bg.bg-height{
|
||||
/* #ifdef APP-PLUS */
|
||||
height: calc(100vh - 145px);
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
height: calc(100vh - 175px);
|
||||
/* #endif */
|
||||
}
|
||||
.scroll-h{
|
||||
/* #ifdef APP-PLUS */
|
||||
height: calc(100vh - 120px);
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
height: calc(100vh - 140px);
|
||||
height: calc(100vh - 160px);
|
||||
/* #endif */
|
||||
}
|
||||
|
||||
@@ -214,7 +223,7 @@ const getNoticeList = (pageIndex, pageSize) => {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.white-bg .notice-list img {
|
||||
.white-bg .notice-list .img-w{
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
margin-right: 30rpx;
|
||||
|
||||
Reference in New Issue
Block a user