Vue实现商品详情页的评价列表功能
时间：2021-07-07 08:51:53|栏目：vue|点击： 次
本篇我们来实现商品详情页的评价列表。
必要的数据
这里咱们举一个数据的例子，明明白白地了解这些数据是如何绑定到模板中的。
数据来自于Foods父组件，当我们选中商品，跳转到商品详情页，那么就需要依赖父组件中的商品数据，在商品详情页面展示评论，当然也可能没有如下“rating”数据。那我们在后面的模板中，就不展示对应的html结构。
{
"id": 96985579,
"name": "麦辣鸡翅2块",
"min_price": 11,
"praise_num": 22,
"praise_content": "赞22",
"tread_num": 0,
"praise_num_new": 22,
"unit": "例",
"description": "",
"picture": "http://p0.meituan.net/xianfu/38bbfa3f955cbce3330f1cb6818d0ce6216794.png.webp",
"month_saled": 948,
"month_saled_content": "月售948",
"status": 3,
"status_description": "非可售时间",
"product_label_picture": "http://p1.meituan.net/aichequan/04789347d755465713550540942265d36475.png",
"rating": {
"comment_count": 4,
"title": "外卖评价",
"snd_title": "4条评论",
"praise_friends": "",
"like_ratio_desc": "好评度",
"like_ratio": "100%",
"filter_type": 1,
"comment_list": [
{
"user_icon": "https://img.meituan.net/avatar/71ef89fa000e783d5b8d86c2767a9d28195580.jpg",
"user_name": "ejX309524666",
"comment_time": "2017.08.31",
"comment_unix_time": 1504161290,
"comment_content": "#奶油坚果酱中套餐#不好吃。还是奥尔良，麦辣鸡腿那些最经典的汉堡好吃。薯条软得不能再软了。我备注了可乐换芬达也没有换。#麦辣鸡翅2块#就还好，里面的肉挺嫩的，很入味。"
}, {
"user_icon": "https://img.meituan.net/avatar/6571c42526237b0118f437418e989d1187445.jpg",
"user_name": "EAG789830055",
"comment_time": "2017.08.18",
"comment_unix_time": 1503030166,
"comment_content": "#麦辣鸡翅2块#送错"
}
]
}
}
Food组件添加商品评价结构
好，现在让我们将评价结构搭出来，并且绑定对应的数据。
<templete>
<transtition name="food-detail">
<div class="food" v-show="showFlag" ref="foodView">
<div class="food-wrapper">
<div class="food-content"></div>
<!-- 商品评价列表结构，数据的绑定渲染 -->
<div class="rating-wrapper">
<div class="rating-title">
<div class="like-ratio" v-if="food.rating">
<span class="title">{{food.rating.title}}</span>
<span class="ratio">
(
{{food.rating.like_ratio_desc}}
<i>{{food.rating.like_ratio}}</i>
)
</span>
</div>
<div class="snd-title" v-if="food.rating">
<span class="text">{{food.rating.snd_title}}</span>
<span class="icon icon-keyboard_arrow_right"></span>
</div>
</div>
<ul class="rating-content" v-if="food.rating">
<li v-for="comment in food.rating.comment_list" class="comment-item">
<div class="comment-header">
<img :src="comment.user_icon" v-if="comment.user_icon">
<img src="./anonymity.png" v-if="!comment.user_icon">
</div>
<div class="comment-main">
<div class="user">{{comment.user_name}}</div>
<div class="time">{{comment.comment_time}}</div>
<div class="content">{{comment.comment_content}}</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</transition>
</templete>
导入，注册组件
<script>
// 导入BScroll
import BScroll from "better-scroll";
// 导入Cartcontrol
import Cartcontrol from "components/Cartcontrol/Cartcontrol";
// 导入Vue
import Vue from "vue";
export default {
data() {
return {
showFlag: false
};
},
//接收来自Goods父组件中选中的food；
props: {
food: {
type: Object
}
},
methods: {
//这里是上篇我们实现商品详情页的方法
},
components: {
Cartcontrol,
BScroll
}
};
</script>
到这里我们就完成了商品详情页面的评论列表，下篇我们来实现商品评价栏目。
总结
