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
<template>
<div></div>
<div class="comment-item">
<ImageFormat :src="parentComment.headIco" :width="80" :height="80" class="comment-user-avatar"></ImageFormat>
<div class="comment">
<div class="comment-nav">
<div class="comment-nav-left">
<p class="comment-user-name">{{parentComment.userName}}</p>
<p class="comment-time">{{parentComment.createTime}}</p>
</div>
<WidgetFav :num="parentComment.praiseTotal"></WidgetFav>
</div>
<p class="comment-cont" @click="replyComment" :data-parent-id="parentComment.parentId" :data-root-id="parentComment.rootId">
{{parentComment.content}}
</p>
<div class="reply-main">
<p class="reply-item" v-for="(reply, replyIndex) in childrenComments" :key="replyIndex" v-show="isShowReply(replyIndex)">
<span class="reply-user">
{{reply.userName}}
</span>
<span v-if="reply.parentUserName">
回复<em class="reply-to-user">@{{reply.parentUserName}}</em>
</span>:
<span @click="replyComment" :data-parent-id="reply.parentId" :data-root-id="reply.rootId">
{{reply.content}}
</span>
</p>
<p class="reply-more" v-if="isShowReplyMore" @click="viewMoreReply" v-html="replyMoreText"></p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CommentList'
name: 'CommentList',
props: {
parentComment: Object,
childrenComments: Array,
columnType: {
type: Number,
default: 1001
}
},
data() {
return {
showAllReply: false,
replyMoreText: '',
moreText: ''
};
},
computed: {
isShowReplyMore() {
return this.childrenComments.length > 2;
},
viewReplyNum() {
return this.childrenComments.length - 2;
}
},
created() {
this.moreText = `查看${this.viewReplyNum}条回复<span class="iconfont icon-right"></span>`;
this.replyMoreText = this.moreText;
},
methods: {
isShowReply(index) {
return index <= 1 || this.showAllReply;
},
viewMoreReply() {
this.replyMoreText = this.showAllReply ? this.moreText : '收起';
this.showAllReply = !this.showAllReply;
},
replyComment(e) {
console.log(e)
}
}
};
</script>
<style scoped lang="scss">
.comment-item {
display: flex;
margin-bottom: 20px;
&:last-child {
margin-bottom: 0;
}
.comment-user-avatar {
width: 80px;
height: 80px;
border-radius: 50%;
}
.comment {
width: 600px;
margin-left: 10px;
}
.comment-nav {
padding-left: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
}
.comment-nav-left {
flex: 1;
.comment-user-name {
font-size: 28px;
font-weight: bold;
color: #222;
line-height: 40px;
}
.comment-time {
font-size: 20px;
color: #B0B0B0;
line-height: 28px;
}
}
.comment-cont {
font-size: 28px;
color: #444;
line-height: 40px;
margin: 12px 0 20px;
padding-left: 10px;
box-sizing: border-box;
}
.reply-main {
background: #F0F0F0;
padding: 20px;
box-sizing: border-box;
font-size: 24px;
color: #444;
line-height: 34px;
.reply-item {
margin-bottom: 20px;
display: flex;
&:last-child {
margin-bottom: 0;
}
.reply-to-user {
color: #4A90E2;
font-style: normal;
}
.reply-user {
font-weight: 500;
}
}
.reply-more {
text-align: right;
color: #4A90E2;
margin-top: 10px;
}
}
}
</style>
... ...
<template>
<Layout>
<LayoutHeader slot="header" title="潮物详情" :share="shareData"></LayoutHeader>
<div class="fashion-detail-page">
<div class="product-info">
<img src="//img12.static.yhbimg.com/goodsimg/2018/12/24/09/02ce4a371bd58b47e599f8e04c7c7bc250.jpg?imageMogr2/thumbnail/235x314/position/center/quality/60" alt="" class="product-img">
<div class="product-info-right">
<div class="product-title">Lee X-LINE系列男士宽松插画印花背带裤</div>
<div class="product-desc">一年到头，我们总喜欢给过去来个总结。要说今年最火的穿搭元素，我想离不开两个字——“老爹”。满大街的老爹鞋，从去年踩到今年，足以证明这股复古风潮的影响力。</div>
<div class="product-price">
<span class="sale-price">￥899</span>
<span class="market-price">￥1899</span>
</div>
</div>
</div>
<div class="follow">
<WidgetAvatarGroup :avatars="avatars" :option="{srcKey: 'src', maxDisplayNum: 10}"></WidgetAvatarGroup>
<span class="follow-num">3998人已种草</span>
</div>
<div class="hot-comment out-box">
<div class="comment-title"></div>
<div class="comment-list">
<CommentList v-for="(comment, index) in commentInfos" v-bind="comment" :columnType="1003" :key="index"></CommentList>
</div>
<span class="more">查看更多</span>
</div>
<div class="you-like out-box">
<div class="yoho-like-title"></div>
<ProductList></ProductList>
</div>
<div class="fashion-footer">
<div class="grass-btn"><span class="iconfont icon-grass-fill"></span><em>种草</em></div>
<div class="comment-btn"><span class="iconfont icon-msg-blod"></span><em>评论</em></div>
<button class="go-buy">立即购买</button>
</div>
</div>
</Layout>
</template>
<script>
export default {
name: 'fashionDetail',
data() {
return {
shareData: {},
avatars: [{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'},
{src: '//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75'}
],
commentInfos: [{
childrenComments: [
{
content: "fdsfdsfsdf对方水电费第三方",
id: 68,
isPraise: "Y",
parentId: 66,
parentUid: 500030381,
praiseTotal: "12",
rootId: 66,
status: 1,
uid: 600033622,
columnType: 1000,
destId: 600033622,
createTime: 111,
userName: "三只松鼠",
headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
parentUserName: "",
articleType: 1
},
{
content: "fdsfdsfsdf对方水电费第三方",
id: 68,
isPraise: "Y",
parentId: 66,
parentUid: 500030381,
praiseTotal: "12",
rootId: 66,
status: 1,
uid: 600033622,
columnType: 1000,
destId: 600033622,
createTime: 111,
userName: "三只松鼠",
headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
parentUserName: "大松鼠",
articleType: 1
},
{
content: "fdsfdsfsdf对方水电费第三方",
id: 68,
isPraise: "Y",
parentId: 66,
parentUid: 500030381,
praiseTotal: "12",
rootId: 66,
status: 1,
uid: 600033622,
columnType: 1000,
destId: 600033622,
createTime: 111,
userName: "三只松鼠",
headIco: "//img10.static.yhbimg.com/author/2018/11/26/15/01fbe6e21e3b9120685834e1f6173e31c5.jpg?imageView2/2/interlace/1/q/75",
parentUserName: "大松鼠",
articleType: 1
}
],
parentComment: {
articleType: 1,
content: "fsefs第三方",
createTime: 23213,
id: 66,
isPraise: "Y",
praiseTotal: "11",
status: 0,
uid: 500030381,
columnType: 1000,
destId: 600033622,
articleId: 123,
userName: "大松鼠",
headIco: '//img13.static.yhbimg.com/author/2018/12/10/10/02143c5a70e288801cda4ac4f3fa8b9d7b.jpg?imageView2/2/interlace/1/q/75',
}
}],
}
}
}
</script>
<style scoped lang="scss">
.fashion-detail-page {
.product-info {
display: flex;
padding: 30px;
box-sizing: border-box;
.product-img {
width: 320px;
height: 424px;
}
.product-info-right {
width: 350px;
margin-left: 20px;
}
.product-title {
font-size: 30px;
color: #222;
line-height: 44px;
font-weight: bold;
}
.product-desc {
font-size: 26px;
color: #B0B0B0;
line-height: 36px;
margin-top: 18px;
height: 174px;
overflow: hidden;
word-break: break-all;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 5;
}
.product-price {
display: flex;
align-items: center;
margin-top: 84px;
}
.sale-price {
color: #D0021B;
font-size: 28px;
}
.market-price {
color: #B0B0B0;
font-size: 20px;
margin-left: 12px;
}
}
.follow {
margin-bottom: 30px;
padding: 0 30px;
clear: both;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
}
.out-box {
border-top: 20px solid #F0F0F0;
padding: 30px;
}
.hot-comment {
display: flex;
width: 100%;
flex-direction: column;
.comment-title {
background: url(../../statics/image/fashion/jcrp_title@2x.png) no-repeat;
background-size: contain;
width: 310px;
height: 78px;
margin: 0 auto 60px;
}
.more {
font-size: 24px;
color: #B0B0B0;
margin: 60px auto 30px;
display: flex;
align-items: center;
&:before{
content: "";
background: #B0B0B0;
width: 40px;
height: 2px;
margin-right: 20px;
display: inline-block;
}
&:after{
content: "";
background: #B0B0B0;
width: 40px;
height: 2px;
margin-left: 20px;
display: inline-block;
}
}
}
.yoho-like-title {
background: url(../../statics/image/fashion/cnxh_title@2x.png) no-repeat;
background-size: contain;
width: 250px;
height: 78px;
margin: 0 auto;
}
.fashion-footer {
height: 120px;
width: 100%;
background: #fff ;
border-top: 1px solid #D8D8D8 ;
position: fixed;
bottom: 0;
display: flex;
justify-content: space-around;
align-items: center;
box-sizing: border-box;
.go-buy {
background: #D0021B;
color: #fff;
text-align: center;
width: 260px;
height: 88px;
border: none;
outline: none;
border-radius: 6px;
margin: 0 30px;
}
.comment-btn,
.grass-btn {
flex: 1;
display: flex;
flex-direction: column;
text-align: center;
font-size: 18px;
color: #444;
span {
font-size: 52px;
}
em {
font-style: normal;
margin-top: -6px;
}
}
.comment-btn {
span {
color: #b0b0b0;
}
}
}
}
</style>
... ...
export default [{
path: '/xxx',
name: 'xxx',
path: '/fashion/detail',
name: 'fashionDetail',
// component: () => import(/* webpackChunkName: "xxx" */ './xxx')
component: () => import(/* webpackChunkName: "fashionDetail" */ './fashion-detail')
}];
... ...
This diff could not be displayed because it is too large.