這篇我們來實現商品評價欄目。
完成評分組件的結構:
我們先來設置一個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="./[email protected]" v-show="selectType!=0">
<img src="./[email protected]" 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()計算屬性上,這兩個主要邏輯我們需要了解清楚。
好,今天就到這裏,我們下期再會。