<template>
<view class="bg-white text-center" style="height: 100%;">
<view class="noneInfo" v-if="list.length==0">
<view class="noneInfoImg">
</view>
<view class="margin-top-sm">
暂无相关信息
</view>
</view>
<!-- 下拉刷新组件 -->
<mix-pulldown-refresh v-if="list.length>0" ref="mixPulldownRefresh" class="panel-content" :top="0" @refresh="onPulldownReresh"
@setEnableScroll="setEnableScroll">
<!-- 内容部分 -->
<scroll-view class="panel-scroll-box" :scroll-y="enableScroll" @scrolltolower="loadMore">
<view v-for="(item, index) in list" :key="index" class="news-item" @click.stop="navToDetails(index)">
<text :class="['title', 'title'+item.contentLayout]">{{item.articleTitle}}</text>
<view class="video-wrapper" v-if="item.contentLayout == 4" style="margin-top:20upx">
<video class="video" :src="imgUrl+item.articleContent" controls objectFit="fill" :autoplay="false"></video>
</view>
<view v-if="item.articleCovers.length > 0" :class="['img-list', 'img-list'+item.contentLayout, item.articleCovers.length == 1 && item.contentLayout==2 ? 'img-list-single': '']">
<view v-for="(imgItem, imgIndex) in item.articleCovers" :key="imgIndex" :class="['img-wrapper', 'img-wrapper'+item.contentLayout, item.articleCovers.length == 1 && item.contentLayout==2 ? 'img-wrapper-single': '']">
<image class="img" v-if="item.contentLayout == 3" mode="aspectFit" :src="imgUrl+imgItem"></image>
<image class="img" v-if="item.contentLayout == 2" mode="scaleToFill" :src="imgUrl+imgItem"></image>
</view>
</view>
<view v-if="item.articleCovers.length == 0 && item.contentLayout != 4" class="img-empty"></view>
<view :class="['bot', 'bot'+item.contentLayout]">
<text :class="['author', 'author'+item.contentLayout]">{{item.hospitalName}}</text>
<text class="time">{{item.createTime ? item.createTime.split(" ")[0]:''}}</text>
</view>
</view>
<!-- 上滑加载更多组件 -->
<mix-load-more :status="loadMoreStatus"></mix-load-more>
</scroll-view>
</mix-pulldown-refresh>
</view>
</template>
<script>
import mixPulldownRefresh from '@/components/mix-pulldown-refresh/mix-pulldown-refresh';
import mixLoadMore from '@/components/mix-load-more/mix-load-more';
let windowWidth = 0,
scrollTimer = false,
tabBar;
export default {
components: {
mixPulldownRefresh,
mixLoadMore,
},
data() {
return {
imgUrl: "http://139.9.163.126/gastric/",
tabCurrentIndex: 0, //当前选项卡索引
loadMoreStatus:0, //加载更多 0加载前，1加载中，2没有更多了
scrollLeft: 0, //顶部选项卡左滑距离
enableScroll: true,
list: [],
pageNum: 1,
pageSize: 10
}
},
computed: {},
mounted() {
windowWidth = uni.getSystemInfoSync().windowWidth;
this.loadNewsList()
},
methods: {
//新闻列表
loadNewsList(type) {
const data = {
params: {
pageNum: this.pageNum,
pageSize: this.pageSize
}
}
this.$http.get(`/gastric-cancer-data/favorite/page`, data).then(res => {
if (res.data.code == 1) {
this.list = res.data.object.list
if (type == 'refresh') {
this.$refs.mixPulldownRefresh && this.$refs.mixPulldownRefresh.endPulldownRefresh();
}
if (type == 'add') {
this.loadMoreStatus = 0
}
if(res.data.object.totalCount <=10){
this.loadMoreStatus = 2
}
}
})
},
//新闻详情
navToDetails(index) {
let id = this.list[index].articleId
uni.navigateTo({
url: `/educationViews/details/index?id=${id}`
})
},
//下拉刷新
onPulldownReresh() {
this.pageNum = 1
this.list = []
this.loadNewsList('refresh');
},
//上滑加载
loadMore() {
this.loadMoreStatus = 1
this.pageNum = this.pageNum + 1
this.loadNewsList('add');
},
//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
setEnableScroll(enable) {
if (this.enableScroll !== enable) {
this.enableScroll = enable;
}
},
}
}
</script>
<style lang="scss">
.noneInfo {
margin-top: 150upx;
.noneInfoImg {
background-image: url('../../static/noneInfo.png');
height: 128upx;
background-position: center;
background-repeat: no-repeat;
}
}
</style>
<style lang='scss' scoped>
page,
.content {
background-color: #f8f8f8;
height: 100%;
overflow: hidden;
text-align: left;
}
.content {
height: 100%;
}
.swiper-box {
height: 100%;
}
.panel-scroll-box {
height: 100%;
.panel-item {
background: #fff;
padding: 30px 0;
border-bottom: 2px solid #000;
}
}
/**
* 新闻列表 直接拿的nvue样式修改，,
* 一共需要修改不到10行代码, 另外px需要直接修改为upx，只有单位不一样，计算都是一样的
* 吐槽：难道不能在编译的时候把nuve中的upx转为px? 这样就不用修改单位了
*/
.video-wrapper {
width: 100%;
height: 440upx;
.video {
width: 100%;
}
}
view {
display: flex;
flex-direction: column;
}
.img {
width: 100%;
height: 100%;
}
.news-item {
position: relative;
}
/* 修改结束 */
/* 新闻列表 emmm 仅供参考 */
.news-item {
width: 750upx;
padding: 24upx 30upx;
padding-bottom: 0;
background-color: #fff;
text-align: left;
}
.title {
font-size: 32upx;
color: black;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
white-space: pre-wrap;
word-break: break-all;
line-height: 46upx;
}
.bot {
flex-direction: row;
border-bottom: 1upx solid rgba(0, 0, 0, 0.25);
padding-bottom: 24upx;
}
.author {
font-size: 24upx;
color: #aaa;
max-width: 580upx;
min-width: 580upx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.author2 {
max-width: 360upx;
min-width: 360upx;
}
.time {
font-size: 24upx;
color: #aaa;
min-width: 270upx;
}
.img-list {
flex-shrink: 0;
flex-direction: row;
background-color: #fff;
width: 200upx;
height: 140upx;
}
.img-wrapper {
flex: 1;
flex-direction: row;
height: 140upx;
position: relative;
overflow: hidden;
}
.img {
flex: 1;
}
.img-empty {
height: 20upx;
}
.img-list1 {
position: absolute;
left: 30upx;
top: 24upx;
}
/* .title1{
padding-left: 240upx;
}
.bot1{
padding-left: 240upx;
margin-top: 20upx;
} */
/* 图在左 */
.img-list2 {
position: absolute;
left: 30upx;
top: 24upx;
}
.title2 {
padding-left: 220upx;
height: 92upx;
}
.bot2 {
padding-left: 220upx;
margin-top: 20upx;
}
/* 图 */
.img-list3 {
width: 700upx;
margin: 16upx 0upx;
}
.img-wrapper3 {
margin-right: 12upx;
}
/* 底部大图 */
/* .img-list-single{
width: 690upx;
height: 300upx;
margin: 16upx 0upx;
}
.img-wrapper-single{
height: 300upx;
margin-right: 0upx;
}
*/
.video-tip {
/* position: absolute;
left: 0;
top: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3); */
}
.video-tip-icon {
width: 60upx;
height: 60upx;
}
</style>