hengmei-one/pagesB/searchPage/searchPage.vue

<template>
	<view>
		<!-- 状态栏 -->
		<status-nav :titleVal="'搜索'" :statusTitle="true"></status-nav>
		<!-- 输入框 -->
		<view class="search-input-box bacf" :style="{paddingTop: statusHNH+'px'}">
			<view class="disac pad-zy30 mar-s20">
				<!-- 输入框 -->
				<input @confirm="searchEv" style="border: 2rpx solid #E0E0E0;padding: 0rpx 20rpx;height: 80rpx;line-height: 80rpx;" class="width100 fon34 radius10" type="text" v-model="searchVal" placeholder="请输入问题/病种/医生姓名"/>
				<!-- 搜索 -->
				<view @tap="searchEv" class="flexs mar-z30 radius10 pad-zy40 fon34 colf" style="height: 80rpx;line-height: 80rpx;" :style="{background:publicColor}">搜索</view>
			</view>
			<!-- 自定义二级分类 -->
			<view class=" pad-zy20 mar-s40" v-if="!isList">
				<cate-pu :newCurrent="newCurrent*1" :activeb="publicColor" :isCenter="false" :newbmo="'#E0E0E0'" @choosecateEv="chooseTwo" :newcateList="cateList"></cate-pu>
			</view>
		</view>
		<!-- 历史搜索和热门搜索 -->
		<view class="pad-z30 mar-s30" v-if="isList">
			<cate-tu :list="reSearchList" @delev='delev'></cate-tu>
		</view>
		<view v-else class="pad-zy20 mar-s20">
			<!-- 列表 -->
			<view v-if="dataList.length!=0">
				<list-pu :radiu="true" @chooseLike="chooseLike" @comfirmev="comfirmevl" :list="dataList"></list-pu>
			</view>
			<view v-else class="disjcac fc" style="margin-top: 40%;">
				<image class="zanw-img" src="/static/public/nothing.png" mode="aspectFill"></image>
				<view class="fon24 col3">您搜索的内容暂无结果，换个关键词试试吧</view>
			</view>
		</view>
		<!-- 弹框 -->
		<pu-po :isShowT="isShowT" @comfirmev="comfirmev" @cancleev="cancleev"></pu-po>
		<!-- 返回顶部 -->
		<!-- <back-top :showTop="showTop" @backTop="backTop"></back-top> -->
	</view>
</template>

<script>
	import cateTu from '@/components/cate-items/cate-tu.vue';
	import {collectionEV,cancleCollectionEV} from '@/jsFile/publicAPI.js';
	export default {
		components:{
			cateTu
		},
		data() {
			return {
				statusHNH:uni.getStorageSync('statusHNH'),
				searchVal:'',//输入框的值
				publicColor:uni.getStorageSync('publicColor'),//主题颜色
				reSearchList:[//历史记录列表
					{
						title:'历史搜索',
						src:'/static/public/del-icon.png',
						list:[]
					},
					{
						title:'热门搜索',
						src:'',
						list:[
							// {content:'秃顶种植需要的条件'},
							// {content:'眉毛种植的是什么'},
							// {content:'那些人能种植'},
							// {content:'眉毛种植需要多少钱'},
							// {content:'那些人能种植'},
						]
					},
				],
				isShowT:false,//是否显示弹框
				isList:true,//是否显示默认显示
				cateList:[//所以二级分类
					
				],
				dataList:[//小课堂数据列表
					
				],
				showTop:false,//是否显示返回顶部
				newCurrent:0,
				page:1,
				size:10,
				total:'',//总数
				isZanw:true,
				category_id:''//栏目ID
			}
		},
		onPageScroll(e) {
		    e.scrollTop > 360 ? this.showTop = true : this.showTop = false
		},
		onReachBottom() {//触底事件
			if(this.total!=this.dataList.length){
				this.page++
				this.searchEv()//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
				this.isZanw = false
			}
		},
		onUnload() {
			uni.removeStorageSync('cateList')
		},
		onLoad(options) {
			if(options.keyWorld!=undefined && options.keyWorld!='') {
				this.searchVal = options.keyWorld
				this.searchEv()
			}
			this.checkSearchHistory()
			this.checkKey()
		},
		onShow() {
			this.$toolAll.tools.isLogin()
			if(this.searchVal!=undefined && this.searchVal!='') this.searchEv()
		},
		methods: {
			checkKey(){//查询热搜关键词事件
				this.$requst.get('index/hot-keywords').then(res=>{
					// console.log('关键词列表：',res);
					if(res.code==0){
						if(res.data.length!=0){
							res.data.forEach(item=>{
								let reObj = {
									id:item.id,
									content:item.keyword
								}
								this.reSearchList[1].list.push(reObj)
							})
						}
					}
				},error=>{})
			},
			chooseLike(e){//收藏事件
				// console.log(this.dataList[e].is_collected);
				if(this.dataList[e].is_collected==0){
					this.dataList[e].is_collected = 1
					// 调用收藏事件
					collectionEV({action:'collect',archive_id:this.dataList[e].id})
				}
			},
			comfirmevl(e){//确认取消收藏事件
				this.dataList[e].is_collected = 0
				this.$toolAll.tools.showToast('正在取消...','loading')
				// 调用取消收藏事件
				cancleCollectionEV({action:'collect',archive_id:this.dataList[e].id})	
			},
			checkSearchHistory(){//查询历史搜索的搜索记录
				this.$requst.post('user/search-history',{page:this.page,size:this.size}).then(res=>{
					// console.log(res);
					if(res.code==0){
						if(res.data.list.length!=0){
							res.data.list.forEach(item=>{
								if(item.keyword!=null){
									let searchObj = {
										id:item.id,
										content:item.keyword
									}
									this.reSearchList[0].list.push(searchObj)
								}
							})
						}
					}
				},error=>{})
			},
			searchEv(){//搜索事件
				// console.log('栏目ID：',this.category_id,'关键词：',this.searchVal);
				this.$toolAll.tools.showToast('搜索中...')
				this.$requst.post('archives/category',{page:this.page,size:this.size,category_id:this.category_id,keyword:this.searchVal}).then(res=>{
					// console.log('搜索提交：',res);
					if(res.code==0){
						uni.hideToast()
						if(uni.getStorageSync('cateList')==''){//首次渲染栏目
							if(res.data.category.length!=0){
								res.data.category.forEach((item,index)=>{
									let cateObj = {
										id:item.id,//栏目ID 
										title:item.title,//栏目名称
										active:item.active,//是否选中
										model_id:item.model_id,//模型ID
										model_name:item.model_name,//模型标识
										sort:item.sort
									}
									this.cateList.push(cateObj)
								})
								uni.setStorageSync('cateList',this.cateList)
							}
						} else {
							//获取缓存中的栏目
							this.cateList = uni.getStorageSync('cateList')
						}
						// 获取列表
						if(this.page==1) this.dataList = []
						this.total = res.data.list.total
						if(res.data.list.list.length!=0){
							res.data.list.list.forEach(item=>{
								let tObj = {
									category_id:item.category_id,//栏目ID
									id:item.id,
									is_collected:item.is_collected,//是否已收藏
									collects:item.collects,//收藏量
									views:item.views,//查看量
									main_img:this.$http + item.cover,//封面图
									video:this.$http + item.video,//视频地址
									title:item.title,//标题
									content:item.subtitle,//副标题
									head_img:'/static/public/logo.png',//发布者头像
									name:'恒美植发',//发布者昵称
									isVideo:item.video.includes(".mp4")//是否是视频
								}
								if(this.newCurrent==0 && item.category_id==32) this.dataList.push(tObj)
								if(this.newCurrent==1 && item.category_id==33) this.dataList.push(tObj)
								if(this.newCurrent==2 && item.category_id==34) this.dataList.push(tObj)
								if(this.newCurrent==3 && item.category_id==38) this.dataList.push(tObj)
							})
						}
						let obj = {
							content:this.searchVal
						}
						this.reSearchList[0].list.push(obj)
						this.isList = false
					}
				},error=>{})
			},
			delev(){//删除事件
				this.isShowT = true
			},
			comfirmev(){//清空历史搜索确认事件
				this.isShowT = false
				this.$requst.post('user/clear-search').then(res=>{
					if(res.code==0){
						this.$toolAll.tools.showToast('已清空')
						this.reSearchList[0].list = []//清空搜索历史
					}
				},error=>{})
			},
			cancleev(){//取消事件
				this.isShowT = false
			},
			chooseTwo(index){//二级分类选择
				// console.log('二级分类：',index);
				this.isZanw = true
				this.page = 1
				this.newCurrent = index
				this.category_id = this.cateList[index].id
				this.searchEv()
			},
			backTop(){//回到顶部事件
			    uni.pageScrollTo({
			        scrollTop: 0,
			        duration: 300
			    });
			},
		}
	}
</script>

<style>

</style>