500 lines
10 KiB
Vue
500 lines
10 KiB
Vue
<template>
|
||
<view class="upage">
|
||
<navBar :navName="'肝胆相照病例交流园地'" :type="'caseTalk'"></navBar>
|
||
<view class="databox">
|
||
<view class="cell">
|
||
<view class="num">{{ numInfo.exchange_num}}</view>
|
||
<view class="name">病例数</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="num">{{numInfo.exchange_comment_num}}</view>
|
||
<view class="name">互动数</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="num">{{ numInfo.exchange_read_num }}</view>
|
||
<view class="name">浏览量</view>
|
||
</view>
|
||
</view>
|
||
<view class="bar"></view>
|
||
<view class="box">
|
||
<view class="special mostread" v-if="most_read_articles.length>0">
|
||
<view class="titlebox">
|
||
<view class="title">精选病例</view>
|
||
<view class="more" @click="goList('read')">
|
||
<view class="morename">查看更多</view>
|
||
<u-icon name="arrow-right" size="16" color="#3CC7C0"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view class="cell" v-for="item in most_read_articles" :key="item.exchange_id" @click="goDetail(item.exchange_id)">
|
||
<view class="circle"></view>
|
||
<view class="title ellipsis-one-lines">{{ item.exchange_title }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bar"></view>
|
||
<view class="record special">
|
||
<view class="titlebox">
|
||
<view class="title">最新收录</view>
|
||
<view class="more" @click="goList('new')">
|
||
<view class="morename">查看更多</view>
|
||
<u-icon name="arrow-right" size="16" color="#3CC7C0"></u-icon>
|
||
</view>
|
||
</view>
|
||
<view class="list">
|
||
<view
|
||
class="cell"
|
||
v-for="(item) in new_articles"
|
||
:key="item.exchange_id"
|
||
|
||
>
|
||
<view class="title ellipsis-two-lines" @click="goDetail(item.exchange_id)">{{
|
||
item.exchange_title
|
||
}}</view>
|
||
<view class="doctor" @click="goDetail(item.exchange_id)">
|
||
<up--image
|
||
:src="item.avatar ? item.avatar : headImg"
|
||
width="46rpx"
|
||
height="46rpx"
|
||
radius="50%"
|
||
></up--image>
|
||
<view class="name"
|
||
>{{ item.user_name }}（{{ item.hospital_name }}）</view
|
||
>
|
||
</view>
|
||
<view class="content ellipsis-two-lines" @click="goDetail(item.exchange_id)"> {{ htmlToText(item.exchange_content) }} </view>
|
||
|
||
<view
|
||
class="imgbox"
|
||
@click="goDetail(item.exchange_id)"
|
||
v-if="
|
||
item.exchange_content_image &&
|
||
item.exchange_content_image.length > 0
|
||
"
|
||
>
|
||
<view
|
||
class="imgcell"
|
||
v-for="unit in item.exchange_content_image.slice(0,3)"
|
||
:key="unit"
|
||
>
|
||
<up--image
|
||
:src="unit"
|
||
radius="10"
|
||
width="220rpx"
|
||
height="220rpx"
|
||
>
|
||
<view slot="error" style="font-size: 24rpx">加载失败</view>
|
||
</up--image>
|
||
</view>
|
||
</view>
|
||
<view class="videocon" @click="goDetail(item.exchange_id)">
|
||
<view
|
||
class="imgbox"
|
||
@click="goDetail(item.exchange_id)"
|
||
v-if="
|
||
item.exchange_content_video &&
|
||
item.exchange_content_video.length > 0
|
||
"
|
||
>
|
||
<view class="videomask"></view>
|
||
<video
|
||
:key="index"
|
||
v-for="(videoCell, index) in item.exchange_content_video.slice(0,1)"
|
||
class="myVideo"
|
||
|
||
:src="videoCell"
|
||
@error="videoErrorCallback"
|
||
controls
|
||
></video>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="tagbox" @click="goDetail(item.exchange_id)" v-if="item.exchange_label">
|
||
<view
|
||
class="tag"
|
||
v-for="cell in item.exchange_label"
|
||
:key="cell.exchange_label_id"
|
||
>{{ cell.label_name }}</view
|
||
>
|
||
</view>
|
||
<view class="deal" @click="goDetail(item.exchange_id)">
|
||
<view class="left">
|
||
<view class="eyebox item">
|
||
<up-icon name="eye" color="#4B5563" size="28rpx"></up-icon>
|
||
<view class="num">{{ item.read_num }}</view>
|
||
</view>
|
||
<view class="collect item" v-if="item.collect_num>0">
|
||
<up-icon
|
||
name="heart"
|
||
color="#4B5563"
|
||
size="28rpx"
|
||
></up-icon>
|
||
<view class="num">{{ item.collect_num }}</view>
|
||
</view>
|
||
<view class="chat item" v-if="item.comment_num>0">
|
||
<up-icon name="chat" color="#4B5563" size="28rpx"></up-icon>
|
||
<view class="num">{{ item.comment_num }}</view>
|
||
</view>
|
||
</view>
|
||
<view class="time">
|
||
<up-icon name="clock" color="#4B5563" size="28rpx"></up-icon>
|
||
<view class="num">{{ formatdate(item.push_date) }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<tabBar :value="2"></tabBar>
|
||
<view class="publish" @click="goPublish">
|
||
<up-icon name="plus" color="#fff" size="18"></up-icon>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import navBar from "@/components/navBar/navBar.vue";
|
||
import tabBar from "@/components/tabBar/tabBar.vue";
|
||
import headImg from "@/static/headImg.png";
|
||
import dayjs from "dayjs";
|
||
import navTo from "@/utils/navTo.js";
|
||
import api from "@/api/api";
|
||
import { reactive,ref } from 'vue';
|
||
import { onShow,onLoad } from "@dcloudio/uni-app";
|
||
const numInfo=reactive({})
|
||
const most_read_articles=ref([]);
|
||
const new_articles=ref([]);
|
||
|
||
const hasUse=ref(false);
|
||
const formatdate = (date) => {
|
||
return dayjs(date).format('YYYY-MM-DD')
|
||
};
|
||
// const goList = () => {
|
||
// navTo({
|
||
// url: '/pages/specialList/specialList'
|
||
// })
|
||
// };
|
||
const goList=(type)=>{
|
||
if(type=='read'){
|
||
navTo({
|
||
url:'/pages/specialList/specialList?is_selected=1'
|
||
})
|
||
}else{
|
||
navTo({
|
||
url:'/pages/specialList/specialList'
|
||
})
|
||
}
|
||
|
||
};
|
||
const getStatic=()=>{
|
||
api.getExchangeStatic().then(res=>{
|
||
let result=res.data.data;
|
||
Object.assign(numInfo,result);
|
||
})
|
||
}
|
||
const goDetail = (id) => {
|
||
navTo({
|
||
url: `/pages/detail/detail?id=${id}&type=exchange`,
|
||
});
|
||
};
|
||
const videoErrorCallback = (e) => {
|
||
// uni.showModal({
|
||
// content: e.target.errMsg,
|
||
// showCancel: false
|
||
// })
|
||
};
|
||
const searchList = async () => {
|
||
let searchForm = {
|
||
page: 1,
|
||
page_size: 20,
|
||
order:{
|
||
push_date:'desc'
|
||
}
|
||
};
|
||
|
||
api.searchExchage({
|
||
...searchForm
|
||
})
|
||
.then((res) => {
|
||
new_articles.value=res.data.data.data;
|
||
})
|
||
.catch((err) => {
|
||
|
||
});
|
||
};
|
||
const htmlToText=(html)=>{
|
||
return html
|
||
.replace(/<[^>]*>/g, '') // 移除所有HTML标签
|
||
.replace(/ /gi, ' ') // 将HTML实体转换为字符
|
||
.replace(/<br\s*\/?>/gi, '\n').replace(/<img\s[^>]*>/gi, '') // 移除<img>标签及其内容
|
||
.replace(/<video[^>]*>[\s\S]*?/gi, ''); // 将换行符替换为实际的换行符
|
||
}
|
||
const goodList=()=>{
|
||
api.searchExchageGood({
|
||
is_selected:1,
|
||
order:{
|
||
push_date:'desc'
|
||
},
|
||
limit:3
|
||
}).then(res=>{
|
||
most_read_articles.value=res.data.data
|
||
})
|
||
}
|
||
const hotList=()=>{
|
||
api.searchExchageHot({
|
||
is_selected:0,
|
||
limit:5,
|
||
page:1,
|
||
|
||
page_size:5
|
||
}).then(res=>{
|
||
})
|
||
}
|
||
const goPublish=()=>{
|
||
navTo({
|
||
url:'/pages/publish/publish'
|
||
})
|
||
}
|
||
onLoad((options)=>{
|
||
console.log(options.from && !hasUse.value)
|
||
if(options.from && !hasUse.value){
|
||
|
||
setTimeout(()=>{
|
||
uni.showToast({
|
||
duration:2000,
|
||
title: "提交成功，请耐心等待审核",
|
||
icon: "none",
|
||
})
|
||
hasUse.value=true;
|
||
},300)
|
||
}
|
||
|
||
})
|
||
onShow(()=>{
|
||
getStatic();
|
||
goodList();
|
||
searchList();
|
||
})
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.publish{
|
||
width: 92rpx;
|
||
height: 92rpx;
|
||
background: #3CC7C0;
|
||
border-radius: 50%;
|
||
position: fixed;
|
||
right:30rpx;
|
||
bottom:180rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.upage {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: calc(100vh - 120rpx);
|
||
}
|
||
.mostread{
|
||
.cell{
|
||
padding: 22rpx 0rpx!important;
|
||
margin:0 30rpx;
|
||
display: flex;
|
||
|
||
}
|
||
}
|
||
.box {
|
||
flex: 1;
|
||
padding-bottom: 30rpx;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.myVideo {
|
||
width: 100%;
|
||
border-radius: 15rpx;
|
||
}
|
||
|
||
.deal {
|
||
padding-top: 20rpx;
|
||
display: flex;
|
||
color: #4B5563;
|
||
font-size: 24rpx;
|
||
justify-content: space-between;
|
||
|
||
.left {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.item {
|
||
width: 100rpx;
|
||
}
|
||
}
|
||
|
||
.collect {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.eyebox,
|
||
.chat {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.time {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.num {
|
||
margin-left: 8rpx;
|
||
}
|
||
}
|
||
|
||
.tagbox {
|
||
margin-top: 24rpx;
|
||
display: flex;
|
||
|
||
.tag {
|
||
height: 54rpx;
|
||
padding: 0 28rpx;
|
||
background: #ECFAF9;
|
||
border-radius: 30rpx;
|
||
margin-right: 12rpx;
|
||
font-size: 27rpx;
|
||
color: #3CC7C0;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
}
|
||
|
||
.doctor {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.record {
|
||
padding-top: 30rpx;
|
||
|
||
.list {
|
||
margin: 30rpx 30rpx;
|
||
|
||
.name {
|
||
padding: 20rpx 0 20rpx 15rpx;
|
||
font-size: 27rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.content {
|
||
font-size: 27rpx;
|
||
color: #666666;
|
||
line-height: 38rpx;
|
||
}
|
||
|
||
.imgbox {
|
||
display: flex;
|
||
margin-top: 24rpx;
|
||
position: relative;
|
||
.videomask{
|
||
position: absolute;
|
||
width:100%;
|
||
height:100%;
|
||
z-index:2;
|
||
}
|
||
.imgcell {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.imgcell:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.special {
|
||
background-color: #fff;
|
||
padding-top: 30rpx;
|
||
|
||
.list {
|
||
margin: 8rpx 0rpx 0;
|
||
.cell {
|
||
padding: 22rpx 30rpx;
|
||
border-bottom: 2rpx solid #f3f4f6;
|
||
|
||
.circle {
|
||
flex-shrink: 0;
|
||
margin-top: 15rpx;
|
||
width: 15rpx;
|
||
height: 15rpx;
|
||
background: #3cc7c0;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.title {
|
||
margin-left: 10rpx;
|
||
font-size: 32rpx;
|
||
color: #000000;
|
||
line-height: 46rpx;
|
||
}
|
||
}
|
||
|
||
.cell:last-child {
|
||
border-bottom: none;
|
||
}
|
||
}
|
||
}
|
||
|
||
.titlebox {
|
||
margin: 0 30rpx;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.more {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.morename {
|
||
margin-right: 10rpx;
|
||
font-size: 28rpx;
|
||
color: #3cc7c0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.bar {
|
||
height: 16rpx;
|
||
background: #f3f4f6;
|
||
}
|
||
|
||
.databox {
|
||
height: 162rpx;
|
||
background: #ffffff;
|
||
display: flex;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
</style> |