ec.uniapp-master/pages/user/my/collect.vue

<template>
	<view>
		<lf-nav :spreadOut="true" :showIcon="true" bgColor="#fff" title="收藏"></lf-nav>
		<view v-if="tab_list.length">
			<u-tabs :list="tab_list" active-color="#15716E" inactive-color='#777777' :is-scroll="true" :current="title_current" @change="titletabChange"></u-tabs>
		</view>
		<view v-if="title_current==0">
			<view class="lf-p-30 lf-flex" v-for="(item,index) of tab_list[title_current].list" :key="index">
				<image class="collect-img" src="https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png" mode="aspectFill"></image>
				<view class="lf-flex-column lf-m-l-20" style="width: 480rpx;min-height: 160rpx;justify-content: space-between;">
					<view class="lf-font-36 lf-color-black lf-line-1">luckin coffee 瑞幸瑞幸咖啡瑞幸咖啡瑞幸咖啡瑞幸咖啡咖啡</view>
					<view class="lf-font-24 lf-color-777">餐饮·美食｜18件在售</view>
					<view class="lf-font-24 lf-color-777">
						<text class="lf-iconfont icon-dizhi lf-font-20 lf-color-primary"></text>
						<text class="lf-m-l-10">L2</text>
					</view>
				</view>
				<view class="lf-iconfont icon-shoucang lf-font-38" style="color: #FF9D9D;"></view>
			</view>
			<view class="loading-more">
				<text :class="{'loading-more-text': tab_list[title_current].loadingClass}" v-if="tab_list[title_current].list.length">{{ tab_list[title_current].loadingText }}</text>
				<lf-nocontent v-else></lf-nocontent>
			</view>
		</view>
		<view class="lf-p-b-30 lf-m-t-30" v-else>
			<lf-waterfall :list="tab_list[title_current].list" :ifsale="false" ref="uWaterfall"></lf-waterfall>
			<view class="loading-more">
				<text :class="{'loading-more-text': tab_list[title_current].loadingClass}" v-if="tab_list[title_current].list.length">{{ tab_list[title_current].loadingText }}</text>
				<lf-nocontent v-else></lf-nocontent>
			</view>
		</view>
		<u-back-top :scrollTop="pageScrollTop"></u-back-top>
	</view>
</template>

<script>
	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
	export default {
		data() {
			let _public = {
				page: 1,
				isPage: true,
				loadingClass: true,
				loadingText: '正在加载中'
			}
			return {
				tab_list: [
					{
						name:'品牌',
						type: 'jc_brand',
						..._public
					},
					{
						name:'商品',
						type: 'jc_goods',
						..._public
					}
				],
				title_current:0,
				list: [
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					},
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					},
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					},
					{
						id: 10,
						original_price: "4111.00",
						picture: "https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png",
						pictures: ["https://hainan.lanzulive.com/storage/images/v2-deb89623e0ee2a2dad34bcded6dfd1ed_1440w.png"],
						price: "2412.00",
						product_id: 1008,
						sale: 0,
						title: "三亚悦榕庄(Banyan Tree Sanya Resort and Spa)"
					}
				],
				show_count: 0,
				windowHeight: 0,
				scrollH: 0,
				nav_height: 0,
				isRefresher: true
			}
		},
		computed: {
			autoHeight(){
				return `calc(${this.scrollH}px - ${this.nav_height}px - 86rpx)`;
			}
		},
		components: {
			lfWaterfall
		},
		onShow(){
			let info = uni.getSystemInfoSync();
			this.scrollH = info.screenHeight;
			this.getData();
		},
		methods: {
			titletabChange(index){
				this.title_current = index;
				this.getData();
			},
			getData(options = {}) {
				let tab_item = this.tab_list[this.title_current];
				this.$http
				    .get({
				        api: 'api/collect',
						data: {
							type: tab_item.type
						},
						header: {
						   Authorization: this.$cookieStorage.get('user_token')
						},
				    })
				    .then(res => {
						console.log(res.data)
				        if (res.data.code == 200) {
				            let isPage = res.data.data.next_page_url == null?false:true;
				            tab_item.isPage = isPage;
				            if(!isPage) {
				            	tab_item.loadingClass = false;
				            	tab_item.loadingText = '没有更多数据啦~';
				            }
				            if(options.type == 'pageRefresh') {
				            	uni.stopPullDownRefresh();
				            }else if(options.type == 'scrollRefresh') {
								console.log('进入了')
				            	this.isRefresher = false;
				            }
				            if(tab_item.page == 1) {
				            	tab_item.list = res.data.data.data;
				            }else {
				            	tab_item.list.push(...res.data.data.data);
				            }
							console.log('当前列表数据',tab_item.list)
				        } else {
				            wx.showModal({
				                content: '请下拉页面刷新重试',
				                showCancel: false
				            });
				        }
				        wx.hideLoading();
				    })
				    .catch(() => {
				        wx.hideLoading();
				    });
			},
			// 滑块下标值变化
			swiperChange(event){
				this.title_current = event.detail.current;
				if(event.detail.source == '') return; // 如果是被动出发，没有事件类型则不做处理
				this.getData();
			},
			// 页面触底，加载下一页
			onScrolltolower(){
				let tab_item = this.tab_list[this.title_current];
				if(tab_item.isPage){
					tab_item.page = tab_item.page + 1;
					this.getData();
				}
			},
			// scroll-view 下拉刷新
			onRefresherrefresh(){
				this.$u.throttle(() => {
					this.clearTabItem({type: 'scrollRefresh'});
				}, 200);
			},
			clearTabItem(options){
				let tab_item = this.tab_list[this.title_current];
				tab_item.page = 1;
				tab_item.isPage = true;
				tab_item.isRefresher = true;
				tab_item.loadingClass = true;
				tab_item.loadingText = '正在加载中';
				tab_item.list = [];
				this.getData(options);
				// this.$refs.uWaterfallFather[this.title_current].clear();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.collect-img {
		width: 150rpx;
		height: 150rpx;
		border-radius: 5rpx;
	}
	/deep/.u-scroll-box {
		display: flex;
		justify-content: center;
		align-items: center;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
	}
	/deep/.u-scroll-box .u-tab-bar {
		background-color: #15716E!important;
		width: 80rpx!important;
		position: absolute;
		left: 0;
		bottom: -12rpx;
	}
	/deep/ .u-tab-item {
		font-size: 28rpx!important;
	}
	
	
	// loading加载
	.loading-more {
		align-items: center;
		justify-content: center;
		padding-top: 10px;
		padding-bottom: 10px;
		text-align: center;
		font-size: 28rpx;
		color: #999;
	}
	.loading-more-text::before {
		content: '';
		width: 20px;
		height: 20px;
		display: inline-block;
		vertical-align: middle;
		-webkit-animation: weuiLoading 1s steps(12, end) infinite;
		animation: weuiLoading 1s steps(12, end) infinite;
		background-repeat: no-repeat;
		background-image: url("data:image/svg+xml;charset=utf8, %3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E9E9E9' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23989697' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%239B999A' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23A3A1A2' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23ABA9AA' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23B2B2B2' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23BAB8B9' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23C2C0C1' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23CBCBCB' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23D2D2D2' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23DADADA' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='%23E2E2E2' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
		background-size: 100%;
	}
	@keyframes weuiLoading {
		0% {
			transform: rotate3d(0, 0, 1, 0deg);
		}
		100% {
			transform: rotate3d(0, 0, 1, 360deg);
		}
	}
	
	
	.list-warter {
		border-radius: 20rpx;
		margin: 10px 5px;
		margin-top: 0px;
		background-color: #ffffff;
		// padding: 8px;
		position: relative;
		overflow: hidden;
		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
	}
	
	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}
	
	.list-image {
		width: 100%;
		border-radius: 4px;
	}
	
	.list-title {
		font-size: 28rpx;
		font-weight: bold;
		color: $u-main-color;
	}
	
	.list-label{
		position: absolute;
		bottom: 0;
		right: 0;
		background-color: rgba(0,0,0,0.5);
		width: 140rpx;
		height: 48rpx;
		border-radius: 20rpx 0rpx 0rpx 0rpx;
		font-size: 22rpx;
		color: #FFFFFF;
		line-height: 48rpx;
		text-align: center;
	}
	
	.list-tag {
		display: flex;
		margin-top: 5px;
	}
	
	.list-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}
	
	.list-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}
	
	.list-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
		display: flex;
		align-items: center;
	}
</style>