3 changed files with 241 additions and 16 deletions
			
			
		- 
					227components/lf-waterfall-index/lf-waterfall.vue
 - 
					20pages/discover/discover.vue
 - 
					10pages/index/index/index.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> | 
				
			|||
						Write
						Preview
					
					
					Loading…
					
					Cancel
						Save
					
		Reference in new issue