<template>
<Modal v-model="showModal" :closable="false" width="80%" class="modal-news">
<div slot="header" style="margin-top: 2vh">
<i class="modal-close" @click="closeModal"></i>
<div>{{ modalName }}</div>
</div>
<div class="news">
<div class="news-left">
<div class="infinite-list-wrapper" style="overflow:auto;height: 70vh">
<ul class="list" v-infinite-scroll="load">
<li :class="isActive !== index ? 'media-list' : 'media-active'" @click="newsClick(index, item)"
v-for="(item, index) in mediumList" :key="index">
<div class="media-item">
<div class="media-title" :title="item.title">
{{ item.title }}
</div>
</div>
<div :class="isActive !== index ? '' : 'media-left-sharp'" v-if="isActive == index ? true : false"></div>
</li>
</ul>
<p v-if="loading" class="news-tip">加载中...</p>
<p v-if="noMore" class="news-tip">没有更多了</p>
</div>
</div>
<div class="news-right">
<div class="platform-right-content">
<vuescroll :ops="ops" style="margin-top: 0.5vh">
<div style="height: 60vh">
<div class="modal-wrap" v-html="selected.content"></div>
</div>
</vuescroll>
</div>
</div>
</div>
<div slot="footer"></div>
</Modal>
</template>
<script>
import vuescroll from "vuescroll";
import {
getNewsList
} from "@/api/serviceSupport";
import { getPolicyNewsList } from "@/api/platform/fillData.js";
export default {
components: {
vuescroll,
},
props: {
total: {
type: Number,
default: 10
},
},
data() {
return {
reqType: '',
count: 0,
loading: false,
showModal: false,
modalName: "",
isActive: 0,
selected: {},
mediumList: [],
page: 1,
pageSize: 10,
newsType: '',
checkState: "",
ops: {
vuescroll: {},
scrollPanel: {
scrollingX: false,
},
rail: {
keepShow: true,
},
bar: {
hoverStyle: true,
onlyShowBarOnScroll: false, //是否只有滚动的时候才显示滚动条
background: "#ccc", //滚动条颜色
opacity: 0.5, //滚动条透明度
},
},
};
},
computed: {
noMore() {
return this.count >= this.total
},
},
mounted() {
console.log(this.total);
},
methods: {
showModalAction(list, index, title) {
this.showModal = true;
this.modalName = title;
this.mediumList = list;
this.isActive = index || 0;
this.modalName = title
this.selected = list[this.isActive];
this.count = this.mediumList.length
this.page = 1
},
//设置接口调用的参数
setData(newsType, checkState, reqType) {
this.newsType = newsType;
this.checkState = checkState;
this.reqType = reqType;
},
closeModal() {
this.showModal = false;
},
//滚动到最底部加载下一页
load() {
if (this.count <= this.total - 1 && !this.loading) {
this.page += 1
this.count += 10
this.getNewsListData()
} else {
this.loading = false
}
},
newsClick(index, item) {
this.isActive = index;
this.selected = item;
},
async getNewsListData() {
this.loading = true
var that = this;
const { data } = await getNewsList({
newsType: this.newsType,
checkState: this.checkState,
page: this.page,
pageSize: this.pageSize,
});
this.loading = false
if (data && data.records.length > 0) {
data.records.map((p) => {
that.mediumList.push({
time: p.publishTime && p.publishTime.substring(0, 10),
title: (p.title && p.title) || "",
newsSourceStr: p.newsSourceStr && p.newsSourceStr,
});
});
}
},
},
};
</script>
<style lang="less" scoped>
.modal-news {
.news-tip {
color: #fff;
text-align: center;
margin: 0.3rem;
}
.modal-title {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.2rem 0.5rem;
.title-bj {
max-width: 90%;
min-width: 50%;
height: 4vh;
display: flex;
align-items: center;
.title-logo {
width: 8px;
height: 8px;
background: #f8de90;
box-shadow: 0px 0px 17px 2px rgba(255, 104, 0, 0.95);
margin-right: 0.3rem;
}
p {
font-size: 0.5rem;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
font-weight: 400;
color: #ffffff;
cursor: pointer;
}
}
}
}
.news {
display: flex;
height: 72vh;
padding: 0 0.5rem;
.news-left {
width: 25%;
height: 100%;
overflow: hidden;
}
.news-right {
width: 75%;
margin-left: 2%;
height: 100%;
}
}
</style>
