hengmei-two/pagesB/problemList/problemList.vue

<template>
	<view class="pad-x180">
		<!-- 状态栏 -->
		<status-nav :titleVal="titleStr" :statusTitle="true"></status-nav>
		<!-- 输入框 -->
		<view class="search-input-box bacf" :style="{paddingTop: statusHeight+'px'}">
			<view class="disac pad-zy30 mar-s20">
				<!-- 输入框 -->
				<input @confirm="searchEv" @input="inputEv" class="width100 fon34 radius10 problem-input" 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>
				<!-- 筛选 -->
				<picker class="flexs" mode="selector" :range="sreenList" @change="chooseSreen">
					<view class="disac flexs pad-z25" style="font-size: 34rpx;color: #467df6;">
						<image src="/static/public/icon-search.png" style="width: 32rpx;height: 30rpx;" mode=""></image>
						筛选
					</view>
				</picker>
			</view>
		</view>
		<view class="pad-zy20 mar-s20">
			<view class="pad-x30 pad-zy30 fon34" v-if="diseaseText">当前病种：{{diseaseText}}</view>
			<!-- 列表 -->
			<view v-if="dataList.length!=0">
				<list-pu @chooseLike="chooseLike" @praise="praiseEv" @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> -->
		<!-- 用户信息授权，手机号授权 -->
		<auth-userInfo-mobileInfo></auth-userInfo-mobileInfo>
		<!-- 底部tab -->
		<foot-tab :titleList="titleList" :imgList="imgList" :newcurrent='-1'></foot-tab>
	</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 {
				titleStr:'',//标题
				searchVal:'',//输入框的值
				isShowT:false,//是否显示弹框
				cateList:[//所以二级分类
					
				],
				dataList:[//小课堂数据列表
					
				],
				showTop:false,//是否显示返回顶部
				newCurrent:0,
				page:1,
				size:10,
				total:'',//总数
				isZanw:true,
				category_id:'',//栏目ID
				disease_id:'',//病种id
				diseaseText:'',//病种文本描述
				sreenList:[],//筛选项标题
				sreenIndex:0,
				sreenIdList:[],//筛选项id
				parentId:'',//上级id
			}
		},
		computed: {
			// 底部标题
			titleList() {
				return this.$store.state.titleList 
			},
			// 底部图标
			imgList() {
				return this.$store.state.imgList
			},
			// 主题颜色
			publicColor() {
				return this.$store.state.publicColor
			},
			statusHeight() {
				return this.$store.state.statusHeight
			}
		},
		onReachBottom() {//触底事件
			if(this.total!=this.dataList.length){
				this.page++
				this.searchEv()//调用自主预约列表事件
			} else {
				if(this.isZanw) this.$toolAll.tools.showToast('暂无更多列表','none',1000)
				this.isZanw = false
			}
		},
		onShareAppMessage() {
			return {
				title:this.titleStr,
				path:`/pagesB/problemList/problemList?category_id=${this.category_id}&title=${this.titleStr}`
			}
		},
		onLoad(options) {
			this.category_id = options.category_id;//病种id
			this.titleStr = options.title;//标题
			this.cateListEv();
			if(uni.getStorageSync('phone_active')!=0 && uni.getStorageSync('is_active')!=0){
				this.searchEv()
			}
		},
		methods: {
			// 病种筛选弹框
			clickEv(){
				if(this.sreenList.length){
					uni.showActionSheet({
						itemList:this.sreenList,
						success: (res) => {
							this.dataList = [];
							this.disease_id = this.sreenIdList[res.tapIndex];
							this.diseaseText = this.sreenList[res.tapIndex];
							this.searchEv();
						}
					})
				} else {
					this.$toolAll.tools.showToast('暂无筛选项')
				}
			},
			// 选择病种
			chooseSreen(e){
				this.sreenIndex = e.detail.value;
				this.page = 1;
				this.disease_id = this.sreenIdList[this.sreenIndex];
				this.diseaseText = this.sreenList[this.sreenIndex];
				this.searchEv();
			},
			// 病种列表事件
			cateListEv(){
				this.$requst.get('archives/disease').then(res=>{
					if(res.code==0){
						// let newList = res.data.filter(item=>item.id==this.category_id);
						let newList = res.data;
						if(newList.length){
							newList.forEach(item=>{
								if(item.id){
									this.sreenList.push(item.name);
									this.sreenIdList.push(item.id);
								}
							})
							this.sreenList.unshift('全部');
							this.sreenIdList.unshift('');
						}
						// if(newList.length){
						// 	this.parentId = newList[0].id;
						// 	if(newList[0].children.length){
						// 		newList[0].children.forEach(item=>{
						// 			this.sreenList.push(item.name);
						// 			this.sreenIdList.push(item.id);
						// 		})
						// 		this.sreenList.unshift('全部');
						// 		this.sreenIdList.unshift('');
						// 	}
						// }
					}
				})
			},
			// 搜索框改变事件
			inputEv(e) {
				this.page = 1;
			},
			chooseLike(e){//收藏事件
				if(this.dataList[e].is_collected==0){
					this.dataList[e].is_collected = 1
					// 调用收藏事件
					collectionEV({action:'collect',archive_id:this.dataList[e].id})
				}
			},
			praiseEv(e){ // 点赞事件
				if(this.dataList[e].is_liked==0){
					this.dataList[e].is_liked = 1;
					this.dataList[e].likes++;
					// if(this.dataList[e].likes>1000) this.dataList[e].likes = '999+'
					// 调用收藏事件
					collectionEV({action:'like',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})	
			},
			searchEv(){//搜索事件
				this.$toolAll.tools.showToast('搜索中...')
				this.$requst.post('archives/category',{page:this.page,size:this.size,category_id:this.category_id,keyword:this.searchVal,disease_id:this.disease_id}).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 fabImg = '';
								if(item.published_headimgurl!='' && item.published_headimgurl!=null) fabImg = this.$http + item.published_headimgurl;
								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: fabImg || '/static/public/logo.png',//发布者头像
									name:item.published_by || '恒美植发',//发布者昵称
									isVideo:item.video.includes(".mp4"),//是否是视频
									likes:item.likes,//点赞数量
									is_liked:item.is_liked,//是否已点赞
									tag_text:item.tag_text,
								}
								this.dataList.push(tObj);
							})
						}
						let obj = {
							content:this.searchVal
						}
					}
				})
			},
			cancleev(){//取消事件
				this.isShowT = false
			},
		}
	}
</script>

<style>
.title {
		font-size: 14px;
		font-weight: bold;
		margin: 20px 0 5px 0;
	}

	.data-pickerview {
		height: 400px;
		border: 1px #e5e5e5 solid;
	}

	 .popper__arrow {
    top: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #EBEEF5;
}
 .popper__arrow {
    top: -6px;
    left: 50%;
    margin-right: 3px;
    border-top-width: 0;
    border-bottom-color: #EBEEF5;
}
</style>