ParkApp/pages/index/notice/list.vue

<template>
	<view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<view @click="goDetail(item)" class="card" v-for="(item,index) in dataList" :key="index">
				<view class="title">
					<view class="text-cut-1">
						<text class="text-bold">标题：</text>
						<text class="">{{item.title}}</text>
					</view>
					<view class="time">
						<text class="cuIcon-time padding-right-10"></text>
						<text>{{new Date(item.createTime).getTime() | date('yyyy-mm-dd') }}</text>
					</view>
				</view>
				<view class="content  ">
					<text class="text-cut-2">{{item.notice | formatHtml}}</text>
				</view>
				<view class="bottom">
					<view @click.stop="delItem(item)" class="cu-btn line-red round sm">
						<u-icon top="-1" name="trash-fill" size="25"></u-icon>
						<text class="padding-left-10">删除公告</text>
					</view>
				</view>
			</view>
		</mescroll-body>
		<view @click="add" style="position: fixed;bottom: 25%;right: 20rpx;">
			<view class="cuIcon cu-btn bg-blue" style="width: 80rpx;height: 80rpx;">
				<text class="cuIcon-add" style="font-size: 60rpx;"></text>
			</view>
		</view>
	</view>
</template>
<script>
	import MescrollMixin from "@/components/mescroll-body/mescroll-mixins.js";
	export default {
		mixins:[MescrollMixin],
		data() {
			return {
				agencyId:'',
				isFirst:false,
				
				dataList:[],
				downOption: { 
					use: true,
					auto: false
				},
				upOption: {
					auto: false,
					page: {
						page: 0,
						size: 10
					},
					noMoreSize: 3, 
					empty: {
						tip: '暂无相关数据'
					}
				},
			}
		},
		filters: {
			formatHtml (str) {
				return str.replace(/<[^>]+>/g, "");
			}
		},
		onShow() {
			this.mescroll.resetUpScroll()
		},
		onLoad() {
		},
		methods: {
			goDetail(item){
				getApp().globalData.noticeDetail=item
				uni.navigateTo({
					url:"/pages/index/notice/detail",
				})
			},
			delItem(item){
				let params="?ids="+item.id
				this.$showModel('确定要删除该公告吗？').then(res=>{
					this.$api.notice.remove(params).then(res=>{
						if (res.success) {
							this.$showModel('删除成功',false).then(res=>{
								this.mescroll.resetUpScroll()
							})
						}else{
							this.$showToast('删除失败','error')
						}
					})
				})
			},
			add(){
				uni.navigateTo({
					url:"/pages/index/notice/add"
				})
			},
			/**
			 * 下拉回调
			 */
			downCallback(){
				setTimeout(()=>{
					this.mescroll.resetUpScroll()
				},1500)
			},
			/**
			 * 上拉回调
			 * @param {Object} mescroll
			 */
			upCallback(mescroll) {
				try{
					let params={
						agencyId:this.$cache.get('agencyId'),
						current:mescroll.num,
						size:mescroll.size
					}
					this.$api.notice.page(params).then(res=>{
						let data=res.data.records
						let length=data.length
						let total=res.data.total
						mescroll.endBySize(length, total);
						if(mescroll.num == 1) this.dataList = []; 
						this.dataList=this.dataList.concat(data); 
					})
				}catch(e){
					mescroll.endErr();
				}
			},
		}
	}
</script>

<style lang="scss">
	.card{
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin: 20rpx;
		.title{
			display: flex;
			justify-content: space-between;
			padding: 20rpx;
			font-size: 30rpx;
			border-bottom: 0.5rpx solid  #e6e5e8;
			
			.time{
				padding-top: 8rpx;
				font-size: 28rpx;
				color: #8d8d8d;
			}
		}
		.content{
			height: 150rpx;
			padding:30rpx 20rpx;
			border-bottom: 1rpx dashed  #e6e5e8;
		}
		
		.bottom{
			padding: 20rpx;
			display: flex;
			justify-content: flex-end;
		}
	}
</style>