fe / yoho-community-web · Commits

Go to a project

Authored by 王水玲
Commit 64b1bcda022bb723e4b2ed7223e25919023df3c8 1 parent 61c50d20

潮物详情

Inline Side-by-side
Showing 2 changed files with 345 additions and 4 deletions
1 <template> 1 <template>
2 - <div></div> 2 + <div class="comment-item">
  3 + <ImageFormat :src="parentComment.headIco" :width="80" :height="80" class="comment-user-avatar"></ImageFormat>
  4 + <div class="comment">
  5 + <div class="comment-nav">
  6 + <div class="comment-nav-left">
  7 + <p class="comment-user-name">{{parentComment.userName}}</p>
  8 + <p class="comment-time">{{parentComment.createTime}}</p>
  9 + </div>
  10 + <WidgetFav :num="parentComment.praiseTotal"></WidgetFav>
  11 + </div>
  12 +
  13 + <p class="comment-cont" @click="replyComment" :data-parent-id="parentComment.parentId" :data-root-id="parentComment.rootId">
  14 + {{parentComment.content}}
  15 + </p>
  16 + <div class="reply-main">
  17 + <p class="reply-item" v-for="(reply, replyIndex) in childrenComments" :key="replyIndex" v-show="isShowReply(replyIndex)">
  18 + <span class="reply-user">
  19 + {{reply.userName}}
  20 + </span>
  21 + <span v-if="reply.parentUserName">
  22 + 回复<em class="reply-to-user">@{{reply.parentUserName}}</em>
  23 + </span>:
  24 + <span @click="replyComment" :data-parent-id="reply.parentId" :data-root-id="reply.rootId">
  25 + {{reply.content}}
  26 + </span>
  27 + </p>
  28 + <p class="reply-more" v-if="isShowReplyMore" @click="viewMoreReply" v-html="replyMoreText"></p>
  29 + </div>
  30 + </div>
  31 + </div>
3 </template> 32 </template>
4 33
5 <script> 34 <script>
6 export default { 35 export default {
7 - name: 'CommentList' 36 + name: 'CommentList',
  37 + props: {
  38 + parentComment: Object,
  39 + childrenComments: Array,
  40 + columnType: {
  41 + type: Number,
  42 + default: 1001
  43 + }
  44 + },
  45 + data() {
  46 + return {
  47 + showAllReply: false,
  48 + replyMoreText: '',
  49 + moreText: ''
  50 + };
  51 + },
  52 + computed: {
  53 + isShowReplyMore() {
  54 + return this.childrenComments.length > 2;
  55 + },
  56 + viewReplyNum() {
  57 + return this.childrenComments.length - 2;
  58 + }
  59 + },
  60 + created() {
  61 + this.moreText = `查看${this.viewReplyNum}条回复<span class="iconfont icon-right"></span>`;
  62 + this.replyMoreText = this.moreText;
  63 + },
  64 + methods: {
  65 + isShowReply(index) {
  66 + return index <= 1 || this.showAllReply;
  67 + },
  68 + viewMoreReply() {
  69 + this.replyMoreText = this.showAllReply ? this.moreText : '收起';
  70 + this.showAllReply = !this.showAllReply;
  71 + },
  72 + replyComment(e) {
  73 + console.log(e)
  74 + }
  75 + }
8 }; 76 };
9 </script> 77 </script>
  78 +
  79 +<style scoped lang="scss">
  80 +.comment-item {
  81 + display: flex;
  82 + margin-bottom: 20px;
  83 +
  84 + &:last-child {
  85 + margin-bottom: 0;
  86 + }
  87 +
  88 + .comment-user-avatar {
  89 + width: 80px;
  90 + height: 80px;
  91 + border-radius: 50%;
  92 + }
  93 +
  94 + .comment {
  95 + width: 600px;
  96 + margin-left: 10px;
  97 + }
  98 +
  99 + .comment-nav {
  100 + padding-left: 10px;
  101 + box-sizing: border-box;
  102 + display: flex;
  103 + justify-content: space-between;
  104 + }
  105 +
  106 + .comment-nav-left {
  107 + flex: 1;
  108 +
  109 + .comment-user-name {
  110 + font-size: 28px;
  111 + font-weight: bold;
  112 + color: #222;
  113 + line-height: 40px;
  114 + }
  115 +
  116 + .comment-time {
  117 + font-size: 20px;
  118 + color: #B0B0B0;
  119 + line-height: 28px;
  120 + }
  121 + }
  122 +
  123 + .comment-cont {
  124 + font-size: 28px;
  125 + color: #444;
  126 + line-height: 40px;
  127 + margin: 12px 0 20px;
  128 + padding-left: 10px;
  129 + box-sizing: border-box;
  130 + }
  131 +
  132 + .reply-main {
  133 + background: #F0F0F0;
  134 + padding: 20px;
  135 + box-sizing: border-box;
  136 + font-size: 24px;
  137 + color: #444;
  138 + line-height: 34px;
  139 +
  140 + .reply-item {
  141 + margin-bottom: 20px;
  142 + display: flex;
  143 +
  144 + &:last-child {
  145 + margin-bottom: 0;
  146 + }
  147 +
  148 + .reply-to-user {
  149 + color: #4A90E2;
  150 + font-style: normal;
  151 + }
  152 +
  153 + .reply-user {
  154 + font-weight: 500;
  155 + }
  156 + }
  157 +
  158 + .reply-more {
  159 + text-align: right;
  160 + color: #4A90E2;
  161 + margin-top: 10px;
  162 + }
  163 + }
  164 +}
  165 +</style>
  166 +
@@ -15,15 +15,27 @@ @@ -15,15 +15,27 @@
15 </div> 15 </div>
16 16
17 <div class="follow"> 17 <div class="follow">
  18 + <WidgetAvatarGroup :avatars="avatars" :option="{srcKey: 'src', maxDisplayNum: 10}"></WidgetAvatarGroup>
18 <span class="follow-num">3998人已种草</span> 19 <span class="follow-num">3998人已种草</span>
19 </div> 20 </div>
20 21
21 <div class="hot-comment out-box"> 22 <div class="hot-comment out-box">
22 <div class="comment-title"></div> 23 <div class="comment-title"></div>
  24 + <div class="comment-list">
  25 + <CommentList v-for="(comment, index) in commentInfos" v-bind="comment" :columnType="1003" :key="index"></CommentList>
  26 + </div>
  27 + <span class="more">查看更多</span>
23 </div> 28 </div>
24 29
25 <div class="you-like out-box"> 30 <div class="you-like out-box">
26 <div class="yoho-like-title"></div> 31 <div class="yoho-like-title"></div>
  32 + <ProductList></ProductList>
  33 + </div>
  34 +
  35 + <div class="fashion-footer">
  36 + <div class="grass-btn"><span class="iconfont icon-grass-fill"></span><em>种草</em></div>
  37 + <div class="comment-btn"><span class="iconfont icon-msg-blod"></span><em>评论</em></div>
  38 + <button class="go-buy">立即购买</button>
27 </div> 39 </div>
28 </div> 40 </div>
29 </Layout> 41 </Layout>
@@ -34,7 +46,91 @@ export default { @@ -34,7 +46,91 @@ export default {
34 name: 'fashionDetail', 46 name: 'fashionDetail',
35 data() { 47 data() {
36 return { 48 return {
37 - shareData: {} 49 + shareData: {},
  50 + avatars: [{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
  51 + {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
  52 + {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
  53 + {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
  54 + {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
  55 + {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
  56 + {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
  57 + {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
  58 + {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
  59 + {src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'}
  60 + ],
  61 + commentInfos: [{
  62 + childrenComments: [
  63 + {
  64 + content: "fdsfdsfsdf对方水电费第三方",
  65 + id: 68,
  66 + isPraise: "Y",
  67 + parentId: 66,
  68 + parentUid: 500030381,
  69 + praiseTotal: "12",
  70 + rootId: 66,
  71 + status: 1,
  72 + uid: 600033622,
  73 + columnType: 1000,
  74 + destId: 600033622,
  75 + createTime: 111,
  76 + userName: "三只松鼠",
  77 + headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
  78 + parentUserName: "大松鼠",
  79 + articleType: 1
  80 + },
  81 + {
  82 + content: "fdsfdsfsdf对方水电费第三方",
  83 + id: 68,
  84 + isPraise: "Y",
  85 + parentId: 66,
  86 + parentUid: 500030381,
  87 + praiseTotal: "12",
  88 + rootId: 66,
  89 + status: 1,
  90 + uid: 600033622,
  91 + columnType: 1000,
  92 + destId: 600033622,
  93 + createTime: 111,
  94 + userName: "三只松鼠",
  95 + headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
  96 + parentUserName: "大松鼠",
  97 + articleType: 1
  98 + },
  99 + {
  100 + content: "fdsfdsfsdf对方水电费第三方",
  101 + id: 68,
  102 + isPraise: "Y",
  103 + parentId: 66,
  104 + parentUid: 500030381,
  105 + praiseTotal: "12",
  106 + rootId: 66,
  107 + status: 1,
  108 + uid: 600033622,
  109 + columnType: 1000,
  110 + destId: 600033622,
  111 + createTime: 111,
  112 + userName: "三只松鼠",
  113 + headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
  114 + parentUserName: "大松鼠",
  115 + articleType: 1
  116 + }
  117 + ],
  118 + parentComment: {
  119 + articleType: 1,
  120 + content: "fsefs第三方",
  121 + createTime: 23213,
  122 + id: 66,
  123 + isPraise: "Y",
  124 + praiseTotal: "11",
  125 + status: 0,
  126 + uid: 500030381,
  127 + columnType: 1000,
  128 + destId: 600033622,
  129 + articleId: 123,
  130 + userName: "大松鼠",
  131 + headIco: '//img13.static.yhbimg.com/author/2018/12/10/10/02143c5a70e288801cda4ac4f3fa8b9d7b.jpg?imageView2/2/interlace/1/q/75',
  132 + }
  133 + }],
38 } 134 }
39 } 135 }
40 } 136 }
@@ -98,6 +194,12 @@ export default { @@ -98,6 +194,12 @@ export default {
98 194
99 .follow { 195 .follow {
100 margin-bottom: 30px; 196 margin-bottom: 30px;
  197 + padding: 0 30px;
  198 + clear: both;
  199 + box-sizing: border-box;
  200 + display: flex;
  201 + align-items: center;
  202 + justify-content: space-between;
101 } 203 }
102 204
103 .out-box { 205 .out-box {
@@ -105,12 +207,44 @@ export default { @@ -105,12 +207,44 @@ export default {
105 padding: 30px; 207 padding: 30px;
106 } 208 }
107 209
  210 + .hot-comment {
  211 + display: flex;
  212 + width: 100%;
  213 + flex-direction: column;
  214 +
108 .comment-title { 215 .comment-title {
109 background: url(../../statics/image/fashion/jcrp_title@2x.png) no-repeat; 216 background: url(../../statics/image/fashion/jcrp_title@2x.png) no-repeat;
110 background-size: contain; 217 background-size: contain;
111 width: 310px; 218 width: 310px;
112 height: 78px; 219 height: 78px;
113 - margin: 0 auto; 220 + margin: 0 auto 60px;
  221 + }
  222 +
  223 + .more {
  224 + font-size: 24px;
  225 + color: #B0B0B0;
  226 + margin: 60px auto 30px;
  227 + display: flex;
  228 + align-items: center;
  229 +
  230 + &:before{
  231 + content: "";
  232 + background: #B0B0B0;
  233 + width: 40px;
  234 + height: 2px;
  235 + margin-right: 20px;
  236 + display: inline-block;
  237 + }
  238 +
  239 + &:after{
  240 + content: "";
  241 + background: #B0B0B0;
  242 + width: 40px;
  243 + height: 2px;
  244 + margin-left: 20px;
  245 + display: inline-block;
  246 + }
  247 + }
114 } 248 }
115 249
116 .yoho-like-title { 250 .yoho-like-title {
@@ -120,5 +254,55 @@ export default { @@ -120,5 +254,55 @@ export default {
120 height: 78px; 254 height: 78px;
121 margin: 0 auto; 255 margin: 0 auto;
122 } 256 }
  257 +
  258 + .fashion-footer {
  259 + height: 120px;
  260 + width: 100%;
  261 + background: #fff ;
  262 + border-top: 1px solid #D8D8D8 ;
  263 + position: fixed;
  264 + bottom: 0;
  265 + display: flex;
  266 + justify-content: space-around;
  267 + align-items: center;
  268 + box-sizing: border-box;
  269 +
  270 + .go-buy {
  271 + background: #D0021B;
  272 + color: #fff;
  273 + text-align: center;
  274 + width: 260px;
  275 + height: 88px;
  276 + border: none;
  277 + outline: none;
  278 + border-radius: 6px;
  279 + margin: 0 30px;
  280 + }
  281 +
  282 + .comment-btn,
  283 + .grass-btn {
  284 + flex: 1;
  285 + display: flex;
  286 + flex-direction: column;
  287 + text-align: center;
  288 + font-size: 18px;
  289 + color: #444;
  290 +
  291 + span {
  292 + font-size: 52px;
  293 + }
  294 +
  295 + em {
  296 + font-style: normal;
  297 + margin-top: -6px;
  298 + }
  299 + }
  300 +
  301 + .comment-btn {
  302 + span {
  303 + color: #b0b0b0;
  304 + }
  305 + }
  306 + }
123 } 307 }
124 </style> 308 </style>