fe / yohobuy-node · Commits

Go to a project

Authored by 刘传洋
Commit 51e8425763cae09f3f6dade462e583a5f4c855be 1 parent f817ac51

img show

Inline Side-by-side
Showing 5 changed files with 165 additions and 15 deletions
@@ -12,14 +12,32 @@ const _ = require('lodash'); @@ -12,14 +12,32 @@ const _ = require('lodash');
12 12
13 // comment page 13 // comment page
14 exports.index = (req, res, next) => { 14 exports.index = (req, res, next) => {
15 - let uid = req.user.uid; 15 + /*let uid = req.user.uid;
16 let isComment = req.query.isComment; 16 let isComment = req.query.isComment;
17 let page = req.query.page || 1; 17 let page = req.query.page || 1;
18 18
19 // 转string值为bool值 19 // 转string值为bool值
20 - isComment = isComment === 'Y'; 20 + isComment = isComment === 'Y';*/
21 21
22 - commentModel.getCommentList(uid, isComment, page /* , limit=10*/) 22 + res.render('comment', {
  23 + comment: {
  24 + orders: [{
  25 + orderTime: '2016-10-10',
  26 + goods: [{
  27 + href: '',
  28 + thumb: 'http://img10.static.yhbimg.com/goodsimg/2015/08/05/06/016aeb5985c7e186b5c4e43e165311126d.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center/quality/70',
  29 + name: '阿斯顿发到付',
  30 + comments: [{
  31 + img: 'http://img10.static.yhbimg.com/goodsimg/2015/08/05/06/016aeb5985c7e186b5c4e43e165311126d.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center/quality/70'
  32 + }, {
  33 + img: 'http://img10.static.yhbimg.com/goodsimg/2015/08/05/06/016aeb5985c7e186b5c4e43e165311126d.jpg?imageMogr2/thumbnail/100x100/extent/100x100/background/d2hpdGU=/position/center/quality/70'
  34 + }]
  35 + }]
  36 + }]
  37 + }
  38 + });
  39 +
  40 + /*commentModel.getCommentList(uid, isComment, page /!* , limit=10*!/)
23 .then(data => { 41 .then(data => {
24 let localData = _.merge(data, { 42 let localData = _.merge(data, {
25 module: 'home', 43 module: 'home',
@@ -32,7 +50,7 @@ exports.index = (req, res, next) => { @@ -32,7 +50,7 @@ exports.index = (req, res, next) => {
32 // 50 //
33 // }); 51 // });
34 }) 52 })
35 - .catch(next); 53 + .catch(next);*/
36 }; 54 };
37 55
38 exports.commentList4Order = (req, res, next) => { 56 exports.commentList4Order = (req, res, next) => {
@@ -156,9 +156,9 @@ exports.getCommentList4Order = (uid, orderId) => { @@ -156,9 +156,9 @@ exports.getCommentList4Order = (uid, orderId) => {
156 order.goods.length && commentList.orders.push(order); 156 order.goods.length && commentList.orders.push(order);
157 }); 157 });
158 158
159 -  
160 // let total = commentList.orders.length; 159 // let total = commentList.orders.length;
161 160
  161 +
162 // let totalPage = Math.ceil(total / limit); 162 // let totalPage = Math.ceil(total / limit);
163 // let begin = (page - 1) * limit; 163 // let begin = (page - 1) * limit;
164 164
@@ -42,17 +42,54 @@ @@ -42,17 +42,54 @@
42 <a href="{{href}}"><img src="{{thumb}}"></a> 42 <a href="{{href}}"><img src="{{thumb}}"></a>
43 </td> 43 </td>
44 <td> 44 <td>
45 - <a href="{{href}}">{{name}}</a>  
46 - <span>下单时间{{../orderTime}}</span> 45 + <a href="{{href}}" class="name">{{name}}</a>
  46 + <div>下单时间{{../orderTime}}</div>
47 </td> 47 </td>
48 - <td> 48 + <td style="width:50%" class="center">
49 <button class="remark-btn">评价商品</button> 49 <button class="remark-btn">评价商品</button>
50 </td> 50 </td>
51 </tr> 51 </tr>
52 <tr> 52 <tr>
53 <td colspan="3" class="comment-add"> 53 <td colspan="3" class="comment-add">
54 - <div>* 商品满意度：</div>  
55 - div. 54 + <div class="row">
  55 + <label class="fl-left"><i class="color-warn require-sign">*</i> 商品满意度：</label>
  56 + <span class="comment-star">
  57 + <span class="star-5"></span>
  58 + <span class="star-4"></span>
  59 + <span class="star-3"></span>
  60 + <span class="star-2"></span>
  61 + <span class="star-1"></span>
  62 + </span>
  63 + </div>
  64 + <div class="row">
  65 + <span class="col">
  66 + <label><i class="color-warn require-sign">*</i> 尺码符合度：</label>
  67 + <a href="#" class="btn btn-outline">偏小</a>
  68 + <a href="#" class="btn btn-outline">合身</a>
  69 + <a href="#" class="btn btn-outline">偏大</a>
  70 + </span>
  71 + <span class="col">
  72 + <label>身高：</label>
  73 + <a href="#" class="btn btn-outline">175</a> 厘米
  74 + </span>
  75 + <span class="col">
  76 + <label>体重：</label>
  77 + <a href="#" class="btn btn-outline">80</a> 公斤
  78 + </span>
  79 + </div>
  80 + <div class="row textarea">
  81 + <textarea></textarea>
  82 + </div>
  83 + <div class="row img-list">
  84 + <div class="img-wrap">
  85 + <img src="" />
  86 + </div>
  87 + <span>最多上传1张图片</span>
  88 + </div>
  89 + <div class="btns">
  90 + <a href="#" class="btn btn-submit">提交评价</a>
  91 + <span>带*为必填选项</span>
  92 + </div>
56 </td> 93 </td>
57 </tr> 94 </tr>
58 {{#each comments}} 95 {{#each comments}}
1 .comment-me-page { 1 .comment-me-page {
  2 + .btn {
  3 + display:inline-block;
  4 + margin:0 7px 0 0;
  5 + border:1px solid #636363;
  6 + font-size:12px;
  7 + line-height:1.3;
  8 + text-decoration:none;
  9 + color:#141414;
  10 + cursor:pointer;
  11 + padding:3px 10px 3px 7px;
  12 + }
  13 + .btn.active{
  14 + background:#444;
  15 + color: #fff;
  16 + }
  17 + .btn.disabled{
  18 + border-color: ;
  19 + }
  20 + .txt-center{
  21 + text-align: center;
  22 + }
  23 + .fl-left{
  24 + float: left;
  25 + }
2 .comment .title { 26 .comment .title {
3 background-image: resolve(img/home/comment.png); 27 background-image: resolve(img/home/comment.png);
4 } 28 }
@@ -18,7 +42,7 @@ @@ -18,7 +42,7 @@
18 margin-top: 10px; 42 margin-top: 10px;
19 43
20 .info { 44 .info {
21 - width: 260px; 45 + width: 50%;
22 } 46 }
23 47
24 .time { 48 .time {
@@ -28,7 +52,7 @@ @@ -28,7 +52,7 @@
28 } 52 }
29 53
30 .type { 54 .type {
31 - width: 98px; 55 + width: 49%;
32 } 56 }
33 } 57 }
34 58
@@ -37,7 +61,7 @@ @@ -37,7 +61,7 @@
37 margin-top: 10px; 61 margin-top: 10px;
38 62
39 tr { 63 tr {
40 - border: 1px solid #e6e6e6; 64 + border-bottom: 1px solid #e6e6e6;
41 65
42 th { 66 th {
43 background: #efefef; 67 background: #efefef;
@@ -45,15 +69,23 @@ @@ -45,15 +69,23 @@
45 } 69 }
46 70
47 td { 71 td {
48 - color: #666; 72 + color: #444;
49 padding: 5px; 73 padding: 5px;
  74 + text-align: left;
  75 +
  76 + &.center {
50 text-align: center; 77 text-align: center;
51 } 78 }
  79 + }
52 80
53 a { 81 a {
54 - color: #468fa2; 82 + /*color: #468fa2;*/
55 text-decoration: none; 83 text-decoration: none;
56 } 84 }
  85 + .name {
  86 + display: block;
  87 + margin-bottom:15px;
  88 + }
57 89
58 .remarked { 90 .remarked {
59 color: #e8044f; 91 color: #e8044f;
@@ -71,11 +103,74 @@ @@ -71,11 +103,74 @@
71 } 103 }
72 } 104 }
73 105
  106 + .color-warn{
  107 + color: #da1511;
  108 + }
  109 + .require-sign{
  110 + float: left;
  111 + margin-left:-10px;
  112 + line-height: 1.8;
  113 + }
74 .remark-content { 114 .remark-content {
75 width: 405px; 115 width: 405px;
76 border: 1px solid #e6e6e6; 116 border: 1px solid #e6e6e6;
77 word-break: break-all; 117 word-break: break-all;
78 } 118 }
  119 +
  120 + .comment-add {
  121 + padding: 20px 50px;
  122 +
  123 + .row {
  124 + margin-bottom:16px;
  125 +
  126 + .col{
  127 + margin-right: 50px;
  128 + &:last-child{
  129 + margin-right:0;
  130 + }
  131 + }
  132 + }
  133 + .textarea{
  134 + > textarea{
  135 + width: 100%;
  136 + height: 80px;
  137 + border-color: #dfdfdf;
  138 + }
  139 + }
  140 + }
  141 + .comment-star {
  142 + position:relative;
  143 + display:inline-block;
  144 + height:20px;
  145 + width:90px;
  146 + cursor:pointer;
  147 + background: resolve(img/home/star.png) 0 -20px repeat-x;
  148 +
  149 + .star-1, .star-2, .star-3, .star-4, .star-5{
  150 + position: absolute;
  151 + left:0;
  152 + top:0;
  153 + display:inline-block;
  154 + height:20px;
  155 + width: 18px;
  156 +
  157 + &:hover{
  158 + background: resolve(img/home/star.png) repeat-x;
  159 + }
  160 + }
  161 + .star-2{
  162 + width:36px;
  163 + }
  164 + .star-3{
  165 + width:54px;
  166 + }
  167 + .star-4{
  168 + width:72px;
  169 + }
  170 + .star-5{
  171 + width:90px;
  172 + }
  173 + }
79 } 174 }
80 175
81 .comment-dialog-widget { 176 .comment-dialog-widget {