193 lines
9.0 KiB
HTML
193 lines
9.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="js/rem.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<div class="area">
|
|
<!-- <div class="area-box" v-for="type in typeList" :class="{active: curType == type.newsDirectoriesId}" @click="changeType(type.newsDirectoriesId)">{{type.directoriesName}}</div>-->
|
|
<div class="area-box" :class="{active: curType == 'b6f8e254-ad9e-47c0-8c16-f7a6085f4cef'}" @click="changeType('b6f8e254-ad9e-47c0-8c16-f7a6085f4cef')">地方剧场</div>
|
|
<div class="area-box" :class="{active: curType == 'ae52c58e-5286-43d9-bff4-2d0257764621'}" @click="changeType('ae52c58e-5286-43d9-bff4-2d0257764621')">敕勒歌</div>
|
|
<!-- <div class="area-box" :class="{active: curType == '8e7e8b5c-cee8-47ed-b5bc-0d41cab29b97'}" @click="changeType('8e7e8b5c-cee8-47ed-b5bc-0d41cab29b97')">全民阅读</div>-->
|
|
<div class="area-box" :class="{active: curType == '93bfb037-12f8-48c3-b4e9-8db10d3f3c1f'}" @click="changeType('93bfb037-12f8-48c3-b4e9-8db10d3f3c1f')">群众文化</div>
|
|
<div class="area-box" :class="{active: curType == 'd3da3e1a-b15d-43ba-82a2-357469021c80'}" @click="changeType('d3da3e1a-b15d-43ba-82a2-357469021c80')">寻根</div>
|
|
<div class="area-box" :class="{active: curType == '74d455b3-02fe-429e-9f28-42dc97641027'}" @click="changeType('74d455b3-02fe-429e-9f28-42dc97641027')">北疆画韵</div>
|
|
<div class="area-box" :class="{active: curType == 'e67e95f7-4a9b-4d58-8d1b-0cb29299514c'}" @click="changeType('e67e95f7-4a9b-4d58-8d1b-0cb29299514c')">遗韵</div>
|
|
<div class="area-box" :class="{active: curType == 'e3e42fb8-50e2-43c8-9d1f-c3df0ff7c862'}" @click="changeType('e3e42fb8-50e2-43c8-9d1f-c3df0ff7c862')">乡村乡俗</div>
|
|
<div class="area-box" :class="{active: curType == '4d097a9f-7507-4499-a707-3fbff788414f'}" @click="changeType('4d097a9f-7507-4499-a707-3fbff788414f')">E行天下</div>
|
|
</div>
|
|
<!-- <div class="area news-area">-->
|
|
<!-- <div class="area-box" :class="{active: page.county == ''}" @click="loadAll">全部</div>-->
|
|
<!-- <div class="area-box" v-for="area in areaList" :class="{active: page.county == area.areaId}" @click="changeArea(area.areaId,area.areaLevel)">{{area.areaName}}</div>-->
|
|
<!-- </div>-->
|
|
<div class="news-list" :style="{'margin-top': toTop}" v-if="newsList && newsList.length > 0">
|
|
<div class="news-list-box" v-for="news in newsList" @click="goDetail(news.newsContentLink, news.templateRecordUrl, news.newsContentType, news.newsContentContent)">
|
|
<img :src="requestUrl + 'news/route/file/downloadfile/true/' + news.newsContentCoverList" alt="">
|
|
<div class="news-list-info">
|
|
<h3>{{news.newsContentTitle}}</h3>
|
|
<p>作者：{{news.newsContentAuthor}}</p>
|
|
</div>
|
|
</div>
|
|
<div class="load-more" v-if="haveMore && newsList && newsList.length > 0" @click="loadMore">加载更多</div>
|
|
</div>
|
|
<div class="no-data" v-else>
|
|
<img src="image/no-data.png" alt="">
|
|
</div>
|
|
<div class="loading" v-if="isLoading">
|
|
<img src="image/loading.gif" alt="">
|
|
</div>
|
|
</div>
|
|
<script src="js/vue.js"></script>
|
|
<script src="js/jquery-2.1.4.min.js"></script>
|
|
<script src="js/ajax.js"></script>
|
|
<script src="js/layer/layer.js"></script>
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
areaList: [],
|
|
typeList: [],
|
|
newsList: [],
|
|
curType: 'b6f8e254-ad9e-47c0-8c16-f7a6085f4cef',
|
|
page: {
|
|
page: 1,
|
|
rows: 10,
|
|
newsDirectoriesId: 'b6f8e254-ad9e-47c0-8c16-f7a6085f4cef',
|
|
county: ''
|
|
},
|
|
requestUrl: 'http://219.159.20.131:8081/',
|
|
haveMore: true,
|
|
isLoading: false,
|
|
toTop: ''
|
|
},
|
|
methods: {
|
|
getAreaList: function () {
|
|
var self = this
|
|
doGetForm(self.requestUrl + 'usercenter/app/dataarea/listareabyparentidrelease/110889', {}, null, function (code, data) {
|
|
self.areaList = data
|
|
})
|
|
},
|
|
changeArea: function (id, lv) {
|
|
if (!this.isLoading) {
|
|
var level = parseInt(lv) + 1
|
|
level = 'area' + level
|
|
this.page.county = id
|
|
this.page[level] = id
|
|
this.page.page = 1
|
|
this.haveMore = true
|
|
this.getNewsList()
|
|
}
|
|
},
|
|
getTypeList: function () {
|
|
var self = this
|
|
doGetForm(self.requestUrl + 'news/app/newsdirectories/listnewsdirectoriesrelease', {
|
|
directoriesParentId: self.page.newsDirectoriesId
|
|
}, {}, function (code, data) {
|
|
self.typeList = data
|
|
self.curType = data[0].newsDirectoriesId
|
|
self.page.newsDirectoriesId = data[0].newsDirectoriesId
|
|
self.getNewsList()
|
|
})
|
|
},
|
|
changeType: function (type) {
|
|
if (!this.isLoading) {
|
|
this.curType = type
|
|
this.page.newsDirectoriesId = type
|
|
this.page.page = 1
|
|
this.haveMore = true
|
|
this.getNewsList()
|
|
}
|
|
},
|
|
getNewsList: function () {
|
|
var self = this
|
|
self.isLoading = true
|
|
doGetForm(self.requestUrl + 'news/app/newscontent/listpagenewscontentrelease', self.page, {}, function (code, data) {
|
|
if (self.page.page == '1') {
|
|
if (data.rows.length > 0) {
|
|
for (let i = 0; i < data.rows.length; i++) {
|
|
data.rows[i].newsContentCoverList = data.rows[i].newsContentCoverList[0].contentCoverId
|
|
self.newsList.push(data.rows[i])
|
|
}
|
|
self.newsList = data.rows
|
|
if (data.rows.length > 0) {
|
|
self.haveMore = true
|
|
self.isLoading = false
|
|
} else {
|
|
self.haveMore = false
|
|
self.isLoading = false
|
|
}
|
|
return
|
|
} else {
|
|
self.newsList = []
|
|
self.haveMore = false
|
|
self.isLoading = false
|
|
}
|
|
} else {
|
|
if (data.rows.length > 0) {
|
|
for (let i = 0; i < data.rows.length; i++) {
|
|
data.rows[i].newsContentCoverList = data.rows[i].newsContentCoverList[0].contentCoverId
|
|
self.newsList.push(data.rows[i])
|
|
}
|
|
self.haveMore = true
|
|
self.isLoading = false
|
|
} else {
|
|
self.page.page--
|
|
self.haveMore = false
|
|
self.isLoading = false
|
|
layer.msg('暂无更多')
|
|
}
|
|
}
|
|
|
|
})
|
|
},
|
|
loadMore: function () {
|
|
if (!this.isLoading) {
|
|
this.page.page++
|
|
this.getNewsList()
|
|
}
|
|
},
|
|
loadAll: function () {
|
|
if (!this.isLoading) {
|
|
var self = this
|
|
this.page = {
|
|
page: 1,
|
|
rows: 10,
|
|
newsDirectoriesId: self.curType,
|
|
county: ''
|
|
}
|
|
this.haveMore = true
|
|
this.getNewsList()
|
|
}
|
|
},
|
|
// 新闻详情
|
|
goDetail: function (link, url, type, outlink) {
|
|
if (!this.isLoading) {
|
|
if (type === '6') {
|
|
window.open(outlink)
|
|
} else {
|
|
if (link) {
|
|
window.open(link)
|
|
} else {
|
|
window.location.href = this.requestUrl + url
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
mounted: function () {
|
|
// this.page.newsDirectoriesId = window.location.search.replace('?','').split('=')[1]
|
|
// this.getAreaList()
|
|
// this.getTypeList()
|
|
this.getNewsList()
|
|
this.toTop = $('.area').height() + 'px'
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |