hbj_app/pages/message/mineNews/lishiNews.vue

<template>
	<view class="">
		<u-navbar bgColor="#ffffff" :placeholder="true" titleStyle="font-weight:600" title="历史信息" :autoBack="true">
		
		</u-navbar>
		<u-sticky bgColor="#fff">
			<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" @change="souSuoRiQi()">
				<view style="padding-left: 15rpx;padding-right: 15rpx; width: 100%;">
				<!-- 	<view style="background-color: rgb(255, 255, 255); display: flex; width: 100%; height: 80rpx; padding-left: 18rpx;align-items: center;">
						<u-button icon="search" type="primary" style="width: 20%;margin: 0px 10px 0px 10px;" size="mini" shape="circle" text="按日期范围"></u-button>
					</view> -->
				</view>
			</uni-datetime-picker>
		</u-sticky>

		<!-- loading -->
		<LoadingPage :loading="loading"></LoadingPage>
		<view class="page-c">
			<scroll-view scroll-y="true" style="height: calc(100vh - 50px);" 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;">
							<span style="font-size: 30rpx;margin-bottom: 15rpx;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;">
							<span style="font-size: 24rpx;margin-bottom: 15rpx;">{{ item.createTime }}</span>
							<view class=""><uni-badge type="success" text="已读"></uni-badge></view>
						</view>
					</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-popup>
		</view>
	</view>
</template>

<script>
import { getUserProfile } from '@/api/indexpage/user.js';
import { listMessage, readMessage, getMessage } from '@/api/indexpage/newslist/newslist.js';
import Tabbar from '@/components/tabbar/tabbar.vue';
export default {
	data() {
		return {
			newobj: {},
			Detailshow: false,
			datetimerange: [],
			userId: '',
			loading: true, //loading
			total: 0, //非常规作业总数
			pagenum: 1, //分页页码
			newslist: []
		};
	},
	onLoad() {
		//隐常自带tabber
		uni.hideTabBar();
		this.getUser();
	},
	methods: {
		closeDetail() {
			this.Detailshow = false;
		},
		getXiaoXi(item) {
			this.newobj = item;
			this.Detailshow = true;
		},
		souSuoRiQi() {
			console.log(this.datetimerange);
		},
		// 下拉加载
		loadMore() {
			//一次分多少页
			let pageSize = 7;
			//计算分页次数//要分多少页  // 总页数除以分页数
			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: '1', pageNum: this.pagenum, pageSize: 20, consumerId: this.userId }).then(res1 => {
				this.newslist = [...this.newslist, ...res1.rows];
				this.total = res1.total;
				this.loading = false;
			});

			//未读消息
		}
	}
};
</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>