jp-railway/pages/mine/myLike.vue

<template>
	<view>
		<u-navbar title="我的点赞"  >	
		</u-navbar>
		<view class="main">
			<template v-for="(item,i) in list">
				<view class="like-box"  v-if="item"  @click="ckInfo(item.id)" :key="i">
					<view class="content">
						<view class="title">
							{{item.title}}
						</view>
						<view class="else">
							<view class="classify">
								{{item.typeName}}
							</view>
							<view class="date">
								{{substrDate(item.createTime)}}
							</view>
						</view>
					</view>
					<view class="picture">
						<img  v-if="item.pic" :src="item.pic" alt="">
						<img  v-else src="@/assets/img/default_img.png" alt="">
						
					</view>	
				</view>
				<view class="like-box"  v-else   :key="i">
					<view class="content">
						<view class="title">
							<span style="color: red;">当前新闻已被删除</span>	
						</view>
						<view class="else">
							<view class="classify">
							
							</view>
							<view class="date">
								
							</view>
						</view>
					</view>
					<view class="picture">
						
						<img   src="@/assets/img/default_img.png" alt="">
						
					</view>	
				</view>
			</template>
			
			
		</view>
		<u-divider   v-if="list.length==recordsTotal"
		 :isnone="list.length==0" nonetext="你还没有参与点赞"
		bg-color="#F2F4F4" border-color="#CFD2D5">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/news.js'
	
	export default {
		data() {
			return {
				list:[],
				listForm:{
					pageIndex:1,
				
					pageSize:20,
				},
				recordsTotal:0,
			}
		},
		onLoad(op){
		
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			ckInfo(id){
				var url="/pages/news/articleDetails?id="+id;
				uni.navigateTo({
					url:url
				})
			},
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList();
			},
			getList(){
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				
				API.newsLikespageList(this.listForm).then((res) => {
					uni.hideLoading();
					this.list = [
						...this.list,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.main{
		padding: 24rpx 32rpx;
		.like-box{
			border-radius: 8px;
			background-color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: space-between;
			padding: 24rpx;
			margin-bottom: 24rpx;
			.content{
				width: 390rpx;
				display: flex;
			    flex-direction:column;
				justify-content: space-between;
				.title{
					color: rgba(51, 51, 51, 1);
					font-size: 32rpx;
					line-height: 46rpx;
					font-weight: bold;
					font-family: 'Medium';
				}
				.else{
					display: flex;
					justify-content: space-between;
					color: rgba(119, 119, 119, 1);
					font-size: 24rpx;
					font-family: 'Regular';
				}
			}
			.picture{
				 width: 224rpx;
				 height: 172rpx;
				 border-radius: 5px;
				 overflow: hidden;
				 img{
					 width: 100%;
					 height: 100%;
					 
				 }
			}
		}
	}

</style>