fe / mars-static · Commits

Go to a project

Authored by 李靖
Commit d87090d8b973e29db59d8b496070f0d8044594a9 1 parent a8b0ab42

开发完成

Inline Side-by-side
Showing 2 changed files with 83 additions and 18 deletions
@@ -16,7 +16,7 @@ class Comment extends Page { @@ -16,7 +16,7 @@ class Comment extends Page {
16 $showBig: $('.show-big') 16 $showBig: $('.show-big')
17 }; 17 };
18 18
19 - this.page = 0; 19 + this.page = 1;
20 this.limit = 5; 20 this.limit = 5;
21 this.loading = false; 21 this.loading = false;
22 this.end = false; 22 this.end = false;
@@ -30,9 +30,9 @@ class Comment extends Page { @@ -30,9 +30,9 @@ class Comment extends Page {
30 } 30 }
31 31
32 bindEvents() { 32 bindEvents() {
33 - this.selector.$openMore.on('click', this.openMore.bind(this));  
34 - this.selector.$closeMore.on('click', this.closeMore.bind(this));  
35 - this.selector.$showBig.on('click', this.showBig.bind(this)); 33 + $('.comment-list').on('click', '.open-more', this.openMore.bind(this));
  34 + $('.comment-list').on('click', '.close-more', this.closeMore.bind(this));
  35 + $('.comment-list').on('click', '.show-big', this.showBig.bind(this));
36 } 36 }
37 37
38 scroll() { 38 scroll() {
@@ -51,11 +51,10 @@ class Comment extends Page { @@ -51,11 +51,10 @@ class Comment extends Page {
51 } 51 }
52 52
53 getMore() { 53 getMore() {
54 - console.log(this.page);  
55 this.loading = true; 54 this.loading = true;
56 $.ajax({ 55 $.ajax({
57 method: 'GET', 56 method: 'GET',
58 - url: window.$ajaxPath, 57 + url: `${window.$ajaxPath}/TblStoreAssessmentRest/commentsforh5`,
59 data: { 58 data: {
60 store_id: $('#storeId').val(), 59 store_id: $('#storeId').val(),
61 page: this.page || 1, 60 page: this.page || 1,
@@ -65,8 +64,8 @@ class Comment extends Page { @@ -65,8 +64,8 @@ class Comment extends Page {
65 let list = []; 64 let list = [];
66 let $commentList = $('.comment-list'); 65 let $commentList = $('.comment-list');
67 66
68 - if (result && result.code && result.code === 200 && result.data) {  
69 - list = result.data.data.list; 67 + if (result && result.data && result.data.list && result.data.list.length > 0) {
  68 + list = result.data.list;
70 list.forEach((val) => { 69 list.forEach((val) => {
71 let $html = $(`<div class="comment-item-c clearfix"> 70 let $html = $(`<div class="comment-item-c clearfix">
72 <div class="comment-item comment-main clearfix"> 71 <div class="comment-item comment-main clearfix">
@@ -80,10 +79,7 @@ class Comment extends Page { @@ -80,10 +79,7 @@ class Comment extends Page {
80 ${val.publish_time_str} 79 ${val.publish_time_str}
81 </span> 80 </span>
82 </div> 81 </div>
83 - <div class="price">  
84 - <span class="cny">CNY</span>  
85 - <span>233 /人</span>  
86 - </div> 82 + <div class="price"></div>
87 <div class="comment-words">${val.description}</div> 83 <div class="comment-words">${val.description}</div>
88 <div class="pic-list"></div> 84 <div class="pic-list"></div>
89 </div> 85 </div>
@@ -91,6 +87,14 @@ class Comment extends Page { @@ -91,6 +87,14 @@ class Comment extends Page {
91 <div class="comment-follow"></div> 87 <div class="comment-follow"></div>
92 </div>`); 88 </div>`);
93 89
  90 + if (val.consume && val.consume !== '0') {
  91 + // 用户消费
  92 + let $consume = $(`<span class="cny">CNY</span>
  93 + <span>${val.consume} /人</span>`);
  94 +
  95 + $html.find('.comment-main .price').append($consume);
  96 + }
  97 +
94 if (val.user) { 98 if (val.user) {
95 // 用户图片-名称 99 // 用户图片-名称
96 let headpic = val.user.headpic.split('?')[0]; 100 let headpic = val.user.headpic.split('?')[0];
@@ -137,22 +141,27 @@ class Comment extends Page { @@ -137,22 +141,27 @@ class Comment extends Page {
137 </div>`); 141 </div>`);
138 142
139 if (item.user) { 143 if (item.user) {
  144 + let userName = item.user.nickname || '';
  145 +
  146 + if (item.user.headpic) {
140 let headpic = item.user.headpic.split('?')[0]; 147 let headpic = item.user.headpic.split('?')[0];
141 - let $userPic = $(`<img class="head-pic lazy" alt="${val.user.nickname}" 148 + let $userPic = $(`<img class="head-pic lazy" alt="${userName}"
142 data-original="${headpic}?imageView2/1/w/152/h/152" />`); 149 data-original="${headpic}?imageView2/1/w/152/h/152" />`);
143 - let userName = item.user.nickname;  
144 150
145 - $comment.find('.user-name').text(userName);  
146 $comment.find('.left').append($userPic); 151 $comment.find('.left').append($userPic);
147 } 152 }
  153 +
  154 + $comment.find('.user-name').text(userName);
  155 + }
148 $html.find('.comment-follow').append($comment); 156 $html.find('.comment-follow').append($comment);
149 }); 157 });
150 } 158 }
151 159
152 - if (val.comment_num > 0) { 160 + if (val.comment_num > 3) {
153 // 更多评论 161 // 更多评论
  162 + let commentNum = parseInt(val.comment_num, 10) > 7 ? 10 : parseInt(val.comment_num, 10) + 3;
154 let $moreComment = $(` 163 let $moreComment = $(`
155 - <div class="more-comment open-more">所有${val.comment_num}条评论&nbsp;▼</div> 164 + <div class="more-comment open-more" id="${val.id}">所有${commentNum}条评论&nbsp;▼</div>
156 <div class="more-comment close-more">收起评论&nbsp;▲</div>`); 165 <div class="more-comment close-more">收起评论&nbsp;▲</div>`);
157 166
158 $html.append($moreComment); 167 $html.append($moreComment);
@@ -165,6 +174,8 @@ class Comment extends Page { @@ -165,6 +174,8 @@ class Comment extends Page {
165 }); 174 });
166 this.loading = false; 175 this.loading = false;
167 }); 176 });
  177 + } else {
  178 + this.end = true;
168 } 179 }
169 } 180 }
170 }); 181 });
@@ -188,15 +199,67 @@ class Comment extends Page { @@ -188,15 +199,67 @@ class Comment extends Page {
188 openMore(e) { 199 openMore(e) {
189 let $this = $(e.currentTarget); 200 let $this = $(e.currentTarget);
190 201
  202 + if ($this.hasClass('opened')) {
  203 + $this.parents('.comment-item-c').find('.comment-follow .comment-item').show();
191 $this.hide(); 204 $this.hide();
192 $this.next('.close-more').show(); 205 $this.next('.close-more').show();
  206 + return false;
  207 + } else {
  208 + $this.addClass('opened');
  209 + }
  210 +
  211 + $.ajax({
  212 + method: 'GET',
  213 + url: `${window.$ajaxPath}/TblStoreAssessmentRest/subcommentsforh5`,
  214 + data: {
  215 + comment_id: $this.attr('id'),
  216 + page: 1,
  217 + limit: 7
  218 + },
  219 + success: (result) => {
  220 + if (result && result.data && result.data.list && result.data.list.length > 0) {
  221 + let list = result.data.list;
  222 +
  223 + list.forEach((item) => {
  224 + let $comment = $(`<div class="comment-item clearfix">
  225 + <div class="left"></div>
  226 + <div class="right">
  227 + <div class="name">
  228 + <span class="user-name"></span>
  229 + <span class="time">${item.create_time_str}</span>
  230 + </div>
  231 + <div class="comment-words">${item.content}</div>
  232 + </div>
  233 + </div>`);
  234 +
  235 + if (item.user) {
  236 + let userName = item.user.nickname || '';
  237 +
  238 + if (item.user.headpic) {
  239 + let headpic = item.user.headpic.split('?')[0];
  240 + let $userPic = $(`<img class="head-pic lazy" alt="${userName}"
  241 + data-original="${headpic}?imageView2/1/w/152/h/152" />`);
  242 +
  243 + $comment.find('.left').append($userPic);
  244 + }
  245 +
  246 + $comment.find('.user-name').text(userName);
  247 + }
  248 + $this.parents('.comment-item-c').find('.comment-follow').append($comment);
  249 + });
  250 + $this.hide();
  251 + $this.next('.close-more').show();
  252 + }
  253 + }
  254 + });
193 } 255 }
194 256
195 closeMore(e) { 257 closeMore(e) {
196 let $this = $(e.currentTarget); 258 let $this = $(e.currentTarget);
197 259
198 - $this.hide(); 260 + $this.parents('.comment-item-c').find('.comment-follow .comment-item:gt(2)').hide();
199 $this.prev('.open-more').show(); 261 $this.prev('.open-more').show();
  262 + $this.hide();
200 } 263 }
201 } 264 }
202 265
@@ -104,6 +104,7 @@ @@ -104,6 +104,7 @@
104 font-size: 30px; 104 font-size: 30px;
105 height: 50px; 105 height: 50px;
106 line-height: 50px; 106 line-height: 50px;
  107 + color: #1a1a1a;
107 } 108 }
108 109
109 .location { 110 .location {
@@ -206,6 +207,7 @@ @@ -206,6 +207,7 @@
206 .comment-item { 207 .comment-item {
207 border-bottom: 0; 208 border-bottom: 0;
208 padding-right: 0; 209 padding-right: 0;
  210 + padding-bottom: 0;
209 211
210 .name { 212 .name {
211 font-size: 30px; 213 font-size: 30px;