roamfuding-xcx/page_user/muyemian/shoucang.vue

<template>
	<view class="page">
		<u-navbar title="我的收藏" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>

		<!-- 分类导航栏 -->
		<view class="category-nav">
			<view 
				v-for="(item, index) in categories" 
				:key="index"
				class="category-item"
				:class="{ active: activeCategory === index + 1 }"
				@click="switchCategory(index)"
			>
				{{ item.name }}
			</view>
		</view>

		<!-- 收藏内容列表 -->
		<scroll-view @scrolltolower="handqixing" scroll-y refresher-enabled @refresherrefresh="onRefresh" :refresher-triggered="isRefreshing" refresher-default-style="black" class="content-list">
			<view 
				v-for="(item, index) in contentList" 
				:key="index"
				class="content-item" @click="btnxq(item)">
				<view class="item-image">
					<image :src="item.bstPicture" mode="aspectFill" class="image"></image>
					<!-- <view class="location-tag">
						<u-icon name="map" color="#FFFFFF" size="28"></u-icon>
						<text class="location-text">{{ item.location }}</text>
					</view> -->
				</view>
				<view class="item-content">
					<view class="item-title">{{ item.bstName }}</view>
					<view class="item-bottom">
						<view class="item-tag" v-if="item.bstType == 1">攻略</view>
						<view class="item-tag" v-if="item.bstType == 3">景点</view>
						<view class="item-tag" v-if="item.bstType == 2">动态</view>
						<view class="item-tag" v-if="item.bstType == 4">商家</view>
						<view class="item-date">收藏于{{ item.createTime }}</view>
					</view>
				</view>
			</view>
			<view class="" style="width: 100%;text-align: center;margin-top: 30rpx;color: #ccc;">
				快去收藏更多内容吧
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				activeCategory: 1,
				categories: [
					{ name: '全部'},
					{ name: '攻略'},
					{ name: '动态'},
					{ name: '景点'},
					// { name: '商家'}
				],
				contentList: [],
				userId:'',
				pageNum:1,
				isRefreshing:false,
				bstType:'',
				total:0
			}
		},
		onLoad(option) {
            this.userId = option.userId
			this.getlist()
		},
		methods: {
			// 请求收藏列表
			getlist(){
				this.$u.get(`/app/favorite/list?pageNum=${this.pageNum}&pageSize=20&userId=${this.userId}&bstType=${this.bstType}`).then(res =>{
					if(res.code == 200){
						this.total = res.total
						if(this.pageNum == 1){
							this.pageNum++
							this.contentList = res.rows
						}else{
							this.pageNum++
							this.contentList = this.contentList.concat(res.rows)
						}
					}
				})
			},
			// 点击跳转详情
			btnxq(item){
				if(item.bstType == 1){
					uni.navigateTo({
						url:'/page_fenbao/gonglue/gongluexq?id=' + item.bstId
					})
				}else if(item.bstType == 2){
					uni.navigateTo({
						url:'/page_fenbao/guangchang/dongtaixq?id=' + item.bstId
					})
				}else if(item.bstType == 3){
					uni.navigateTo({
						url:'/page_fenbao/remenxq?id=' + item.bstId
					})
				}else if(item.bstType == 4){
					
				}
			},
			// 上拉加载更多
			handqixing() {
				console.log('加载更多')
				if(this.contentList.length < this.total){
					this.getlist()
				}
			},
			// 下拉刷新
			onRefresh() {
				this.isRefreshing = true
				setTimeout(() => {
					this.pageNum = 1
					this.getlist()
					this.isRefreshing = false
				}, 1000)
			},
			// 点击tab进行切换
			switchCategory(index) {
				this.activeCategory = Number(index) + 1
				this.pageNum = 1
				if(index == 0){
					this.bstType = ''
					this.getlist()
				}else{
					this.bstType = index
					this.getlist()
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}

	.page {
		height: 100vh;
		background: #fff;
		overflow: hidden;
	}

	.category-nav {
		display: flex;
		padding: 20rpx 30rpx;
		background: #fff;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.category-item {
		flex: 1;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		background: #f8f8f8;
		margin: 0 10rpx;
		border-radius: 10rpx;
		transition: all 0.3s ease;

		&.active {
			background: #32CD7A;
			color: #fff;
		}

		&:first-child {
			margin-left: 0;
		}

		&:last-child {
			margin-right: 0;
		}
	}

	.content-list {
		width: 100%;
		height: 83vh;
		overflow: scroll;
		padding-bottom: 80rpx;
	}

	.content-item {
		display: flex;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
        // align-items: center;
		&:last-child {
			border-bottom: none;
		}
	}

	.item-image {
		position: relative;
		width: 142rpx;
		height: 142rpx;
		border-radius:8rpx;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.image {
		width: 142rpx;
		height: 142rpx;
		border-radius: 8rpx;
	}

	.location-tag {
		position: absolute;
		bottom: 10rpx;
		left: 10rpx;
		background: #3D3D3D;
		border-radius: 10rpx;
		padding: 6rpx 12rpx;
		display: flex;
		align-items: center;
	}

	.location-icon {
		font-size: 20rpx;
		margin-right: 6rpx;
	}

	.location-text {
		font-size: 20rpx;
		color: #fff;
	}

	.item-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.item-title {
		font-size: 32rpx;
		color: #333;
		line-height: 1.4;
		margin-bottom: 20rpx;
		font-weight: 500;
	}

	.item-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.item-tag {
		background: #e6f3ff;
		color: #1890ff;
		border: 1rpx solid #91d5ff;
		padding: 8rpx 16rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
	}

	.item-date {
		font-size: 24rpx;
		color: #999;
	}
</style>