427 lines
9.1 KiB
Vue
427 lines
9.1 KiB
Vue
<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"></navBarSearch>
|
||
<view class="tabcon">
|
||
<up-tabs
|
||
:activeStyle="{
|
||
color: '#3CC7C0',
|
||
}"
|
||
:inactiveStyle="{
|
||
color: '#4B5563',
|
||
}"
|
||
lineColor="#3CC7C0"
|
||
lineWidth="155rpx"
|
||
lineHeight="2"
|
||
:list="tabList"
|
||
@click="switchTab"
|
||
></up-tabs>
|
||
</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="deal">
|
||
<view class="time">
|
||
<up-icon name="clock" color="#6B7280" size="28rpx"></up-icon>
|
||
<view class="num">{{ formatdate(item.push_date) }}</view>
|
||
</view>
|
||
<view class="dot">...</view>
|
||
</view>
|
||
<view class="casecontent">
|
||
<view class="author">段钟平(首都医科大学附属北京佑安医院教授</view>
|
||
<view class="content">肝胆相照临床病例库肝胆相照临床病例库肝胆相照临床病例库肝胆相照临床病例库</view>
|
||
</view>
|
||
</view>
|
||
</z-paging>
|
||
</view>
|
||
<!-- 底部操作 -->
|
||
<up-popup
|
||
:zIndex="10"
|
||
:overlayStyle="{ zIndex: 9 }"
|
||
:closeOnClickOverlay="false"
|
||
:show="showDeal"
|
||
:round="10"
|
||
mode="bottom"
|
||
@close="closeDeal"
|
||
@open="openDeal"
|
||
>
|
||
<view class="dealbox">
|
||
<view class="dealcell">收藏</view>
|
||
<view class="dealcell">删除</view>
|
||
<view class="bar"></view>
|
||
<view class="dealcell" @click="closeDeal">取消</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 certImg from "@/static/cert.png";
|
||
const paging = ref(null);
|
||
const uDropdownRef = ref(null);
|
||
const dataList = ref([]);
|
||
const total = ref(0);
|
||
const value = ref("");
|
||
const keyWord = ref("");
|
||
const page = ref(1);
|
||
const isArticle = ref(true);
|
||
const hospital_id = ref("");
|
||
const hospital_name = ref("");
|
||
const doctor_id = ref("");
|
||
const doctor_name = ref("");
|
||
const numInfo = reactive({});
|
||
const navName = ref("肝胆相照临床病例库");
|
||
const showDeal = ref(true);
|
||
const closeDeal=()=>{
|
||
showDeal.value = false;
|
||
};
|
||
const openDeal=()=>{
|
||
showDeal.value = true;
|
||
};
|
||
const options = ref([
|
||
{
|
||
label: "正序",
|
||
value: "asc",
|
||
},
|
||
{
|
||
label: "倒序",
|
||
value: "desc",
|
||
},
|
||
]);
|
||
const tabList = ref([
|
||
{
|
||
name: "病例交流",
|
||
},
|
||
{
|
||
name: "文章病例库",
|
||
},
|
||
{
|
||
name: "视频病例库",
|
||
},
|
||
]);
|
||
const order = reactive({
|
||
read_num: "",
|
||
push_date: "",
|
||
});
|
||
const switchTab = (index) => {
|
||
console.log("item", index);
|
||
};
|
||
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 + "临床病例库";
|
||
getStaticDoctor(hospital_id.value);
|
||
}
|
||
});
|
||
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";
|
||
uni.navigateTo({
|
||
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,
|
||
doctor_id: doctor_id.value,
|
||
hospital_id: hospital_id.value,
|
||
};
|
||
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;
|
||
})
|
||
.catch((err) => {
|
||
paging.value.complete(false);
|
||
});
|
||
};
|
||
|
||
const searchVideo = async (params) => {
|
||
let searchForm = {
|
||
keyword: keyWord.value,
|
||
};
|
||
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({
|
||
...params,
|
||
})
|
||
.then((res) => {
|
||
paging.value.complete(res.data.data.data);
|
||
total.value = res.data.data.total;
|
||
})
|
||
.catch((err) => {
|
||
paging.value.complete(false);
|
||
});
|
||
};
|
||
const getStaticDoctor = (id) => {
|
||
api.getStaticDoctor(id).then((res) => {
|
||
let result = res.data.data;
|
||
Object.assign(numInfo, result);
|
||
});
|
||
};
|
||
const getStaticHospital = (id) => {
|
||
api.getStaticHospital(id).then((res) => {
|
||
let result = res.data.data;
|
||
Object.assign(numInfo, result);
|
||
});
|
||
};
|
||
|
||
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;
|
||
}
|
||
.dealbox {
|
||
.dealcell {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 112rpx;
|
||
font-size: 32rpx;
|
||
color: rgba(0, 0, 0, 0.9);
|
||
border-bottom: 2rpx solid #efefef;
|
||
}
|
||
}
|
||
.tabcon {
|
||
margin: 0 20rpx;
|
||
}
|
||
.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 {
|
||
display: flex;
|
||
height: 128rpx;
|
||
align-items: center;
|
||
position: relative;
|
||
.type {
|
||
position: absolute;
|
||
left: 30rpx;
|
||
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 {
|
||
:deep(.u-flex) {
|
||
display: flex;
|
||
flex-direction: row;
|
||
overflow: hidden;
|
||
}
|
||
:deep(.u-dropdown__menu) {
|
||
background: #fff;
|
||
z-index: 1;
|
||
margin-left: 180rpx;
|
||
}
|
||
:deep(.u-dropdown__menu__item) {
|
||
height: 74rpx;
|
||
padding: 0 20rpx;
|
||
background: #f3f4f6;
|
||
border-radius: 15rpx;
|
||
flex: none;
|
||
margin-left: 60rpx;
|
||
}
|
||
.casecontent{
|
||
margin-top: 16rpx;
|
||
padding:24rpx 30rpx;
|
||
border-radius: 16rpx;
|
||
border: 2rpx solid #E5E7EB;
|
||
.author{
|
||
font-size: 26rpx;
|
||
color: #666666;
|
||
}
|
||
.content{
|
||
margin-top: 10rpx;
|
||
font-size: 30rpx;
|
||
color: #333333;
|
||
line-height: 46rpx;
|
||
}
|
||
}
|
||
.deal {
|
||
margin-top: 20rpx;
|
||
display: flex;
|
||
color: #6b7280;
|
||
font-size: 24rpx;
|
||
justify-content: space-between;
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.recored {
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 31rpx;
|
||
color: #3cc7c0;
|
||
}
|
||
.collect {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.eyebox {
|
||
width: 160rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
.dot{
|
||
font-size: 34rpx;
|
||
}
|
||
.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> |