瀑布流+搜索

你的名字 2022-11-21 04:05 191阅读 0赞

## 选项卡形式的，左边是图片瀑布流，右边是视频瀑布流 ##

<template>
    	<view>
    		
    		<loginModal @hideModal="showLogin=false" :showModal="showLogin" @success="infoSuccess"></loginModal>
    		<view class="doorBox">
    			
    			<view class="search" v-show="Inv == 0">
    				<view class="search_top">
    					<view class="search_a"><image class="search_img" :src="app + '/index/Icon.png'" mode="scaleToFill"></image></view>
    					<view class="search_ab"></view>
    					<view class="search_b"><input type="text" class="search_input" value="" v-model="searchText_a" placeholder="搜索我关注的钓场" /></view>
    				</view>
    			</view>
    			
    			<view class="search" v-show="Inv == 1">
    				<view class="search_top">
    					<view class="search_a"><image class="search_img" :src="app + '/index/Icon.png'" mode=""></image></view>
    					<view class="search_ab"></view>
    					<view class="search_b"><input type="text" class="search_input" value="" placeholder="搜索我关注的视频" v-model="searchText" /></view>
    				</view>
    			</view>
    
    			<view class="inv-h-w">
    				
    				<view :class="['inv-h', Inv == 0 ? 'inv-h-se' : '']" @click="doorClickA">钓场</view>
    				
    				<view :class="['inv-h', Inv == 1 ? 'inv-h-se' : '']" @click="doorClick">视频</view>
    			</view>
    			
    			<view class="content" v-show="Inv == 0">
    				
    				
    				<view style="display: none;"><image v-for="(item, index) in list_a" :key="index" :src="item.img" :data-id="item.id" @load="onImageLoad_a"></image></view>
    				
    				<view class="waterfall">
    					<view style="width:100%">
    						<view class="img_item">
    							<view v-for="(item, index) in col1_a" :key="index">
    								<view @tap="dianji" :data-id="item.id">
    									<image :src="item.img" :style="colHeight1_a[index]" lazy-load style="border-radius: 10upx;"></image>
    									<view style="margin-left: 12upx;">
    										<view style="font-size: 30upx;">{ {  item.name }}</view>
    										<view style="font-size: 24upx;color: #666666;">{ {  item.address }}</view>
    										<view style="color:#FD1441;font-size: 30upx;">{ {  item.type == 1 ? '垂钓' : '野钓' }}{ {  item.id }}</view>
    									</view>
    								</view>
    							</view>
    						</view>
    						<view class="img_item">
    							<view v-for="(item, index) in col2_a" :key="index">
    								<view @tap="dianji" :data-id="item.id">
    									<image :src="item.img" :style="colHeight2_a[index]" lazy-load style="border-radius: 10upx;"></image>
    									<view style="margin-left: 12upx;">
    										<view style="font-size: 30upx;">{ {  item.name }}</view>
    										<view style="font-size: 24upx;color: #666666;">{ {  item.address }}</view>
    										<view style="color:#FD1441;font-size: 30upx;">{ {  item.type == 2 ? '野钓' : '垂钓' }}{ {  item.id }}</view>
    									</view>
    								</view>
    							</view>
    						</view>
    					</view>
    				</view>
    			</view>
    			
    			<view class="content" v-show="Inv == 1">
    				
    				
    				<view style="display: none;">
    					<image
    						v-for="(item, index) in list"
    						:key="index"
    						:src="item.vediofile + '?x-oss-process=video/snapshot,t_10000,m_fast'"
    						:data-id="item.id"
    						@load="onImageLoad"
    						v-show="Inv == 1"
    					></image>
    				</view>
    				
    				<view class="waterfall">
    					<view style="width:100%">
    						<view class="img_itemA">
    							<view v-for="(item, index) in col1" :key="index" class="position-relative">
    								
    								<image @tap="playTap(item)" class="play position-absolute top-0 left-0 bottom-0 right-0" :src="app + '/index/play.png'"></image>
    								
    								<image class="posterImg" :src="item.vediofile + '?x-oss-process=video/snapshot,t_10000,m_fast'" :style="colHeight1[index]" lazy-load></image>
    								
    								<view class="zan">
    									<image class="zan_img" :src="app + '/video/red_xin.png'" mode=""></image>
    									{ {  item.zan }}
    								</view>
    								
    								<view class="touXiang">
    									<image class="tx_img" :src="item.user_avatar" mode=""></image>
    									{ {  item.user_nickname }}
    								</view>
    								<view class="videoTitle">{ {  item.title }}</view>
    							</view>
    						</view>
    
    						<view class="img_itemA">
    							<view v-for="(item, index) in col2" :key="index" class="position-relative">
    								
    								<image @tap="playTap(item)" class="play position-absolute top-0 left-0 bottom-0 right-0" :src="app + '/index/play.png'"></image>
    								
    								<image class="posterImg" :src="item.vediofile + '?x-oss-process=video/snapshot,t_10000,m_fast'" :style="colHeight2[index]" lazy-load></image>
    								
    								<view class="zan">
    									<image class="zan_img" :src="app + '/video/red_xin.png'" mode=""></image>
    									{ {  item.zan }}
    								</view>
    								
    								<view class="touXiang">
    									<image class="tx_img" :src="item.user_avatar" mode=""></image>
    									{ {  item.user_nickname }}
    								</view>
    								<view class="videoTitle">{ {  item.title }}</view>
    							</view>
    						</view>
    					</view>
    				</view>
    			</view>
    		</view>
    		
    		
    		<image :src="app + '/db.png'" class="back_yuan" mode="" v-if="back" @tap="backtop"></image>
    		
    	</view>
    </template>
    
    <script>
    // 抓去状态state
    import {  mapState, mapMutations } from 'vuex';
    export default { 
    	// 修改状态
    	computed: { 
    		...mapState(['city'])
    	},
    	data() { 
    		return { 
    			// 返回顶部按钮的隐藏
    			back: false,
    			itemId:-1,
    			ifToLogin:0,//1 点击视频瀑布流 2 点击图片瀑布流
    			showLogin:false,
    			Inv: 0,
    			app: getApp().globalData.peiImg,
    			searchText_a: '', //搜索文本框双向绑定
    			windowHeight_a: '', //设备在屏幕中可使用高度
    			list_a: [], //瀑布流原始数据 搜索功能筛选
    			imgIdArr_a: [], //所有图片的id
    			oImgWArr_a: [], // 所有图片原始宽度
    			oImgHArr_a: [], //所有图片原始高度
    			imgHeightArr_a: [], //所有图片显示的高度
    			imgWidth_a: 0, // 图片显示宽度
    			col1H_a: 0, //瀑布流内容左侧高度
    			col2H_a: 0, //瀑布流内容右侧高度
    			loadingCount_a: 0, //
    			images_a: [],
    			col1_a: [],
    			col2_a: [],
    			colHeight1_a: [], //存放图片高度
    			colHeight2_a: [],
    			page: 1,
    
    			/* 视频 */
    			searchText: '',
    			filterResult: '',
    			windowHeight: '', //设备在屏幕中可使用高度
    			pica: [], //轮播图的数据
    			list: [], //瀑布流原始数据 搜索功能筛选
    			imgIdArr: [], //所有图片的id
    			oImgWArr: [], // 所有图片原始宽度
    			oImgHArr: [], //所有图片原始高度
    			imgHeightArr: [], //所有图片显示的高度
    			imgWidth: 0, // 图片显示宽度
    			col1H: 0, //瀑布流内容左侧高度
    			col2H: 0, //瀑布流内容右侧高度
    			loadingCount: 0,
    			images: [],
    			col1: [], // 渲染页面左侧的数据
    			col2: [], // 渲染页面右侧的数据
    			colHeight1: [], //左侧图片高度
    			colHeight2: [] // 存放右侧图片高度
    		};
    	},
    	onReachBottom() { 
    		if (this.searchTextA === '') { 
    			this.getBottomA();
    		}
    		if (this.searchText === '') { 
    			this.getBottom();
    		}
    	},
    	onShareAppMessage(res) { 
    		console.log('发送分享');
    		if (res.from === 'button') { 
    			// 来自页面内分享按钮
    			console.log(res.target);
    		}
    		return { 
    			title: '钓场首页',
    			path: '/pages/index/fishing_place'
    		};
    	},
    	watch: { 
    		/* 视频 */
    		searchText(newValue, oldValue) { 
    			let temp = [];
    			this.list.forEach((item, index) => { 
    				item.imgHeight = this.imgHeightArr[index];
    				if (item.title.indexOf(newValue) != -1) { 
    					temp.push({ 
    						item: item,
    						index: index
    					});
    				}
    			});
    			this.images = temp.map(item => { 
    				return item.item;
    			});
    			console.log(this.images);
    			let col1 = [];
    			let col2 = [];
    			let colHeight1 = [];
    			let colHeight2 = [];
    			this.col1H = 0;
    			this.col2H = 0;
    
    			for (let i = 0; i < this.images.length; i++) { 
    				let temp = this.images[i];
    				if (this.col1H <= this.col2H) { 
    					this.col1H += temp.imgHeight;
    					col1.push(temp);
    					colHeight1.push(`height:${ temp.imgHeight}px`);
    				} else { 
    					this.col2H += temp.imgHeight;
    					col2.push(temp);
    					colHeight2.push(`height:${ temp.imgHeight}px`);
    				}
    				this.col1 = col1;
    				this.col2 = col2;
    				this.colHeight1 = colHeight1;
    				this.colHeight2 = colHeight2;
    			}
    		},
    		/* 搜索的数据 */
    		searchText_a(newValue, oldValue) { 
    			let temp = [];
    			this.list_a.forEach((item, index) => { 
    				item.imgHeight = this.imgHeightArr_a[index];
    				if (item.name.indexOf(newValue) != -1) { 
    					temp.push({ 
    						item: item,
    						index: index
    					});
    				}
    			});
    			this.images_a = temp.map(item => { 
    				return item.item;
    			});
    			//console.log(this.images_a);
    			let col1_a = [];
    			let col2_a = [];
    			let colHeight1_a = [];
    			let colHeight2_a = [];
    			this.col1H_a = 0;
    			this.col2H_a = 0;
    			for (let i = 0; i < this.images_a.length; i++) { 
    				//console.log('++++',this.images_a[i])
    				let temp = this.images_a[i];
    				if (this.col1H_a <= this.col2H_a) { 
    					this.col1H_a += temp.imgHeight;
    					col1_a.push(temp);
    					colHeight1_a.push(`height:${ temp.imgHeight}px`);
    				} else { 
    					this.col2H_a += temp.imgHeight;
    					col2_a.push(temp);
    					colHeight2_a.push(`height:${ temp.imgHeight}px`);
    				}
    				this.col1_a = col1_a;
    				this.col2_a = col2_a;
    				this.colHeight1_a = colHeight1_a;
    				this.colHeight2_a = colHeight2_a;
    			}
    		}
    	},
    	onShow() { 
    		this.showLogin=false;
    		// 获取钓场数据
    		let url = '/api/place/placeFishlist';
    		let data = { 
    			// page:1,
    			cityname: this.city
    		};
    		this.$request.post(url, data).then(res => { 
    			this.list_a = res.data;
    			this.loadingCount_a = this.list_a.length;
    		});
    
    		// 获取视频列表的数据
    		let VideoUrl = '/api/place/placeVedioList';
    		let dataVideo = { 
    			cityname: this.city
    		};
    		this.$request.post(VideoUrl, dataVideo).then(res => { 
    			console.log('视频列表-->', res.data);
    			this.list = res.data;
    		});
    
    		this.windowHeight_a = uni.getSystemInfoSync().windowHeight; /* 设备在屏幕中可使用高度 */
    		this.windowHeight = uni.getSystemInfoSync().windowHeight; /* 设备在屏幕中可使用高度 */
    
    		uni.getSystemInfo({ 
    			success: res => { 
    				let ww = res.windowWidth;
    				let wh = res.windowHeight;
    				this.imgWidth_a = ww * 0.48;
    				//加载首组图片
    				//this.loadimages_a();
    			}
    		});
    
    		uni.getSystemInfo({ 
    			success: res => { 
    				let ww = res.windowWidth;
    				let wh = res.windowHeight;
    				this.imgWidth = ww * 0.48;
    			}
    		});
    	},
    	
    	// 页面滚动 出现返回按钮
    	onPageScroll(e) { 
    		if (e.scrollTop >= this.windowHeight) { 
    			this.back = true;
    		} else { 
    			this.back = false;
    		}
    	},
    	methods: { 
    		// 点击返回顶部按钮 跳回顶部
    		backtop() { 
    			console.log('返回顶部');
    			uni.pageScrollTo({ 
    				scrollTop: 0
    			});
    		},
    		
    		...mapMutations(["checkLocation"]),
    		infoSuccess(){ 
    			this.checkLocation(this.call)
    		},
    		// 点击传钓场或瀑布流 已经登录之后
    		call(){ 
    			switch (this.ifToLogin){ 
    				case 1:
    				let itemId=this.itemId
    				uni.navigateTo({ 
    					url: '../videos/videoDetail?id=' + itemId
    				});
    				break;
    				case 2:
    				let id = this.puBuId;
    				uni.navigateTo({ 
    					url: '../fishing_place/fishingPlaceDetail?id=' + id
    				})
    				break;
    			}				
    		},
    		/* 点击单个瀑布流*/
    		dianji(e){ 
    			this.showLogin=true;
    			this.ifToLogin=2;
    			this.puBuId=e.currentTarget.dataset.id;
    		},
    		// 跳转视频详情
    		playTap(item) { 
    			this.showLogin=true;
    			this.ifToLogin=1;
    			this.itemId=item.id
    			// uni.navigateTo({ 
    			// url: '../videos/videoDetail?id=' + this.itemId
    			// });
    		},
    		
    		/* 选项卡控制搜索栏 */
    		doorClickA() { 
    			this.Inv = 0;
    		},
    		doorClick() { 
    			this.Inv = 1;
    		},
    		/* 视频开始 */
    
    		// 图片加载时获取图片的真实宽高 并设置瀑布流左右两侧渲染数据
    		onImageLoad(e) { 
    			let imageId = e.currentTarget.dataset.id;
    			let oImgW = e.detail.width; //图片原始宽度
    			let oImgH = e.detail.height; //图片原始高度
    			let imgWidth = this.imgWidth; //图片设置的宽度
    			let scale = imgWidth / oImgW; //比例计算
    			let imgHeight = oImgH * scale; //自适应高度
    			let images = this.list; // 因元素个数要变动赋给临时变量
    			let imageObj = null;
    
    			this.imgIdArr.push(imageId);
    			this.oImgWArr.push(oImgW);
    			this.oImgHArr.push(oImgH);
    			this.imgHeightArr.push(imgHeight);
    			for (let i = 0; i < images.length; i++) { 
    				let img = images[i];
    				if (img.id === imageId) { 
    					imageObj = img;
    					break;
    				}
    			}
    
    			this.$set(imageObj, 'imgHeight', imgHeight); //图片设置的宽度
    
    			let loadingCount = this.loadingCount - 1;
    			let col1 = this.col1;
    			let col2 = this.col2;
    			let colHeight1 = this.colHeight1;
    			let colHeight2 = this.colHeight2;
    
    			if (this.col1H <= this.col2H) { 
    				this.col1H += imgHeight;
    				col1.push(imageObj);
    				colHeight1.push(`height:${ imgHeight}px`);
    			} else { 
    				this.col2H += imgHeight;
    				col2.push(imageObj);
    				colHeight2.push(`height:${ imgHeight}px`);
    			}
    
    			this.loadingCount = loadingCount;
    			this.col1 = col1;
    			this.col2 = col2;
    			this.colHeight1 = colHeight1;
    			this.colHeight2 = colHeight2;
    
    			if (!loadingCount) { 
    				this.images = [];
    			}
    		},
    		getBottom() { 
    			this.page = this.page + 1;
    			this.images = this.list;
    			this.loadingCount = this.images.length;
    			for (let i = 0; i < this.images.length; i++) { 
    				let temp = this.images[i];
    				let scale = this.imgWidth / this.oImgWArr[i];
    
    				let imgHeight = this.oImgHArr[i] * scale;
    				this.$set(temp, 'imgHeight', imgHeight);
    
    				let loadingCount = this.loadingCount - 1;
    				let col1 = this.col1;
    				let col2 = this.col2;
    				let colHeight1 = this.colHeight1;
    				let colHeight2 = this.colHeight2;
    
    				if (this.col1H <= this.col2H) { 
    					this.col1H += imgHeight;
    					col1.push(temp);
    					colHeight1.push(`height:${ imgHeight}px`);
    				} else { 
    					this.col2H += imgHeight;
    					col2.push(temp);
    					colHeight2.push(`height:${ imgHeight}px`);
    				}
    
    				this.loadingCount = loadingCount;
    				this.col1 = col1;
    				this.col2 = col2;
    				this.colHeight1 = colHeight1;
    				this.colHeight2 = colHeight2;
    
    				if (!loadingCount) { 
    					this.images = [];
    				}
    			}
    		},
    
    		// 图片加载时获取图片的真实宽高 并设置瀑布流左右两侧渲染数据
    		onImageLoad_a(e) { 
    			let imageId = e.currentTarget.dataset.id;
    			let oImgW = e.detail.width; //图片原始宽度
    			let oImgH = e.detail.height; //图片原始高度
    			let imgWidth_a = this.imgWidth_a; //图片设置的宽度
    			let scale = imgWidth_a / oImgW; //比例计算
    			let imgHeight = oImgH * scale; //自适应高度
    			let images_a = this.list_a; // 因元素个数要变动赋给临时变量
    			let imageObj = null;
    
    			this.imgIdArr_a.push(imageId);
    			this.oImgWArr_a.push(oImgW);
    			this.oImgHArr_a.push(oImgH);
    			this.imgHeightArr_a.push(imgHeight);
    			for (let i = 0; i < images_a.length; i++) { 
    				let img = images_a[i];
    				if (img.id == imageId) { 
    					imageObj = img;
    					break;
    				}
    			}
    
    			this.$set(imageObj, 'imgHeight', imgHeight); //图片设置的宽度
    
    			let loadingCount_a = this.loadingCount_a - 1;
    			let col1_a = this.col1_a;
    			let col2_a = this.col2_a;
    			let colHeight1_a = this.colHeight1_a;
    			let colHeight2_a = this.colHeight2_a;
    
    			if (this.col1H_a <= this.col2H_a) { 
    				this.col1H_a += imgHeight;
    				col1_a.push(imageObj);
    				colHeight1_a.push(`height:${ imgHeight}px`);
    			} else { 
    				this.col2H_a += imgHeight;
    				col2_a.push(imageObj);
    				colHeight2_a.push(`height:${ imgHeight}px`);
    			}
    
    			this.loadingCount_a = loadingCount_a;
    			this.col1_a = col1_a;
    			this.col2_a = col2_a;
    			this.colHeight1_a = colHeight1_a;
    			this.colHeight2_a = colHeight2_a;
    
    			if (!loadingCount_a) { 
    				this.images_a = [];
    			}
    		},
    		getBottomA() { 
    			this.page = this.page + 1;
    			this.images_a = this.list_a;
    			this.loadingCount_a = this.images_a.length;
    			for (let i = 0; i < this.images_a.length; i++) { 
    				let temp = this.images_a[i];
    				let scale = this.imgWidth_a / this.oImgWArr_a[i];
    
    				let imgHeight = this.oImgHArr_a[i] * scale;
    				this.$set(temp, 'imgHeight', imgHeight);
    
    				let loadingCount_a = this.loadingCount_a - 1;
    				let col1_a = this.col1_a;
    				let col2_a = this.col2_a;
    				let colHeight1_a = this.colHeight1_a;
    				let colHeight2_a = this.colHeight2_a;
    
    				if (this.col1H_a <= this.col2H_a) { 
    					this.col1H_a += imgHeight;
    					col1_a.push(temp);
    					colHeight1_a.push(`height:${ imgHeight}px`);
    				} else { 
    					this.col2H_a += imgHeight;
    					col2_a.push(temp);
    					colHeight2_a.push(`height:${ imgHeight}px`);
    				}
    
    				this.loadingCount_a = loadingCount_a;
    				this.col1_a = col1_a;
    				this.col2_a = col2_a;
    				this.colHeight1_a = colHeight1_a;
    				this.colHeight2_a = colHeight2_a;
    
    				if (!loadingCount_a) { 
    					this.images_a = [];
    				}
    			}
    		},
    		// 滚动容器滚动到底部时
    		loadimages_a() { 
    			let images_a = this.list_a;
    			let imageId = 'img-' + +new Date();
    			for (let i = 0; i < images_a.length; i++) { 
    				console.log('------->', imageId + '-' + i);
    				images_a[i].id = imageId + '-' + i;
    			}
    			this.images_a = this.list_a;
    			this.loadingCount_a = this.images_a.length;
    		}
    	}
    };
    </script>
    
    <style lang="scss" scoped>
    	
    	/* 置顶按钮 */
    	.back_yuan{ 
    		width: 80upx;
    		height: 80upx;
    		position: fixed;
    		z-index: 1;
    		right: 20upx;
    		bottom: 120upx;
    	}
    		
    	
    .waterfall { 
    	padding: 0 20upx;
    }
    .videoTitle { 
    	height: 86rpx;
    	font-size: 32rpx;
    }
    /* 头像昵称 */
    .touXiang { 
    	height: 45upx;
    	display: flex;
    	align-items: center;
    	position: absolute;
    	left: 15upx;
    	bottom: 119upx;
    	z-index: 666;
    	color: #ffffff;
    	font-size: 28upx;
    	.tx_img { 
    		width: 41upx;
    		height: 41upx;
    		border-radius: 50%;
    		margin-right: 10upx;
    	}
    }
    /* 点赞 */
    .zan { 
    	position: absolute;
    	top: 10upx;
    	left: 10upx;
    	color: #fd1441;
    	font-size: 30upx;
    	.zan_img { 
    		width: 22upx;
    		height: 20upx;
    		margin-right: 10upx;
    	}
    }
    .play { 
    	width: 120upx;
    	height: 120upx;
    	margin: auto;
    }
    
    .doorBox { 
    	width: 100vw;
    	margin: 20upx auto 0;
    	font-size: 32upx;
    	background-color: #fff;
    	.content { 
    		width: 95vw;
    		min-height: 500upx;
    		margin: 30upx auto 0;
    	}
    	.inv-h-w { 
    		width: 95vw;
    		margin: 0 auto;
    		display: flex;
    		justify-content: space-around;
    		align-items: center;
    		.inv-h { 
    			text-align: center;
    			color: #333;
    			height: 60rpx;
    			line-height: 60rpx;
    			border-bottom: 1px solid #fff;
    			margin-top: 30upx;
    			width: 123upx;
    		}
    
    		.inv-h-se { 
    			color: #333;
    			margin-top: 30upx;
    			border-bottom: 1px solid red;
    		}
    	}
    }
    .search { 
    	width: 95vw;
    	height: 56upx;
    	border: 2upx solid rgba(51, 51, 51, 1);
    	border-radius: 56upx;
    	margin: 0 auto;
    	.search_top { 
    		display: flex;
    		align-items: center;
    		margin: 8upx 30upx;
    	}
    	.search_a { 
    		.search_img { 
    			width: 28upx;
    			height: 28upx;
    		}
    	}
    	.search_b { 
    		margin-left: 30upx;
    	}
    	.search_input { 
    		font-size: 27upx;
    	}
    	.search_ab { 
    		width: 2upx;
    		height: 32upx;
    		background: #a9a9a9;
    		margin-top: 6upx;
    		margin-left: 30upx;
    	}
    }
    
    /* 瀑布流单个图片容器的样式 */
    
    .posterImg { 
    	width: 100%;
    	border-radius: 10upx;
    }
    .avater { 
    	width: 40upx;
    	height: 40upx;
    	margin-right: 5upx;
    	background-color: #000000;
    }
    .play { 
    	width: 120upx;
    	height: 120upx;
    	margin: auto;
    }
    
    .img_itemA { 
    	width: 48%;
    	margin: 1%;
    	display: inline-block;
    	vertical-align: top;
    }
    
    /* 瀑布流单个图片容器的样式 */
    .img_item { 
    	width: 48%;
    	margin: 1%;
    	display: inline-block;
    	vertical-align: top;
    }
    .img_item image { 
    	width: 100%;
    	margin-top: 48upx;
    }
    .box { 
    	background-color: #000000;
    }
    .fishing_place { 
    	width: 100%;
    }
    .name { 
    	font-size: 32upx;
    }
    .location { 
    	font-size: 28upx;
    	color: #666666;
    }
    .xingzhi { 
    	font-size: 28upx;
    	color: #fd1441;
    }
    </style>