Authored by 陈峰

优化弹出框

@@ -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