fe / yoho-community-web · Commits

Go to a project

Authored by 黄涛
Commit 755b0645ab0748edaf7788709a4878f283a963eb 2 parents 660b4f3b b7466bb0

Merge branch 'feature/fashion-detail' into 'master' 

Feature/fashion detail



See merge request !1
Inline Side-by-side
Showing 6 changed files with 470 additions and 5 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 +
  1 +<template>
  2 + <Layout>
  3 + <LayoutHeader slot="header" title="潮物详情" :share="shareData"></LayoutHeader>
  4 + <div class="fashion-detail-page">
  5 + <div class="product-info">
  6 + <img src="//img12.static.yhbimg.com/goodsimg/2018/12/24/09/02ce4a371bd58b47e599f8e04c7c7bc250.jpg?imageMogr2/thumbnail/235x314/position/center/quality/60" alt="" class="product-img">
  7 + <div class="product-info-right">
  8 + <div class="product-title">Lee X-LINE系列男士宽松插画印花背带裤</div>
  9 + <div class="product-desc">一年到头，我们总喜欢给过去来个总结。要说今年最火的穿搭元素，我想离不开两个字——“老爹”。满大街的老爹鞋，从去年踩到今年，足以证明这股复古风潮的影响力。</div>
  10 + <div class="product-price">
  11 + <span class="sale-price">￥899</span>
  12 + <span class="market-price">￥1899</span>
  13 + </div>
  14 + </div>
  15 + </div>
  16 +
  17 + <div class="follow">
  18 + <WidgetAvatarGroup :avatars="avatars" :option="{srcKey: 'src', maxDisplayNum: 10}"></WidgetAvatarGroup>
  19 + <span class="follow-num">3998人已种草</span>
  20 + </div>
  21 +
  22 + <div class="hot-comment out-box">
  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>
  28 + </div>
  29 +
  30 + <div class="you-like out-box">
  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>
  39 + </div>
  40 + </div>
  41 + </Layout>
  42 +</template>
  43 +
  44 +<script>
  45 +export default {
  46 + name: 'fashionDetail',
  47 + data() {
  48 + return {
  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 + }],
  134 + }
  135 + }
  136 +}
  137 +</script>
  138 +
  139 +<style scoped lang="scss">
  140 +.fashion-detail-page {
  141 + .product-info {
  142 + display: flex;
  143 + padding: 30px;
  144 + box-sizing: border-box;
  145 +
  146 + .product-img {
  147 + width: 320px;
  148 + height: 424px;
  149 + }
  150 +
  151 + .product-info-right {
  152 + width: 350px;
  153 + margin-left: 20px;
  154 + }
  155 +
  156 + .product-title {
  157 + font-size: 30px;
  158 + color: #222;
  159 + line-height: 44px;
  160 + font-weight: bold;
  161 + }
  162 +
  163 + .product-desc {
  164 + font-size: 26px;
  165 + color: #B0B0B0;
  166 + line-height: 36px;
  167 + margin-top: 18px;
  168 + height: 174px;
  169 + overflow: hidden;
  170 + word-break: break-all;
  171 + text-overflow: ellipsis;
  172 + display: -webkit-box;
  173 + -webkit-box-orient: vertical;
  174 + -webkit-line-clamp: 5;
  175 + }
  176 +
  177 + .product-price {
  178 + display: flex;
  179 + align-items: center;
  180 + margin-top: 84px;
  181 + }
  182 +
  183 + .sale-price {
  184 + color: #D0021B;
  185 + font-size: 28px;
  186 + }
  187 +
  188 + .market-price {
  189 + color: #B0B0B0;
  190 + font-size: 20px;
  191 + margin-left: 12px;
  192 + }
  193 + }
  194 +
  195 + .follow {
  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;
  203 + }
  204 +
  205 + .out-box {
  206 + border-top: 20px solid #F0F0F0;
  207 + padding: 30px;
  208 + }
  209 +
  210 + .hot-comment {
  211 + display: flex;
  212 + width: 100%;
  213 + flex-direction: column;
  214 +
  215 + .comment-title {
  216 + background: url(../../statics/image/fashion/jcrp_title@2x.png) no-repeat;
  217 + background-size: contain;
  218 + width: 310px;
  219 + height: 78px;
  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 + }
  248 + }
  249 +
  250 + .yoho-like-title {
  251 + background: url(../../statics/image/fashion/cnxh_title@2x.png) no-repeat;
  252 + background-size: contain;
  253 + width: 250px;
  254 + height: 78px;
  255 + margin: 0 auto;
  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 + }
  307 +}
  308 +</style>
1 export default [{ 1 export default [{
2 - path: '/xxx',  
3 - name: 'xxx', 2 + path: '/fashion/detail',
  3 + name: 'fashionDetail',
4 4
5 - // component: () => import(/* webpackChunkName: "xxx" */ './xxx') 5 + component: () => import(/* webpackChunkName: "fashionDetail" */ './fashion-detail')
6 }]; 6 }];
This diff could not be displayed because it is too large.