From 2608eed56583d363cdb57781bbbe787d7a762743 Mon Sep 17 00:00:00 2001
From: Enzo <1284707383@qq.com>
Date: Mon, 11 Oct 2021 11:43:02 +0800
Subject: [PATCH] =?UTF-8?q?=E7=80=91=E5=B8=83=E6=B5=81=E6=9B=BF=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../lf-waterfall-shopdetails/lf-waterfall.vue |   6 +-
 components/shopList/shopList.vue              | 181 ++++++++++++++++++
 pages/shop/searchList.vue                     |  11 +-
 3 files changed, 192 insertions(+), 6 deletions(-)
 create mode 100644 components/shopList/shopList.vue

diff --git a/components/lf-waterfall-shopdetails/lf-waterfall.vue b/components/lf-waterfall-shopdetails/lf-waterfall.vue
index 5456268..25b9495 100644
--- a/components/lf-waterfall-shopdetails/lf-waterfall.vue
+++ b/components/lf-waterfall-shopdetails/lf-waterfall.vue
@@ -89,9 +89,13 @@
 				get() {
 					console.log('组件当前数据====',this.list)
 					console.log(this.ifsale)
+					this.$forceUpdate();
 					return this.list; 
 				},
-				set(newValue) {  console.log('newvalue',newValue) }
+				set(newValue) {  
+					this.$forceUpdate();
+					console.log('newvalue',newValue) 
+				}
 			},
 		},
 		// watch: {
diff --git a/components/shopList/shopList.vue b/components/shopList/shopList.vue
new file mode 100644
index 0000000..99a17ff
--- /dev/null
+++ b/components/shopList/shopList.vue
@@ -0,0 +1,181 @@
+<template>
+	<view>
+		<view class="recommend-box" >
+			<view class="goods-rom" v-for="(item,index) of list" :key="index" v-if="list.length" @click="$url('/pages/shop/goodsdetail?id='+item.id)">
+				<image :src="item.picture" mode="aspectFill" style="width: 332rpx;height: 332rpx;border-radius: 20rpx 20rpx 0 0;"></image>
+				<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>
+			<lf-nocontent src="/static/images/empty.png" v-else></lf-nocontent>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			list: {
+				type: Array,
+				default: []
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+	.recommend-box{
+		display: flex;
+		justify-content: space-between;
+		padding: 30rpx 32rpx;
+		flex-wrap: wrap;
+	}
+	.goods-rom {
+		border-radius: 20rpx;
+		width: 333rpx;
+		height: max-content;
+		background-color: white;
+		box-shadow: 0px 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
+		&:nth-child(2n) {
+			margin-right: 0;
+		}
+		&:nth-child(n + 3) {
+			margin-top: 20rpx;
+		}
+	}
+	.introduct {
+		padding: 30rpx 32rpx;
+	}
+	.com{
+		width: 100%;
+		height: 100%;
+		box-sizing: border-box;
+		padding: 0rpx 28rpx;
+	}
+	.shop-head {
+		width: 100%;
+		height: 400rpx;
+		position: relative;
+	}
+	.shop-flex {
+		display: flex;
+		padding: 30rpx;
+	}
+	// 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>
diff --git a/pages/shop/searchList.vue b/pages/shop/searchList.vue
index 401e84c..d5febe5 100644
--- a/pages/shop/searchList.vue
+++ b/pages/shop/searchList.vue
@@ -16,8 +16,8 @@
 			<swiper-item v-for="(tab_item, tab_index) in tab_list" :key="tab_index">
 				<scroll-view :scroll-y="true" :style="{height: autoHeight}" @scrolltolower="scrolltolower">
 					<view class="scroll-content" v-if="tab_index == 0">
-						<lf-waterfall :ifsale="false" :list="goods_list" ref="searchWaterfall"></lf-waterfall>
-						<lf-nocontent src="/static/images/empty.png" v-if="goods_list.length <= 0"></lf-nocontent>
+						<shop-list :list="goods_list" ref="searchWaterfall"></shop-list>
+						<!-- <lf-nocontent src="/static/images/empty.png" v-if="goods_list.length <= 0"></lf-nocontent> -->
 					</view>
 					<view class="scroll-content" v-else>
 						<view class="shop-box" 
@@ -38,10 +38,10 @@
 </template>
 
 <script>
-	import lfWaterfall from '@/components/lf-waterfall-shopdetails/lf-waterfall.vue';
+	import shopList from '@/components/shopList/shopList.vue';
 	export default {
 		components: {
-			lfWaterfall
+			shopList
 		},
 		data() {
 			return {
@@ -85,7 +85,7 @@
 				// 重置页面请求值
 				this.page = 1;
 				this.isPage = true;
-				this.$refs.searchWaterfall[0].clear();
+				// this.$refs.searchWaterfall[0].clear();
 				// 执行上一个页面的保存搜索历史
 				let pages = getCurrentPages();
 				let beforePage = pages[pages.length - 2]; // 上个页面
@@ -141,6 +141,7 @@
 						}else{
 							this.goods_list.push(...list);
 						}
+						console.log(this.goods_list)
 						this.tab_list[0].name = `商品(${this.goods_list.length})`;
 					}else{
 						this.$msg(res.data.message || '服务器错误，请稍后再试');