356 lines
7.6 KiB
Vue
356 lines
7.6 KiB
Vue
<template>
|
||
<view class="upage">
|
||
<navBar :navName="'肝胆相照病例交流园地'" :type="'caseTalk'"></navBar>
|
||
<view class="databox">
|
||
<view class="cell">
|
||
<view class="num">{{ numInfo.exchange_collect_num}}</view>
|
||
<view class="name">病例数</view>
|
||
</view>
|
||
<view class="cell">
|
||
<view class="num">{{ numInfo.exchange_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">
|
||
<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.article_id">
|
||
<view class="circle"></view>
|
||
<view class="title">{{ item.article_title }}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="bar"></view>
|
||
<view class="record">
|
||
<view class="titlebox">
|
||
<view class="title">最新收录</view>
|
||
<view class="more" @click="goList('mew')">
|
||
<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.article_id">
|
||
<view class="title">{{ item.article_title }}</view>
|
||
<view class="doctor" v-for="cell in item.autor">
|
||
<up--image :src="headImg" width="46rpx" height="46rpx" radius="50%"></up--image>
|
||
<view class="name">{{cell.doctor_name}}（{{cell.hospital_name}}）</view>
|
||
</view>
|
||
<view class="content">
|
||
嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎嘎XXXXX
|
||
</view>
|
||
<view class="imgbox">
|
||
<view class="imgcell">
|
||
<up--image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="10" width="220rpx"
|
||
height="220rpx">
|
||
<view slot="error" style="font-size: 24rpx;">加载失败</view>
|
||
</up--image>
|
||
</view>
|
||
<view class="imgcell">
|
||
<up--image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="10" width="220rpx"
|
||
height="220rpx">
|
||
<view slot="error" style="font-size: 24rpx;">加载失败</view>
|
||
</up--image>
|
||
</view>
|
||
<view class="imgcell">
|
||
<up--image src="https://cdn.uviewui.com/uview/album/1.jpg" radius="10" width="220rpx"
|
||
height="220rpx">
|
||
<view slot="error" style="font-size: 24rpx;">加载失败</view>
|
||
</up--image>
|
||
</view>
|
||
</view>
|
||
<view class="imgbox">
|
||
<video class="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
|
||
@error="videoErrorCallback" controls></video>
|
||
</view>
|
||
<view class="tagbox">
|
||
<view class="tag">标签</view>
|
||
</view>
|
||
<view class="deal">
|
||
<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">
|
||
<up-icon :name="item.is_collect?'heart-fill':'heart'" :color="item.is_collect?'red':'#4B5563'" size="28rpx"></up-icon>
|
||
<view class="num">{{item.collect_num }}</view>
|
||
</view>
|
||
<view class="chat item">
|
||
<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>
|
||
</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 api from "@/api/api";
|
||
import { reactive,ref } from 'vue';
|
||
import { onLoad } from "@dcloudio/uni-app";
|
||
const numInfo=reactive({})
|
||
const most_read_articles=ref([]);
|
||
const new_articles=ref([]);
|
||
|
||
|
||
const formatdate = (date) => {
|
||
return dayjs(date).format('YYYY-MM-DD')
|
||
};
|
||
// const goList = () => {
|
||
// uni.navigateTo({
|
||
// url: '/pages/specialList/specialList'
|
||
// })
|
||
// };
|
||
const goList=(type)=>{
|
||
uni.navigateTo({
|
||
url:'/pages/search/search?order='+type
|
||
})
|
||
};
|
||
const getStatic=()=>{
|
||
api.getExchangeStatic().then(res=>{
|
||
let result=res.data.data;
|
||
Object.assign(numInfo,result);
|
||
})
|
||
}
|
||
const getData = async() => {
|
||
const {data}=await api.getHomeData();
|
||
if(data.code==200){
|
||
most_read_articles.value=data.data.most_read_articles;
|
||
new_articles.value=data.data.new_articles;
|
||
}
|
||
};
|
||
const videoErrorCallback = (e) => {
|
||
uni.showModal({
|
||
content: e.target.errMsg,
|
||
showCancel: false
|
||
})
|
||
};
|
||
|
||
onLoad(()=>{
|
||
console.log('onLoad')
|
||
getStatic();
|
||
getData();
|
||
})
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.upage {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: calc(100vh - 100rpx);
|
||
}
|
||
|
||
.box {
|
||
flex: 1;
|
||
padding-bottom: 30rpx;
|
||
overflow-y: scroll;
|
||
}
|
||
|
||
.myVideo {
|
||
width: 100%;
|
||
border-radius: 15rpx;
|
||
}
|
||
|
||
.deal {
|
||
margin-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;
|
||
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 {
|
||
margin: 20rpx 0 20rpx 15rpx;
|
||
font-size: 27rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
.content {
|
||
font-size: 27rpx;
|
||
color: #666666;
|
||
line-height: 38rpx;
|
||
}
|
||
|
||
.imgbox {
|
||
display: flex;
|
||
margin-top: 24rpx;
|
||
|
||
.imgcell {
|
||
width: 220rpx;
|
||
height: 220rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.imgcell:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.special {
|
||
padding-top: 30rpx;
|
||
|
||
.list {
|
||
margin: 8rpx 30rpx 0;
|
||
|
||
.cell {
|
||
padding: 22rpx 0;
|
||
display: flex;
|
||
border-bottom: 2rpx solid #f3f4f6;
|
||
|
||
.circle {
|
||
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> |