From 77d36022a0283fc7bd8d2aecc17fb2602cbeb6c7 Mon Sep 17 00:00:00 2001
From: yangtao <yang1793766139@163.com>
Date: Tue, 26 Mar 2024 17:17:16 +0800
Subject: [PATCH] 1

---
 .../WaterfallsFlow/WaterfallsFlow.vue         | 198 +++++++++++
 .../WaterfallsFlowItem/WaterfallsFlowItem.vue | 317 ++++++++++++++++++
 pages/shop/index.vue                          |   4 +-
 pages/shop/search/index.vue                   |  63 ++--
 4 files changed, 553 insertions(+), 29 deletions(-)
 create mode 100644 pages/shop/components/WaterfallsFlow/WaterfallsFlow.vue
 create mode 100644 pages/shop/components/WaterfallsFlowItem/WaterfallsFlowItem.vue

diff --git a/pages/shop/components/WaterfallsFlow/WaterfallsFlow.vue b/pages/shop/components/WaterfallsFlow/WaterfallsFlow.vue
new file mode 100644
index 0000000..cfbdcbd
--- /dev/null
+++ b/pages/shop/components/WaterfallsFlow/WaterfallsFlow.vue
@@ -0,0 +1,198 @@
+<template>
+    <view :class="'wf-page wf-page'+type">
+        <!--    left    -->
+        <view>
+            <view id="left" v-if="leftList.length">
+                <view v-for="(item,index) in leftList" :key="index"
+                      class="wf-item" @tap="itemTap(item)">
+                    <WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
+                </view>
+            </view>
+        </view>
+        <!--    right    -->
+        <view>
+            <view id="right" v-if="rightList.length">
+                <view v-for="(item,index) in rightList" :key="index"
+                      class="wf-item" @tap="itemTap(item)">					  
+                    <WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+ 
+import WaterfallsFlowItem from '@/pages/shop/components/WaterfallsFlowItem/WaterfallsFlowItem.vue'
+
+export default {
+    components: {
+        WaterfallsFlowItem
+    },
+    props: {
+        // 瀑布流列表
+        wfList: {
+            type: Array,
+            require: true
+        },
+        updateNum: {
+            type: Number,
+            default: 10
+        },
+		type: {
+			type: Number,
+			default: 0			
+		},
+		isStore: {
+			type: [String, Number],
+			default: '1'
+		},
+    },
+    data() {
+        return {
+            allList: [],       // 全部列表
+            leftList: [],      // 左边列表
+            rightList: [],     // 右边列表
+            mark: 0,           // 列表标记
+            boxHeight: [],     // 下标0和1分别为左列和右列高度
+        };
+    },
+    watch: {
+        // 监听列表数据变化
+        wfList:  {
+			handler(nVal,oVal){
+				// 如果数据为空或新的列表数据少于旧的列表数据（通常为下拉刷新或切换排序或使用筛选器），初始化变量
+				if (!this.wfList.length ||
+				    (this.wfList.length === this.updateNum && this.wfList.length <= this.allList.length)) {
+				    this.allList = [];
+				    this.leftList = [];
+				    this.rightList = [];
+				    this.boxHeight = [];
+				    this.mark = 0;
+				}
+				
+				// 如果列表有值，调用waterfall方法
+				if (this.wfList.length) {
+				    this.allList = this.wfList;
+					this.leftList = [];
+					this.rightList = [];
+					this.boxHeight = [];
+					this.allList.forEach((v, i) => {
+						if(this.allList.length < 3 || (this.allList.length <= 7  && this.allList.length - i > 1) || (this.allList.length > 7 && this.allList.length - i > 2)) {
+							if(i % 2){
+								this.rightList.push(v);
+							}else{
+								this.leftList.push(v);
+							}
+						}
+					});
+					if(this.allList.length < 3){
+						this.mark = this.allList.length+1;
+					}else if(this.allList.length <= 7){
+						this.mark = this.allList.length - 1;
+					}else{
+						this.mark = this.allList.length - 2;
+					}
+					if(this.mark < this.allList.length){
+						this.waterFall()
+					}
+				}
+			},
+			immediate: true,
+			deep:true
+        },
+		mounted(){
+		},
+
+        // 监听标记，当标记发生变化，则执行下一个item排序
+        mark() {
+            const len = this.allList.length;
+            if (this.mark < len && this.mark !== 0 && this.boxHeight.length) {
+                this.waterFall();
+            }
+        }
+    },
+    methods: {
+        // 瀑布流排序
+        waterFall() {
+            const i = this.mark;
+            if (i == 0) {
+                // 初始化，从左边开始插入
+                this.leftList.push(this.allList[i]);
+                // 更新左边列表高度
+                this.getViewHeight(0);
+            } else if (i == 1) {
+                // 第二个item插入，默认为右边插入
+                this.rightList.push(this.allList[i]);
+                // 更新右边列表高度
+                this.getViewHeight(1);
+            } else {
+                // 根据左右列表高度判断下一个item应该插入哪边
+                if(!this.boxHeight.length){
+                	this.rightList.length < this.leftList.length 
+                	? this.rightList.push(this.allList[i])
+                	: this.leftList.push(this.allList[i]);
+                } else {
+                	const leftOrRight = this.boxHeight[0] > this.boxHeight[1] ? 1 : 0;
+                	if (leftOrRight) {
+                	    this.rightList.push(this.allList[i])
+                	} else {
+                	    this.leftList.push(this.allList[i])
+                	}
+                }
+				// 更新插入列表高度
+				this.getViewHeight();
+            }
+			console.log('this.leftList: ',this.leftList);
+			console.log('this.rightList: ',this.rightList);
+        },
+        // 获取列表高度
+        getViewHeight() {
+            // 使用nextTick，确保页面更新结束后，再请求高度
+            this.$nextTick(() => {
+            	setTimeout(()=>{
+            		uni.createSelectorQuery().in(this).select('#right').boundingClientRect(res => {
+            				res ? this.boxHeight[1] = res.height : '';
+            			uni.createSelectorQuery().in(this).select('#left').boundingClientRect(res => {
+            				res ? this.boxHeight[0] = res.height : '';	
+            				this.mark = this.mark + 1;				
+            			}).exec();
+            		}).exec();
+            	},100)               
+            })
+        },
+        // item点击
+        itemTap(item) {
+            this.$emit('itemTap', item)
+        },
+		// item点击
+		goShop(item) {
+		    this.$emit('goShop', item)
+		}
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+$page-padding: 10px;
+$grid-gap: 10px;
+
+.wf-page {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: $grid-gap;
+}
+.wf-item {
+    width: calc((100vw - 2 * #{$page-padding} - #{$grid-gap}) / 2);
+    padding-bottom: $grid-gap;
+}
+.wf-page1 .wf-item{
+	margin-top: 20rpx;
+	background-color: #fff;
+	border-radius: 20rpx;
+	padding-bottom: 0;
+}
+.wf-item-page{
+	padding-bottom: 20rpx;
+}
+</style>
diff --git a/pages/shop/components/WaterfallsFlowItem/WaterfallsFlowItem.vue b/pages/shop/components/WaterfallsFlowItem/WaterfallsFlowItem.vue
new file mode 100644
index 0000000..f4c85cd
--- /dev/null
+++ b/pages/shop/components/WaterfallsFlowItem/WaterfallsFlowItem.vue
@@ -0,0 +1,317 @@
+<template>
+	
+	
+	<view  class="wf-page1" :style="viewColor">
+		
+		<view class='pictrue'>
+			<easy-loadimage mode="widthFix" ></easy-loadimage>
+			<!-- <view v-if="item.stock == 0" class="sell_out">已售罄</view> -->
+			<view v-if="item.mer_avatar" :style="{ backgroundImage: `url(${item.mer_avatar})` }" class="border-picture"></view>
+		</view>
+		<view class='text'>
+			<view class='name line2'>{{item.m}}</view>
+			<!-- <view class='money'>
+				￥<text class='num'>{{item.price}}</text>	
+			</view> -->
+			
+			<view class="item_tags acea-row">
+				
+				<text class="font-bg-red b-color">{{item.type_name}}</text>
+				<!-- <text v-if="item.product_type != 0" :class="'font_bg-red type'+item.product_type">{{item.product_type == 1 ? "秒杀" : item.product_type == 2 ? "预售" : item.product_type == 3 ? "助力" : item.product_type == 4 ? "拼团" : ""}}</text>
+				<text class="tags_item ticket" v-if="item.issetCoupon">领券</text>
+				<text class="tags_item delivery" v-if="item.delivery_free == 1">包邮</text> -->
+			</view>
+			
+			<view class="score"><text style="font-size: 12px;" class="iconfont icon-shitixing"></text>{{item.service_score}}评分 </view>
+			
+			<view class="company"  @click.stop="goShop(item.type_id)">
+				<text class="line1">{{item.mer_name}}</text>
+				<view class="flex" v-if="isStore != '1'">
+					进店
+					<text class="iconfont icon-xiangyou"></text>
+				</view>
+			</view>
+		</view>
+	</view>	
+</template>
+
+<script>
+ 
+import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue'
+import {mapGetters} from "vuex";
+import { HTTP_REQUEST_URL } from '@/config/app';
+export default {
+	components:{easyLoadimage},
+	computed: mapGetters(['viewColor']),
+    props: {
+			item: {
+				type: Object,
+				require: true
+			},
+		type: {
+			type: Number,
+			default: 0
+		},
+		isStore: {
+			type: [String, Number],
+			default: '1'
+		},
+		isLogin: {
+			type: Boolean,
+			require: false
+		}
+  },
+	data(){
+		return {
+			domain: HTTP_REQUEST_URL,
+		}
+	},
+	methods: {
+		goShop(id) {
+			this.$emit('goShop', id);
+		},
+		authOpen(){
+			this.$emit('authOpen');
+		},
+		followToggle(item){
+			this.$emit('followToggle', item);
+		}
+	}	
+}
+
+</script>
+<style lang="scss" scoped>
+.wf-item-page {
+	background: #fff;
+	overflow: hidden;
+	border-radius: 16rpx;
+	padding-bottom: 20rpx;
+}
+.wf-page0 .coupon{
+	background:rgba(255,248,247,1);
+	border:1px solid rgba(233,51,35,1);
+	border-radius:4rpx;
+	font-size:20rpx;
+	margin-left: 18rpx;
+	padding: 1rpx 4rpx;
+}
+.wf-page0 .pictrue{
+	width: 100%!important;
+	height: 345rpx;
+	position: relative;
+	/deep/image,/deep/.easy-loadimage,uni-image{
+		height: 345rpx;
+		border-radius: 16rpx 16rpx 0 0;
+	}
+	.border-picture {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: 16rpx 16rpx 0 0;
+		background: center/cover no-repeat;
+	}
+}
+ .loadfail-img{
+		width: 100%;
+    height: 360rpx;
+}
+.svip{
+	margin: 5rpx 0 15rpx;
+}
+.vip-money {
+	color: #282828;
+	font-size: 22rpx;
+	margin-left: 6rpx;
+	font-weight: bold;
+}
+.vipImg {
+	width: 65rpx;
+	height: 28rpx;
+	margin-left: 4rpx;
+	image {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
+}
+.wf-page0 .name {
+	color: #282828;
+	margin: 20rpx 0 10rpx 0;
+	font-size: 13px;
+	overflow:hidden; 
+	text-overflow: ellipsis; 
+	display: -webkit-box; 
+	-webkit-line-clamp: 2; 
+	-webkit-box-orient: vertical;
+	text-align: left;
+}
+.wf-page0 .text{
+	padding: 0 20rpx;
+}	
+.wf-page0 .money {
+	font-size: 20rpx;
+	font-weight: bold;
+	color: var(--view-priceColor);
+}
+.b-color {
+	background-color: var(--view-theme);
+	border: 1px solid var(--view-theme);
+}
+.wf-page0 .money .num {
+	font-size: 34rpx;
+}
+.wf-page1 .wf-item{
+	.name{
+		font-size: 13px;
+		overflow:hidden; 
+		text-overflow: ellipsis; 
+		display: -webkit-box; 
+		-webkit-line-clamp: 2; 
+		-webkit-box-orient: vertical;
+		text-align: left;
+	}
+}
+.wf-page1 .pictrue {
+	position: relative;
+	height: 345rpx;
+	width: 100%!important;
+	/deep/image,/deep/.easy-loadimage,uni-image{
+		height: 345rpx;
+		border-radius: 20rpx 20rpx 0 0;
+	}
+	.border-picture {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		border-radius: 20rpx 20rpx 0 0;
+		background: center/cover no-repeat;
+	}
+	
+}
+.sell_out {
+	display: flex;
+	width: 150rpx;
+	height: 150rpx;
+	align-items: center;
+	justify-content: center;
+	border-radius: 100%;
+	background: rgba(0,0,0,.6);
+	color: #fff;
+	font-size: 30rpx;
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin: -75rpx 0 0 -75rpx;
+	&::before{
+		content: "";
+		display: block;
+		width: 140rpx;
+		height: 140rpx;
+		border-radius: 100%;
+		border: 1px dashed #fff;
+		position: absolute;
+		top: 5rpx;
+		left: 5rpx;
+	}
+}
+.loading-img{
+	height: 345rpx;
+  max-height: 360rpx;
+}
+.wf-page1 .text {
+	padding: 20rpx 17rpx 26rpx 17rpx;
+	font-size: 30rpx;
+	color: #222;
+}
+.wf-page1 .text .money {
+	display: flex;
+	align-items: center;
+	font-size: 26rpx;
+	font-weight: bold;
+	margin-top: 8rpx;
+	color: var(--view-priceColor);
+}
+.wf-page1 .text .money .num {
+	font-size: 34rpx;
+}
+.item_tags{
+	margin-top: 8rpx;
+	display: flex;
+}
+.item_tags .tags_item {
+	display: flex;
+	font-size: 20rpx;
+	text-align: center;
+	border-radius: 5rpx;
+	padding: 0 4rpx;
+	height: 28rpx;
+	align-items: center;
+	justify-content: center;
+	margin-right: 8rpx;
+}
+.item_tags .tags_item.ticket{
+	color: var(--view-theme);
+	border: 1px solid var(--view-theme);
+}
+.item_tags .tags_item.delivery{
+	color: #FF9000;
+	border: 1px solid #FF9000;
+}
+.wf-page1 .text .money .ticket-big {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	max-width: 163rpx;
+	padding: 0 6rpx;
+	height: 28rpx;
+	margin-left: 10rpx;
+	background-image: url(~static/images/yh.png);
+	background-size: 100% 100%;
+	font-size: 20rpx;
+	font-weight: normal;
+}
+.wf-page1 .text .score {
+	margin-top: 10rpx;
+	color: #737373;
+	font-size: 20rpx;
+}
+.wf-page1 .text .company {
+	display: flex;
+	align-items: center;
+	color: #737373;
+	font-size: 20rpx;
+	margin-top: 10rpx;
+	.line1{
+		max-width: 200rpx;
+	}
+	.flex {
+		display: flex;
+		align-items: center;
+		margin-left: 10rpx;
+		color: #282828;
+		.iconfont {
+			font-size: 16rpx;
+			margin-top: 4rpx;
+		}
+	}
+}
+.foot-bar {
+	width: 100%;
+	height: 52rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	background-image: linear-gradient(-90deg, var(--view-bntColor21) 0%, var(--view-bntColor22) 100%);
+	border-radius: 0px 0px 16rpx 16rpx;
+	color: #fff;
+	font-size: 24rpx;
+	.icon-fenxiang {
+		font-size: 24rpx;
+		margin-right: 10rpx;
+	}
+}
+</style>
diff --git a/pages/shop/index.vue b/pages/shop/index.vue
index 433827a..b1684d9 100644
--- a/pages/shop/index.vue
+++ b/pages/shop/index.vue
@@ -38,7 +38,7 @@
 						<view class="item-content">
 							<view class="right-center-left">
 								<view class="center-left-score">
-									<text class="iconfont icon-kongxinxing"></text>
+									<text class="iconfont icon-shitixing"></text>
 									<!-- <text class="iconfont icon-kongxinxing">★</text> -->
 									<text>{{item.service_score}}分</text>
 								</view>
@@ -184,7 +184,7 @@
 			},
 			goShopSearch(item){
 				uni.navigateTo({
-					url:'./search/index'
+					url:'./search/index?id='+item.merchant_category_id
 				})
 			},
 			getNav(){
diff --git a/pages/shop/search/index.vue b/pages/shop/search/index.vue
index ce143ff..53a2699 100644
--- a/pages/shop/search/index.vue
+++ b/pages/shop/search/index.vue
@@ -102,7 +102,9 @@
 </template>
 
 <script>
-	 
+	import {shopNearby} from '@/api/shop.js'
+	
+	
 	import {
 		getProductslist,
 		getProductHot,
@@ -112,7 +114,7 @@
 	} from '@/api/store.js';
 	import recommend from '@/components/recommend';
 	import rightSlider from '@/components/rightSlider.vue'
-	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlow.vue'
+	import WaterfallsFlow from '@/pages/shop/components/WaterfallsFlow/WaterfallsFlow.vue'
 	import {initiateAssistApi} from '@/api/activity.js';
 	import { configMap } from "@/utils";
 	import { mapGetters } from "vuex";
@@ -138,6 +140,9 @@
 		},
 		data() {
 			return {
+				id:'',				
+				keyword:'',
+				
 				domain: HTTP_REQUEST_URL,
 				productList: [],
 				list: [],
@@ -208,11 +213,8 @@
 			uni.$emit('scroll');
 		},
 		onLoad: function(options) {
-			this.$set(this.where, 'cate_pid', options.id || '');
-			this.title = options.title || '';
-			this.$set(this.where, 'keyword', options.searchValue || '');
-			this.get_product_list(true);
-			this.get_host_product();
+			this.id=options.id;
+			this.search();
 		},
 		onReady(){
 
@@ -221,11 +223,30 @@
 
 		},
 		methods: {
+			search(){
+				let data1={
+					mini:1,
+					type_id:4,//  固定不变
+					category_id:this.id,  //拿 lst 里面的 id
+					keyword:this.where.keyword,
+				}
+				shopNearby(data1).then((res)=>{
+					console.log('res: ',res);
+					if(res.data){
+						this.productList=res.data.list
+						console.log('this.productList: ',this.productList);
+					}
+				})
+			},
+			
+			
+			
+			
 			// 去店铺
 			goShop(id){
 				if(this.hide_mer_status != 1){
 					uni.navigateTo({
-						url:`/pages/store/home/index?id=${id}`
+						url:`/pages/shop_detail/index?id=${id}`
 					})
 				}
 			},
@@ -310,24 +331,11 @@
 			},
 			// 去详情页
 			godDetail(item) {
-				goShopDetail(item, this.uid).then(res => {
-					if (this.isLogin) {
-						initiateAssistApi(item.activity_id).then(res => {
-							let id = res.data.product_assist_set_id;
-							uni.hideLoading();
-							uni.navigateTo({
-								url: '/pages/activity/assist_detail/index?id=' + id
-							});
-						}).catch((err) => {
-							uni.showToast({
-								title: err,
-								icon: 'none'
-							})
-						});
-					} else {
-						toLogin()
-					}
-				})
+				uni.hideLoading();
+				console.log(item);
+				uni.navigateTo({
+					url: '/pages/shop_details/index?id=' + item.mer_id
+				});
 			},
 			// 组件确定
 			confirm(data,index) {
@@ -387,7 +395,8 @@
 				that.$set(that.where, 'keyword', e.detail.value);
 				that.loadend = false;
 				that.$set(that.where, 'page', 1)
-				this.get_product_list(true);
+				this.search();
+				// this.get_product_list(true);
 			},
 			/**
 			 * 获取我的推荐