From 3d3238027f3b31dd2d4091210e9e64f99106fb71 Mon Sep 17 00:00:00 2001
From: Enzo <1284707383@qq.com>
Date: Mon, 11 Oct 2021 10:39:40 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lf-waterfall-index/lf-waterfall.vue       | 227 ++++++++++++++++++
 pages/discover/discover.vue                   |  20 +-
 pages/index/index/index.vue                   |   2 +-
 3 files changed, 236 insertions(+), 13 deletions(-)
 create mode 100644 components/lf-waterfall-index/lf-waterfall.vue

diff --git a/components/lf-waterfall-index/lf-waterfall.vue b/components/lf-waterfall-index/lf-waterfall.vue
new file mode 100644
index 0000000..5456268
--- /dev/null
+++ b/components/lf-waterfall-index/lf-waterfall.vue
@@ -0,0 +1,227 @@
+<template>
+	<view>
+		<u-waterfall v-model="dataList" ref="uWaterfall" v-for="itemFather of listlength" :key="itemFather" v-if="itemFather == tabindex">
+			<template v-slot:left="{leftList}">
+				<view class="list-warter" v-for="(item, index) in leftList" :key="index">
+					<view v-if="!item.is_ad"  @click="onClick(item.id)">
+						<u-lazy-load threshold="600" border-radius="8px 8px 0 0" :height="!ifsale?333:0" :img-mode="ifsale?'aspectFill':''" :image="item.picture" :index="index">
+							<view class="list-label" v-if="ifsale">已售{{item.sale}}</view>
+						</u-lazy-load>
+						<view class="lf-p-20">
+							<view class="list-title">
+								{{item.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>
+					<view v-else @click="goAd(item.type,item.url)">
+						<u-lazy-load threshold="600" border-radius="8px 8px 0 0" :image="item.picture" :index="index"></u-lazy-load>
+						<view class="lf-p-20">
+							<view class="list-title">
+								{{item.title}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</template>
+			<template v-slot:right="{rightList}">
+				<view class="list-warter" v-for="(item, index) in rightList" :key="index">
+					<view v-if="!item.is_ad"  @click="onClick(item.id)">
+						<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :height="!ifsale?333:0" :img-mode="ifsale?'aspectFill':''" :image="item.picture" :index="index">
+							<view class="list-label" v-if="ifsale">已售{{item.sale}}</view>
+						</u-lazy-load>
+						<view class="lf-p-20">
+							<view class="list-title">
+								{{item.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>
+					<view v-else @click="goAd(item.type,item.url)">
+						<u-lazy-load threshold="-450" border-radius="8px 8px 0 0" :image="item.picture" :index="index"></u-lazy-load>
+						<view class="lf-p-20">
+							<view class="list-title">
+								{{item.title}}
+							</view>
+						</view>
+					</view>
+				</view>
+			</template>
+		</u-waterfall>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default: []
+			},
+			tabindex: {
+				type: Number,
+				default: 0
+			},
+			listlength: {
+				type: Number,
+				default: 1
+			},
+			ifsale: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data(){
+			return {
+				// dataList: []
+			}
+		},
+		computed: {
+			dataList: {
+				get() {
+					console.log('组件当前数据====',this.list)
+					console.log(this.ifsale)
+					return this.list; 
+				},
+				set(newValue) {  console.log('newvalue',newValue) }
+			},
+		},
+		// watch: {
+		// 	list(newValue,oldValue) {
+		// 		console.log('值变了',newValue)
+		// 		console.log('旧值',this.$refs)
+		// 		// this.$forceUpdate();
+				
+				
+		// 		this.dataList = newValue
+				
+		// 		console.log('当前值',this.dataList)
+		// 		return newValue
+		// 	}
+		// },
+		onShow(){
+			
+		},
+		deactivated() {
+			
+		},
+		onLoad() {
+			
+		},
+		destroyed() {
+			
+		},
+		methods: {
+			onClick(id){
+				this.$url('/pages/shop/goodsdetail?id='+id);
+				this.$emit('click');
+			},
+			goAd(type,url){
+				if(url) {
+					if(type == 0) {
+						this.$url(url);
+					}else {
+						this.$url('/pages/index/urlWeb?url='+url);
+					}
+				}
+			},
+			clear() {
+				console.log('组件名',this.$refs)
+				if(this.$isRight(this.$refs)){
+					this.$refs.uWaterfall[0].clear();
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped="scoped">
+	// ====
+	.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>
diff --git a/pages/discover/discover.vue b/pages/discover/discover.vue
index d09286c..e4ba6f4 100644
--- a/pages/discover/discover.vue
+++ b/pages/discover/discover.vue
@@ -59,17 +59,10 @@
 			</swiper-item>
 		</swiper>
 		<view class="fixed-right">
-			<view class="fixed-btn" hover-class="lf-opacity" @click="$url('/pages/discover/publish')">
-				<text class="lf-iconfont icon-fabu lf-font-50"></text>
-			</view>
-		</view>
-		<view class="fixed-right2" v-if="showTotop">
-			<view class="fixed-btn" hover-class="lf-opacity" @click="goTop()">
+			<view class="fixed-btn lf-m-b-20" hover-class="lf-opacity" v-if="showTotop" @click="goTop()">
 				<text class="lf-iconfont icon-zhiding lf-font-50"></text>
 			</view>
-		</view>
-		<!-- 悬浮购物车入口 -->
-		<view class="fixed-right1">
+			<!-- 悬浮购物车入口 -->
 			<view class="fixed-cart" hover-class="lf-opacity" @click="$url('/pages/store/cart/cart')">
 				<text class="lf-iconfont icon-gouwulan icon-text"></text>
 				<text class="tips">购物车</text>
@@ -78,8 +71,11 @@
 					<view class="angle-mark" v-else>99+</view>
 				</block>
 			</view>
+			<view class="fixed-btn" hover-class="lf-opacity" @click="$url('/pages/discover/publish')">
+				<text class="lf-iconfont icon-fabu lf-font-50"></text>
+			</view>
 		</view>
-		<!-- <view style="height: 30rpx;"></view> -->
+		<view style="height: 30rpx;"></view>
 		<lf-tabbar></lf-tabbar>
 	</view>
 </template>
@@ -439,7 +435,7 @@
 </style>
 
 <style lang="scss" scoped>
-	.fixed-right1{
+	.fixed-right{
 		position: fixed;
 		right: 32rpx;
 		bottom: 450rpx;
@@ -458,7 +454,7 @@
 			flex-direction: column;
 			color: #333333;
 			position: relative;
-			margin-top: 30rpx;
+			margin-bottom: 20rpx;
 			.icon-text{
 				font-size: 50rpx;
 				line-height: 1;
diff --git a/pages/index/index/index.vue b/pages/index/index/index.vue
index adb8554..4117356 100644
--- a/pages/index/index/index.vue
+++ b/pages/index/index/index.vue
@@ -106,7 +106,7 @@
 	import lfIndexFind from '@/components/lf-indexFind/lf-indexFind.vue';
 	import lfIndexShopMatrix from '@/components/lf-indexShopMatrix/lf-indexShopMatrix.vue';
 	import lfShopGoodsCard from '@/components/lf-shopGoodsCard/lf-shopGoodsCard.vue';
-	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
+	import lfWaterfall from '@/components/lf-waterfall-index/lf-waterfall.vue';
 	import lfMultiColumnAd from '@/components/lf-multiColumnAd/lf-multiColumnAd.vue';
 	import lfSeckill from '@/components/lf-seckill/lf-seckill.vue';
 	var app = getApp();