首页界面修改，以及完成供应界面修改，解决视频加载问题，以及点进去查看不到视频的bug

components/WaterfallsFlow/WaterfallsFlow.vue

@@ -160,7 +160,7 @@ export default {
         },
         // item点击
         itemTap(item) {
-            this.$emit('itemTap', item)
+            // this.$emit('itemTap', item)
         },
 		// item点击
 		goShop(item) {

components/WaterfallsFlow/WaterfallsFlowo.vue

@@ -0,0 +1,208 @@
+<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-itema" @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-itemb" @tap="itemTap(item)">					  
+                    <WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import WaterfallsFlowItem from '../WaterfallsFlowItem/WaterfallsFlowItemo.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()
+					}
+					console.log(this.rightList,this.leftList)
+				}
+			},
+			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();
+            }
+        },
+        // 获取列表高度
+        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: 5px;
+
+.wf-page {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: $grid-gap;
+}
+.wf-itema {
+   width: 356rpx;
+    padding-bottom: $grid-gap;
+}
+.wf-itemb {
+   width: 356rpx;
+  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>

components/WaterfallsFlow/WaterfallsFlows.vue

@@ -0,0 +1,207 @@
+<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-itema" @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-itemb" @tap="itemTap(item)">					  
+                    <WaterfallsFlowItem :item="item" :isStore="isStore" :type="type" @goShop="goShop"/>
+                </view>
+            </view>
+        </view>
+    </view>
+</template>
+
+<script>
+import WaterfallsFlowItem from '../WaterfallsFlowItem/WaterfallsFlowItems.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();
+            }
+        },
+        // 获取列表高度
+        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: 5px;
+
+.wf-page {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-gap: $grid-gap;
+}
+.wf-itema {
+   width: 356rpx;
+    padding-bottom: $grid-gap;
+}
+.wf-itemb {
+   width: 356rpx;
+  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>

components/WaterfallsFlowItem/WaterfallsFlowItemo.vue

@@ -0,0 +1,191 @@
+<template>
+	<view class="wf-item-page">
+
+		<image :src="item.image[0]" mode="widthFix" class="item-img" />
+	
+		<view class="title">{{item.title}}</view>
+		<view class="tag">
+			<view class="tag-one">
+				自营商品
+			</view>
+			<view class="tag-two">
+
+				<text class="tag-twoa">折</text>
+				<text class="tag-twob">满20包邮</text>
+			</view>
+
+		</view>
+		<view class="relase">
+			<view class="relase-one">
+				3.0
+			</view>
+			<view class="relase-two">
+				3000+评论
+			</view>
+		</view>
+		<view class="price">
+			<span>￥</span>10.<text>00</text>
+		</view>
+		<view class="item-info">
+			<view class="info-title">
+				通滩镇综合供销中心...
+			</view>
+			<view class="info-img">
+				<image src="@/static/images/you.png" mode="aspectFill"></image>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			item: {
+				type: Object,
+				require: true
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wf-item-page {
+		background: #fff;
+		overflow: hidden;
+		border-radius: 5px;
+
+	}
+
+	.item-img {
+		width: 100%;
+	}
+
+	.item-info {}
+
+	.title {
+		font-size: 30rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		margin: 12px 0;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		padding: 0 5px;
+		margin-left: 21rpx;
+	}
+
+	.tag {
+		display: flex;
+		margin-left: 21rpx;
+
+		.tag-one {
+			
+			text-align: center;
+			padding: 2rpx 9rpx;
+			border-radius: 11rpx 11rpx 11rpx 11rpx;
+			border: 1px solid #3274F9;
+			font-size: 19rpx;
+			font-family: PingFang SC-Regular, PingFang SC;
+			font-weight: 400;
+			margin-right: 15rpx;
+		}
+
+		.tag-two {
+
+			.tag-twoa {
+				width: 130rpx;
+				text-align: center;
+				padding-left: 15rpx;
+				padding-right: 7rpx;
+				border-radius: 11rpx 0px 0px 0rpx;
+				border: 1px solid #F84221;
+				font-size: 19rpx;
+				font-family: PingFang SC-Regular, PingFang SC;
+				font-weight: 400;
+			}
+
+			.tag-twob {
+				width: 130rpx;
+				text-align: center;
+				padding: 2rpx 9rpx;
+				border-radius: 0px 11rpx 11rpx 0px;
+				border: 1px solid #F84221;
+				font-size: 19rpx;
+				font-family: PingFang SC-Regular, PingFang SC;
+				font-weight: 400;
+			}
+		}
+	}
+.relase {
+		display: flex;
+
+		margin-left: 21rpx;
+		margin-top: 12rpx;
+
+		.relase-one {
+			font-size: 26rpx;
+			font-family: SF Pro Display-Regular Italic, SF Pro Display;
+			font-weight: normal;
+			color: #FF6D20;
+		}
+
+		.relase-two {
+			font-size: 23rpx;
+			font-family: PingFang SC-Regular, PingFang SC;
+			font-weight: 400;
+			color: #B3B3B3;
+			margin-left: 13rpx;
+		}
+	}
+
+	.price {
+		margin-left: 21rpx;
+		margin-bottom: 10rpx;
+		color: #F84221;
+		font-size: 44rpx;
+
+		span {
+			color: #F84221;
+			font-size: 30rpx;
+		}
+
+		text {
+			color: #F84221;
+			font-size: 37rpx;
+		}
+	}
+
+	.item-info {
+		margin-left: 21rpx;
+		margin-bottom: 25rpx;
+		display: flex;
+		justify-content: space-between;
+		width: 280rpx;
+		height: 39rpx;
+		line-height: 39rpx;
+		background: #F4F7FE;
+		border-radius: 19rpx 19rpx;
+		opacity: 1;
+		font-size: 23rpx;
+		padding-left: 11rpx;
+		font-family: PingFang SC-Regular, PingFang SC;
+		font-weight: 400;
+		color: #737373;
+
+		.info-img {
+			width: 10rpx;
+			height: 21rpx;
+			margin-top: 5rpx;
+			margin-right: 11rpx;
+
+			image {
+				width: 100%;
+				height: 100%;
+			}
+		}
+	}
+</style>

components/WaterfallsFlowItem/WaterfallsFlowItems.vue

@@ -0,0 +1,129 @@
+<template>
+	<view class="wf-item-page" @click="gogogo(item)">
+
+
+
+		<image :src="item.image[0]" mode="widthFix" class="item-img" />
+
+		<view class="goods_item_img" v-if="item.video_link.length>0">
+			<image src="@/static/images/sp.png" mode="aspectFill"></image>
+		</view>
+		<view class="title">{{item.title}}</view>
+		<view class="item-info">
+			<image :src="(item.author && item.author.avatar) || '/static/images/f.png'" mode="aspectFill"
+				class="info-avatar" />
+			<view class="info-nickname">{{ item.author.nickname }}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			item: {
+				type: Object,
+				require: true
+			}
+		},
+
+
+
+		data() {
+			return {}
+		},
+
+
+
+
+
+
+
+		methods: {
+
+			gogogo(item) {
+				if (item.video_link.length > 0) {
+
+					uni.navigateTo({
+					
+						// #ifdef MP || H5
+						url: `/pages/short_video/nvueSwiper/index?id=${item.community_id}` 
+						// #endif
+						// #ifdef APP
+						url: `/pages/short_video/appSwiper/index?id=${item.community_id}` 
+						// #endif
+
+					})
+
+				} else {
+					uni.navigateTo({
+						url: `/pages/plantGrass/plant_detail/index?id=${item.community_id}`
+					})
+				}
+			},
+
+		}
+
+	}
+</script>
+
+<style lang="scss" scoped>
+	.wf-item-page {
+		background: #fff;
+		overflow: hidden;
+		border-radius: 5px;
+
+		position: relative;
+	}
+
+	.item-img {
+		width: 100%;
+	}
+
+	.item-info {
+		display: flex;
+		align-items: center;
+		padding: 5px;
+	}
+
+	.goods_item_img {
+		position: absolute;
+		top: 20rpx;
+		right: 18rpx;
+		width: 52rpx;
+		height: 52rpx;
+		z-index: 1 !important;
+
+
+		image {
+			width: 100%;
+			height: 100%;
+		}
+	}
+
+	.title {
+		font-size: 30rpx;
+		font-family: PingFang SC-Medium, PingFang SC;
+		font-weight: 500;
+		color: #333333;
+		margin: 12px 0;
+		width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		-webkit-box-orient: vertical;
+		padding: 0 5px;
+	}
+
+	.info-avatar {
+		width: 49rpx;
+		height: 49rpx;
+		border-radius: 50%;
+		margin-right: 5px;
+	}
+
+	.info-nickname {
+		font-size: 12px;
+		color: #333;
+	}
+</style>

components/zbpSwiper.vue

@@ -10,11 +10,9 @@
 				<view class="iconfont icon-weizhi"></view>
 				<view class="town_name">{{street}}</view>
 			</view>
-
 			<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
 				<view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
 			</navigator>
-
 		</view>
 		<!-- 搜索栏 -->
 		<navigator url="/pages/columnGoods/goods_search/index" hover-class="none" class="search_content flex_a_c_j_sb">
@@ -237,7 +235,7 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	.zbp-head-wrapper {
 		position: relative;
 		padding-top: 78.95rpx;

pages/columnGoods/goods_list/index.vue

@@ -77,6 +77,7 @@
 				<view v-else class='list'>
 					<WaterfallsFlow :wfList='productList' @itemTap="godDetail" :type="1" @goShop="goShop"/>
 				</view>
+				
 				<view class='noCommodity' v-if="productList.length==0 && where.page > 1">
 					<view class='pictrue' style="margin: 60rpx auto;">
 						<image src='/static/images/noCart.png'></image>

pages/gather/gather.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="gather">
-		<view class="site-box flex_a_c_j_sb">
+	<!-- 	<view class="site-box flex_a_c_j_sb">
 			<view class="place_wrapper flex_a_c" @click="selectLocation">
 				<view class="iconfont icon-weizhi" style="margin-left: 20rpx;"></view>
 				<view class="town_name">{{street}}</view>
@@ -12,7 +12,7 @@
 			<view class="bg-img" v-if="isFshow">
 				<img :src="bgColor" alt="">
 			</view>
-		</view>
+		</view> -->
 
 		<zbpSwiper :isSelectPlace="true" :location_Arr="locationArr" @kkchange='kkchange'></zbpSwiper>
 		<u-empty :show="jurisdiction" marginTop="260" mode="permission" :text="emptyText"

pages/index/index.vue

@@ -1,27 +1,25 @@
 <template>
 	<view class="Circle_friends">
 		<view class="circle_friends_wrapper">
-
+			<view v-if='ishshow'>
-
-			<view class="">
 				<view :class="['site-box ','flex_a_c_j_sb',isFshow?'sitbox':'']">
-					<view :class="['place_wrapper','flex_a_c',isFshow?'sitbox':'']" @click="selectLocation">
+					<view :class="['place_wrapper','flex_a_c',isFshow?'sitbox':'']" @click="selectLocation"
-						<view :class="['iconfont','icon-weizhi',isFshow?'sitbox':'']" style="margin-left: 20rpx;">
+						style="opacity: 0;">
+						<view class="iconfont icon-weizhi" style="margin-left: 20rpx;background-color: transparent;">
 						</view>
 						<view class="town_name">{{street}}</view>
 					</view>
-
+					<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none"
-					<navigator url="/pages/chat/customer_list/index?type=0" hover-class="none">
+						style="opacity: 0;	transition: opacity 1s ease-in;transition-delay: 1.5s;"
-						<view :class="['iconfont','icon-xiaoxi',isFshow?'sitbox':'']" style="color:#fff;"></view>
+						:class="[isFshow?'sitbox':'']">
+						<view class="iconfont icon-xiaoxi" style="color:#fff;"></view>
 					</navigator>
-
 				</view>
-				<view :class="['site-box ','flex_a_c_j_sb',isFshow?'sistbox':'']" v-if="isFshow">
+				<!-- <view class="site-box ','flex_a_c_j_sb'" v-if="ishshow">
 					<view class="bg-img">
 						<img :src="bgColor" alt="">
 					</view>
-				</view>
+				</view> -->
-
 			</view>
 
 
@@ -37,9 +35,9 @@
 
 			</view>
 			<view class="goodslist">
+				<WaterfallsFlow :wfList='cateGoods' />
 
-
+				<!-- 	<view class="goods">
-				<view class="goods">
 					<view v-for="(item,index) in cateGoods" :key="index">
 
 						<view :class="[index%2==0?'goods_item':'goods_items']" @click="gogogo(item)">
@@ -72,7 +70,7 @@
 							</view>
 						</view>
 					</view>
-				</view>
+				</view> -->
 				<!--<view class="goods">
 					  <view v-for="(item,i) in  cateGoods" :key="i" v-if='i%2!=0'>
 						<view class="goods_item" @click="gogogo(item)">
@@ -143,6 +141,7 @@
 	import mTabbar from '@/components/m-tabbar/m-tabbar.vue'
 	import zbpSwiper from '@/components/zbpSwiper'
 	import easyLoadimage from '@/components/easy-loadimage/easy-loadimage.vue';
+	import WaterfallsFlow from '@/components/WaterfallsFlow/WaterfallsFlows.vue'
 	import Cache from '@/utils/cache';
 	import {
 		getSlideAPI
@@ -173,7 +172,8 @@
 		components: {
 			mTabbar,
 			zbpSwiper,
-			easyLoadimage
+			easyLoadimage,
+			WaterfallsFlow
 		},
 		data() {
 			return {
@@ -214,7 +214,9 @@
 				streeta_id: '',
 				street: '',
 				bgColor: '',
+				ishshow: true,
 				isFshow: false,
+				scrollTop: 0,
 			}
 		},
 		watch: {
@@ -222,14 +224,15 @@
 				handler(newVal, oldVal) {
 					this.street = newVal
 					let arr = Cache.get('ADRESS_LOCATION')
-					console.log(arr, '1')
+					// console.log(arr, '1')
 					if (arr.length > 0) {
 						this.street = arr.split(',')[0]
 
 
 					}
 				},
-			}
+			},
+
 		},
 		onPullDownRefresh() {
 			this.getCateList()
@@ -280,14 +283,21 @@
 		},
 		// #ifdef APP-PLUS
 		onPageScroll(e) {
-			// this.scrollTop = e.scrollTop;
+
-			console.log(e.scrollTop)
 			if (e.scrollTop > 0) {
+				this.ishshow = true
 				this.isFshow = true
+
+			} else if (e.scrollTop == 0) {
+				this.ishshow = false
+				this.isFshow = false
 			} else {
+				this.ishshow = false
 				this.isFshow = false
 			}
 			
+			
+
 		},
 		// #endif
 
@@ -301,7 +311,7 @@
 					document.body.scrollTop;
 				// 滚动条滚动的距离
 				let scrollStep = scrollTop - this.oldScrollTop;
-				console.log("header 滚动距离 ", scrollTop);
+				// console.log("header 滚动距离 ", scrollTop);
 				// 更新——滚动前，滚动条距文档顶部的距离
 				this.oldScrollTop = scrollTop;
 
@@ -315,19 +325,19 @@
 				//滚动条到底部的条件
 				if (scrollTop + windowHeight == scrollHeight) {
 					//你想做的事情
-					console.log("header  你已经到底部了");
+					// console.log("header  你已经到底部了");
 				}
 				if (scrollStep < 0) {
 					this.isFshow = false
-					console.log("header 滚动条向上滚动了！");
+					// console.log("header 滚动条向上滚动了！");
 				} else {
 					this.isFshow = true
-					console.log("header  滚动条向下滚动了！");
+					// console.log("header  滚动条向下滚动了！");
 				}
 				// 判断是否到了最顶部
 				if (scrollTop <= 0) {
 					this.isFshow = false
-					console.log("header 到了最顶部")
+					// console.log("header 到了最顶部")
 				}
 			},
 
@@ -633,10 +643,10 @@
 	}
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 	page {
 		background-color: #F4F7FE;
-		;
+
 		// background: linear-gradient(180deg, #FFFFFF 0%, #F6F6F6 100%);
 	}
 
@@ -676,7 +686,7 @@
 
 
 	.sistbox {
-		opacity: 0;
+		transition: fadenum 3s;
 	}
 
 	@keyframes fadenum {
@@ -693,36 +703,40 @@
 		}
 	}
 
-	.bg-img {
+	// .bg-img {
-		position: absolute;
+	// 	position: absolute;
-		width: 100%;
+	// 	width: 100%;
-		height: 100%;
+	// 	height: 100%;
 
-		top: 0;
+	// 	top: 0;
-		/* #ifdef MP || APP-PLUS */
+	// 	/* #ifdef MP || APP-PLUS */
-		z-index: -100;
+	// 	z-index: -100;
-		/* #endif */
+	// 	/* #endif */
-		/* #ifdef H5 */
+	// 	/* #ifdef H5 */
-		z-index: -100;
+	// 	z-index: -100;
-		/* #endif */
+	// 	/* #endif */
-		z-index: -100;
+	// 	z-index: -100;
-		filter: blur(0);
+	// 	filter: blur(0);
-		overflow: hidden;
+	// 	overflow: hidden;
-		transition: fadenum 3s linear;
 
-		img {
+
-			width: 100%;
+	// 	img {
-			height: 100%;
+	// 		width: 100%;
-			filter: blur(30rpx);
+	// 		height: 100%;
-			transform: scale(1.5);
+	// 		filter: blur(30rpx);
-		}
+	// 		transform: scale(1.5);
-	}
+	// 	}
+	// }
 
 	.sitbox {
 		opacity: 1 !important;
-		background: #ac3525 !important;
+		// background: #F84221 !important;
+		background: linear-gradient(to bottom, #F84221, #F84221);
+		background-color: #F84221;
+
 	}
 
+
 	.site-box {
 		width: 100%;
 		/* #ifdef MP || APP-PLUS */
@@ -745,9 +759,10 @@
 		// background-color: #e5e5e5;
 		// opacity: 0;
 		/* 初始时设置元素不透明 */
-		transition: opacity 0.2s ease-in;
+		backdrop-filter: blur(5px) opacity(0);
+		transition: opacity 0.2s ease-in-out;
 		transition-delay: 1.5s;
-		transition: background 0.2s ease-in;
+		transition: background 0.2s ease-in-out;
 		padding-right: 20rpx;
 
 		// 位置
@@ -756,7 +771,7 @@
 			margin-right: 24.56rpx;
 			font-size: 30rpx;
 			opacity: 0;
-			transition: opacity 1s ease-in;
+			transition: opacity 1s ease-in-out;
 			transition-delay: 1.5s;
 
 			.town_name {
@@ -765,9 +780,8 @@
 		}
 
 		.iconfont {
+
 			font-size: 30rpx;
-		
-		
 			font-size: 35.09rpx;
 		}
 	}

pages/short_video/appSwiper/index.nvue

@@ -47,8 +47,8 @@
 			 （1）Mac：按住 option 键，然后点击方法名，即可跳转到方法
 			 （2）windows：按住 Alt 键，然后鼠标左击，即可跳转到方法
 			 -->
-      <list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false" ref="listBox"
+			<list @loadmore="getData" @scroll="scrolls" :loadmoreoffset="wHeight*1" :show-scrollbar="false"
-        :pagingEnabled="true" :scrollable="true">
+				ref="listBox" :pagingEnabled="true" :scrollable="true">
 
 				<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
 					:display="refreshing ? 'show' : 'hide'">
@@ -94,15 +94,17 @@
 									（6）在 timeupdate 方法里加入，if(index == this.k){把里面的加一个总的判断}
 								3.其他的下面有详解
 								 -->
-                <video :ref="'item'+i" :id="item.community_id" :loop="true" :autoplay="i == k" :src="item.video_link"
+								<video :ref="'item'+i" :id="item.community_id" :loop="true" :autoplay="i == k"
-                  :muted="item.isplay" :enable-progress-gesture="false" :page-gesture="false" :controls="false"
+									:src="item.video_link" :muted="item.isplay" :enable-progress-gesture="false"
-                  :show-loading="true" :show-fullscreen-btn="false" :show-center-play-btn="false" :style="boxStyle"
+									:page-gesture="false" :controls="false" :show-loading="true"
+									:show-fullscreen-btn="false" :show-center-play-btn="false" :style="boxStyle"
 									:object-fit="object_fit" @timeupdate="timeupdate($event,i)"></video>
 							</view>
 							<!-- 直接用 view 就行了，一样是可以覆盖原生组件的 -->
 							<!-- 这个是暂停时出现的图标 -->
 							<view class="videoHover" @click="tapVideoHover(item.state,$event)" :style="boxStyle">
-                <image v-if="item.state=='pause'" class="playState" src="../static/img/index/play.png"></image>
+								<image v-if="item.state=='pause'" class="playState" src="../static/img/index/play.png">
+								</image>
 							</view>
 							<!--审核状态-->
 							<view v-if="item.status==-1 || item.status==0 || item.status==-2" class="video-status">
@@ -137,19 +139,23 @@
 									</view>
 								</view>
 								<view v-if="item.relevance.length > 0 && k==i" class="product">
-                  <scroll-view class="scroll-view" scroll-x="true" style="white-space: nowrap; display: flex;"
+									<scroll-view class="scroll-view" scroll-x="true"
-                    scroll-with-animation show-scrollbar="true">
+										style="white-space: nowrap; display: flex;" scroll-with-animation
+										show-scrollbar="true">
 										<view class="product-item" v-for="(goods,idx) in item.relevance" :key="idx">
-                      <view v-if="goods.spu" class="item-count acea-row" @click="goDetail(goods.spu)">
+											<view v-if="goods.spu" class="item-count acea-row"
+												@click="goDetail(goods.spu)">
 												<view class="picture">
 													<image class="image" :src="goods.spu.image"></image>
 												</view>
 												<view class="product-text">
 													<text class="name line1"
 														v-if="goods.spu && goods.spu.store_name.length>=12">{{goods.spu.store_name.slice(0,12)}}...</text>
-                          <text class="name line1" v-else>{{goods.spu && goods.spu.store_name}}</text>
+													<text class="name line1"
+														v-else>{{goods.spu && goods.spu.store_name}}</text>
 													<view class="product-price">
-                            <view class="price"><text class="sm">¥</text><text class="money">{{goods.spu.price}}</text>
+														<view class="price"><text class="sm">¥</text><text
+																class="money">{{goods.spu.price}}</text>
 														</view>
 														<text class="buy-btn">购买</text>
 													</view>
@@ -170,30 +176,36 @@
 								<!-- 1.头像 -->
 								<navigator v-if="userInfo.uid != item.author.uid" hover-class="none"
 									:url="'/pages/plantGrass/plant_user/index?id='+item.uid" class="pictrue">
-                  <image class="userAvatar" :src="item.author.avatar || '/static/images/f.png'" mode="aspectFill">
+									<image class="userAvatar" :src="item.author.avatar || '/static/images/f.png'"
+										mode="aspectFill">
 									</image>
-                  <view v-if="!item.is_fans || userInfo.uid == 0" class="guanzhu" @click.stop="followAuthor(item)"><text
+									<view v-if="!item.is_fans || userInfo.uid == 0" class="guanzhu"
+										@click.stop="followAuthor(item)"><text
 											class="iconfont icon-shangpinshuliang-jia">+</text></view>
 									<view v-else class="yiguanzhu"><text class="iconfont"></text></view>
 								</navigator>
 								<!-- 2.点赞 -->
-                <view @click="cLike(item);" style="margin-top: 5px;" :class="{'likeNumActive':item.relevance_id}">
+								<view @click="cLike(item);" style="margin-top: 5px;"
-                  <image v-if="item.relevance_id" src="../static/img/index/xin.png" style="width: 32px; height: 32px;">
+									:class="{'likeNumActive':item.relevance_id}">
+									<image v-if="item.relevance_id" src="../static/img/index/xin.png"
+										style="width: 32px; height: 32px;">
 									</image>
 									<image v-if="!item.relevance_id" src="../static/img/index/xin-2.png"
 										style="width: 32px; height: 32px;"></image>
 									<text class="info-text">{{item.count_start > 0 ? item.count_start : '点赞'}}</text>
 								</view>
 								<!-- 3.评论 -->
-                <view v-if="community_reply_status == 1 && item.status == 1" class="comment" @click="toComment(item,i)"
+								<view v-if="community_reply_status == 1 && item.status == 1" class="comment"
-                  style="margin-top: 18px;">
+									@click="toComment(item,i)" style="margin-top: 18px;">
-                  <image src="../static/img/index/evaluate.png" style="width: 54rpx; height: 50rpx;"></image>
+									<image src="../static/img/index/evaluate.png" style="width: 54rpx; height: 50rpx;">
+									</image>
 									<text class="info-text">{{item.count_reply>0 ? item.count_reply : '评论'}}</text>
 								</view>
 								<!-- 4.分享 -->
 								<view v-if="item.status == 1" @click="appShare('WXSceneSession',item.community_id)"
 									style="margin-top: 17px;">
-                  <image src="../static/img/index/share-fill.png" style="width: 40px; height: 40px;"></image>
+									<image src="../static/img/index/share-fill.png" style="width: 40px; height: 40px;">
+									</image>
 									<text class="info-text">分享</text>
 								</view>
 								<!-- 5.自己的视频 -->
@@ -216,12 +228,15 @@
 							<view v-if="showManage" class="manage">
 								<view class="manage-gou"></view>
 								<navigator hover-class="none"
-                  :url="'/pages/plantGrass/plant_release/index?id='+item.community_id+'&type=2'" class="items">
+									:url="'/pages/plantGrass/plant_release/index?id='+item.community_id+'&type=2'"
-                  <image src="../static/img/index/video-edit.png" style="width: 16px; height: 16px;"></image>
+									class="items">
+									<image src="../static/img/index/video-edit.png" style="width: 16px; height: 16px;">
+									</image>
 									<text class="text">编辑</text>
 								</navigator>
 								<view class="items" @click.stop="deleteTopic(item)">
-                  <image src="../static/img/index/video-delete.png" style="width: 16px; height: 16px;"></image>
+									<image src="../static/img/index/video-delete.png"
+										style="width: 16px; height: 16px;"></image>
 									<text class="text">删除</text>
 								</view>
 							</view>
@@ -232,7 +247,8 @@
 									-->
 							<!-- 3.阿里云视频截帧地址：https://help.aliyun.com/document_detail/64555.html -->
 							<image v-if="item.isShowimage == true"
-                :src="item.src+'?x-oss-process=video/snapshot,t_'+ currenttimes +'000,f_jpg'" mode="aspectFill"
+								:src="item.src+'?x-oss-process=video/snapshot,t_'+ currenttimes +'000,f_jpg'"
+								mode="aspectFill"
 								:style="'width: 120upx; height: 160upx; border-radius: 10upx; position: absolute; bottom: '+ (ProgressBarBottom + 160) +'upx; left: '+ (currentPositions - 15) +'px;'">
 							</image>
 						</view>
@@ -241,8 +257,9 @@
 			</list>
 		</view>
 
-    <waterfall class="video-list" v-if="currentNav === 3" column-gap="6" column-count="2" :show-scrollbar="false" @loadmore="getGoods()"
+		<waterfall class="video-list" v-if="currentNav === 3" column-gap="6" column-count="2" :show-scrollbar="false"
-      column-width="195px" :style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'" >
+			@loadmore="getGoods()" column-width="195px"
+			:style="'width: '+ windowWidth +'px; height: '+ boxStyle.height +'px;'">
 			<cell class="goods_item" style="margin-bottom: 10px;" v-for="(item,index) in cateGoods" :key="item.uid"
 				@click="gogogo(item)">
 				<image class="goods_img" :src="item.image[0]" mode="aspectFill"></image>
@@ -250,12 +267,13 @@
 					<text class="title">{{item.title}}</text>
 					<view class="goods_info">
 						<view class="l_info">
-              <image :src="(item.author && item.author.avatar) || '/static/images/f.png'" mode="aspectFill"
+							<image :src="(item.author && item.author.avatar) || '/static/images/f.png'"
-                class="g_img"></image>
+								mode="aspectFill" class="g_img"></image>
 							<text class="g_name">{{item.author && item.author.nickname}}</text>
 						</view>
 						<view class="nice_box flex_a_c" @click.stop="giveStart(item)">
-              <text class="iconfont" :class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
+							<text class="iconfont"
+								:class="item.relevance_id ? 'icon-shoucang1' : 'icon-dianzan'"></text>
 							<text class="collect">{{item.count_start}}</text>
 
 						</view>
@@ -309,9 +327,15 @@
 <script>
 	const app = getApp();
 	let sysHeight = uni.getSystemInfoSync().statusBarHeight
-  import { toLogin } from '@/libs/login.js';
+	import {
-  import { mapGetters } from 'vuex';
+		toLogin
-  import { configMap } from '@/utils';
+	} from '@/libs/login.js';
+	import {
+		mapGetters
+	} from 'vuex';
+	import {
+		configMap
+	} from '@/utils';
 	/*
 	引入评论组件
 	*/
@@ -327,10 +351,17 @@
 		focusArticleLst,
 		graphicLstApi
 	} from '@/api/community.js';
-  import { HTTP_REQUEST_URL } from '@/config/app.js';
+	import {
-  import { getUserInfo } from '@/api/user.js';
+		HTTP_REQUEST_URL
+	} from '@/config/app.js';
+	import {
+		getUserInfo
+	} from '@/api/user.js';
 	export default {
-    computed: configMap({ statusBarHeight: 0, community_reply_status: 0 }, mapGetters(['isLogin', 'uid'])),
+		computed: configMap({
+			statusBarHeight: 0,
+			community_reply_status: 0
+		}, mapGetters(['isLogin', 'uid'])),
 		data() {
 			return {
 				imgHost: HTTP_REQUEST_URL,
@@ -389,7 +420,9 @@
 				currentNav: 1,
 				limit: 6,
 				page: 1,
-        userInfo: { uid: 0 },
+				userInfo: {
+					uid: 0
+				},
 				moreList: [],
 				isShowAuth: false, //是否隐藏授权
 				isAuto: false, //没有授权的不会自动授权
@@ -577,7 +610,9 @@
 					this.isShowAuth = true
 				} else {
 					let status = 1
-          followAuthorApi(item.uid, { status: status }).then(res => {
+					followAuthorApi(item.uid, {
+						status: status
+					}).then(res => {
 						if (res.status === 200) {
 							item.is_fans = true
 						}
@@ -607,7 +642,8 @@
 									});
 									setTimeout(function() {
 										uni.redirectTo({
-                      url: '/pages/plantGrass/plant_user/index?id=' + item.uid
+											url: '/pages/plantGrass/plant_user/index?id=' +
+												item.uid
 										})
 									}, 1000);
 								}
@@ -833,7 +869,7 @@
 				// if(!this.loadVideo) return
 				this.loadVideo = true
 				// 这个方法主要就是用来第一次进入视频播放时用来处理的
-        this.isUser ?
+
 				myVideoList(this.userUid, {
 					page: this.page,
 					limit: this.limit,
@@ -862,28 +898,6 @@
 						icon: 'none',
 						duration: 2000
 					});
-          }) :
-          graphicLstApi({
-            page: this.page,
-            limit: this.limit,
-            category_id: -1
-          }).then(async (res) => {
-            this.page = this.page + 1;
-            var msg = res.data.list;
-            for (let i = 0; i < msg.length; i++) {
-              msg[i]['isMore'] = false
-              msg[i]['playIng'] = false
-              msg[i]['state'] = false
-              msg[i]['isplay'] = false
-              msg[i]['community_id'] = msg[i]['community_id'].toString()
-            }
-            this.dataList = msg;
-          }).catch(err => {
-            return uni.showToast({
-              title: err,
-              icon: 'none',
-              duration: 2000
-            });
 				})
 			},
 			onpullingdown() {
@@ -941,7 +955,9 @@
 					this.isShowAuth = true
 				} else {
 					let status = item.relevance_id ? 0 : 1
-          graphicStartApi(item.community_id, { status: status }).then(res => {
+					graphicStartApi(item.community_id, {
+						status: status
+					}).then(res => {
 						if (item.relevance_id) {
 							item.count_start--;
 							item.count_start = item.count_start == 0 ? 0 : item.count_start
@@ -1251,7 +1267,7 @@
 
 	.userInfo {
 		position: absolute;
-    bottom: 30px;
+		bottom: 120px;
 		right: 10px;
 		display: flex;
 		align-items: center;
@@ -1637,4 +1653,3 @@
 
 	}
 </style>
-

pages/short_video/nvueSwiper/index.nvue

@@ -447,6 +447,7 @@
 			}
 		},
 		onLoad(options) {
+			console.log( options)
 			this.getOptions(options);
 			this.videoID = options.id;
 			this.isUser = options.user == 1 ? true : false;
@@ -732,7 +733,7 @@
 			get() {
 				let that = this
 				// 1.这里引入后端请求数据
-				that.isUser ?
+				
 					myVideoList(that.userUid, {
 						page: that.page,
 						limit: that.limit,
@@ -749,22 +750,6 @@
 							icon: 'none',
 							duration: 2000
 						});
-					}) :
-					graphicLstApi({
-						page: that.page,
-						limit: that.limit,
-						category_id: -1
-					}).then(res => {
-						that.videoData(res.data.list)
-						if (res.data.list.length < that.limit) {
-							this.loadMore = false;
-						}
-					}).catch(err => {
-						return uni.showToast({
-							title: err,
-							icon: 'none',
-							duration: 2000
-						});
 					}) 
 				that.loadVideo = true
 			},
@@ -1371,7 +1356,7 @@
 
 	.userInfo {
 		position: absolute;
-		bottom: 60rpx;
+		bottom: 120px;
 		right: 20rpx;
 		flex-direction: column;
 		text-align: center;