horzi_rai_wxa/pages/myCollection/myCollection.vue

<template>
	<view class="container myCollection-container">
		<view class="collect-ul" v-if="haveData">
			<view class="collect-ltem" v-for="(item,index) in collectList" :key="index" @click="goDetail(item.ArticleId)">
				<view class="item-left">
					<text class="title text_twoLine">{{item.Title}}</text>
					<text class="text_twoLine desc">{{item.Body}}</text>
				</view>
				<u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
			</view>
			<u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20"/>
		</view>
		<view class="nodata" v-else>
			<image src="@/static/img/nodata.png" mode="" class="nodata_ico"></image>
			<text>暂时没有收藏的内容</text>
		</view>
	</view>
</template>

<script>
	import { Mine } from '@/config/api.js'
	import { Throttle } from '@/config/util.js'
	export default {
		data() {
			return {
				page_no:1,
				pageSize:10,
				collectList:[],
				haveData:true,
				status:'loadmore',
				loadText: {
					loadmore: '上拉加载更多',
					loading: '加载中',
					nomore: '已经到底了'
				},
			};
		},
		onLoad() {
			this.getCollectList()
		},
		methods: {
			/* 获取列表 */
			getCollectList() {
				Mine.getCollect({
					PageSize: this.pageSize,
					CurrentIndex: this.page_no
				}).then(res => {
					if(res.Ret === 200) {
						this.status = this.page_no < res.Data.Paging.Pages ? 'loadmore' : 'nomore';
						if(this.page_no === 1) {
							this.collectList = res.Data.List || [];
							this.haveData = this.collectList.length ? true : false
						}else {
							this.collectList = this.collectList.concat(res.Data.List)
						}
					}
				})
			},
			goDetail(id) {
				uni.navigateTo({
					url:'/pages/reportDetail/reportDetail?id='+id,
				})
			}
		},
		/* 触底 */
		onReachBottom: Throttle(function() {
			if(this.status === 'nomore') return ;
			this.status = 'loading';
			this.page_no++;
			this.getCollectList()
		})
	}
</script>

<style lang="scss" scoped>
.myCollection-container {
	background-color: #F7F7F7;
	.collect-ul {
		padding-top: 4rpx;
		.collect-ltem {
			display: flex;
			padding: 30rpx 34rpx;
			background: #fff;
			margin-bottom: 4rpx;
			align-items: center;
			justify-content: space-between;
			.title {
				max-width: 625rpx;
				color: #4A4A4A;
				font-size: 34rpx;
			}
			.desc {
				margin-top: 17rpx;
				width: 625rpx;
				color: #999;
			}
		}
	}
}
</style>