case-data/pages/search/search.vue
zoujiandong bbc99ec0dd 6.16
2025-06-16 19:01:04 +08:00

780 lines
18 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="u-page">
<z-paging
ref="paging"
inside-more
loading-more-no-more-text="咱也是有底线的"
:auto-show-back-to-top="true"
v-model="dataList"
@query="queryList"
>
<template #top>
<navBarSearch :searchWord="keyWord" :navName="navName" @changeWord="changeWord"></navBarSearch>
<view class="databox" v-if="hospital_id || doctor_id || (label_iden && !canOpenCase)">
<view class="cell">
<view class="num">{{ numInfo.article_collect_num }}</view>
<view class="name">文章</view>
</view>
<view class="cell">
<view class="num">{{ numInfo.video_collect_num }}</view>
<view class="name">视频</view>
</view>
<view class="cell">
<view class="num">{{ numInfo.video_read_num+numInfo.article_read_num }}</view>
<view class="name">阅读量</view>
</view>
</view>
<view class="bar"></view>
<view class="detail" v-if="isSearch">
<view class="desc" >检索到<text class="red">{{searchInfo.search_article_num}}篇文章</text></view>
<view class="desc" >检索到<text class="red">{{searchInfo.search_video_num}}个视频</text></view>
<view class="desc" v-if="keyWord">检索词:<text class="red">{{ keyWord }}</text></view>
</view>
<view class="filterbox" :class="{active:canOpenCase}">
<view class="type" @click="swicthType">{{!isArticle?'文章':'视频'}}<up--image :src="switchImg" width="31rpx" height="31rpx"></up--image></view>
<view class="casesdown" @click="openCase" v-if="canOpenCase">筛选<up--image :src="caseImg" width="31rpx" height="31rpx"></up--image></view>
<up-dropdown class="u-dropdown" ref="uDropdownRef">
<up-dropdown-item
v-model="order.push_date"
title="发布时间"
@change="change"
:options="options"
></up-dropdown-item>
<up-dropdown-item
v-model="order.read_num"
title="阅读量"
@change="change"
:options="options"
></up-dropdown-item>
</up-dropdown>
</view>
</template>
<view class="item" v-for="(item, index) in dataList" :key="index" @click="isArticle?goDetail(item.article_id):goDetail(item.video_id)">
<view class="title ellipsis">{{isArticle?item.article_title:item.video_title }}</view>
<view class="tagsbox">
<view class="tag" v-for="tag in item.author" :key="tag.author_id">{{ tag.doctor_name }}</view>
</view>
<view class="deal">
<view class="left">
<view class="eyebox">
<up-icon name="eye" color="#6B7280" size="28rpx"></up-icon>
<view class="num">{{item.read_num }}</view>
</view>
<view class="collect">
<up-icon name="heart" color="#6B7280" size="28rpx"></up-icon>
<view class="num">{{item.collect_num }}</view>
</view>
</view>
<view class="time">
<up-icon name="clock" color="#6B7280" size="28rpx"></up-icon>
<view class="num">{{formatdate(item.push_date) }}</view>
</view>
</view>
</view>
</z-paging>
</view>
<up-popup
:round="10"
zIndex="9"
:show="showCase"
mode="bottom"
@close="closeCase"
>
<view class="votepop casepop">
<view class="titlebox">
<view class="left" @click="showCase = false">取消</view>
<view class="left continue" @click="continueCase" v-show="level != 3"
>继续选择</view
>
<view class="right" @click="confirmCase">确定</view>
</view>
<view class="casecon">
<view v-show="level == 1" >
<up-radio-group
v-model="caseValue1"
iconPlacement="right"
placement="column"
>
<view
class="column"
v-for="item in labelObj.list1"
:key="item.app_iden"
>
<up-radio
activeColor="#3CC7C0 "
:label="item.label_name"
:name="item.app_iden"
></up-radio>
</view>
</up-radio-group>
</view>
<view v-show="level == 2" >
<up-radio-group
v-model="caseValue2"
iconPlacement="right"
placement="column"
>
<view
class="column"
v-for="item in labelObj.list2"
:key="item.app_iden"
>
<up-radio
activeColor="#3CC7C0 "
:label="item.label_name"
:name="item.app_iden"
></up-radio>
</view>
</up-radio-group>
</view>
<view v-show="level == 3" >
<up-radio-group
v-model="caseValue3"
iconPlacement="right"
placement="column"
>
<view
class="column"
v-for="item in labelObj.list2"
:key="item.app_iden"
>
<up-radio
activeColor="#3CC7C0 "
:label="item.label_name"
:name="item.app_iden"
></up-radio>
</view>
</up-radio-group>
</view>
</view>
</view>
</up-popup>
</template>
<script setup>
import { ref, reactive } from "vue";
import navBarSearch from "@/components/navBarSearch/navBarSearch.vue";
import list from "@/uni_modules/z-paging/components/z-paging/z-paging";
import api from "@/api/api";
import { onLoad } from "@dcloudio/uni-app";
import dayjs from "dayjs";
import switchImg from "@/static/switch.png";
import caseImg from "@/static/caseIcon.png";
import navTo from "@/utils/navTo.js";
const paging = ref(null);
const uDropdownRef=ref(null);
const dataList = ref([]);
const total = ref(0);
const keyWord = ref("");
const label_iden = ref("");
const isArticle=ref(true);
const hospital_id=ref('');
const hospital_name=ref('');
const doctor_id=ref('');
const doctor_name=ref('');
const numInfo=reactive({});
const searchInfo=reactive({})
const navName=ref('肝胆相照临床病例库')
const options= ref([
{
label: "正序",
value: 'asc',
},
{
label: "倒序",
value: 'desc',
},
]);
const isSearch=ref(false);
const order=reactive({
read_num:'',
push_date:''
})
const showCase = ref(false);
const canOpenCase = ref(false);
const caseValue1 = ref("");
const caseValue2 = ref("");
const caseValue3 = ref("");
const level = ref(1);
const labelObj = reactive({
list1: [],
list2: [],
list3: [],
});
const getCaseLabel = (lev,pid=0) => {
api.getCaseLabel({
pid:pid
}).then((res) => {
if (lev == 1) {
labelObj.list1 = res.data.data;
} else if (lev == 2) {
labelObj.list2 = res.data.data;
} else if (lev == 3) {
labelObj.list3 = res.data.data;
}
level.value = lev;
});
};
const openCase=()=>{
getCaseLabel(1,0)
showCase.value = true;
}
const confirmCase = () => {
if (level.value == 1 && caseValue1.value == "") {
uni.showToast({ title: "请选择疾病", icon: "none" });
return false;
}
if (level.value == 2 && caseValue2.value == "") {
uni.showToast({ title: "请选择疾病", icon: "none" });
return false;
}
if (level.value == 3 && caseValue3.value == "") {
uni.showToast({ title: "请选择疾病", icon: "none" });
return false;
}
showCase.value = false;
if(level.value == 1){
label_iden.value = caseValue1.value
}
if(level.value == 2 ){
label_iden.value = caseValue2.value
}
if(level.value == 3 ){
label_iden.value = caseValue3.value
}
};
const continueCase = () => {
if (level.value == 1 && caseValue1.value == "") {
uni.showToast({ title: "请选择疾病", icon: "none" });
return false;
}
if (level.value == 2 && caseValue2.value == "") {
uni.showToast({ title: "请选择疾病", icon: "none" });
return false;
}
if (level.value == 3 && caseValue3.value == "") {
uni.showToast({ title: "请选择疾病", icon: "none" });
return false;
}
if(level.value == 1 ){
getCaseLabel(2,caseValue1.value);
}else if(level.value == 2 ){
getCaseLabel(3,caseValue2.value);
}
paging.value.reload();
};
const closeCase = () => {
showCase.value = false;
};
const changeWord=(value)=>{
keyWord.value=value;
isSearch.value=true;
paging.value.reload()
}
onLoad((options) => {
if(options.keyWord){
keyWord.value = options.keyWord;
};
if(options.order=='new'){
order.push_date='asc'
};
if(options.order=='read'){
order.read_num='desc'
};
if(options.order=='video'){
isArticle.value=false;
}
if(options.doctor_id){
doctor_id.value=options.doctor_id;
doctor_name.value=options.doctor_name
navName.value= doctor_name.value+'临床病例库'
getStaticDoctor(doctor_id.value)
}
if(options.hospital_id){
hospital_id.value=options.hospital_id;
hospital_name.value=options.hospital_name;
navName.value= hospital_name.value+'临床病例库'
getStaticHospital(hospital_id.value)
}
if(options.case_id){
label_iden.value=options.case_id;
navName.value= options.case_name+'临床病例库'
getStaticSick(label_iden.value)
}else{
canOpenCase.value = true;
}
});
const change=(e)=>{
paging.value.reload();
}
const formatdate=(date)=>{
return dayjs(date).format('YYYY-MM-DD')
}
const goDetail=(id)=>{
console.log(11111)
console.log(id)
let type=isArticle.value?'article':'video'
navTo({
url: `/pages/detail/detail?id=${id}&type=${type}`
})
}
const swicthType=()=>{
isArticle.value=!isArticle.value;
dataList.value=[];
order.read_num='';
order.push_date='';
paging.value.reload();
}
const searchArticle =(params) => {
let searchForm={
keyword: keyWord.value,
hospital_id:hospital_id.value,
doctor_id:doctor_id.value
}
if(isSearch.value){
searchForm.is_need_num=1;
}
if(!order.read_num){
delete order.read_num
}
if(!order.push_date){
delete order.push_date
}
if(order.read_num || order.push_date){
searchForm.order=order
}
api.searchArticle({
...searchForm,
...params
}).then((res)=>{
paging.value.complete(res.data.data.data);
total.value=res.data.data.total;
searchInfo.search_video_num=res.data.data.search_video_num;
searchInfo.search_article_num=res.data.data.search_article_num;
}).catch(err=>{
paging.value.complete(false);
})
}
const searchVideo = async(params) => {
let searchForm={
keyword: keyWord.value,
hospital_id:hospital_id.value,
doctor_id:doctor_id.value
}
if(isSearch.value){
searchForm.is_need_num=1;
}
if(!order.read_num){
delete order.read_num
}
if(!order.push_date){
delete order.push_date
}
if(order.read_num || order.push_date){
searchForm.order=order
}
api.searchVideo({
...searchForm,
...params
}).then((res)=>{
paging.value.complete(res.data.data.data);
total.value=res.data.data.total;
searchInfo.search_video_num=res.data.data.search_video_num;
searchInfo.search_article_num=res.data.data.search_article_num;
}).catch(err=>{
paging.value.complete(false);
})
}
const getStaticDoctor=(id)=>{
api.getStaticDoctor(id).then((res)=>{
let result=res.data.data;
if(result){
Object.assign(numInfo,result);
}else{
Object.assign(numInfo,{
article_num: 0,
article_read_num: 0,
video_collect_num: 0,
video_num: 0,
video_read_num: 0,
});
}
})
}
const getStaticSick=(id)=>{
api.getStaticSick({
label_iden:id
}).then((res)=>{
let result=res.data.data;
if(result){
Object.assign(numInfo,result);
}else{
Object.assign(numInfo,{
article_num: 0,
article_read_num: 0,
video_collect_num: 0,
video_num: 0,
video_read_num: 0,
});
}
})
}
const getStaticHospital=(id)=>{
api.getStaticHospital(id).then((res)=>{
let result=res.data.data;
if(result){
Object.assign(numInfo,result);
}else{
Object.assign(numInfo,{
article_num: 0,
article_read_num: 0,
video_collect_num: 0,
video_num: 0,
video_read_num: 0,
});
}
})
}
const queryList = (pageNo, pageSize) => {
console.log(666666);
const params = {
page: pageNo,
page_size: pageSize,
};
isArticle.value?searchArticle(params):searchVideo(params)
};
</script>
<style lang="scss" scoped>
.bar {
width: 100%;
background: #f9fafb;
height: 20rpx;
}
.votepop {
.confirm {
margin: 39rpx 30rpx 0;
height: 92rpx;
background: #3cc7c0;
border-radius: 15rpx;
display: flex;
align-items: center;
font-size: 31rpx;
color: #ffffff;
justify-content: center;
}
.del {
margin: 30rpx 30rpx 30rpx;
height: 92rpx;
background: #fff;
border-radius: 15rpx;
font-size: 31rpx;
color: #666666;
display: flex;
align-items: center;
justify-content: center;
}
.tips {
margin-top: 30rpx;
font-size: 27rpx;
color: #9ca3af;
line-height: 38rpx;
padding: 0 30rpx;
}
.add {
margin: 0 30rpx;
display: flex;
align-items: center;
height: 92rpx;
justify-content: center;
background: #f5f5f5;
border-radius: 15rpx;
font-size: 31rpx;
color: #4b5563;
.desc {
margin-left: 10rpx;
}
}
.titlebox {
padding: 0 30rpx;
height: 86rpx;
display: flex;
align-items: center;
justify-content: space-between;
border-bottom: 2rpx solid #f3f4f6;
.left {
font-size: 31rpx;
color: #4b5563;
}
.right {
font-size: 31rpx;
color: #3cc7c0;
}
}
.votecon {
max-height: calc(100vh - 530rpx);
overflow-y: scroll;
.row {
display: flex;
align-items: center;
.iconbox {
margin-left: 15rpx;
align-items: center;
}
}
.titlebox {
border: none;
margin: 30rpx 0 20rpx;
.title {
font-size: 31rpx;
color: #111827;
}
.desc {
font-size: 27rpx;
color: #9ca3af;
}
}
}
}
.casepop{
display: flex;
flex-direction: column;
max-height: calc(100vh - 400rpx);
.continue{
color: #2878ff !important;
}
}
.casecon {
flex:1;
overflow-y: scroll;
padding-top: 10rpx;
min-height: 350rpx;
.column {
padding: 0 30rpx;
border-bottom: 2rpx solid #e5e7eb;
}
}
.databox {
height: 162rpx;
background: #ffffff;
display: flex;
margin-bottom: 20rpx;
// padding: 0 30rpx;
justify-content: space-between;
.cell {
flex: 1;
padding: 35rpx 0;
text-align: center;
.num {
font-size: 38rpx;
color: #3cc7c0;
}
.name {
margin-top: 18rpx;
font-size: 28rpx;
color: #4b5563;
}
}
}
.filterbox{
:deep(.u-flex) {
display: flex;
flex-direction:row;
overflow: hidden;
}
:deep(.u-dropdown__menu){
background: #fff;
z-index:1;
margin-left: 160rpx;
}
:deep(.u-dropdown__menu__item__text){
font-size: 14px!important;
}
:deep(.u-dropdown__menu__item){
height:74rpx;
padding:0 20rpx;
background: #F3F4F6;
border-radius: 15rpx;
flex:none;
margin-left: 60rpx;
}
display: flex;
height:128rpx;
align-items: center;
position: relative;
.type{
position: absolute;
left:30rpx;
top:24rpx;
color: #606266;
font-size:14px;
display: flex;
justify-content: center;
align-items: center;
background: #F3F4F6;
border-radius: 15rpx;
height: 74rpx;
padding:0 25rpx;
z-index:2;
}
.casesdown{
font-size:14px;
color: #606266;
position: absolute;
left:190rpx;
top:24rpx;
display: flex;
justify-content: center;
align-items: center;
background: #F3F4F6;
border-radius: 15rpx;
height: 74rpx;
padding:0 25rpx;
z-index:2;
}
}
.filterbox.active{
:deep(.u-flex) {
display: flex;
flex-direction:row;
overflow: hidden;
}
:deep(.u-dropdown__menu){
background: #fff;
z-index:1;
margin-left: 330rpx;
}
:deep(.u-dropdown__menu__item__text){
font-size: 14px!important;
}
:deep(.u-dropdown__menu__item){
height:74rpx;
padding:0 20rpx;
background: #F3F4F6;
border-radius: 15rpx;
flex:none;
margin-left: 20rpx;
}
display: flex;
height:128rpx;
align-items: center;
position: relative;
.type{
position: absolute;
left:30rpx;
top:24rpx;
color: #606266;
font-size: 14px;
display: flex;
justify-content: center;
align-items: center;
background: #F3F4F6;
border-radius: 15rpx;
height: 74rpx;
padding:0 25rpx;
z-index:2;
}
.casesdown{
font-size: 14px;
color: #606266;
position: absolute;
left:190rpx;
top:24rpx;
display: flex;
justify-content: center;
align-items: center;
background: #F3F4F6;
border-radius: 15rpx;
height: 74rpx;
padding:0 25rpx;
z-index:2;
}
}
.u-page {
.deal {
margin-top: 20rpx;
display: flex;
color: #6b7280;
font-size: 24rpx;
justify-content: space-between;
.left {
display: flex;
align-items: center;
}
.collect {
display: flex;
align-items: center;
}
.eyebox {
width: 160rpx;
display: flex;
align-items: center;
}
.time {
display: flex;
align-items: center;
}
.num {
margin-left: 8rpx;
}
}
.item {
border-bottom: 1rpx solid #f3f4f6;
padding: 30rpx;
.title {
font-size: 30rpx;
color: #111827;
line-height: 46rpx;
}
}
.tagsbox {
margin-top: 20rpx;
display: flex;
.tag {
padding: 0 10rpx;
margin-right: 16rpx;
height: 46rpx;
line-height: 46rpx;
text-align: center;
background: rgba(60, 199, 192, 0.1);
border-radius: 8rpx;
font-weight: 400;
font-size: 24rpx;
color: #3cc7c0;
}
}
}
.detail {
background: #f9f9f9;
padding: 12rpx 30rpx;
.desc {
font-size: 26rpx;
color: #4b5563;
line-height: 40rpx;
}
.red{
color: #FF0000;
}
}
</style>