首页/我的/推荐瀑布流优化

components/lf-waterfall-my/lf-waterfall.vue

@@ -0,0 +1,159 @@
+<template>
+	<view>
+		<u-waterfall v-model="dataList" ref="uWaterfall">
+			<template v-slot:left="{leftList}">
+				<view class="list-warter" v-for="(item, index) in leftList" :key="index" @click="onClick(item.id)">
+					<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index">
+						<view class="list-label">已售{{item.sale}}</view>
+					</u-lazy-load>
+					<view class="lf-p-20">
+						<view class="list-title">
+							{{item.product.title}}
+						</view>
+						<view class="list-price">
+							<!-- <text>{{item.price}}元</text> -->
+							<lf-price :price="item.price"></lf-price>
+							<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
+						</view>
+					</view>
+				</view>
+			</template>
+			<template v-slot:right="{rightList}">
+				<view class="list-warter" v-for="(item, index) in rightList" :key="index" @click="onClick(item.id)">
+					<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index">
+						<view class="list-label">已售{{item.sale}}</view>
+					</u-lazy-load>
+					<view class="lf-p-20">
+						<view class="list-title">
+							{{item.product.title}}
+						</view>
+						<view class="list-price">
+							<!-- <text>{{item.price}}元</text> -->
+							<lf-price :price="item.price"></lf-price>
+							<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
+						</view>
+					</view>
+				</view>
+			</template>
+		</u-waterfall>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default: []
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		computed: {
+			dataList() {
+				return this.list
+			}
+		},
+		onShow(){
+			
+		},
+		destroyed() {
+			
+		},
+		methods: {
+			onClick(id){
+				console.log("aaaa");
+				this.$url('/pages/goodsDetail/index?goods_id='+id);
+				this.$emit('click');
+			},
+			clear() {
+				this.$refs.uWaterfall.clear();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	// ====
+	.list-warter {
+		border-radius: 8px;
+		margin: 10px 5px;
+		margin-top: 0px;
+		background-color: #ffffff;
+		// padding: 8px;
+		position: relative;
+		overflow: hidden;
+	}
+	
+	.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>

components/lf-waterfall-recom/lf-waterfall.vue

@@ -0,0 +1,167 @@
+<template>
+	<view>
+		<u-waterfall v-model="dataList" ref="uWaterfall">
+			<template v-slot:left="{leftList}">
+				<view class="list-warter" v-for="(item, index) in leftList" :key="index" @click="onClick(item.id)">
+					<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index">
+						<view class="list-label">已售{{item.sale}}</view>
+					</u-lazy-load>
+					<view class="lf-p-20">
+						<view class="list-title">
+							{{item.product.title}}
+						</view>
+						<view class="list-price">
+							<!-- <text>{{item.price}}元</text> -->
+							<lf-price :price="item.price"></lf-price>
+							<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
+						</view>
+					</view>
+				</view>
+			</template>
+			<template v-slot:right="{rightList}">
+				<view class="list-warter" v-for="(item, index) in rightList" :key="index" @click="onClick(item.id)">
+					<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index">
+						<view class="list-label">已售{{item.sale}}</view>
+					</u-lazy-load>
+					<view class="lf-p-20">
+						<view class="list-title">
+							{{item.product.title}}
+						</view>
+						<view class="list-price">
+							<!-- <text>{{item.price}}元</text> -->
+							<lf-price :price="item.price"></lf-price>
+							<text class="lf-m-l-20 lf-font-24 lf-color-666 lf-line-through">{{item.original_price}}</text>
+						</view>
+					</view>
+				</view>
+			</template>
+		</u-waterfall>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default: []
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		computed: {
+			dataList() {
+				console.log('数据1111',this.list);
+				
+				let arr = [];
+				if(this.list && this.list.length){
+					arr = this.list;
+				}
+				
+				
+				return arr;
+			}
+		},
+		onShow(){
+			
+		},
+		destroyed() {
+			
+		},
+		methods: {
+			onClick(id){
+				console.log("aaaa");
+				this.$url('/pages/goodsDetail/index?goods_id='+id);
+				this.$emit('click');
+			},
+			clear() {
+				this.$refs.uWaterfall.clear();
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	// ====
+	.list-warter {
+		border-radius: 8px;
+		margin: 10px 5px;
+		margin-top: 0px;
+		background-color: #ffffff;
+		// padding: 8px;
+		position: relative;
+		overflow: hidden;
+	}
+	
+	.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>

components/lf-waterfall/lf-waterfall.vue

@@ -1,6 +1,6 @@
 <template>
 	<view>
-		<u-waterfall v-model="list">
+		<u-waterfall v-model="dataList" ref="uWaterfall">
 			<template v-slot:left="{leftList}">
 				<view class="list-warter" v-for="(item, index) in leftList" :key="index" @click="onClick(item.id)">
 					<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.product.picture" :index="index">
@@ -52,14 +52,24 @@
 				
 			}
 		},
-		onLoad(){
+		computed: {
+			dataList() {
+				return this.list
+			}
+		},
+		onShow(){
+			
+		},
+		destroyed() {
 			
 		},
 		methods: {
 			onClick(id){
-				console.log("aaaa");
 				this.$url('/pages/goodsDetail/index?goods_id='+id);
 				this.$emit('click');
+			},
+			clear() {
+				this.$refs.uWaterfall.clear();
 			}
 		}
 	}

pages/index/index.vue

@@ -90,7 +90,7 @@
 		<lf-title-line></lf-title-line>
 		<!-- 商品列表-瀑布流 -->
 		<view style="padding: 0 20rpx;">
-			<lf-waterfall :list="recomm_list"></lf-waterfall>
+			<lf-waterfall :list="recomm_list" ref="uWaterfall"></lf-waterfall>
 			<!-- <u-loadmore v-if="recomm_list.length" status="已加载全部数据~" @loadmore="addRandomData"></u-loadmore> -->
 			<view class="loading-more">
 				<text :class="{'loading-more-text': loading_class}" v-if="recomm_list.length">{{ loading_text }}</text>
@@ -128,26 +128,14 @@
 			}
 		},
 		onShow() {
-			// this.addRandomData();
 			this.getIndexData()
 			this.getFavourite()
 		},
 		methods: {
-			// 瀑布流随机模拟数据
-			addRandomData() {
-				for(let i = 0; i < 10; i++) {
-					let index = this.$u.random(0, this.list.length - 1);
-					// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
-					let item = JSON.parse(JSON.stringify(this.list[index]))
-					item.id = this.$u.guid();
-					this.recomm_list.push(item);
-				}
-			},
 			//获取猜你喜欢
 			getFavourite() {
 				this.$http(this.API.API_FAVOURITE).then(res => {
 					this.recomm_list = res.data.data
-					console.log(res)
 				}).catch(err => {
 					
 				})
@@ -190,6 +178,7 @@
 		},
 		onPullDownRefresh(){
 			this.getIndexData()
+			this.getFavourite()
 		},
 		onShareAppMessage(){
 			let shareInfo = {

pages/recommList/index.vue

@@ -6,12 +6,15 @@
 		<lf-nocontent v-else></lf-nocontent>
 		<swiper :style="{height: 'calc('+ windowHeight +'px - 60rpx)', width: '750rpx'}" :current="current" @change="swiperChange">
 			<swiper-item v-for="(tabItem, tabIndex) in tab_list" :key="tabIndex">
-				<scroll-view class="com" :scroll-y="true" :refresher-enabled="true" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
+				<scroll-view class="com" :scroll-y="true" :refresher-enabled="false" :refresher-triggered="tabItem.isRefresher" @scrolltolower="onScrolltolower" @refresherrefresh="onRefresherrefresh">
 					<view class="lf-m-t-20"></view>
-					<lf-waterfall :list="tabItem.list"></lf-waterfall>
+					<lf-waterfall :list="tabItem.list" ref="uWaterfall"></lf-waterfall>
 					<view class="loading-more lf-m-b-10">
 						<text :class="{'loading-more-text': tabItem.loadingClass}" v-if="tabItem.list.length">{{tabItem.loadingText}}</text>
 						<lf-nocontent v-else></lf-nocontent>
+					<!-- 	<view>
+							{{tabItem.list.length}}
+						</view> -->
 					</view>
 				</scroll-view>
 			</swiper-item>
@@ -20,15 +23,19 @@
 </template>
 
 <script>
+	import lfWaterfall from '@/components/lf-waterfall-recom/lf-waterfall.vue';
 	export default {
 		data(){
 			return {
 				tab_list: [],
 				current: 0,
-				windowHeight: 0,
+				windowHeight: 0
 			}
 		},
-		onLoad(){
+		components: {
+			lfWaterfall
+		},
+		onShow(){
 			this.windowHeight = getApp().globalData.windowHeight;
 			this.getCategory()
 		},
@@ -84,6 +91,10 @@
 				})
 			},
 			tabChange(index){
+				this.$refs.uWaterfall[index].clear();
+				this.tab_list = []
+				this.getCategory({type: 'pageRefresh'});
+				console.log(this.$refs)
 				this.current = index;
 				if(this.tab_list[index].list.length <= 0){
 					this.getData(); // tab下没有数据，请求第一页

pages/user/user.vue

@@ -94,7 +94,7 @@
 				</view>
 			</view> -->
 			<lf-title-line title="为你推荐"></lf-title-line>
-			<lf-waterfall :list="list"></lf-waterfall>
+			<lf-waterfall :list="list" ref="uWaterfall"></lf-waterfall>
 			<view class="loading-more">
 				<text :class="{'loading-more-text': loading_class}" v-if="list.length">{{ loading_text }}</text>
 				<lf-nocontent v-else></lf-nocontent>
@@ -106,11 +106,13 @@
 </template>
 
 <script>
+	import lfWaterfall from '@/components/lf-waterfall-my/lf-waterfall.vue';
 	import lfTitleLine from '@/components/lf-title-line/lf-title-line.vue';
 	let time = null;
 	export default {
 		components: {
-			lfTitleLine
+			lfTitleLine,
+			lfWaterfall
 		},
 		data() {
 			return {