|
|
|
<template>
|
|
|
|
<div class="article-item">
|
|
|
|
<ArticleItemHeader :data="headerData"></ArticleItemHeader>
|
|
|
|
<ArticleItemSlide :data="slideData"></ArticleItemSlide>
|
|
|
|
<ProductGroup :data="productListData"></ProductGroup>
|
|
|
|
<ArticleItemHeader :data="headerData" :lazy="lazy"></ArticleItemHeader>
|
|
|
|
<ArticleItemSlide :data="slideData" :lazy="lazy"></ArticleItemSlide>
|
|
|
|
<ProductGroup :data="productListData" :lazy="lazy"></ProductGroup>
|
|
|
|
<ArticleItemIntro :data="introData" @on-resize="onResize" @on-resizeing="onResizeing"></ArticleItemIntro>
|
|
|
|
<ArticleItemComment :comments="commentData" :count="12" :date="'1天前'"></ArticleItemComment>
|
|
|
|
<ArticleItemComment :data="commentData"></ArticleItemComment>
|
|
|
|
<div class="line"></div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
import {get} from 'lodash';
|
|
|
|
import ArticleItemHeader from './article-item-header';
|
|
|
|
import ArticleItemSlide from './article-item-slide';
|
|
|
|
import ArticleItemIntro from './article-item-intro';
|
|
|
|
import ArticleItemComment from './article-item-comment';
|
|
|
|
import dayjs from 'dayjs';
|
|
|
|
|
|
|
|
export default {
|
|
|
|
name: 'ArticleItem',
|
|
...
|
...
|
@@ -29,47 +31,40 @@ export default { |
|
|
|
headerData() {
|
|
|
|
return {
|
|
|
|
authorName: this.data.authorName,
|
|
|
|
articleId: this.data.articleId,
|
|
|
|
authorHeadIco: this.data.authorHeadIco
|
|
|
|
authorUid: this.data.authorUid,
|
|
|
|
authorHeadIco: this.data.authorHeadIco,
|
|
|
|
hasAttention: this.data.hasAttention,
|
|
|
|
};
|
|
|
|
},
|
|
|
|
slideData() {
|
|
|
|
return {
|
|
|
|
blockList: this.data.blockList,
|
|
|
|
index: this.data.index
|
|
|
|
blockList: get(this.data, 'blockList', []).filter(block => block.templateKey === 'image'),
|
|
|
|
};
|
|
|
|
},
|
|
|
|
introData() {
|
|
|
|
return {
|
|
|
|
intro: '旗下大热鞋款旗下大热鞋款旗下大热鞋款一直以来在街头造型当中的能见度都算高，凭藉其舒适脚感与百搭外型旗下大热鞋款也轻松成为许多鞋迷的心头好。近日，旗下旗下大热鞋款旗下大热鞋款旗下大热鞋款一直以来在街头造型当中的能见度都算高，凭藉其舒适脚感与百搭外型旗下大热鞋款也轻松成为许多鞋迷的心头好。近日，旗下大热鞋款旗下大热鞋款旗下大热鞋款旗下大热鞋款旗下大热鞋款一直以来在街头造型当中的能见度都算高，凭藉其舒适脚感与百搭外型旗下大热鞋款也轻松成为许多鞋迷的心头好。近日，旗下大热鞋款旗下大热鞋款大热鞋款旗下大热鞋款 Air Max 95 一直以来在街头造型当中的能见度都算高，凭藉其舒适脚感与百搭外型 Air Max 95 也轻松成为许多鞋迷的心头好。'
|
|
|
|
intro: get(get(this.data, 'blockList', []).filter(block => block.templateKey === 'text'), '[0].contentData'),
|
|
|
|
labelList: this.data.labelList,
|
|
|
|
hasFavor: this.data.hasFavor,
|
|
|
|
hasPraise: this.data.hasPraise,
|
|
|
|
commentCount: this.data.commentCount,
|
|
|
|
praiseCount: this.data.praiseCount,
|
|
|
|
favoriteCount: this.data.favoriteCount
|
|
|
|
};
|
|
|
|
},
|
|
|
|
commentData() {
|
|
|
|
return [{
|
|
|
|
name: 'NIKE后援团',
|
|
|
|
content: '好期待，一定要抢一双👟！',
|
|
|
|
}, {
|
|
|
|
name: 'NIKE后援团',
|
|
|
|
content: '表情表情！！！这双仔细看好好看！！哈哈哈哈哈哈😄✌️'
|
|
|
|
}];
|
|
|
|
return {
|
|
|
|
comments: this.data.comments,
|
|
|
|
commentCount: this.data.commentCount,
|
|
|
|
publishTime: this.data.publishTime,
|
|
|
|
date: dayjs(this.data.publishTime).fromNow()
|
|
|
|
};
|
|
|
|
},
|
|
|
|
productListData() {
|
|
|
|
return [{
|
|
|
|
src: '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60',
|
|
|
|
name: 'Off-White™ x Nike Air Max 90 全新「Desert Ore」配色曝光',
|
|
|
|
price: 3299,
|
|
|
|
isFav: false
|
|
|
|
}, {
|
|
|
|
src: '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60',
|
|
|
|
name: 'Off-White™ x Nike Air Max 90 全新「Desert Ore」配色曝光',
|
|
|
|
price: 2299,
|
|
|
|
isFav: true
|
|
|
|
}, {
|
|
|
|
src: '//img12.static.yhbimg.com/goodsimg/2019/01/29/15/022a23864f68c66a6e1ef398ce7bd82efc.jpg?imageView2/2/w/640/h/640/q/60',
|
|
|
|
name: 'Off-White™ x Nike Air Max 90 全新「Desert Ore」配色曝光',
|
|
|
|
price: 1299,
|
|
|
|
isFav: false
|
|
|
|
}];
|
|
|
|
return this.data.productList || [];
|
|
|
|
},
|
|
|
|
lazy() {
|
|
|
|
return this.data.index > 1;
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
...
|
...
|
|
