|
|
|
<template>
|
|
|
|
<resources :content-code.sync="contentCode"></resources>
|
|
|
|
<div v-infinite-scroll="getNewsList()">
|
|
|
|
<div v-for="editorial in editorialList" class="editorial-box">
|
|
|
|
<div class="img">
|
|
|
|
<a href='{{"/editorial/" + editorial.id + ".html"}}'>
|
|
|
|
<img v-bind:src="editorial.src | resize 750 469" alt="" />
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
<div class="title">
|
|
|
|
<a class="line-clamp-2" href='{{"/editorial/" + editorial.id + ".html"}}'>{{editorial.title}}</a>
|
|
|
|
</div>
|
|
|
|
<div class="editorial-des">
|
|
|
|
<p class="line-clamp-2">{{editorial.intro}}</p>
|
|
|
|
</div>
|
|
|
|
<hr>
|
|
|
|
<div class="bottom clearfix">
|
|
|
|
<span class="icon icon-timeshare"></span>
|
|
|
|
<span class="time">{{editorial.publish_time}}</span>
|
|
|
|
<span class="icon icon-share share" @click="share(editorial.title, editorial.intro, editorial.src, editorial.id)"></span>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div v-if="!scrollDisabled" class="is-loading">loading...</div>
|
|
|
|
</template>
|
|
|
|
<style>
|
|
|
|
.editorial-box {
|
|
|
|
background: #f6f6f6;
|
|
|
|
border-bottom: #eee 1px solid;
|
|
|
|
padding-top: 30px;
|
|
|
|
|
|
|
|
.img {
|
|
|
|
width: 100%;
|
|
|
|
height: 470px;
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
|
|
img {
|
|
|
|
width: 100%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.title {
|
|
|
|
background: #fff;
|
|
|
|
font-size: 42px;
|
|
|
|
line-height: 1.2;
|
|
|
|
font-weight: 700;
|
|
|
|
padding: 30px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.editorial-des {
|
|
|
|
background: #fff;
|
|
|
|
padding: 0 30px 30px;
|
|
|
|
color: #b0b0b0;
|
|
|
|
font-size: 28px;
|
|
|
|
line-height: 32px;
|
|
|
|
}
|
|
|
|
|
|
|
|
hr {
|
|
|
|
margin: 0 30px;
|
|
|
|
border: #eee 1px solid;
|
|
|
|
border-bottom: 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.bottom {
|
|
|
|
padding: 10px 30px;
|
|
|
|
background: #fff;
|
|
|
|
color: #b0b0b0;
|
|
|
|
font-size: 24px;
|
|
|
|
height: 78px;
|
|
|
|
|
|
|
|
span {
|
|
|
|
display: inline-block;
|
|
|
|
padding: 12px 0;
|
|
|
|
}
|
|
|
|
|
|
|
|
.share {
|
|
|
|
float: right;
|
|
|
|
padding-top: 16px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.is-loading {
|
|
|
|
font-size: 32px;
|
|
|
|
text-align: center;
|
|
|
|
padding: 16px 0;
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
<script>
|
|
|
|
const util = require('common/util');
|
|
|
|
const contentCode = require('content-code');
|
|
|
|
const resources = require('component/resources/index.vue');
|
|
|
|
const qs = require('yoho-qs');
|
|
|
|
const $ = require('jquery');
|
|
|
|
const tip = require('common/tip');
|
|
|
|
const yoho = require('yoho');
|
|
|
|
|
|
|
|
module.exports = {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
contentCode: contentCode.editorial.all,
|
|
|
|
editorialList: [],
|
|
|
|
page: 1,
|
|
|
|
scrollDisabled: false,
|
|
|
|
channel: qs.channel
|
|
|
|
};
|
|
|
|
},
|
|
|
|
watch: {
|
|
|
|
channel() {
|
|
|
|
this.getNewsList();
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
|
|
|
|
/* 获取资讯列表数据 */
|
|
|
|
getNewsList() {
|
|
|
|
if (this.scrollDisabled) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
this.scrollDisabled = true;
|
|
|
|
$.get({
|
|
|
|
url: '/editorial/list.json',
|
|
|
|
data: {
|
|
|
|
page: this.page,
|
|
|
|
channel: this.channel
|
|
|
|
}
|
|
|
|
}).done(result => {
|
|
|
|
if (result.code === 200 && result.data.list.length > 0) {
|
|
|
|
if (this.editorialList.length > 0 && result.data.list.length > 0) {
|
|
|
|
this.$set('editorialList', this.editorialList.concat(result.data.list));
|
|
|
|
} else if (result.data.list.length > 0) {
|
|
|
|
this.editorialList = result.data.list;
|
|
|
|
}
|
|
|
|
|
|
|
|
// 如果未加载完，继续翻页加载
|
|
|
|
if (result.data.list.length > 0) {
|
|
|
|
this.page++;
|
|
|
|
this.scrollDisabled = false;
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
tip('没有了...');
|
|
|
|
}
|
|
|
|
}).fail(() => {
|
|
|
|
this.scrollDisabled = false;
|
|
|
|
});
|
|
|
|
},
|
|
|
|
|
|
|
|
/* 分享资讯 */
|
|
|
|
share(title, des, img, id) {
|
|
|
|
title = title.length > 15 ? title.substr(0, 15) + '...' : title;
|
|
|
|
img = location.protocol + util.getImgUrl(img, 300, 300, 2);
|
|
|
|
yoho.goShare({
|
|
|
|
title: title,
|
|
|
|
des: des,
|
|
|
|
img: img,
|
|
|
|
url: `${location.origin}/editorial/${id}.html?shareTitle=${title}`
|
|
|
|
});
|
|
|
|
}
|
|
|
|
},
|
|
|
|
components: {
|
|
|
|
resources
|
|
|
|
},
|
|
|
|
created() {
|
|
|
|
this.getNewsList();
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script> |
...
|
...
|
|
