共计 8303 个字符,预计需要花费 21 分钟才能阅读完成。
这篇我们来实现商品评价栏目。
完成评分组件的结构:
我们先来设置一个 ratings 容器,还是熟悉的老情况,ratings-wrapper 的高度可能会超过 ratings,这时候我们肯定会让 ratings 内出现滚动条的,ref 也是老朋友了,配合 Bscroll 实现 ratings-wrapper 的滚动。
接着我们通过 overview 来构建商家评分内容。
最后评论的内容 content 部分,我们通过点击全部,有图,点评,来显示不同的内容,content 这个部分就是我们经常遇到的俗称选项卡。
<div class="ratings" ref="ratingView">
<div class="ratings-wrapper">
<div class="overview">
<div class="overview-left">
<div class="comment-score">
<p class="score">{{ratings.comment_score}}</p>
<p class="text"> 商家评分 </p>
</div>
<div class="other-score">
<div class="quality-score item">
<span class="text"> 口味 </span>
<span class="score">{{ratings.quality_score}}</span>
</div>
<div class="pack-score item">
<span class="text"> 包装 </span>
<span class="score">{{ratings.pack_score}}</span>
</div>
</div>
</div>
<div class="overview-right">
<div class="delivery-score">
<p class="score">{{ratings.delivery_score}}</p>
<p class="text"> 配送评分 </p>
</div>
</div>
</div>
<div class="content">
<div class="rating-select" v-if="ratings.tab">
<span
class="item"
@click="selectTypeFn(2)"
:class="{'active':selectType==2}"
>{{ratings.tab[0].comment_score_title}}</span>
<span
class="item"
@click="selectTypeFn(1)"
:class="{'active':selectType==1}"
>{{ratings.tab[1].comment_score_title}}</span>
<span class="item" @click="selectTypeFn(0)" :class="{'active':selectType==0}">
<img src="./icon_sub_tab_dp_normal@2x.png" v-show="selectType!=0">
<img src="./icon_sub_tab_dp_highlighted@2x.png" v-show="selectType==0">
{{ratings.tab[2].comment_score_title}}
</span>
</div>
<div class="labels-view">
<span
v-for="item in ratings.labels"
class="item"
:class="{'highligh':item.label_star>0}"
>{{item.content}}{{item.label_count}}</span>
</div>
<ul class="rating-list">
<li v-for="comment in selectComments" class="comment-item">
<div class="comment-header">
<img :src="comment.user_pic_url" v-if="comment.user_pic_url">
<img src="./anonymity.png" v-if="!comment.user_pic_url">
</div>
<div class="comment-main">
<div class="user">{{comment.user_name}}</div>
<div class="time">{{fotmatDate(comment.comment_time)}}</div>
<div class="star-wrapper">
<span class="text"> 评分 </span>
</div>
<div class="c_content" v-html="commentStr(comment.comment)"></div>
<div class="img-wrapper" v-if="comment.comment_pics.length">
<img v-for="item in comment.comment_pics" :src="item.thumbnail_url">
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
获取评分数据
我们定义了评分展示的种类,全部,带图片,点评。
接着通过 data 初始化我们的需要的数据。
然后我们通过 get 请求,拿到数据通过 this.ratings 覆盖初始化数据。
在拿到数据后紧接着使用 selectTypeFn 方法,为展示的内容铺路,分为三种展示形式。
处理时间上我们使用了 fotmatDate 方法,这里关于正则这部分,我们用了 RegExp.$1 属性,会匹配到第一个符合正则表达式的元素。
同样使用正则的地方还有 commentStr 函数,主要对评论内容进行过滤。
最终由计算属性 selectComments 完成展示的对应内容,当然这个展示逻辑依据于我们 selectTypeFn 方法的规定。
<script>
// 导入 BScroll
import BScroll from "better-scroll";
const ALL = 2; // 全部
const PICTURE = 1; // 带图片
const COMMENT = 0; // 点评
export default {data() {
return {ratings: {},
selectType: ALL
};
},
created() {
// 通过 axios 发起 get 请求
let that = this;
this.$axios
.get("/api/rates")
.then(function(response) {
// 获取到数据
var dataSource = response.data;
if (dataSource.code == 0) {
that.ratings = dataSource.data;
// 初始化滚动
that.$nextTick(() => {if (!that.scroll) {
that.scroll = new BScroll(that.$refs.ratingView, {click: true});
} else {that.scroll.refresh();
}
});
}
})
.catch(function(error) {
// 出错处理
console.log(error);
});
},
methods: {selectTypeFn(type) {
this.selectType = type;
// 刷新操作
this.$nextTick(() => {this.scroll.refresh();
});
},
fotmatDate(time) {let date = new Date(time * 1000);
// 时间格式
let fmt = "yyyy.MM.dd";
if (/(y+)/.test(fmt)) {
// 年
let year = date.getFullYear().toString();
fmt = fmt.replace(RegExp.$1, year);
}
if (/(M+)/.test(fmt)) {
// 月
let mouth = date.getMonth() + 1;
if (mouth < 10) {mouth = "0" + mouth;}
fmt = fmt.replace(RegExp.$1, mouth);
}
if (/(d+)/.test(fmt)) {
// 日
let mydate = date.getDate();
if (mydate < 10) {mydate = "0" + mydate;}
fmt = fmt.replace(RegExp.$1, mydate);
}
return fmt;
},
commentStr(content) {let rel = /#[^#]+#/g;
return content.replace(rel, "<i>$&</i>");
}
},
computed: {selectComments() {if (this.selectType == ALL) {
// 全部
return this.ratings.comments;
} else if (this.selectType == PICTURE) {
// 有图
let arr = [];
this.ratings.comments.forEach(comment => {if (comment.comment_pics.length) {arr.push(comment);
}
});
return arr;
} else {
// 点评
return this.ratings.comments_dp.comments;
}
}
},
components: {BScroll}
};
</script>
组件的样式
<style>
.ratings {
position: absolute;
left: 0;
top: 191px;
bottom: 0;
width: 100%;
overflow: hidden;
}
.ratings .ratings-wrapper .overview {
padding: 20px 0 18px 0;
display: flex;
}
.ratings .ratings-wrapper .overview .overview-left {
flex: 1;
padding-left: 26px;
}
.ratings .ratings-wrapper .overview .overview-left .comment-score {
float: left;
width: 48px;
text-align: center;
margin-right: 26px;
}
.ratings .ratings-wrapper .overview .overview-left .comment-score .score {
font-size: 23px;
font-weight: 800;
color: #ffb000;
margin-bottom: 9px;
}
.ratings .ratings-wrapper .overview .overview-left .comment-score .text {
font-size: 11px;
color: #666666;
}
.ratings .ratings-wrapper .overview .overview-left .other-score {
float: left;
margin-top: 3px;
}
.ratings .ratings-wrapper .overview .overview-left .other-score .item {height: 11px;}
.ratings .ratings-wrapper .overview .overview-left .other-score .item .text {
font-size: 11px;
color: #666666;
margin-right: 11px;
float: left;
}
.ratings .ratings-wrapper .overview .overview-left .other-score .item .star {
float: left;
margin-right: 11px;
}
.ratings .ratings-wrapper .overview .overview-left .other-score .item .score {
font-size: 11px;
color: #ffb000;
float: left;
}
.ratings .ratings-wrapper .overview .overview-left .other-score .quality-score {margin-bottom: 14px;}
.ratings .ratings-wrapper .overview .overview-right {
flex: 0 0 100px;
text-align: center;
border-left: 1px solid #9d9d9d;
}
.ratings .ratings-wrapper .overview .overview-right .delivery-score {
}
.ratings .ratings-wrapper .overview .overview-right .delivery-score .score {
font-size: 19px;
font-weight: 500;
color: #999999;
margin-bottom: 10px;
margin-top: 3px;
}
.ratings .ratings-wrapper .overview .overview-right .delivery-score .text {
font-size: 11px;
color: #999999;
}
.ratings .ratings-wrapper .content {padding: 16px;}
.ratings .ratings-wrapper .content .rating-select {
width: 100%;
box-sizing: border-box;
font-size: 0;
border: 1px solid #ffb000;
border-right: 0;
margin-bottom: 11px;
border-radius: 3px;
}
.ratings .ratings-wrapper .content .rating-select .item {
width: 33.3%;
display: inline-block;
height: 33px;
line-height: 33px;
font-size: 14px;
text-align: center;
border-right: 1px solid #ffb000;
box-sizing: border-box;
color: #ffb000;
}
.ratings .ratings-wrapper .content .rating-select .item:last-child img {
height: 14px;
vertical-align: middle;
}
.ratings .ratings-wrapper .content .rating-select .item.active {
background: #ffb000;
color: black;
}
.ratings .ratings-wrapper .content .labels-view {/*margin-bottom: 14px;*/}
.ratings .ratings-wrapper .content .labels-view .item {
display: inline-block;
height: 27px;
line-height: 27px;
padding: 0 10px;
font-size: 12px;
background: #f4f4f4;
margin-right: 6px;
margin-bottom: 6px;
border-radius: 3px;
color: #999999;
}
.ratings .ratings-wrapper .content .labels-view .item.highligh {color: #656565;}
.ratings .ratings-wrapper .content .rating-list {
}
.ratings .ratings-wrapper .content .rating-list .comment-item {
padding: 16px 16px 16px 0;
border-bottom: 1px solid #f4f4f4;
width: 100%;
box-sizing: border-box;
display: flex;
}
.ratings .ratings-wrapper .content .rating-list .comment-item .comment-header {
flex: 0 0 35px;
margin-right: 11px;
}
.ratings
.ratings-wrapper
.content
.rating-list
.comment-item
.comment-header
img {
width: 35px;
height: 35px;
border-radius: 50%;
}
.ratings .ratings-wrapper .content .rating-list .comment-item .comment-main {flex: 1;}
.ratings
.ratings-wrapper
.content
.rating-list
.comment-item
.comment-main
.user {
width: 50%;
float: left;
font-size: 11px;
color: #333333;
}
.ratings
.ratings-wrapper
.content
.rating-list
.comment-item
.comment-main
.time {
width: 50%;
float: right;
text-align: right;
font-size: 9px;
color: #666666;
}
.ratings
.ratings-wrapper
.content
.rating-list
.comment-item
.comment-main
.star-wrapper {
float: left;
margin-top: 12px;
margin-bottom: 15px;
width: 100%;
}
.ratings
.ratings-wrapper
.content
.rating-list
.comment-item
.comment-main
.star-wrapper
.text {
color: #999999;
font-size: 11px;
float: left;
}
.ratings
.ratings-wrapper
.content
.rating-list
.comment-item
.comment-main
.star-wrapper
.star {
float: left;
margin-left: 7px;
}
.ratings
.ratings-wrapper
.content
.rating-list
.comment-item
.comment-main
.c_content {
font-size: 13px;
line-height: 19px;
float: left;
width: 100%;
}
.ratings
.ratings-wrapper
.content
.rating-list
.comment-item
.comment-main
.c_content
i {color: #576b95;}
.ratings
.ratings-wrapper
.content
.rating-list
.comment-item
.comment-main
.img-wrapper {
margin-top: 9px;
float: left;
}
.ratings
.ratings-wrapper
.content
.rating-list
.comment-item
.comment-main
.img-wrapper
img {width: 175px;}
</style>
总结
本篇实现商品评价栏目, 其中,在处理日期,过滤文字的需求上我们使用了正则,简化了我们程序的复杂度。重要的逻辑在于用 selectTypeFn()的方法处理模板显隐的展示,内容显示逻辑在 selectComments()计算属性上,这两个主要逻辑我们需要了解清楚。
好,今天就到这里,我们下期再会。