detection-business/pages/xiaoxi/notice.vue
2025-08-08 14:27:37 +08:00

494 lines
11 KiB
Vue

<template>
<view class="container">
<headersVue :titles="titles" style=" position: static !important;">
<u-icon name="arrow-left" color="#fff" size="18" v-if="!showTabBar"></u-icon>
<template #right>
<image src="/static/icons/clearNotice.png" style="height: 40rpx;width: 40rpx;" @click="clearAll()">
</image>
</template>
</headersVue>
<view class="content">
<view class="top_">
<view class="top_box" v-for="(item,index) in taplist" :key="index" @click="tapqh(index)">
<view class="">{{ item }}</view>
<view class="gang" v-if="tapindex == index"></view>
</view>
</view>
<view class="lsit_">
<scroll-view class="school-scroll-view" scroll-y @scrolltolower="onReachBottomCus"
:style="{ height: scrollHeight + 'px' }" refresher-enabled @refresherrefresh="onRefresherrefresh"
:refresher-triggered="isTriggered">
<view class="lsit_box" v-for="(item,index) in arrlist" :key="index">
<view v-if="tapindex === 0" @click="readNotice(item)">
<view class="d_s" style="position: relative;">
<!-- 红色 * 角标 -->
<view style="position: absolute; top: 0rpx; left: 0rpx; color: red; font-size: 44rpx;"
v-if="!item.readStatus">*
</view>
</view>
<view class="t-zi" style="margin-left: 20rpx;" v-html="item.templateContent"></view>
</view>
<view v-if="tapindex === 1">
<view class="d_s" @click="getdetails(item.id)">
<view class="touxiang_">
<image :src="baseImageUrl+getUrl(item.newsCover)" mode=""></image>
</view>
<view class="">
<view class="title_">{{ item.newsTitle }}</view>
<view class="num_">{{ getDate(item.createTime || new Date()) }}</view>
</view>
</view>
<view class="t-zi" v-html="item.newsContent"></view>
</view>
<view v-if="tapindex === 2">
<view class="d_s" @click="getdetails(item.id)">
<view class="item-container">
<view class="title_">{{ item.title }}</view>
<view class="num_">{{ getDate(item.createTime || new Date()) }}</view>
</view>
</view>
<view class="t-zi" v-html="item.content"></view>
</view>
</view>
</scroll-view>
</view>
<!-- <view style="width: 100%; height: 88rpx;"></view> -->
</view>
<!-- 普通弹窗 -->
<uni-popup ref="popup" background-color="#fff">
<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
<text class="text popup-content-text">{{ nowReadItem.templateContent }}</text>
<button class="button popup-info" @click="dialogToggle"><text
class="button-text info-text">知道了</text></button>
</view>
</uni-popup>
<!-- 底部 -->
<!-- <view style="width: 100%; height: 50px;"></view> -->
<tabBar :msg="msg " v-if="showTabBar"></tabBar>
</view>
</template>
<script>
import headersVue from '../../components/header/headers.vue';
import request from "@/utils/request";
import {
formatDate
} from "@/utils/utils";
export default {
data() {
return {
titles: "通知",
type: "center",
nowReadItem: {},
tapindex: 0,
taplist: ["站内信", "监管通知", "内部通知"],
show: false,
status: 'loading',
msg: '2',
chuan: '',
roles: [],
jcshopRole: false,
jcgfRole: false,
isOpen: false,
fab: false,
imgs: '',
type: 'zflm',
animationData: {},
isRote: false,
animation: null,
actindex: 0,
partnerId: '',
arrlist: [],
pageNum: 1, //第几页
pageSize: 10, //一页多少张
totalPages: 0, //总数
baseImageUrl: this.$baseImageUrl,
showTabBar: true,
isTriggered: false,
scrollHeight: 0,
}
},
components: {
headersVue
},
onShow() {
console.log('this.tapindex', this.tapindex);
if (this.tapindex === 2) {
this.getwarnMsglist()
} else if (this.tapindex == 1) {
this.getlistindex()
this.getIfSend()
} else if (this.tapindex == 0) {
this.getNoticeList()
}
},
onLoad(data) {
this.partnerId = uni.getStorageSync('partnerId')
// if (data && data.index) {
// this.tapindex = parseInt(data.index)
// this.getwarnMsglist()
// } else {
// this.getlistindex()
// this.getIfSend()
// }
if (data.type && data.type === 'staff') {
this.showTabBar = false
}
},
onReady() {
// 动态计算滚动区域高度
this.calculateScrollHeight();
},
methods: {
setIndex(num) {
this.tapindex = num
},
calculateScrollHeight() {
// 获取屏幕高度
const screenHeight = uni.getSystemInfoSync().windowHeight;
// 获取顶部区域高度
let topHeight = 270;
if (!this.showTabBar) {
topHeight = 200
}
// 计算滚动区域高度
this.scrollHeight = screenHeight - topHeight;
},
getUrl(value) {
if (!value) {
return ""
}
if (value[0] === '/') {
return value
} else {
return "/" + value
}
},
/**
* 上滑加载数据
*/
onReachBottomCus() {
//判断 如果页码*页容量大于等于总条数,提示该页数据加载完毕
if (this.pageNum >= this.totalPages) {
uni.$u.toast('没有更多数据了')
return
}
//页码+1,调用获取数据的方法获取第二页数据
this.pageNum++
//此处调用自己获取数据列表的方法
if (this.tapindex === 2) {
this.getwarnMsglist()
} else if (this.tapindex == 1) {
this.getlistindex()
this.getIfSend()
} else if (this.tapindex == 0) {
this.getNoticeList()
}
},
/**
* 下拉刷新数据
*/
onRefresherrefresh() {
this.isTriggered = true
this.pageNum = 1
this.total = 0
this.schoolList = []
if (this.tapindex === 2) {
this.getwarnMsglist()
} else if (this.tapindex == 1) {
this.getlistindex()
this.getIfSend()
} else if (this.tapindex == 0) {
this.getNoticeList()
}
},
/**
* 消息设置为已读
*/
dialogToggle() {
this.$refs.popup.close()
},
toAdd() {
uni.navigateTo({
url: '/pages/authority/newadd?type=' + null
})
},
/**
* 点击阅读消息
*/
async readNotice(item) {
this.nowReadItem = item
// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
this.$refs.popup.open(this.type)
//直接请求后台已读
await request({
url: "/system/notify-message/update-read",
method: "PUT",
params: {
ids: this.nowReadItem.id
},
}).then((res) => {
if (res.code == 200) {
item.readStatus = true
}
})
},
async clearAllNew() {
//直接请求后台已读
const res = await request({
url: "/system/notify-message/update-all-read",
method: "PUT",
})
this.onRefresherrefresh()
},
getIfSend() {
request({
url: '/system/inspectionNews/ifSend',
method: 'get'
}).then(res => {
this.ifSend = res.data
})
},
clearAll() {
let that = this
uni.showModal({
title: '确认',
content: '确认全部已读吗?',
success: function(res) {
if (res.confirm) {
that.clearAllNew()
}
}
});
},
async getwarnMsglist() {
let res = await request({
url: '/warnMsg/warnMsg/list',
method: 'get',
})
this.arrlist = res.data
let total = res.total
this.totalPages = Math.ceil(total / this.pageSize);
this.isTriggered = false
},
getDate(value) {
return formatDate(value)
},
tapqh(index) {
this.tapindex = index
this.arrlist = []
this.pageNum = 1
if (index === 0) {
this.getNoticeList()
} else if (index === 1) {
this.getlistindex()
} else if (index === 2) {
this.getwarnMsglist()
}
},
getdetails(id) {
const url = this.tapindex === 0 ? '/pages/xiaoxi/details?id=' + id : '/pages/xiaoxi/details?id=' + id +
"&index=1"
uni.navigateTo({
url: url
})
},
getback() {
uni.navigateBack({
delta: 1,
})
},
async getlistindex() {
let res = await request({
url: '/appInspection/news/msgList',
method: 'get',
data: {
partnerId: this.partnerId,
pageSize: this.pageSize,
pageNum: this.pageNum
}
})
// this.arrlist = res.rows
if (this.pageNum != 1) {
this.arrlist = this.arrlist.concat(res.data.records)
} else {
this.arrlist = res.data.records
}
let total = res.total
this.totalPages = Math.ceil(total / this.pageSize);
this.isTriggered = false
},
async getNoticeList() {
let res = await request({
url: '/system/notify-message/my-page',
method: 'get',
data: {
pageSize: this.pageSize,
pageNo: this.pageNum,
systemCode: 'jiance'
}
})
// this.arrlist = res.rows
if (this.pageNum != 1) {
this.arrlist = this.arrlist.concat(res.data.list)
} else {
this.arrlist = res.data.list
}
let total = res.data.total
this.totalPages = Math.ceil(total / this.pageSize);
this.isTriggered = false
},
}
}
</script>
<style scoped lang="scss">
.container {
background: #F7F8FC;
width: 100%;
}
.content {
background: #F7F8FC;
width: 100%;
box-sizing: border-box;
}
.top_ {
margin-top: 20rpx;
height: 98rpx;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
background: #fff;
}
.top_box {
width: 50%;
height: 98rpx;
text-align: center;
font-size: 28rpx;
color: #8D90A6;
box-sizing: border-box;
padding: 30rpx;
}
.gang {
width: 112rpx;
height: 8rpx;
background: linear-gradient(90deg, #366FFF 0%, #5DA0FC 100%);
margin: 5px auto;
}
.lsit_ {
background: #F7F8FC;
box-sizing: border-box;
padding: 30rpx;
}
.lsit_box {
width: 100%;
border-radius: 8rpx;
box-sizing: border-box;
padding: 30rpx;
background: #fff;
margin-bottom: 20rpx;
}
.d_s {
display: flex;
align-items: center;
}
.touxiang_ {
width: 40%;
height: 100px;
margin-right: 10px;
overflow: hidden;
image {
width: 100%;
height: 100%;
}
}
.title_ {
font-size: 32rpx;
color: #101A3E;
overflow: hidden;
//white-space: nowrap;
text-overflow: ellipsis;
}
.num_ {
font-size: 24rpx;
color: #327DFB;
}
.text_ {
font-size: 24rpx;
color: #8D90A6;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
margin-top: 20rpx;
}
.t-zi {
font-size: 14px;
font-weight: 400;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.item-container {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
/* 确保容器占满父级 */
}
.popup-content {
padding: 15px;
height: auto;
margin: auto;
width: 90%;
background-color: #fff;
}
.popup-content-text {
display: flex;
align-items: center;
justify-content: center;
}
.text {
color: #333;
}
.popup-info {
margin-top: 30rpx;
color: #fff;
background-color: #f2f6fc;
}
.info-text {
color: #909399;
}
</style>