< 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>
load ( ) {
if ( this . count <= this . total - 1 && ! this . loading) {
this . page += 1
this . count += 10
this . getNewsListData ( )
} else {
this . loading = false
}
} ,
< 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>
