Skip to content
This repository has been archived by the owner on Nov 15, 2018. It is now read-only.

Commit

Permalink
fix: (#360) 动态详情页增加刷新操作
Browse files Browse the repository at this point in the history
  • Loading branch information
@mutoe
mutoe committed Jun 21, 2018
1 parent 1881d9a commit e43e2a0
Showing 1 changed file with 104 additions and 85 deletions.
189 changes: 104 additions & 85 deletions src/page/feed/feedDetail.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,95 +31,100 @@
</div>
</header>
<!-- 内容 -->
<main class="m-flex-shrink1 m-flex-grow1 m-art m-main">
<div class="m-art-body">
<h2 v-if="title">{{ title }}</h2>
<video
v-if="!!video"
class="feed-detail-video"
controls
autoplay
:poster="cover_file">
<source :src="video_file" type="video/mp4" />
</video>
<async-file
v-for="img in images"
v-if="img.file"
:key="img.file"
:file="img.file">
<img
slot-scope="props"
v-if="props.src"
:src="props.src"/>
</async-file>
<p class="m-text-box" v-html="formatBody(feedContent)"></p>
</div>
<div class="m-box m-aln-center m-justify-bet m-art-foot">
<div class="m-flex-grow1 m-flex-shrink1 m-art-like-list">
<router-link tag="div" class="m-box m-aln-center" to="likers" append v-if='likeCount > 0'>
<ul class="m-box m-flex-grow0 m-flex-shrink0">
<li
:key="id"
:style="{ zIndex: 5-index }"
v-for="({user = {}, id}, index) in likes.slice(0, 5)"
class="m-avatar-box tiny"
:class="`m-avatar-box-${user.sex}`">
<img :src="user.avatar">
</li>
</ul>
<span>{{ likeCount | formatNum }}人点赞</span>
<load-more
ref="loadmore"
:onRefresh="onRefresh">
<main class="m-flex-shrink1 m-flex-grow1 m-art m-main">
<div class="m-art-body">
<h2 v-if="title">{{ title }}</h2>
<video
v-if="!!video"
class="feed-detail-video"
controls
autoplay
:poster="cover_file">
<source :src="video_file" type="video/mp4" />
</video>
<async-file
v-for="img in images"
v-if="img.file"
:key="img.file"
:file="img.file">
<img
slot-scope="props"
v-if="props.src"
:src="props.src"/>
</async-file>
<p class="m-text-box" v-html="formatBody(feedContent)"></p>
</div>
<div class="m-box m-aln-center m-justify-bet m-art-foot">
<div class="m-flex-grow1 m-flex-shrink1 m-art-like-list">
<router-link tag="div" class="m-box m-aln-center" to="likers" append v-if='likeCount > 0'>
<ul class="m-box m-flex-grow0 m-flex-shrink0">
<li
:key="id"
:style="{ zIndex: 5-index }"
v-for="({user = {}, id}, index) in likes.slice(0, 5)"
class="m-avatar-box tiny"
:class="`m-avatar-box-${user.sex}`">
<img :src="user.avatar">
</li>
</ul>
<span>{{ likeCount | formatNum }}人点赞</span>
</router-link>
</div>
<div class="m-box-model m-aln-end m-art-info">
<span v-if="time">发布于{{ time | time2tips }}</span>
<span>{{ feed.feed_view_count || 0 | formatNum }}浏览</span>
</div>
</div>
<!-- todo 打赏功能 -->
<div class="m-box-model m-box-center m-box-center-a m-art-reward">
<button class="m-art-rew-btn" @click="rewardFeed">打 赏</button>
<p class="m-art-rew-label"><a href="javascript:;">{{ reward.count | formatNum }}</a>人打赏，共<a href="javascript:;">{{ ~~reward.amount }}</a>积分</p>
<router-link tag="ul" to="rewarders" append class="m-box m-aln-center m-art-rew-list">
<li
:key="rew.id"
v-for="rew in rewardList"
:class="`m-avatar-box-${rew.user.sex}`"
class="m-flex-grow0 m-flex-shrink0 m-art-rew m-avatar-box tiny">
<img :src="rew.user.avatar">
</li>
<li class="m-box m-aln-center" v-if="rewardList.length > 0">
<svg class="m-style-svg m-svg-def" style="fill:#bfbfbf">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-arrow-r"></use>
</svg>
</li>
</router-link>
</div>
<div class="m-box-model m-aln-end m-art-info">
<span v-if="time">发布于{{ time | time2tips }}</span>
<span>{{ feed.feed_view_count || 0 | formatNum }}浏览</span>
</div>
</div>
<!-- todo 打赏功能 -->
<div class="m-box-model m-box-center m-box-center-a m-art-reward">
<button class="m-art-rew-btn" @click="rewardFeed">打 赏</button>
<p class="m-art-rew-label"><a href="javascript:;">{{ reward.count | formatNum }}</a>人打赏，共<a href="javascript:;">{{ ~~reward.amount }}</a>积分</p>
<router-link tag="ul" to="rewarders" append class="m-box m-aln-center m-art-rew-list">
<li
:key="rew.id"
v-for="rew in rewardList"
:class="`m-avatar-box-${rew.user.sex}`"
class="m-flex-grow0 m-flex-shrink0 m-art-rew m-avatar-box tiny">
<img :src="rew.user.avatar">
</li>
<li class="m-box m-aln-center" v-if="rewardList.length > 0">
<svg class="m-style-svg m-svg-def" style="fill:#bfbfbf">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-arrow-r"></use>
</svg>
</li>
</router-link>
</div>
</main>
<!-- 评论列表 -->
<div class="m-box-model m-art-comments" id="comment_list">
<ul class="m-box m-aln-center m-art-comments-tabs">
<li>{{ commentCount | formatNum }}条评论</li>
</ul>
<comment-item
@on-click="replyComment"
v-for="(comment) in pinnedCom"
:pinned="true"
:key="`pinned-comment-${comment.id}`"
:comment="comment"/>
<comment-item
@on-click="replyComment"
v-for="(comment) in comments"
:key="comment.id"
:comment="comment"/>
<div class="m-box m-aln-center m-justify-center load-more-box">
<span v-if="noMoreCom" class="load-more-ph">---没有更多---</span>
<span v-else class="load-more-btn" @click.stop="fetchFeedComments(maxComId)">
{{fetchComing ? "加载中..." : "点击加载更多"}}
</span>
</main>
<!-- 评论列表 -->
<div class="m-box-model m-art-comments" id="comment_list">
<ul class="m-box m-aln-center m-art-comments-tabs">
<li>{{ commentCount | formatNum }}条评论</li>
</ul>
<comment-item
@on-click="replyComment"
v-for="(comment) in pinnedCom"
:pinned="true"
:key="`pinned-comment-${comment.id}`"
:comment="comment"/>
<comment-item
@on-click="replyComment"
v-for="(comment) in comments"
:key="comment.id"
:comment="comment"/>
<div class="m-box m-aln-center m-justify-center load-more-box">
<span v-if="noMoreCom" class="load-more-ph">---没有更多---</span>
<span v-else class="load-more-btn" @click.stop="fetchFeedComments(maxComId)">
{{fetchComing ? "加载中..." : "点击加载更多"}}
</span>
</div>
</div>
</div>
</load-more>
</article-card>
</template>

<script>
import bus from "@/bus.js";
import ArticleCard from "@/page/article/ArticleCard.vue";
Expand Down Expand Up @@ -287,7 +292,7 @@ export default {
shareCancel() {
this.$Message.success("取消分享");
},
fetchFeed() {
fetchFeed(callback) {
if (this.fetching) return;
this.fetching = true;
const shareUrl =
Expand Down Expand Up @@ -320,6 +325,11 @@ export default {
})
.catch(() => {
this.goBack();
})
.finally(() => {
if (callback && typeof callback === "function") {
callback();
}
});
},
fetchUserInfo() {
Expand Down Expand Up @@ -565,6 +575,11 @@ export default {
this.relation = follower;
this.fetchFollow = false;
});
},
onRefresh() {
this.fetchFeed(() => {
this.$refs.loadmore.topEnd();
});
}
},
activated() {
Expand Down Expand Up @@ -603,6 +618,10 @@ export default {
margin-left: -20px;
background: #000;
}
.m-art {
padding-top: 0.1rem;
padding-bottom: 0.1rem;
}
.m-art-head {
.m-avatar-box-def {
width: 52px;
Expand Down

0 comments on commit e43e2a0

Please sign in to comment.