289 lines
8.7 KiB
Vue
289 lines
8.7 KiB
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>
|