Showing
6 changed files
with
45 additions
and
26 deletions
@@ -99,11 +99,11 @@ export default { | @@ -99,11 +99,11 @@ export default { | ||
99 | } | 99 | } |
100 | 100 | ||
101 | .action-sheet-move-enter-active { | 101 | .action-sheet-move-enter-active { |
102 | - transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); | 102 | + transition: all 0.4s cubic-bezier(0, 0.96, 0.14, 1.06); |
103 | } | 103 | } |
104 | 104 | ||
105 | .action-sheet-move-leave-active { | 105 | .action-sheet-move-leave-active { |
106 | - transition: all 0.1s linear; | 106 | + transition: all 0.2s cubic-bezier(0.165, 0.84, 0.44, 1); |
107 | } | 107 | } |
108 | 108 | ||
109 | .action-sheet-mask-enter, | 109 | .action-sheet-mask-enter, |
@@ -154,12 +154,8 @@ export default { | @@ -154,12 +154,8 @@ export default { | ||
154 | } | 154 | } |
155 | 155 | ||
156 | .yoho-action-sheet { | 156 | .yoho-action-sheet { |
157 | - .yoho-popup-mask { | ||
158 | - background-color: #f5f5f5; | ||
159 | - } | ||
160 | - | ||
161 | .yoho-popup-container { | 157 | .yoho-popup-container { |
162 | - border-radius: 15PX 15PX 0 0; | 158 | + border-radius: 8PX 8PX 0 0; |
163 | overflow: hidden; | 159 | overflow: hidden; |
164 | } | 160 | } |
165 | } | 161 | } |
@@ -2,7 +2,10 @@ | @@ -2,7 +2,10 @@ | ||
2 | <div class="comment-list"> | 2 | <div class="comment-list"> |
3 | <div class="comment-content-flex"> | 3 | <div class="comment-content-flex"> |
4 | <div class="comment-content"> | 4 | <div class="comment-content"> |
5 | - <Scroll ref="scroll" :data="commentList" :options="scrollOption" @pulling-up="onPullingUp"> | 5 | + <div class="loading" v-if="firstLoading"> |
6 | + <Loading></Loading> | ||
7 | + </div> | ||
8 | + <Scroll v-else ref="scroll" :data="commentList" :options="scrollOption" @pulling-up="onPullingUp"> | ||
6 | <CommentItem | 9 | <CommentItem |
7 | v-for="comment in commentList" | 10 | v-for="comment in commentList" |
8 | :key="comment.parentComment.id" | 11 | :key="comment.parentComment.id" |
@@ -16,7 +19,7 @@ | @@ -16,7 +19,7 @@ | ||
16 | </Scroll> | 19 | </Scroll> |
17 | </div> | 20 | </div> |
18 | </div> | 21 | </div> |
19 | - <div class="comment-footer"> | 22 | + <div class="comment-footer" v-if="!firstLoading"> |
20 | <CommentPlaceholder | 23 | <CommentPlaceholder |
21 | class="comment-input" | 24 | class="comment-input" |
22 | :dest-id="destId" | 25 | :dest-id="destId" |
@@ -33,7 +36,7 @@ | @@ -33,7 +36,7 @@ | ||
33 | 36 | ||
34 | <script> | 37 | <script> |
35 | import CommentItem from './comment-item.vue'; | 38 | import CommentItem from './comment-item.vue'; |
36 | -import {Scroll} from 'cube-ui'; | 39 | +import {Scroll, Loading} from 'cube-ui'; |
37 | import {get} from 'lodash'; | 40 | import {get} from 'lodash'; |
38 | import {createNamespacedHelpers} from 'vuex'; | 41 | import {createNamespacedHelpers} from 'vuex'; |
39 | const {mapActions} = createNamespacedHelpers('comment'); | 42 | const {mapActions} = createNamespacedHelpers('comment'); |
@@ -53,6 +56,7 @@ export default { | @@ -53,6 +56,7 @@ export default { | ||
53 | return { | 56 | return { |
54 | page: 1, | 57 | page: 1, |
55 | commentList: [], | 58 | commentList: [], |
59 | + firstLoading: true, | ||
56 | scrollOption: { | 60 | scrollOption: { |
57 | bounce: false, | 61 | bounce: false, |
58 | pullUpLoad: { | 62 | pullUpLoad: { |
@@ -79,11 +83,17 @@ export default { | @@ -79,11 +83,17 @@ export default { | ||
79 | if (result.code === 200) { | 83 | if (result.code === 200) { |
80 | const comments = get(result, 'data.commentInfos', []); | 84 | const comments = get(result, 'data.commentInfos', []); |
81 | 85 | ||
86 | + this.$emit('on-page-change', { | ||
87 | + page: this.page, | ||
88 | + size: result.data.total | ||
89 | + }); | ||
82 | if (this.page === 1) { | 90 | if (this.page === 1) { |
83 | - this.commentList = comments; | ||
84 | - this.$nextTick(() => { | ||
85 | - this.$emit('on-page-ready', {success: true}); | 91 | + await new Promise((r) => { |
92 | + setTimeout(() => { | ||
93 | + r(); | ||
94 | + }, 400); | ||
86 | }); | 95 | }); |
96 | + this.commentList = comments; | ||
87 | } else { | 97 | } else { |
88 | this.commentList = this.commentList.concat(comments); | 98 | this.commentList = this.commentList.concat(comments); |
89 | } | 99 | } |
@@ -92,11 +102,10 @@ export default { | @@ -92,11 +102,10 @@ export default { | ||
92 | } else { | 102 | } else { |
93 | dirty = false; | 103 | dirty = false; |
94 | } | 104 | } |
95 | - this.$emit('on-page-change', { | ||
96 | - page: this.page, | ||
97 | - size: result.data.total | 105 | + this.firstLoading = false; |
106 | + this.$nextTick(() => { | ||
107 | + this.$refs.scroll.forceUpdate(dirty); | ||
98 | }); | 108 | }); |
99 | - this.$refs.scroll.forceUpdate(dirty); | ||
100 | } else { | 109 | } else { |
101 | this.$createToast && this.$createToast({ | 110 | this.$createToast && this.$createToast({ |
102 | txt: result.message || '服务器开小差了', | 111 | txt: result.message || '服务器开小差了', |
@@ -119,6 +128,7 @@ export default { | @@ -119,6 +128,7 @@ export default { | ||
119 | async init() { | 128 | async init() { |
120 | this.page = 1; | 129 | this.page = 1; |
121 | this.commentList = []; | 130 | this.commentList = []; |
131 | + this.firstLoading = true; | ||
122 | this.fetchComments(true); | 132 | this.fetchComments(true); |
123 | }, | 133 | }, |
124 | async onReply({commentId}) { | 134 | async onReply({commentId}) { |
@@ -141,11 +151,19 @@ export default { | @@ -141,11 +151,19 @@ export default { | ||
141 | } | 151 | } |
142 | } | 152 | } |
143 | }, | 153 | }, |
144 | - components: {Scroll, CommentItem} | 154 | + components: {Scroll, CommentItem, Loading} |
145 | }; | 155 | }; |
146 | </script> | 156 | </script> |
147 | 157 | ||
148 | <style scoped lang="scss"> | 158 | <style scoped lang="scss"> |
159 | +.loading { | ||
160 | + width: 100%; | ||
161 | + height: 200px; | ||
162 | + display: flex; | ||
163 | + justify-content: center; | ||
164 | + align-items: center; | ||
165 | +} | ||
166 | + | ||
149 | .comment-list { | 167 | .comment-list { |
150 | width: 100%; | 168 | width: 100%; |
151 | height: 100%; | 169 | height: 100%; |
@@ -40,8 +40,7 @@ | @@ -40,8 +40,7 @@ | ||
40 | :article-id="articleId" | 40 | :article-id="articleId" |
41 | :pos-id="posId" | 41 | :pos-id="posId" |
42 | @on-close="onClose" | 42 | @on-close="onClose" |
43 | - @on-comment="onActionComment" | ||
44 | - @on-page-ready="onPageReady"></Comment> | 43 | + @on-comment="onActionComment"></Comment> |
45 | </YohoActionSheet> | 44 | </YohoActionSheet> |
46 | <MoreActionSheet transfer ref="moreAction" @on-follow="onFollow" @on-delete="onDelete"></MoreActionSheet> | 45 | <MoreActionSheet transfer ref="moreAction" @on-follow="onFollow" @on-delete="onDelete"></MoreActionSheet> |
47 | </div> | 46 | </div> |
@@ -142,6 +141,10 @@ export default { | @@ -142,6 +141,10 @@ export default { | ||
142 | } | 141 | } |
143 | this.showCommentActioning = true; | 142 | this.showCommentActioning = true; |
144 | this.$refs.comment.init(); | 143 | this.$refs.comment.init(); |
144 | + this.$refs.commentAction.show(); | ||
145 | + setTimeout(() => { | ||
146 | + this.showCommentActioning = false; | ||
147 | + }, 300); | ||
145 | }); | 148 | }); |
146 | }, | 149 | }, |
147 | onShowMore({article, index}) { | 150 | onShowMore({article, index}) { |
@@ -5,7 +5,7 @@ | @@ -5,7 +5,7 @@ | ||
5 | <span class="name">{{data.name}}</span> | 5 | <span class="name">{{data.name}}</span> |
6 | </div> | 6 | </div> |
7 | <div class="opts"> | 7 | <div class="opts"> |
8 | - <WidgetFollow v-bind="data"></WidgetFollow> | 8 | + <WidgetFollow v-if="data.authorUid" v-bind="data"></WidgetFollow> |
9 | </div> | 9 | </div> |
10 | </div> | 10 | </div> |
11 | </template> | 11 | </template> |
1 | <template> | 1 | <template> |
2 | <div class="article"> | 2 | <div class="article"> |
3 | <ArticleBar class="header" @on-close="onClose"></ArticleBar> | 3 | <ArticleBar class="header" @on-close="onClose"></ArticleBar> |
4 | - | ||
5 | <div class="body" v-if="fetchStatus"> | 4 | <div class="body" v-if="fetchStatus"> |
6 | - <Loading class="loading"></Loading> | 5 | + <div class="loading"> |
6 | + <Loading></Loading> | ||
7 | + </div> | ||
7 | </div> | 8 | </div> |
8 | <ArticleBody v-else ref="body" :articleId="grassId" class="body"></ArticleBody> | 9 | <ArticleBody v-else ref="body" :articleId="grassId" class="body"></ArticleBody> |
9 | - | ||
10 | <ArticleFooter class="footer" | 10 | <ArticleFooter class="footer" |
11 | - v-if="articleDetail" | 11 | + v-if="articleDetail && !fetchStatus" |
12 | v-bind="articleDetail.footer" | 12 | v-bind="articleDetail.footer" |
13 | @on-comment-click="onCommentClick" | 13 | @on-comment-click="onCommentClick" |
14 | @on-close="onClose"> | 14 | @on-close="onClose"> |
@@ -96,6 +96,8 @@ export default { | @@ -96,6 +96,8 @@ export default { | ||
96 | <style lang="scss" scoped> | 96 | <style lang="scss" scoped> |
97 | 97 | ||
98 | .loading { | 98 | .loading { |
99 | + width: 100%; | ||
100 | + height: 200px; | ||
99 | display: flex; | 101 | display: flex; |
100 | align-items: center; | 102 | align-items: center; |
101 | justify-content: center; | 103 | justify-content: center; |
@@ -168,7 +168,7 @@ export default { | @@ -168,7 +168,7 @@ export default { | ||
168 | 168 | ||
169 | const processContents = guangProcess.processArticleDetail(content.data); | 169 | const processContents = guangProcess.processArticleDetail(content.data); |
170 | 170 | ||
171 | - await sleep.sleep(200); | 171 | + await sleep.sleep(400); |
172 | commit(Types.GUANG_ARTICLE_CONTENT, processContents.finalDetail); | 172 | commit(Types.GUANG_ARTICLE_CONTENT, processContents.finalDetail); |
173 | commit(Types.GUANG_DETAIL_PRODUCT_LIST, processContents.allgoods); | 173 | commit(Types.GUANG_DETAIL_PRODUCT_LIST, processContents.allgoods); |
174 | 174 |
-
Please register or login to post a comment