asd/asd-pc/homePackage/pages/FavEssay.vue

<template>
	<view class="content">
		<view class="list" v-if="articleList.length > 0">
			<view class="wrapper" v-for="item,index in articleList" @click="toDetail(item.articleId)" :key="index">
				<view class="img">
					<image :src="item.asdArticleList[0].litpic"></image>
				</view>
				<view class="right">
					<view class="title">{{item.asdArticleList[0].title}}</view>
					<view class="info">{{item.asdArticleList[0].description ? item.asdArticleList[0].description : ''}}
					</view>
				</view>
				<view class="fav" @click.stop="userDelFavorite(item.asdArticleList[0].id)">
					<u-icon slot="icon" size="20" name="star-fill" color="#FFA521"></u-icon>
					<text>已收藏</text>
				</view>
			</view>

		</view><u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-else></u-empty>
		<u-toast ref="uToast"></u-toast>


	</view>

</template>

<script>
	import oneArticle from '@/components/one-article/one-article.vue'
	export default {
		components: {
			oneArticle
		},
		data() {
			return {
				classifyArr: [{
					name: '全部',
					id: '',
				}],
				pageNum: 1,
				pageSize: 10,
				parentId: '',
				articleList: [],
				loading: '',
			}
		},
		onLoad() {
			this.userFavoriteList()
		},
		onReachBottom() {
			console.log('触底');
			if (this.loading == 'more') {
				this.pageNum++;
				this.userFavoriteList();
			}
		},
		methods: {
			// 获取收藏列表
			async userFavoriteList() {
				const res = await this.$myRequest({
					url: '/system/favorite/userFavoriteList',
					data: {
						pageNum: this.pageNum,
						pageSize: this.pageSize
					}
				})

				if (res.data.code == 200) {
					for (let i = 0; i < res.data.rows.length; i++) {
						res.data.rows[i].asdArticleList[0].litpic = this.baseUrl + res.data.rows[i].asdArticleList[0]
							.litpic
					}
					if (res.data.rows.length >= this.pageSize) {
						this.loading = 'more';
					} else {
						this.loading = 'noMore';
					}
					this.articleList = this.articleList.concat(res.data.rows);
				}
				console.log(res.data.rows);

			},
			toDetail(id) {
				uni.navigateTo({
					url: '/homePackage/pages/newsDetail?id=' + id
				})
			},
			// 取消收藏
			async userDelFavorite(id) {
				uni.showModal({
					title: '提示',
					content: '确实要取消收藏吗？',
					success: (res) => {
						if (res.confirm) {
							const res = this.$myRequest({
								method: 'DELETE',
								url: '/system/favorite/userDelFavorite/' + id
							})
							console.log(res);
							this.$refs.uToast.show({
								type: 'success',
								message: '删除成功',
								complete: () => {
									this.articleList = [];
									this.userFavoriteList()
								}
							})

						}
					}
				})
			}
		}

	}
</script>

<style lang="less" scoped>
	.content {
		.list {
			margin: 50rpx 22rpx;
		}
	}

	.wrapper {
		line-height: 20px;
		border-radius: 15px;
		background-color: rgba(255, 255, 255, 1);
		text-align: center;
		padding: 20rpx;
		display: flex;
		// justify-content: space-between;
		border-radius: 15px;
		background-color: rgba(255, 255, 255, 1);
		box-shadow: 0px 4rpx 16rpx 2rpx #E4E4E4;
		margin-bottom: 16rpx;
		position: relative;

		.img {
			width: 112px;
			height: 90px;
			border-radius: 6px;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.right {
			width: 60%;
			margin-left: 20rpx;

			.title {
				color: rgba(16, 16, 16, 1);
				font-size: 28rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				text-align: left;
			}

			.info {
				margin-top: 30rpx;
				color: rgba(140, 139, 139, 1);
				font-size: 24rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				text-align: left;
			}
		}

		.fav {
			position: absolute;
			right: 20rpx;
			bottom: 20rpx;
			display: flex;
			align-items: center;

			text {
				font-size: 28rpx;
				color: #101010;
			}
		}
	}
</style>