hbj_app/pages/message/mineNews/mineNews.vue

<template>
	<view class="">
		<!-- //导航栏 -->
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="工作待办" :autoBack="true">
		
			<view slot="right" style="display: flex;align-items: center;flex-direction: column;" @click="lishi()">
				<svgImage height="36rpx" name="lishi"></svgImage>
				<span style="font-size: 18rpx; font-weight: 600;margin-right: 10rpx;color: #1296db;">历史待办</span>
			</view>
		</u-navbar>

		<view class="page-c">
			<scroll-view scroll-y="true" style="height: calc(100vh - 120px);" enableBackToTop="true" @scrolltolower="loadMore()">
				<uni-list>
					<uni-list-item v-for="(item, index) in newslist" :key="index" clickable @click="getXiaoXi(item)" title="列表右侧显示角标">
						<view slot="header" style="display: flex;">
							<view style="width: 105rpx;border: 1px solid #dddddd;border-radius: 10rpx;">
								<!-- 危险备案 -->
								<image v-if="item.iconClass === '1'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/weixian.png"></image>
								<!-- 应急预案 -->
								<image v-if="item.iconClass === '2'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/yuan.png"></image>
								<!-- 消防员提醒 -->
								<image v-if="item.iconClass === '3'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/xiaofang.png"></image>
								<!-- 应急演练-->
								<image v-if="item.iconClass === '4'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/yanlian.png"></image>
								<!-- 应急物资 -->
								<image v-if="item.iconClass === '5'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/wuzhi.png"></image>
								<!-- 应急设施 -->
								<image v-if="item.iconClass === '6'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/sheshi.png"></image>
								<!-- 报修提醒 -->
								<image v-if="item.iconClass === '7'" style="width: 100%;height: 100%;" src="../../../static/images/xiaoxitixing/baoxiu.png"></image>
							</view>
						</view>
						<view slot="body" style="display: flex;flex-direction: column;margin-left: 12rpx;flex: 1;justify-content: space-between;">
							<span style="font-size: 28rpx;font-weight: 600;">{{ item.templateName }}</span>
							<!-- <span></span> -->
							<span><u--text size="12" :text="item.messageContent" lines="1"></u--text></span>
						</view>
						<view slot="footer" style="display: flex;flex-direction: column;align-items: flex-end;justify-content: space-between;">
							<span style="font-size: 24rpx;margin-bottom: 10rpx;">{{ item.createTime }}</span>
							<view class=""><uni-badge text="未读"></uni-badge></view>
						</view>
					</uni-list-item>
				</uni-list>
				<uni-list v-if="newslist.length == '0'"><uni-list-item title="暂无工作待办"></uni-list-item></uni-list>
			</scroll-view>
			<u-popup :round="10" mode="bottom" :show="Detailshow" @close="closeDetail">
				<view class="ruKuInfo">
					<view style="color: #3c6fd2;font-size: 36rpx;font-weight: 600;">{{ newobj.templateName }}</view>
					<view style="color: #646a6f;font-size: 29rpx;font-weight: 600;">{{ newobj.createTime }}</view>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;" scroll-with-animation="true">
					<view style="display: flex;flex-direction: column;  justify-content: center;align-items: center;">
						<view class="textInfo">
							消息内容：
							<br />
							<span style="color: #171819;font-size: 30rpx;text-indent: 2em;">{{ newobj.messageContent }}</span>
						</view>
					</view>
				</scroll-view>
				<!-- <u-button type="primary" text="确定已读" @click="getXiaoXi2(newobj.id)"></u-button> -->
			</u-popup>
		</view>
		<!-- <Tabbar :value="'工作待办'"></Tabbar> -->
	</view>
</template>

<script>
import Tabbar from '@/components/tabbar/tabbar.vue';
import { listMessage, readMessage, getMessage } from '@/api/indexpage/newslist/newslist.js';
import { getUserProfile } from '@/api/indexpage/user.js';
export default {
	components: {
		Tabbar
	},
	data() {
		return {
			newobj: {},
			Detailshow: false,
			userId: '',
			loading: true, //loading
			total: 0, //非常规作业总数
			pagenum: 1, //分页页码
			newslist: []
		};
	},
	onLoad() {
		//隐常自带tabber
		uni.hideTabBar();
		this.getUser();
	},
	methods: {
		closeDetail() {
			readMessage(this.newobj.id).then(res => {
				this.$modal.msg('消息已读,可前往历史消息查看');
				//更新vuex中的消息条数
				this.pagenum = 1;
				this.newslist = [];
				this.getNewsList();
				this.Detailshow = false;
				//获取消息条数
				this.$store.dispatch('getNewsListOne');
				//重新获取未读列表
				// this.getNewsList();
			});
		},
		// 下拉加载
		loadMore() {
			//一次分多少页
			let pageSize = 20;
			//计算分页次数//要分多少页  // 总页数除以分页数
			let a = this.total / pageSize + 1;
			//初始化为1，触发直接请求第二页
			this.pagenum = this.pagenum + 1;
			//判断第几页 小于总页数才请求
			if (this.pagenum <= a) {
				uni.showToast({
					title: '加载中....',
					duration: 1000
				});
				// console.log('对不', a, '-----');
				// console.log(this.pagenum);
				// console.log('发请求');
				this.getNewsList();
			} else {
				// console.log('对不', a, '-----');
				// console.log(this.pagenum);
				uni.showToast({
					title: '没有更多了',
					duration: 1000
				});
			}
		},
		getUser() {
			getUserProfile().then(res => {
				this.userId = res.data.user.userId;
				this.getNewsList();
			});
		},
		//我的消息--获取消息条数
		getNewsList() {
			listMessage({ readStatus: '0', pageNum: this.pagenum, pageSize: 20, consumerId: this.userId }).then(res1 => {
				this.newslist = [...this.newslist, ...res1.rows];
				this.total = res1.total;
				this.loading = false;
			});

			//未读消息
		},
		// 点击消息查看详情---而后待读消息消失
		getXiaoXi(item) {
			this.newobj = item;
			this.Detailshow = true;
			// 调用查看消息详情的接口
		},
		// 点击消息查看详情---而后待读消息消失
		getXiaoXi2(id) {
			// 调用查看消息详情的接口
			readMessage(id).then(res => {
				this.$modal.msg('消息已读,可前往历史消息查看');
				//获取消息条数
				this.$store.dispatch('getNewsListOne');
				//更新vuex中的消息条数
				//重新获取未读列表
				this.pagenum = 1;
				this.newslist = [];
				this.getNewsList();
				this.Detailshow = false;
			});
		},
		//历史消息
		lishi() {
			this.$tab.navigateTo('/pages/message/mineNews/lishiNews');
		}
	}
};
</script>

<style lang="scss" scoped>
.page-c {
	.textInfo {
		padding: 20rpx;
		border-bottom: #dceaf1 1px solid;
		width: 90vw;
	}

	.ruKuInfo {
		background-color: #dceaf1;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
		height: 150rpx;
		width: 100vw;

		display: flex;
		flex-direction: column;
		justify-content: space-around;
		align-items: center;

		.process {
			display: flex;
			margin: 20rpx 0;
		}
	}

	.paiban {
		padding: 20rpx;
	}

	.paibanBox {
		width: 100vw;
		// height: 900rpx;
		background-color: #fff;
		box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 37, 105, 0.1);
	}
	.wenzhi {
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box; //作为弹性伸缩盒子模型显示。
		-webkit-box-orient: vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
		-webkit-line-clamp: 3; //显示的行
	}
	/deep/ .u-read-more__toggle {
		// display: flex;
		// flex-direction: row;
		justify-content: flex-end;
	}
}
</style>