108 lines
4.1 KiB
Vue
108 lines
4.1 KiB
Vue
|
<template lang="pug">
|
||
|
|
.pageList
|
||
|
|
.articleContent(ref='articleImgs', v-if='Articels')
|
||
|
|
article.articleList(v-for='(post, index) in Articels', :key='index')
|
||
|
|
.articleImgs(v-if='post.postImages.length')
|
||
|
|
nuxt-link(:to="'/post/' + post.ID")
|
||
|
|
Swiper(:style="'height: ' + imageHeight + 'px'")
|
||
|
|
Slide(v-for="(imgUrl, inx) in post.postImages" :key="inx")
|
||
|
|
img(:src='imgUrl')
|
||
|
|
.articleAbstract
|
||
|
|
nuxt-link(:to="'/post/' + post.ID")
|
||
|
|
.articleTitle(v-html='post.post_title')
|
||
|
|
.articalMeta
|
||
|
|
ul
|
||
|
|
li
|
||
|
|
Icon(:icon="['far', 'calendar-alt']")
|
||
|
|
| {{ post.post_date }}
|
||
|
|
li
|
||
|
|
Icon(:icon="['far', 'bookmark']")
|
||
|
|
nuxt-link(v-for='(relationships, idx) in post.term_relationships', :key='idx', v-if='relationships.term_taxonomy', :to="'/' + relationships.term_taxonomy.term.slug")
|
||
|
|
span
|
||
|
|
| {{ relationships.term_taxonomy.term.name }}
|
||
|
|
li(v-if='post.postmetum.meta_value !== 0')
|
||
|
|
Icon(:icon="['fas', 'thermometer-' + post.hotValue]")
|
||
|
|
| {{ post.postmetum.meta_value }}
|
||
|
|
.articelAbstractContent(v-html='post.post_excerpt || post.post_content')
|
||
|
|
.readMore
|
||
|
|
nuxt-link.readMoreBtn(:to="'/post/' + post.ID")
|
||
|
|
| READ MORE
|
||
|
|
.Info(v-if='Info')
|
||
|
|
| {{ Info }}
|
||
|
|
nuxt-link(:to="nowPage > 2 ? nowPath + '/page/' + (nowPage - 1) : nowPath + '/'", :class="nowPage > 1 ? 'btn-footer btn-prev ' : 'btn-footer btn-prev btn-disable'")
|
||
|
|
Icon(:icon="['fas', 'chevron-left']")
|
||
|
|
| 上一页
|
||
|
|
nuxt-link(:to="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? nowPath + '/page/' + (nowPage + 1) : '#'", :class="(nowPage + 1) <= Math.ceil(ArticelsCount / 8) ? 'btn-footer btn-next' : 'btn-footer btn-next btn-disable'")
|
||
|
|
| 下一页
|
||
|
|
Icon(:icon="['fas', 'chevron-right']")
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
async asyncData(inject) {
|
||
|
|
const { app, params, $axios } = inject
|
||
|
|
let Info = null
|
||
|
|
let Articels = []
|
||
|
|
const nowPage = params.page ? parseInt(params.page) : 1
|
||
|
|
|
||
|
|
const data = await $axios.$get('/public/article/list', {
|
||
|
|
params: {
|
||
|
|
page: nowPage,
|
||
|
|
num: 8,
|
||
|
|
category: params.terms || ''
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
if (data.status === 1) {
|
||
|
|
Articels = data.result.list
|
||
|
|
for (const n in Articels) {
|
||
|
|
Articels[n].post_date = app.$moment(Articels[n].post_date).utc().format('lll')// 格式化时间
|
||
|
|
// 热度值计算
|
||
|
|
if (Articels[n].postmetum !== null && Articels[n].postmetum !== '') {
|
||
|
|
Articels[n].hotValue = app.$getHatValue(Articels[n].postmetum.meta_value)
|
||
|
|
} else {
|
||
|
|
Articels[n].hotValue = 0
|
||
|
|
Articels[n].postmetum = {}
|
||
|
|
Articels[n].postmetum.meta_value = 0
|
||
|
|
}
|
||
|
|
|
||
|
|
Articels[n].postImages = []
|
||
|
|
}
|
||
|
|
} else if (data.status === 404) {
|
||
|
|
Info = '未找到文章。'
|
||
|
|
}
|
||
|
|
|
||
|
|
return {
|
||
|
|
Articels,
|
||
|
|
imageHeight: 0,
|
||
|
|
Info,
|
||
|
|
nowPage,
|
||
|
|
ArticelsCount: data.result.count || 0,
|
||
|
|
nowPath: params.terms ? '/' + params.terms : ''
|
||
|
|
}
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.$finishLoad()
|
||
|
|
this.analyseImages()
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
async analyseImages() { // 图片大小分析及处理
|
||
|
|
const articleImgsWidth = this.$refs.articleImgs.getBoundingClientRect().width
|
||
|
|
this.imageHeight = articleImgsWidth * 0.5625
|
||
|
|
for (const n in this.Articels) {
|
||
|
|
if (this.Articels[n].postimages.length !== 0) {
|
||
|
|
for (const i in this.Articels[n].postimages) {
|
||
|
|
const data = await this.$axios.$get(this.Articels[n].postimages[i].guid + '?x-oss-process=image/info')
|
||
|
|
const widthValue = data.ImageWidth.value
|
||
|
|
const heightValue = data.ImageHeight.value
|
||
|
|
if (widthValue > articleImgsWidth && (articleImgsWidth * heightValue / widthValue > this.imageHeight) && this.Articels[n].postImages.length < 10) {
|
||
|
|
this.Articels[n].postImages.push(this.Articels[n].postimages[i].guid + '?x-oss-process=image/resize,m_lfit,w_' + articleImgsWidth)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|