xinelu-applet-ui/pagesC/notice/notice.vue

<template>
	<view class="app">
		<view class="" v-if="MegList.length>0">
			<view class="items" v-for="(item, index) in MegList" :key="index">
				<view class="item" @click="goToDetail(item)">
					<view class="time">
						{{item.sendTime}}
					</view>
					<view class="article">
						<view class="title">
							{{item.title?item.title:title}}
						</view>
						<view class="text">
							<span>{{item.content}}</span>
							<span>，点击查看详情>></span>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" v-else  style="margin-top: 100rpx;">
			<u-empty mode="order" icon-size='220' text="暂无"></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		getMegList
	} from '@/api/pages/message/index.js'
	import {
		markRead
	} from '@/api/pagesC/seekadvicefrom/seekadvicefrom.js';
	export default {
		data() {
			return {
				MegList: [],
				total: 0,
				obj: {
					messageCategory: undefined,
					patientId: undefined,
					pageSize: 10,
					pageNum: 1,
					cityCode: undefined,
				},
				list: {},
				title: '',
			};
		},
		onReady() { //更改导航栏文字
			uni.setNavigationBarTitle({
				title: this.title,
			});
		},
		onLoad(options) {
			this.list = JSON.parse(options.item)
			this.title = options.title
			this.obj.messageCategory = this.list.messageCategory
			this.obj.cityCode = uni.getStorageSync('region')
			this.obj.patientId = this.list.recipientId
			this.info();
			this.Read();
		},
		methods: {
			goToDetail(item) {
				uni.navigateTo({
					url: `/pagesC/noticedetails/noticedetails?item=${JSON.stringify(item)}&title=${this.title}`
				})
			},
			info() {
				getMegList(this.obj).then(res => {
					this.MegList = res.rows
					this.total = res.total
				})
			},
			Read() {
				this.markReadData = {
					readStatus: '1',
					messageCategory: this.list.messageCategory,
					recipientId: this.list.recipientId
				}
				markRead(this.markReadData)
			}
		},
		onReachBottom() { //上滑加载
			if (this.MegList.length >= this.total) {} else {
				this.obj.pageNum++;
				getMegList(this.obj).then(res => {
					res.rows.forEach(e => {
						this.MegList.push(e)
					})
					this.total = res.total
				})
			}
		},
		onPullDownRefresh() { //下拉刷新
			this.obj.pageNum = 1;
			this.info()
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
	}
</script>

<style lang="scss">
	.app {
		background-color: #F6F6F6;
		height: 1200rpx;

		.items {
			margin-bottom: 80rpx;

			.item {
				position: relative;
				width: 100%;
				height: 250rpx;
				padding-top: 30rpx;

				// overflow: hidden;
				.article {
					background-color: #fff;
					position: absolute;
					top: 38%;
					left: 5%;
					width: 90%;

					.text {
						font-size: 28rpx;
						line-height: 80rpx;
						// height: 80rpx;
						letter-spacing: 1rpx;
						color: #333333;
						margin: 0 20rpx;

						span {
							display: inline-block;
							max-width: 360rpx;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
						}
					}

					.title {
						font-size: 30rpx;
						color: #000000;
						line-height: 80rpx;
						border-bottom: 1rpx solid #f6f6f6;
						height: 80rpx;
						margin: 0 20rpx;
					}
				}

				.time {
					padding: 8rpx 30rpx;
					background-color: #e8e8e8;
					font-size: 20rpx;
					color: #999999;
					border-radius: 18rpx;
					text-align: center;
					position: absolute;
					left: 50%;
					transform: translate(-50%, 10%);
				}
			}
		}
	}
</style>