3 changed files with 241 additions and 16 deletions
			
			
		- 
					227components/lf-waterfall-index/lf-waterfall.vue
 - 
					18pages/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