fe / yoho-community-web · Commits

Go to a project

Authored by 陈峰
Commit bb6e1a594c46b003f741d9fb015a5e8b93599b69 1 parent 1686a15a

commit

Inline Side-by-side
Showing 13 changed files with 169 additions and 65 deletions
@@ -596,6 +596,18 @@ const yoho = { @@ -596,6 +596,18 @@ const yoho = {
596 url = url + 'product/' + skn + '.html'; 596 url = url + 'product/' + skn + '.html';
597 window.open(url); 597 window.open(url);
598 } 598 }
  599 + },
  600 +
  601 + getInput(args, success, fail) {
  602 + console.log('get.Input')
  603 + if (this.isYohoBuy && window.yohoInterface) {
  604 + window.yohoInterface.triggerEvent(success || nullFun, fail || nullFun, {
  605 + method: 'get.Input',
  606 + arguments: args
  607 + });
  608 + } else {
  609 + // tip(tipInfo);
  610 + }
599 } 611 }
600 }; 612 };
601 613
1 <template> 1 <template>
2 - <transition name="action-sheet-fade">  
3 - <div class="yoho-popup" :class="actionCls" v-show="isVisible" :style="{'z-index': zIndex}">  
4 - <div class="yoho-popup-mask" @click="maskClick"></div>  
5 - <div class="yoho-popup-container">  
6 - <div class="yoho-popup-content">  
7 - <transition name="action-sheet-move">  
8 - <div class="detail" v-show="isVisible">  
9 - <slot></slot>  
10 - </div>  
11 - </transition> 2 + <div v-transfer-dom :data-transfer="transfer">
  3 + <transition name="action-sheet-fade">
  4 + <div class="yoho-popup" :class="actionCls" v-show="isVisible" :style="{'z-index': zIndex}">
  5 + <div class="yoho-popup-mask" @click="maskClick"></div>
  6 + <div class="yoho-popup-container">
  7 + <div class="yoho-popup-content">
  8 + <transition name="action-sheet-move">
  9 + <div class="detail" v-show="isVisible">
  10 + <slot></slot>
  11 + </div>
  12 + </transition>
  13 + </div>
12 </div> 14 </div>
13 </div> 15 </div>
14 - </div>  
15 - </transition> 16 + </transition>
  17 + </div>
16 </template> 18 </template>
17 19
18 <script> 20 <script>
19 -import { Popup } from 'cube-ui';  
20 -  
21 export default { 21 export default {
22 name: 'YohoActionSheet', 22 name: 'YohoActionSheet',
23 props: { 23 props: {
@@ -25,6 +25,7 @@ export default { @@ -25,6 +25,7 @@ export default {
25 type: Boolean, 25 type: Boolean,
26 default: true 26 default: true
27 }, 27 },
  28 + transfer: Boolean,
28 zIndex: { 29 zIndex: {
29 type: Number, 30 type: Number,
30 default: 100 31 default: 100
@@ -59,9 +60,6 @@ export default { @@ -59,9 +60,6 @@ export default {
59 return [{ 'yoho-action-sheet': this.full }]; 60 return [{ 'yoho-action-sheet': this.full }];
60 } 61 }
61 }, 62 },
62 - components: {  
63 - Popup  
64 - },  
65 methods: { 63 methods: {
66 maskClick() { 64 maskClick() {
67 this.maskClosable && this.cancel(); 65 this.maskClosable && this.cancel();
@@ -92,7 +90,7 @@ export default { @@ -92,7 +90,7 @@ export default {
92 90
93 .action-sheet-fade-enter-active, 91 .action-sheet-fade-enter-active,
94 .action-sheet-fade-leave-active { 92 .action-sheet-fade-leave-active {
95 - transition: all 0.3s ease-in-out; 93 + transition: all 0.2s ease-in-out;
96 } 94 }
97 95
98 .action-sheet-move-enter, 96 .action-sheet-move-enter,
@@ -102,7 +100,7 @@ export default { @@ -102,7 +100,7 @@ export default {
102 100
103 .action-sheet-move-enter-active, 101 .action-sheet-move-enter-active,
104 .action-sheet-move-leave-active { 102 .action-sheet-move-leave-active {
105 - transition: all 0.3s ease-in-out; 103 + transition: all 0.2s ease-in-out;
106 } 104 }
107 105
108 .yoho-popup { 106 .yoho-popup {
@@ -119,6 +117,7 @@ export default { @@ -119,6 +117,7 @@ export default {
119 117
120 .yoho-popup-mask, 118 .yoho-popup-mask,
121 .yoho-popup-container { 119 .yoho-popup-container {
  120 + background-color: #fff;
122 position: absolute; 121 position: absolute;
123 width: 100%; 122 width: 100%;
124 height: 100%; 123 height: 100%;
@@ -133,6 +132,8 @@ export default { @@ -133,6 +132,8 @@ export default {
133 132
134 .detail { 133 .detail {
135 position: relative; 134 position: relative;
  135 + width: 100%;
  136 + height: 100%;
136 } 137 }
137 138
138 </style> 139 </style>
1 <template> 1 <template>
2 <div class="comment-list"> 2 <div class="comment-list">
3 <div class="comment-content"> 3 <div class="comment-content">
4 - <LayoutRecycleList v-if="show" ref="comment" :offset="500" :on-fetch="onFetch">  
5 - <template class="article-item" v-slot:item="{ data }">  
6 - <CommentItem  
7 - :parent-comment="data.parentComment"  
8 - :children-comments="data.childrenComments"  
9 - :column-type="columnType"  
10 - @on-reply="onReply">  
11 - </CommentItem>  
12 - </template>  
13 - </LayoutRecycleList> 4 + <Scroll ref="scroll" :data="commentList" :options="scrollOption" @pulling-up="onPullingUp">
  5 + <CommentItem
  6 + v-for="(comment, index) in commentList"
  7 + :key="index"
  8 + :parent-comment="comment.parentComment"
  9 + :children-comments="comment.childrenComments"
  10 + :column-type="columnType"
  11 + @on-reply="onReply">
  12 + </CommentItem>
  13 + </Scroll>
14 </div> 14 </div>
15 <div class="comment-footer"> 15 <div class="comment-footer">
16 - <div class="comment-input" @click="onComment">参与评论</div> 16 + <CommentPlaceholder class="comment-input">
  17 + 参与评论
  18 + </CommentPlaceholder>
17 </div> 19 </div>
18 </div> 20 </div>
19 </template> 21 </template>
@@ -21,8 +23,8 @@ @@ -21,8 +23,8 @@
21 <script> 23 <script>
22 import CommentItem from './comment-item.vue'; 24 import CommentItem from './comment-item.vue';
23 import {Scroll} from 'cube-ui'; 25 import {Scroll} from 'cube-ui';
24 -import {createNamespacedHelpers} from 'vuex';  
25 import {get} from 'lodash'; 26 import {get} from 'lodash';
  27 +import {createNamespacedHelpers} from 'vuex';
26 const {mapActions} = createNamespacedHelpers('comment'); 28 const {mapActions} = createNamespacedHelpers('comment');
27 29
28 export default { 30 export default {
@@ -37,36 +39,57 @@ export default { @@ -37,36 +39,57 @@ export default {
37 data() { 39 data() {
38 return { 40 return {
39 page: 1, 41 page: 1,
  42 + commentList: [],
  43 + scrollOption: {
  44 + pullUpLoad: {
  45 + threshold: 200,
  46 + txt: {
  47 + more: '上拉加载',
  48 + noMore: '- 已经到底了 -'
  49 + }
  50 + }
  51 + },
40 show: false 52 show: false
41 }; 53 };
42 }, 54 },
  55 + watch: {
  56 + destId() {
  57 + this.init();
  58 + }
  59 + },
43 mounted() { 60 mounted() {
44 setTimeout(() => { 61 setTimeout(() => {
45 - this.show = true; 62 + this.fetchComments();
46 }, 200); 63 }, 200);
47 }, 64 },
48 methods: { 65 methods: {
49 ...mapActions(['fetchCommentList', 'fetchReplayList', 'postComment']), 66 ...mapActions(['fetchCommentList', 'fetchReplayList', 'postComment']),
50 - async onFetch() { 67 + async fetchComments(refresh) {
51 const result = await this.fetchCommentList({ 68 const result = await this.fetchCommentList({
52 destId: this.destId, 69 destId: this.destId,
53 columnType: this.columnType, 70 columnType: this.columnType,
54 page: this.page, 71 page: this.page,
55 }); 72 });
  73 + let dirty = true;
56 74
57 if (result.code === 200) { 75 if (result.code === 200) {
58 const comments = get(result, 'data.commentInfos', []); 76 const comments = get(result, 'data.commentInfos', []);
59 77
  78 + if (refresh) {
  79 + this.commentList = comments;
  80 + } else {
  81 + this.commentList = this.commentList.concat(comments);
  82 + }
  83 +
60 if (comments.length) { 84 if (comments.length) {
61 this.page++; 85 this.page++;
62 - this.$emit('on-page-change', {  
63 - page: this.page,  
64 - size: result.data.total  
65 - });  
66 - return Promise.resolve(comments);  
67 } else { 86 } else {
68 - return Promise.resolve(false); 87 + dirty = false;
69 } 88 }
  89 + this.$emit('on-page-change', {
  90 + page: this.page,
  91 + size: result.data.total
  92 + });
70 } else { 93 } else {
71 this.$createToast && this.$createToast({ 94 this.$createToast && this.$createToast({
72 txt: result.message || '服务器开小差了', 95 txt: result.message || '服务器开小差了',
@@ -74,6 +97,11 @@ export default { @@ -74,6 +97,11 @@ export default {
74 time: 1000 97 time: 1000
75 }).show(); 98 }).show();
76 } 99 }
  100 + this.$refs.scroll.forceUpdate(dirty);
  101 + return result;
  102 + },
  103 + onPullingUp() {
  104 + this.fetchComments();
77 }, 105 },
78 async onComment() { 106 async onComment() {
79 const result = await this.postComment({ 107 const result = await this.postComment({
@@ -93,9 +121,10 @@ export default { @@ -93,9 +121,10 @@ export default {
93 }).show(); 121 }).show();
94 } 122 }
95 }, 123 },
96 - init() { 124 + async init() {
97 this.page = 1; 125 this.page = 1;
98 - this.$refs.comment.init(); 126 + await this.fetchComments(true);
  127 + this.$refs.scroll.forceUpdate(true);
99 }, 128 },
100 async onReply({commentId}) { 129 async onReply({commentId}) {
101 const result = await this.fetchReplayList({ 130 const result = await this.fetchReplayList({
  1 +export default {
  2 + name: 'CommentPlaceholder',
  3 + props: {
  4 + tag: String,
  5 + destId: Number,
  6 + addType: Number,
  7 + columnType: {
  8 + type: Number,
  9 + default: 1001
  10 + },
  11 + placeholder: String
  12 + },
  13 + methods: {
  14 + openComentInput() {
  15 + this.$yoho.getInput({
  16 + hint: '你好',
  17 + success: (content) => {
  18 + console.log(content)
  19 + },
  20 + fail: (e) => {
  21 + console.log('fail', e)
  22 + }
  23 + });
  24 + }
  25 + },
  26 + render(h) {
  27 + return h(this.tag || 'div', {
  28 + on: {
  29 + click: () => {
  30 + this.openComentInput();
  31 + }
  32 + }
  33 + }, this.$slots.default);
  34 + }
  35 +};
1 <template> 1 <template>
2 - <Layout class="article">  
3 - <LayoutHeader theme="white" slot='header'> 2 + <Layout>
  3 + <LayoutHeader :back="!popup" theme="white" slot='header'>
4 {{headerText}} 4 {{headerText}}
  5 + <template v-slot:opts v-if="popup">
  6 + <i class="iconfont icon-close icon" @click="onClose"></i>
  7 + </template>
5 </LayoutHeader> 8 </LayoutHeader>
6 <CommentList :dest-id="destId" :column-type="1001" @on-page-change="onPageChange"></CommentList> 9 <CommentList :dest-id="destId" :column-type="1001" @on-page-change="onPageChange"></CommentList>
7 </Layout> 10 </Layout>
@@ -11,9 +14,13 @@ @@ -11,9 +14,13 @@
11 import CommentList from './comment-list'; 14 import CommentList from './comment-list';
12 15
13 export default { 16 export default {
14 - name: 'ArticleCommentComponent', 17 + name: 'Comment',
15 props: { 18 props: {
16 - destId: Number 19 + destId: Number,
  20 + popup: {
  21 + type: Boolean,
  22 + default: false
  23 + }
17 }, 24 },
18 data() { 25 data() {
19 return { 26 return {
@@ -28,6 +35,9 @@ export default { @@ -28,6 +35,9 @@ export default {
28 methods: { 35 methods: {
29 onPageChange({size}) { 36 onPageChange({size}) {
30 this.size = size; 37 this.size = size;
  38 + },
  39 + onClose() {
  40 + this.$emit('on-close');
31 } 41 }
32 }, 42 },
33 components: {CommentList} 43 components: {CommentList}
1 import Comment from './comment'; 1 import Comment from './comment';
  2 +import CommentPlaceholder from './comment-placeholder';
2 3
3 export default [ 4 export default [
4 Comment, 5 Comment,
  6 + CommentPlaceholder
5 ]; 7 ];
1 <template> 1 <template>
2 - <img v-lazy="currentSrc" :alt="alt" v-if="lazy">  
3 - <img :src="currentSrc" :alt="alt" v-else> 2 + <img v-lazy="currentSrc" :alt="alt" v-if="currentLazy">
  3 + <img :src="currentSrc" :alt="alt" v-else lazy="" data-src="">
4 </template> 4 </template>
5 5
6 <script> 6 <script>
@@ -22,12 +22,16 @@ export default { @@ -22,12 +22,16 @@ export default {
22 }, 22 },
23 data() { 23 data() {
24 return { 24 return {
25 - refresh: false 25 + refresh: false,
  26 + currentLazy: this.lazy
26 }; 27 };
27 }, 28 },
28 watch: { 29 watch: {
29 src() { 30 src() {
30 - this.lazy = false; 31 + this.currentLazy = false;
  32 + },
  33 + lazy(val) {
  34 + this.currentLazy = val;
31 } 35 }
32 }, 36 },
33 computed: { 37 computed: {
1 <template> 1 <template>
2 <div class="layout-header" :class="{[`theme-${theme}`]: theme}"> 2 <div class="layout-header" :class="{[`theme-${theme}`]: theme}">
3 <div class="back flex hover-opacity" @click="onBack"> 3 <div class="back flex hover-opacity" @click="onBack">
4 - <slot name="back"> 4 + <slot name="back" v-if="back">
5 <i class="iconfont icon-left"></i> 5 <i class="iconfont icon-left"></i>
6 </slot> 6 </slot>
7 </div> 7 </div>
@@ -25,6 +25,10 @@ export default { @@ -25,6 +25,10 @@ export default {
25 title: String, 25 title: String,
26 theme: String, 26 theme: String,
27 fixed: Boolean, 27 fixed: Boolean,
  28 + back: {
  29 + type: Boolean,
  30 + default: true
  31 + },
28 transparentSeek: Number, 32 transparentSeek: Number,
29 opacity: { 33 opacity: {
30 type: Number, 34 type: Number,
1 import Vue from 'vue'; 1 import Vue from 'vue';
2 2
3 -import focus from './focus';  
4 import TransferDom from './transfer-dom'; 3 import TransferDom from './transfer-dom';
5 -import Tap from './tap';  
6 4
7 -Vue.directive('focus', focus);  
8 Vue.directive('TransferDom', TransferDom); 5 Vue.directive('TransferDom', TransferDom);
9 -Vue.directive('Tap', Tap);  
@@ -3,7 +3,6 @@ @@ -3,7 +3,6 @@
3 </template> 3 </template>
4 4
5 <script> 5 <script>
6 -import Comment from 'components/comments/comment';  
7 6
8 export default { 7 export default {
9 name: 'ArticleComment', 8 name: 'ArticleComment',
@@ -17,6 +16,5 @@ export default { @@ -17,6 +16,5 @@ export default {
17 return parseInt(this.$route.params.articleId, 10); 16 return parseInt(this.$route.params.articleId, 10);
18 } 17 }
19 }, 18 },
20 - components: {Comment}  
21 }; 19 };
22 </script> 20 </script>
@@ -25,9 +25,9 @@ @@ -25,9 +25,9 @@
25 </LayoutRecycleList> 25 </LayoutRecycleList>
26 <slot name="thumb" v-else></slot> 26 <slot name="thumb" v-else></slot>
27 27
28 - <ArticleActionSheet ref="actionSheet"></ArticleActionSheet>  
29 - <YohoActionSheet v-if="showCommentAction" ref="commentAction" :full="true">  
30 - <Comment :destId="currentArticle.articleId"></Comment> 28 + <ArticleActionSheet v-if="showArticleDetailAction" ref="actionSheet"></ArticleActionSheet>
  29 + <YohoActionSheet transfer v-if="showCommentAction" ref="commentAction" :full="true">
  30 + <Comment :destId="articleId" :popup="true" @on-close="onClose"></Comment>
31 </YohoActionSheet> 31 </YohoActionSheet>
32 </Layout> 32 </Layout>
33 </template> 33 </template>
@@ -52,6 +52,7 @@ export default { @@ -52,6 +52,7 @@ export default {
52 return { 52 return {
53 articleId: 0, 53 articleId: 0,
54 showCommentAction: false, 54 showCommentAction: false,
  55 + showArticleDetailAction: false,
55 shareData: {}, 56 shareData: {},
56 inx: 0, 57 inx: 0,
57 scrollTop: 0, 58 scrollTop: 0,
@@ -74,10 +75,14 @@ export default { @@ -74,10 +75,14 @@ export default {
74 }, 75 },
75 methods: { 76 methods: {
76 onComment({articleId}) { 77 onComment({articleId}) {
77 - console.log(articleId)  
78 this.articleId = articleId; 78 this.articleId = articleId;
79 this.showCommentAction = true; 79 this.showCommentAction = true;
80 - this.$refs.commentAction.show(); 80 + this.$nextTick(() => {
  81 + this.$refs.commentAction.show();
  82 + });
  83 + },
  84 + onClose() {
  85 + this.$refs.commentAction.hide();
81 }, 86 },
82 onScroll({item, scrollTop}) { 87 onScroll({item, scrollTop}) {
83 this.scrollTop = scrollTop; 88 this.scrollTop = scrollTop;
@@ -144,8 +149,11 @@ export default { @@ -144,8 +149,11 @@ export default {
144 149
145 toast.show(); 150 toast.show();
146 151
147 - this.$refs.actionSheet.show(params).then(() => {  
148 - toast.hide(); 152 + this.showArticleDetailAction = true;
  153 + this.$nextTick(() => {
  154 + this.$refs.actionSheet.show(params).then(() => {
  155 + toast.hide();
  156 + });
149 }); 157 });
150 } 158 }
151 }, 159 },
1 <template> 1 <template>
2 - <YohoActionSheet ref="actionSheet" :full="true"> 2 + <YohoActionSheet transfer ref="actionSheet" :full="true">
3 <ArticleDetail ref="detail" @on-close="onClose"></ArticleDetail> 3 <ArticleDetail ref="detail" @on-close="onClose"></ArticleDetail>
4 </YohoActionSheet> 4 </YohoActionSheet>
5 </template> 5 </template>
@@ -57,7 +57,12 @@ export default { @@ -57,7 +57,12 @@ export default {
57 productIds: ufoProducts.join(','), 57 productIds: ufoProducts.join(','),
58 }); 58 });
59 59
60 - commit(Types.FETCH_ARTICLE_PRODUCT_SUCCESS, {articles, favs: result.data, articleProductType: 2}); 60 + if (result.code === 200) {
  61 + if (!result.data) {
  62 + result.data = [];
  63 + }
  64 + commit(Types.FETCH_ARTICLE_PRODUCT_SUCCESS, {articles, favs: result.data, articleProductType: 2});
  65 + }
61 } 66 }
62 }, 67 },
63 async fetchArticleListByTopic({commit, state}, {labelId, limit = 5, page = 1}) { 68 async fetchArticleListByTopic({commit, state}, {labelId, limit = 5, page = 1}) {