douhuo-h5/pages/index/collect.vue

<template>
	<view class="content">
		<view class="list-tabs">
			<scroll-view class="list-classify" scroll-x="true" show-scrollbar="false" scroll-with-animation>
				<view v-for="(item, index) in articleArr" :key="index" class="list-tabs-item" :class="{show : categoryId == item.category_id}" @click="onTabs(item.category_id)">{{item.title}}</view>
			</scroll-view>
		</view>
		
		<view class="list-item" v-if="listArr.length > 0">
			<view class="list-item-label" v-for="(item, index) in listArr" :key="index" @click="$Router.push({name: 'indexDetails', params: {id: item.favoriteable.article_id}})">
				<view class="list-item-img">
					<!-- 5:6 -->
					<image :src="item.favoriteable.cover" mode="aspectFill"></image>
				</view>
				<view class="list-item-cont">
					<view class="nowrap list-item-name">
						{{item.favoriteable.title}}
					</view>
					<view class="list-item-see">
						<image class="list-item-icon" src="@/static/imgs/indexSee.png"></image>{{item.favoriteable.clicks}} 游览
					</view>
					<view class="list-item-tips" v-for="(items, itemsIndex) in item.favoriteable.categories" :key="itemsIndex">
						{{items.title}}
					</view>
				</view>
			</view>
		</view>
		<view class="pack-center pages-hint" v-else>
		    <image src="https://douhuo-storage.oss-cn-beijing.aliyuncs.com/images/2023/06/06/7ad417d0c215db601b8e1bead05c3a5e.png"></image>
		    <view>暂无数据</view>
		</view>
	</view>
</template>

<script>
	import { myCollect } from '@/apis/interfaces/index'
	export default {
		data() {
			return {
				articleArr   : '',   // 分类
				categoryId   : 1,   // 分类id
				listArr      : '',   // 列表
				page         : {},     // 分页信息
				lodingStats  : false,  // 加载状态
			}
		},
		onShow() {
			// 获取我的收藏
			this.collectInfo();
		},
		methods: {
			// 获取我的收藏
			collectInfo(page) {
			    myCollect({
					category_id: this.categoryId,
					page       : page || 1
				}).then(res => {
					let list = this.listArr,
					    newData = []
					    if(page == 1 || page == undefined) list = []
					    newData = list.concat(res.favorites.data)
					this.articleArr  = res.categories
					this.listArr     = newData
					this.page        = res.favorites.page
					this.lodingStats = false
					uni.stopPullDownRefresh()
			    }).catch(err => {
					uni.showToast({
						title: err.message,
						icon: "none"
					})
				})
			},
			
			// 文章分类筛选
			onTabs(e) {
				this.categoryId = e
				// 获取我的收藏
				this.collectInfo();
			},
			
			// 页面相关事件处理函数--监听用户下拉动作
			onPullDownRefresh() {
			    // 获取我的收藏
			    this.collectInfo()
			},
			        
			// 上拉加载
			onReachBottom(){
			    this.lodingStats = true
			    let pageNumber = this.page.current
			    if(this.page.has_more){
			        pageNumber++
			        // 获取我的收藏
			        this.collectInfo(pageNumber)
			    }
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		background-color: #f6f6f6;
		overflow-y: scroll;
		height: 100vh;
		// height: calc(100vh - 44px);
	}
	
	.list-classify {
		background-color: #fff;
		white-space: nowrap;
		padding: 20rpx $padding;
		box-sizing: border-box;
		position: fixed;
		top: 44px;
		left: 0;
		z-index: 9;
		width: 100%;
		.list-tabs-item {
			display: inline-block;
			font-size: $title-size-m;
			color: #a5a5a5;
			margin-right: 40rpx;
			line-height: 54rpx;
			position: relative;
			background-color: #f6f6f6;
			color: #000;
			padding: 0 20rpx;
			border-radius: $radius * 3;
			&.show {
				background-color: $mian-color;
				color: #fff;
			}
			&:last-child {
				margin-right: 0;
			}
		}
		::-webkit-scrollbar{
		  width: 0;
		  height: 0;
		  color: transparent;
		}
	}
	
	// 列表
	.list-item {
		margin-top: 110rpx;
		.list-item-label {
			padding: $padding;
			box-sizing: border-box;
			margin-bottom: $margin;
			position: relative;
			background-color: #ffffff;
			.list-item-img {
				width: 200rpx;
				height: 150rpx;
				border:1px solid #d2d2d2;
				border-radius: $radius - 10;
				overflow: hidden;
				box-sizing: border-box;
				image {
					width: 100%;
					vertical-align:middle; 
				}
			}
			.list-item-cont {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				padding: $padding $padding $padding 250rpx;
				box-sizing: border-box;
				box-sizing: border-box;
				.list-item-name {
					color: $text-color;
					line-height: 44rpx;
					font-size: $title-size-m;
				}
				.list-item-see {
					font-size: $title-size-sm - 4;
					margin-top: 30rpx;
					display: flex;
					line-height: 30rpx;
					.list-item-icon {
						width: 30rpx;
						height: 30rpx;
						margin-right: 10rpx;
					}
				}
				.list-item-tips {
					font-size: $title-size-sm - 4;
					display: inline-block;
					color: #a1a1a1;
					padding-left: 40rpx;
				}
			}
		}
	}
</style>