siyu_app/pages/index/searchInfo.vue

<template>
	<view>
		<u-sticky :offsetTop="0" :customNavHeight='0' class="searchtop">
			<view class="searchtop-box x-bc">
				<image class="backicon" src="@/static/image/black_back.png" mode="aspectFill" @click="$navBack"></image>
				<u-search :showAction="true" actionText="搜索" v-model="keyword" @search="search" @custom="search"></u-search>
			</view>
		<!-- <u-tabs class="tabs" :list="list1" :current="current" lineWidth="48rpx" lineHeight="6rpx" lineColor="#FF5C03" :activeStyle="activeStyle"
				itemStyle="font-family: PingFang SC;font-weight: 400;font-size: 28rpx;color: #757575;padding:30rpx 36rpx" @click="handleTab">
			</u-tabs> -->
		</u-sticky>
		<view class="search-res">
			<view v-if="current != 0">
			<mescroll-body ref="mescrollRef" :style="{height:height,minHeight:minHeight}" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
				<view class="box" v-if="current==1">
					<view class="hothall" v-for="(item, index) in dataList" :key="index"  @click="navTo('/pages/course/info?courseId='+item.courseId)">
						<image class="video-img" :src="item.imgUrl"></image>
						<view class="hothall-infobox">
							<view class="hothall-info">
								<image :src="item.secondImg" mode="aspectFit"></image>
								<view>
									<view class="hothall-title">{{item.courseName}}</view>
									<view class="hothall-desc">{{item.description}}
									</view>
								</view>
								<view v-if="item.isIntegral!=1" class="vip">VIP</view>
							</view>
							<view class="tagbox">
								<block v-if="item.tags!=null">
									<view class="tag" v-for="(item, index) in item.tags.split(',')" :key="index" >{{item}}</view>
								</block>
							</view>
						</view>
					</view>
				</view>
				<!-- 视频 -->
				<view class="box maxstyle" :id="'mescrollRef' + current" v-if="current==2">
					<view class="hallbox">
						<view class="hall-box-item" v-for="(item, index) in dataList " :key="index" @click="handleDetail(item,index,'video')">
							<view class="video-imgbox">
								<image class="video-img" :src="item.cover" mode="aspectFill" :lazy-load="true"></image>
								<image class="video-img-icon" src="@/static/image/hall/video_icon.png" mode="aspectFill"></image>  
							</view>
							
							<view class="hall-box-info">
								<view class="hall-box-name">{{item.title}}</view>
								<view class="hall-box-footer" style="margin-top: 16rpx;">
									<view class="hall-box-footerl footer-flex">
										<image class="hall-box-img" :src="item.headImg"></image>
										<text>{{item.username}}</text>
									</view>
									<view class="hall-box-footerr footer-flex">
										<image class="hall-box-img" src="@/static/image/hall/zan_icon.png"></image>
										<text>{{ formatNum(item.likeNum)  }}</text>
									</view>
								</view>
							</view>
						</view>
					
					</view>	
				</view>
				<!-- 养生干货 -->
				<view class="box" v-if="current==3">
					<view class="health-guidelines-item border-line" v-for="(item,index) in dataList" :key="index" @click="handleDetail(item)">
						<view class="health-guidelines-itemtxt">
							<text class="textTwo">{{item.title}}</text>
							<text class="health-guidelines-readnum">阅读 {{item.views || 0}}</text>
						</view>
						<image :src="item.imageUrl" mode="aspectFill"></image>
					</view>
				</view>
				<!-- 药膳 -->
				<view class="box" v-if="current!=0&&current!=1&&current!=2&&current!=3">
					<view v-for="i in 3" class="boxlist-item x-f">
						<image src="/static/bxzs.jpg" class="boxlist-img" mode="aspectFill"></image>
						<view style="flex: 1;overflow: hidden;margin-left: 30rpx;">
							<view class="boxlist-title textOne">大麦汤</view>
							<view class="textOne">调理慢病，治疗高血压</view>
						</view>
					</view>
				</view>
			</mescroll-body>
		</view>
			<!-- 名医讲堂 -->
			<view class="box" v-if="(current==0 ||current==1 )&&courseList && courseList.length > 0">
				<view class="box-nav">
					<view class="title">名医讲堂</view>
					<view class="box-nav-right"  @click="navTo('/pages/course/famousHall?type=1')">
						<text>更多讲堂</text>
						<image class="right-arrow" src="@/static/image/home/my_right_arrow.png" mode="aspectFill" :lazy-load="true"></image>
					</view>
				</view>
					
				<view class="hothall" v-for="(item, index) in courseList" :key="index"  @click="navTo('/pages/course/info?courseId='+item.courseId)">
					<image class="video-img" :src="item.imgUrl"></image>
					<view class="hothall-infobox">
						<view class="hothall-info">
							<image :src="item.secondImg" mode="aspectFit"></image>
							<view>
								<view class="hothall-title">{{item.courseName}}</view>
								<view class="hothall-desc">{{item.description}}
								</view>
							</view>
							<view v-if="item.isIntegral!=1" class="vip">VIP</view>
						</view>
						<view class="tagbox">
							<block v-if="item.tags!=null">
								<view class="tag" v-for="(item, index) in item.tags.split(',')" :key="index" >{{item}}</view>
							</block>
						</view>
					</view>
				</view>
			</view>
			<!-- 视频 -->
			<view :class="current==2 ? 'box maxstyle':'box'" v-if="isLastPage &&(current==0 ||current==2 )&&videoList && videoList.length > 0">
				<view class="box-nav">
					<view class="title">{{current==2?'猜你喜欢':'视频'}}</view>
					<view class="box-nav-right" @click="handleToVideo()">
						<text>{{current==2?'更多':'更多视频'}}</text>
						<image class="right-arrow" src="@/static/image/home/my_right_arrow.png" mode="aspectFill" :lazy-load="true"></image>
					</view>
				</view>
				<view class="hallbox">
					<view class="hall-box-item" v-for="(item, index) in videoList " :key="index">
						<view class="video-imgbox">
							<image class="video-img" :src="item.cover" mode="aspectFill" :lazy-load="true"></image>
							<image class="video-img-icon" src="@/static/image/hall/video_icon.png" mode="aspectFill"></image>  
						</view>
						
						<view class="hall-box-info">
							<view class="hall-box-name">{{item.title}}</view>
							<view class="hall-box-footer">
								<view class="hall-box-footerl footer-flex">
									<image class="hall-box-img" :src="item.headImg"></image>
									<text>{{item.username}}</text>
								</view>
								<view class="hall-box-footerr footer-flex">
									<image class="hall-box-img" src="@/static/image/hall/zan_icon.png"></image>
									<text>{{ formatNum(item.likeNum)  }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>	
			</view>
			<!-- 养生干货 -->
			<view class="box" v-if="(current==0 ||current==3 )&&articleList && articleList.length > 0">
				<view class="box-nav">
					<view class="title">养生干货</view>
					<view class="box-nav-right"  @click="navTo('/pages/index/health/index')">
						<text>更多养生干货</text>
						<image class="right-arrow" src="@/static/image/home/my_right_arrow.png" mode="aspectFill" :lazy-load="true"></image>
					</view>
				</view>
				<view class="health-guidelines-item border-line" v-for="(item,index) in list" :key="index" @click="handleDetail(item)">
					<view class="health-guidelines-itemtxt">
						<text class="textTwo">{{item.title}}</text>
						<text class="health-guidelines-readnum">阅读 {{item.views || 0}}</text>
					</view>
					<image :src="item.imageUrl" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 药膳 -->
			<view class="box" v-if="(current==0 || current==3)&&otherList && otherList.length > 0">
				<view class="box-nav">
					<view class="title">药膳</view>
					<view class="box-nav-right"  @click="navTo('/pages/index/health/index')">
						<text>更多药膳</text>
						<image class="right-arrow" src="@/static/image/home/my_right_arrow.png" mode="aspectFill" :lazy-load="true"></image>
					</view>
				</view>
				<view v-for="i in 3" class="boxlist-item x-f">
					<image src="/static/bxzs.jpg" class="boxlist-img" mode="aspectFill"></image>
					<view style="flex: 1;overflow: hidden;margin-left: 30rpx;">
						<view class="boxlist-title textOne">大麦汤</view>
						<view class="textOne">调理慢病，治疗高血压</view>
					</view>
				</view>
			</view>
			<!-- 中药 -->
			<view class="box" v-if="(current==0 || current==4)&&otherList && otherList.length > 0">
				<view class="box-nav">
					<view class="title">中药</view>
					<view class="box-nav-right"  @click="navTo('/pages/index/health/index')">
						<text>更多中药</text>
						<image class="right-arrow" src="@/static/image/home/my_right_arrow.png" mode="aspectFill" :lazy-load="true"></image>
					</view>
				</view>
				<view v-for="i in 3" class="boxlist-item x-f">
					<image src="/static/bxzs.jpg" class="boxlist-img" mode="aspectFill"></image>
					<view style="flex: 1;overflow: hidden;margin-left: 30rpx;">
						<view class="boxlist-title textOne">山杜仲</view>
						<view class="textOne">祛风湿，强筋骨治</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	
	import { getCourseList } from '@/api/course';
	import { getArticleList } from '@/api/article';
	import { getVideoList,doFavorite,doLike } from '@/api/shortvideo';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	export default {
		mixins: [MescrollMixin], 
		components: {
			
		},
		data() {
			return {
				keyword: "",
				list1: [
					{
						name: '综合',
					}, {
						name: '讲堂',
					}, 
					{
						name: '视频'
					},
					{
						name: '养生干货'
					}, {
						name: '药膳'
					}, {
						name: '中药'
					},
				],
				current: 2,
				activeStyle: {
					fontFamily: "PingFang SC",
					fontWeight: 600,
					fontSize: "28rpx",
					color: "#222222"
				},
				recommendList:[],
				list:[],
				isLastPage: false,
				mescroll:null,
				downOption: {   //下拉刷新
				 	use:true,
					auto: false // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {
					use: true, // 是否启用上拉加载; 默认true
					page: {
						pae: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
						size: 10 // 每页数据的数量,默认10
					},
					noMoreSize: 10, // 配置列表的总数量要大于等于5条才显示'-- END --'的提示
					textNoMore:"没有更多了",
					empty: {
						icon:'https://cos.his.cdwjyyh.com/fs/20240423/cf4a86b913a04341bb44e34bb4d37aa2.png',
						tip: '暂无数据'
					}
				},
				dataList: [],
				courseList: [],
				videoList: [],
				articleList: [],
				otherList: [],
				height: 'auto',
				minHeight: 'auto',
				pageNum: 1,
				pageSize: 10
			}
		},
		onLoad(option) {
			this.keyword = option.keyword || ""
			this.current = option.type || 2
			// this.search()
			// this.getRecommendList()
			this.getVideoListTui()
			this.minHeight = uni.getSystemInfoSync().windowHeight
		},
		methods: {
			formatNum(num){
				if(num>10000){
					return (num/10000.0).toFixed(1)+'万';
				}
				return num;
			},
			search() {
				if(this.current == 0) {
					this.getCourseListTui(this.keyword)
				} else {
					this.mescroll.scrollTo(0,0);
					this.mescroll.resetUpScroll()
				}
			},
			handleTab(e) {
				this.current = e.index
				this.mescroll.resetUpScroll()
			},
			navTo(url) {
				uni.navigateTo({
					url: url
				})
			},
			handleDetail(item,index,type) {
				if(type == 'video') {
					// #ifdef APP-PLUS
					uni.navigateTo({
						url: "/pages/course/video/living-app-searchInfo?index="+index+'&pageNum='+this.pageNum+'&pageSize='+this.pageSize+"&keyword="+this.keyword || ''
					})
					// #endif
					// #ifdef H5
					uni.navigateTo({
						url: "/pages/course/video/living-applet?index="+index+'&pageNum='+this.pageNum+'&pageSize='+this.pageSize+"&keyword="+this.keyword || ''
					})
					// #endif
				}
			},
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*下拉刷新的回调 */
			downCallback(mescroll) {
				mescroll.resetUpScroll()
			},
			upCallback(page) {
				//联网加载数据
				if(this.current == 1) {
					this.getCourseList(page)
				} else if(this.current == 2) {
					this.getVideoList(page)
				} else if(this.current == 3) {
					this.getArticleList(page)
				} else if(this.current == 4) {
					this.getArticleList(page)
				} else if(this.current == 5) {
					this.getArticleList(page)
				}
				
			},
			getCourseList(page) {
				//联网加载数据
				const that = this;
				const data = {
					keyword:this.keyword,
					pageNum: page.num,
					pageSize: page.size
				};
				getCourseList(data).then(res => {
					if(res.code==200){
						//设置列表数据
						if (page.num == 1) {
							that.dataList = res.data.list; 
						} else {
							that.dataList = that.dataList.concat(res.data.list); 
						}
						that.mescroll.endBySize(res.data.list.length, res.data.total);
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						that.dataList = null;
						that.mescroll.endErr();
					}
				});
			},
			getCourseListTui() {
				getCourseList({isTui:1},1,10).then(res => {
						if(res.code==200){
							this.courseList=res.data.list.splice(0,2);  
						}
					},
					rej => {}
				);
			},
			getRecommendList(){
				let that=this;
				const params={"isTui":1};
				getCourseList(params,1,10).then(res => {
						if(res.code==200){
							this.recommendList=res.data.list.splice(0,2);  
						}
					},
					rej => {}
				);
			},
			getArticleList() {
				const queryParam = {
					keyword:undefined,
					cateId:undefined,
					page: 1,
					pageSize: 4
				}
				getArticleList(queryParam).then(res=>{
					if(res.code == 200) {
						this.list = res.data.list
					}
				})
			},
			// 视频搜索
			getVideoList(page){
				const that = this;
				let param = {
					keyword:this.keyword,
				};
				this.pageNum = page.num
				this.pageSize = page.size
				getVideoList(param,page.num,page.size).then(res => {
					if(res.code==200){
						this.isLastPage = res.data.isLastPage
						//设置列表数据
						if (page.num == 1) {
							that.dataList = res.data.list; 
						} else {
							that.dataList = that.dataList.concat(res.data.list); 
						}
						this.$nextTick(()=>{
							this.getHeight()
						})
						that.mescroll.endBySize(res.data.list.length, res.data.total);
						
					}else{
						uni.showToast({
							icon:'none',
							title: "请求失败",
						});
						that.dataList = null;
						that.mescroll.endErr();
					}
				});
			},
			// 视频推荐
			getVideoListTui(){
				getVideoList({},1, 6).then(res => {
					if(res.code==200){
						//设置列表数据
						this.videoList = res.data.list; 
					}
				});
			},
			// 更多视频
			handleToVideo() {
				// #ifdef APP-PLUS
				uni.switchTab({
					url: '/pages/course/video/living-app'
				})
				// #endif
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/course/video/living-applet'
				})
				// #endif
			},
			getHeight() {
				this.height = 'auto'
				this.minHeight = uni.getSystemInfoSync().windowHeight
				const el = '#mescrollRef' + this.current
				if(this.current > 0) {
					const query = uni.createSelectorQuery().in(this);
					const windowHeight = uni.getSystemInfoSync().windowHeight
					query
					  .select(el)
					  .boundingClientRect((data) => {
						if(this.isLastPage == true&&data.height<windowHeight){
							console.log("得到布局位置信息" + JSON.stringify(data));
							console.log("节点离页面顶部的距离为" + data.top,windowHeight);
							this.height = `calc(${data.height} + 40rpx)`
							this.minHeight = this.height
						}
					  })
					  .exec();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.searchtop {
		background-color: #fff;
		.backicon {
			width: 64rpx;
			height: 64rpx;
		}

		&-box {
			padding: 12rpx 24rpx;
			padding-top: calc(var(--status-bar-height) + 12rpx);
			background-color: #fff;
		}
		.tabs {
			background-color: #fff;
		}
	}
	.search-res {
		padding: 20rpx 24rpx;
	}
	.maxstyle {
		padding:0 !important;
		background-color: transparent !important;
		.hall-box {
			&-item {
				width: 342rpx !important;
				.video-imgbox {
					width: 342rpx !important;
				}
				.video-img {
					width: 342rpx !important;
				}
			}
			&-name {
				margin-bottom: 10rpx;
			}
		}
	}
	.box {
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 0 32rpx;
		margin-bottom: 20rpx;
		.box-nav {
			width: 100%;
			padding: 36rpx 0;
			box-sizing: border-box;
			display: flex;
			justify-content: space-between;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 34rpx;
			color: #222222;
			&-right {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				@include u-flex(row, center, flex-start);
			}
			.right-arrow {
				height: 48rpx;
				width: 48rpx;
			}
		}
		.hothall {
			width: 100%;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			overflow: hidden;
		    position: relative;	
			.video-img {
				width: 100%;
				height: 400rpx;
				background: rgba(0, 0, 0, 0.15);
				border-radius: 16rpx 16rpx 0rpx 0rpx;
			}
			.vip{
				  position: absolute;
				  min-width: 54rpx;
				  min-height: 20rpx;
				  line-height: 20rpx;
				  background: linear-gradient(94deg, #FFE9D0 0%, #E9BD97 100%);
				  border-radius: 16rpx 0 16rpx 0;
				  top:0;
				  left: 0;
				  color:#333;
				  font-size:18rpx ;
				  text-align: center;
				  font-weight: 500;
				  font-style: italic;		  
			}				  	
		
			&-infobox {
				padding: 24rpx 0;
		
				image {
					width: 88rpx;
					height: 128rpx;
					background: #ECECEC;
					border-radius: 8rpx 8rpx 8rpx 8rpx;
					border: 2rpx solid #ECECEC;
					flex-shrink: 0;
					margin-right: 28rpx;
				}
			}
		
			&-info {
				@include u-flex(row, center, flex-start);
			}
		
			&-title {
				font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		
			&-desc {
				font-weight: 400;
				font-size: 24rpx;
				color: #757575;
				line-height: 28rpx;
				margin-top: 10rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
		
			.tagbox {
				@include u-flex(row, center, flex-start);
				flex-wrap: wrap;
				margin: 0 -12rpx -12rpx 0;
			}
		
			.tag {
				min-height: 40rpx;
				margin: 16rpx 12rpx 12rpx 0;
				background: #FEFAF3;
				border-radius: 20rpx 20rpx 20rpx 20rpx;
				border: 1rpx solid #FBEDD1;
				padding: 0 16rpx;
				font-weight: 400;
				font-size: 22rpx;
				color: #A97125;
				line-height: 40rpx;
			}
		}
		.hallbox {
			@include u-flex(row, center, flex-start);
			flex-wrap: wrap;
			margin: 0 -18rpx 0 0;
			.gapitem {
				width: 310rpx !important;
				margin: 0 18rpx 18rpx 0;
			}
		}
		.health-guidelines {
			padding: 24rpx 24rpx 0 24rpx;
			background: #FFFFFF;
			border-radius: 16rpx 16rpx 16rpx 16rpx;
			.box-title {
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #757575;
				@include u-flex(row, center, space-between);
				height: 80rpx;
				&-left {
					font-weight: 500;
					font-size: 36rpx;
					color: #222222;
					// line-height: 42rpx;
				}
				&-right {
					@include u-flex(row, center, flex-start);
					image {
						height: 48rpx;
						width: 48rpx;
					}
				}
			}
			&-item {
				padding: 30rpx 0 40rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
				line-height: 38rpx;
				@include u-flex(row, center, space-between);
				image {
					flex-shrink: 0;
					width: 180rpx;
					height: 136rpx;
					margin-left: 16rpx;
					background: #F5F6F6;
					border-radius: 10rpx 10rpx 10rpx 10rpx;
					overflow: hidden;
				}
			}
			&-itemtxt {
				flex: 1;
			}
			&-readnum {
				display: inline-block;
				margin-top: 30rpx;
				font-size: 26rpx;
				color: #999999;
			}
			.border-line:last-child::after {
				border: none;
			}
		}
		.boxlist {
			&-item {
				padding: 20rpx 0;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
				overflow: hidden;
			}
			&-img {
				flex-shrink: 0;
				width: 180rpx;
				height: 128rpx;
				background: #F5F6F6;
				border-radius: 10rpx 10rpx 10rpx 10rpx;
			}
			&-title {
				margin-bottom: 24rpx;
				font-weight: 500;
				font-size: 32rpx;
				color: #222222;
			}
		}
		.hall-box {
			@include u-flex(row, center, flex-start);
			flex-wrap: wrap;
			&-item {
				width: 310rpx;
				margin: 0 18rpx 18rpx 0;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				overflow: hidden;
		        position: relative;
				.video-imgbox {
					width: 310rpx;
					height: 280rpx;
					background: #ECECEC;
					border-radius: 16rpx 16rpx 0rpx 0rpx;
					position: relative;
					overflow: hidden;
				}
				.video-img-icon {
					width: 48rpx;
					height: 48rpx;
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%, -50%);
					z-index: 1;
				}
				.video-img {
					width: 310rpx;
					height: 280rpx;
				}
						
			
			}
		
			&-info {
				padding: 22rpx 20rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 24rpx;
				color: #999999;
			}
		
			&-name {
				font-weight: 400;
				font-size: 28rpx;
				color: #222222;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		
			&-desc {
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				margin: 10rpx 0 18rpx;
			}
		
			&-footer {
				@include u-flex(row, center, space-between);
				width: 100%;
			}
		
			&-footerl {
				flex: 1;
				text {
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			&-img {
				width: 32rpx;
				height: 32rpx;
				margin-right: 8rpx;
				flex-shrink: 0;
				border-radius: 50%;
			}
		}
		.footer-flex {
			overflow: hidden;
			@include u-flex(row, center, flex-start);
		}
	}
	
</style>