Authored by yyq

article detail

... ... @@ -7,7 +7,7 @@
<div class="product-info">
<p class="product-name">{{product.productName}}</p>
<div class="price">
¥{{product.salesPrice}}
<span>¥{{product.salesPrice}}</span>
<div class="btn-right btn-buy hover-opacity">
<span class="iconfont icon-cart"></span>购买
</div>
... ... @@ -18,9 +18,7 @@
</template>
<script>
import {createNamespacedHelpers} from 'vuex';
import YAS from 'utils/yas-constants';
const {mapActions} = createNamespacedHelpers('product');
export default {
name: 'ProductGroupItem',
... ... @@ -58,57 +56,6 @@ export default {
},
},
methods: {
...mapActions(['postProductFav']),
async onFav() {
if (this.share) {
return this.$links.toDownloadApp();
}
if (this.posting) {
return;
}
this.posting = true;
const favorite = !this.favorite;
const result = await this.postProductFav({
productId: this.product.productId,
productSkn: this.product.productSkn,
favorite,
productType: this.product.productType
});
this.posting = false;
if (result.code === 200) {
if (favorite) {
this.prompt = this.$grassPrompt({
img: this.product.productImage,
title: '收藏成功',
desc: '可在 [我的-商品收藏] 页面查看',
onClick: () => {
this.$yoho.goPage('go.fav', {
favType: 0
});
}
}, 3000);
} else {
this.prompt && this.prompt.hide();
this.$createToast({
txt: '取消收藏成功',
type: 'success',
time: 1000
}).show();
}
this.favorite = favorite;
} else {
this.$createToast({
txt: result.message || '服务器开小差了',
type: 'warn',
time: 1000
}).show();
}
},
onClick(e) {
if (e.timeStamp - this._lastTime < 1200) {
return;
... ... @@ -150,15 +97,13 @@ export default {
<style lang="scss" scoped>
.product-item {
margin-top: 20px;
margin-right: 20px;
margin-left: 30px;
height: 180px;
width: 580px;
background-color: #fff;
box-shadow: 0 5px 10px 0 rgba(107, 95, 95, 0.2);
border: 1px solid #f0f0f0;
display: inline-block;
padding: 10px 20px;
white-space: initial;
&:last-child {
... ... @@ -172,14 +117,15 @@ export default {
.product-content {
display: flex;
align-items: center;
width: 100%;
height: 100%;
overflow: hidden;
}
.product-image {
width: 136px;
height: 180px;
margin-top: -30px;
}
.product-info {
... ... @@ -189,25 +135,31 @@ export default {
.product-name {
font-size: 24px;
color: #9b9b9b;
letter-spacing: -0.25PX;
height: 104px;
display: flex;
align-content: center;
height: 68px;
padding-right: 10px;
margin-bottom: 30px;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.price {
font-size: 32px;
color: #d0021b;
letter-spacing: -0.34PX;
font-size: 28px;
color: #222;
font-weight: 500;
display: flex;
justify-content: space-between;
align-items: center;
}
}
.btn-right {
float: right;
margin-right: -40px;
width: 120px;
height: 50px;
padding: 0;
font-size: 24px;
background-size: contain;
display: flex;
... ... @@ -218,7 +170,7 @@ export default {
}
.btn-buy {
background-color: #ce0a24;
background-color: #222;
.iconfont {
font-size: 30px;
... ...
... ... @@ -54,9 +54,8 @@ export default {
width: 100%;
overflow-x: auto;
overflow-y: hidden;
height: 276px;
padding-top: 40px;
padding-bottom: 40px;
height: 180px;
margin: 40px 0;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
}
... ...
<template>
<AuthComponent class="btn-follow hover-opacity" :class="followClass" @click="onFollow">
{{followText}}
<span>{{followText}}</span>
</AuthComponent>
</template>
... ... @@ -91,22 +91,26 @@ export default {
<style lang="scss" scoped>
.btn-follow {
width: 120px;
min-width: 110px;
height: 50px;
padding: 0;
font-size: 26px;
border-radius: 3PX;
background-color: #222;
color: #fff;
padding: 0 10px;
font-size: 24px;
color: #222;
border-radius: 25px;
border: solid 1px #222;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
&.follow {
border: solid 1px #4a4a4a;
background-color: #fff;
color: #000;
border-color: #b0b0b0;
color: #b0b0b0;
}
> span {
line-height: 1;
}
}
</style>
... ...
<template>
<div v-if="topic" class="topic-wrap" @click="onClick">
<div class="topic-icon">
<span class="iconfont icon-tag"></span>
</div>
<div class="topic-icon">#</div>
<span class="topic-text">{{topic}}</span>
</div>
</template>
... ... @@ -25,8 +23,8 @@ export default {
.topic-wrap {
display: inline-block;
vertical-align: middle;
height: 44px;
line-height: 44px;
height: 48px;
line-height: 48px;
background-color: #f0f0f0;
border-radius: 22px;
box-sizing: border-box;
... ... @@ -37,13 +35,17 @@ export default {
}
.topic-icon {
width: 34px;
height: 34px;
line-height: 34px;
border-radius: 17px;
width: 38px;
height: 38px;
line-height: 38px;
font-size: 28px;
border-radius: 19px;
margin: 5px;
text-align: center;
background-color: #d0d0d0;
color: #fff;
background-color: #222;
transform: scale(0.8, 0.8);
.iconfont {
font-size: 24px;
... ... @@ -54,8 +56,10 @@ export default {
}
.topic-text {
font-size: 22px;
color: #9B9B9B;
font-size: 26px;
font-weight: 500;
color: #222;
margin-left: -4px;
margin-right: 16px;
max-width: 310px;
overflow: hidden;
... ...
<template>
<div class="article-item-comment">
<CommentPlaceholder
:share="share"
tag="p"
class="comment-item"
v-for="(comment, inx) in data.comments"
:key="inx"
:dest-id="comment.id"
:pos-id="posId"
:article-id="articleId"
:add-type="1"
:column-type="comment.columnType"
:user="comment.userName">
<span class="user-name">{{comment.userName}}:</span>
<span class="comment-content">{{getCommentContent(comment.content)}}</span>
</CommentPlaceholder>
<div v-if="data.comments && data.comments.length" class="comment-list">
<CommentPlaceholder
:share="share"
tag="p"
class="comment-item"
v-for="(comment, inx) in data.comments"
:key="inx"
:dest-id="comment.id"
:pos-id="posId"
:article-id="articleId"
:add-type="1"
:column-type="comment.columnType"
:user="comment.userName">
<span class="user-name">{{comment.userName}}:</span>
<span class="comment-content">{{getCommentContent(comment.content)}}</span>
</CommentPlaceholder>
</div>
<div v-if="!invisible" class="total-comment">
<div class="total hover-opacity" @click="onShowComment">查看{{data.commentCount}}条评论</div>
</div>
<div class="comment">
<WidgetAvatar :lazy="true" class="widget-avatar" :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
<CommentPlaceholder
:share="share"
class="comment-input hover-opacity"
... ... @@ -27,9 +33,6 @@
@on-comment="onComment">
添加评论...
</CommentPlaceholder>
</div>
<div class="total-comment">
<div class="total hover-opacity" :class="invisibleClass" @click="onShowComment">查看{{data.commentCount}}条评论</div>
<div class="last-time">{{data.date}}</div>
</div>
</div>
... ... @@ -55,11 +58,9 @@ export default {
articleId: [Number, String]
},
computed: {
invisibleClass() {
return {
invisible: this.thumb || (this.data.commentCount <= 2)
};
},
invisible() {
return this.thumb || (this.data.commentCount <= 2);
}
},
methods: {
...mapMutations(['ASYNC_ARTICLE_COMMENT']),
... ... @@ -91,12 +92,15 @@ export default {
.article-item-comment {
padding: 30px;
.comment-list {
margin-bottom: 26px;
}
.comment-item {
font-size: 24px;
color: #4a4a4a;
letter-spacing: 0.06PX;
line-height: 36px;
margin-bottom: 6px;
line-height: 38px;
> * {
display: inline-block;
... ... @@ -113,33 +117,34 @@ export default {
}
.total-comment {
padding-top: 30px;
display: flex;
font-size: 24px;
color: #b0b0b0;
letter-spacing: 0.06px;
.total {
width: 50%;
}
.last-time {
width: 50%;
text-align: right;
}
margin-bottom: 26px;
}
.comment {
padding-top: 20px;
display: flex;
align-items: center;
margin-top: 10px;
.widget-avatar {
width: 50px;
height: 50px;
}
.comment-input {
padding: 0 20px;
background: #f0f0f0;
height: 60px;
line-height: 60px;
flex-grow: 1;
padding-left: 12px;
height: 50px;
line-height: 50px;
color: #b0b0b0;
font-size: 24px;
}
.last-time {
color: #b0b0b0;
}
}
}
</style>
... ...
... ... @@ -2,7 +2,12 @@
<div class="article-item-header">
<div class="avatar" @click="toUserPage">
<WidgetAvatar :pos-id="posId" :share="share" :lazy="lazy" class="widget-avatar" :src="data.authorHeadIco" :width="70" :height="70"></WidgetAvatar>
<span class="user-name">{{data.authorName}}</span>
<div class="user-info">
<p class="user-name">{{data.authorName}}</p>
<p v-if="data.authorRank" class="user-rank">
<span class="rank-name">{{data.authorRank}}</span>
</p>
</div>
</div>
<div class="opts">
<WidgetFollow :class="invisibleClass" :share="share" :author-uid="data.authorUid" :authorType="data.authorType" :follow="data.hasAttention === 'Y'" @on-follow="onFollow" :pos-id="posId"></WidgetFollow>
... ... @@ -79,30 +84,50 @@ export default {
<style lang="scss" scoped>
.article-item-header {
display: flex;
justify-content: center;
height: 110px;
overflow: hidden;
background-color: #fff;
}
.avatar {
display: flex;
align-items: center;
padding: 16px 30px;
padding-left: 30px;
width: 400px;
height: 100px;
overflow: hidden;
background-color: #fff;
.widget-avatar {
width: 70px;
height: 70px;
display: block;
}
.user-info {
max-width: 250px;
margin-left: 20px;
> * {
line-height: 1.5;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
.user-name {
font-size: 24px;
line-height: 1.2;
margin-left: 20px;
max-width: 250px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.widget-avatar {
width: 70px;
height: 70px;
.user-rank {
margin-top: 8px;
}
.rank-name {
font-size: 20px;
transform: scale(0.9, 0.9);
color: #4a4a4a;
display: inline-block;
}
}
... ...
... ... @@ -3,7 +3,7 @@
<div ref="intro" v-if="intro" class="intro" :class="introClass" :style="introStyle" @click="onExpanding">
<p class="pre-wrap">{{intro}}</p>
<div ref="introPool" class="intro-pool pre-wrap" v-if="!data.introHeight && isEllipsis">{{trimIntro}}</div>
<span ref="expand" class="expand" v-if="showExpandTxt">…展开</span>
<span ref="expand" class="expand" v-if="showExpandTxt">…<b>继续阅读</b></span>
<div class="collapse" v-if="showCollapseTxt">收起</div>
</div>
<div class="topics">
... ... @@ -246,7 +246,7 @@ export default {
letter-spacing: 0.06PX;
overflow: hidden;
position: relative;
line-height: 40px;
line-height: 48px;
box-sizing: content-box;
transition: height 250ms cubic-bezier(0.165, 0.84, 0.44, 1);
... ... @@ -293,7 +293,6 @@ export default {
font-size: 28px;
color: #000;
line-height: 20px;
font-weight: bold;
&.collapse {
position: absolute;
... ... @@ -301,6 +300,10 @@ export default {
bottom: 0;
height: 28px;
}
> b {
font-weight: 500;
}
}
}
... ...
... ... @@ -15,7 +15,7 @@
</template>
</Slide>
<div class="pages" v-if="data.blockList.length > 1">
{{slideIndex}}<span>/</span>{{data.blockList.length}}
{{slideIndex}}/{{data.blockList.length}}
</div>
</div>
<div v-show="onAnimation" class="praise-lottie">
... ... @@ -199,16 +199,17 @@ export default {
.pages {
position: absolute;
z-index: 1;
top: 0;
right: 0;
width: 88px;
height: 54px;
left: 30px;
bottom: 30px;
width: 80px;
height: 48px;
background: rgba($color: #000, $alpha: 0.5);
border-radius: 0 0 0 30px;
padding-left: 6px;
border-radius: 24px;
padding-left: 2px;
color: #fff;
font-size: 24px;
box-sizing: border-box;
letter-spacing: 4px;
display: flex;
line-height: 24px;
justify-content: center;
... ...