guosen-ldt-client/pagesA/pages/notice/notice.vue

<template>
	<view class="safe-area-inset-bottom margin-top-10">
		<mescroll-body :height="height" ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"
			:down="downOption" :up="upOption">
			<view @click="jump(item)" class="cart-view-box" v-for="(item,index) in list" :key="index">
				<view class="text-gray text-center text-sm">{{item.createTime}}</view>
				<view class="bg-white margin-top-10 radius card-view">
					<view class="content-view">
						<view class="flex">
							<view class="center">
								<text class=" text-lg text-cut" style="color: #000000;">{{item.noticeManagementContent.title}}</text>
							</view>
						</view>
						<view class=" text-sm text-cut-2 subtitle">{{item.noticeManagementContent.content | formatHtml}}</view>
						<view class="flex text-gray justify-between "
							style=" border-top: 1rpx solid #f2f2f2;box-sizing: border-box;padding-top: 15rpx;">
							<view class="text-df ">
								<text>查看详情</text>
							</view>
							<view style="padding-top: 8rpx;">
								<text class="cuIcon-right "></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>
		<toast ref="toast"></toast>
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	import Base64 from 'base-64';
	export default {
		mixins: [MescrollMixin],
		data() {
			return {
				ids: [],
				list: [],
				downOption:{
					auto:false
				}
			}
		},
		filters: {
			formatHtml(str) {
				return decodeURIComponent(str).replace(/<[^>]+>/g, "");
			}
		},
		onLoad(options) {
			this.ids = JSON.parse(options.ids)
			this.isRead()
		},
		methods: {
			isRead() {
				if (this.$isEmpty(this.ids)) {
					return
				}
				let params = []
				this.ids.forEach(item => {
					let obj = {
						id: item,
						isRead: true
					}
					params.push(obj)
				})
				this.$api.notice.isRead(params)
			},
			jump(item) {
				uni.navigateTo({
					url: "detail?id=" + item.id
				})
			},
			downCallback() {
				setTimeout(() => {
					this.$refs.toast.info('刷新成功')
					this.mescroll.resetUpScroll();
				}, 1000)
			},
			upCallback(mescroll) {
				let params = {
					receiverId: this.vuex_userId,
					current: mescroll.num,
					size: mescroll.size,
				}
				try {
					this.$api.notice.list(params).then(res => {
						let data = res.data.records
						let total = res.data.total
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) this.list = []; //如果是第一页需手动制空列表
						this.list = this.list.concat(data); //追加新数据
					})
				} catch (e) {
					this.mescroll.endErr()
				}
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F3F3F3;
		font-size: 28rpx;
	}

	.subtitle {
		color: #7e7e7e;
		font-size: 28rpx;
		margin: 30rpx 0 10rpx 0;
		line-height: 52rpx;
	}

	.cart-view-box {
		padding: 25rpx 20rpx;

		.card-view {
			background-color: #FFFFFF;
			position: relative;
			border-radius: 10rpx;

			.head-img {
				width: 100%;
				height: 236rpx;
			}

			.content-view {
				padding: 27rpx 27rpx 15rpx;
			}
		}
	}
</style>