项目总结：vue.js2.5饿了么APP（5）主要组件实现 - 商品详情页部分

最新推荐文章于 2023-07-31 15:38:07 发布

小白Rachel

最新推荐文章于 2023-07-31 15:38:07 发布

阅读量2k

点赞数

分类专栏：饿了么Vue项目总结文章标签： vue

本文链接：https://blog.csdn.net/Sabrina_cc/article/details/106995464

版权

说明：本总结来源于慕课网 @ustbhuangyi老师的课程《Vue.js2.5+cube-ui重构饿了么App》课程，本博客做了项目总结梳理便于回顾，需要学习的伙伴可以移步学习。与君共勉！

之前章节传送：

项目总结：vue.js2.5饿了么APP（1）概述+项目准备

项目总结：vue.js2.5饿了么APP（2）主要组件实现 - 头部相关组件

项目总结：vue.js2.5饿了么APP（3）主要组件实现 - 购物车相关组件（上）

项目总结：vue.js2.5饿了么APP（4）主要组件实现 - 购物车相关组件（下）

速看

在商品页面中点击某一个商品，可以跳到商品详情页查看详情，包括：商品图片、名称价格、商品评价、加入购物车。该组件为全屏弹层组件，如果单纯作为goods的子组件调用会出现不能全屏显示的问题。因此将其注册为create-API模块，让good组件动态挂载到body下。（这样就可以使用fixed全屏布局以及层级的z-index来控制是否盖住下面的header部分。）（原因：food是fixed布局，外部有一个transform，fixed布局会受到transform影响，因此对于全屏类弹层组件，组件的样式很容易受到父元素影响，（fixed布局是全屏类的））同样的，该页面也需要控制shop-cart-sticky购物车组件显隐。

评论部分有两个维度实现过滤：首先可以查看评价类型（全部、推荐、吐槽）还有“只看有内容的评价”，将其该部分设置为rating-select组件，接收props（ratings是个数组（通过ratings可以计算各部分的评价个数）；selectType是选择类型（有三种类型，定义三种常量POSITIVE、NEGATIVE、ALL）使用常量增加可读性；onlycontent是否有内容；desc描述（对象默认描述：all:"全部" positive：“满意” negative:“不满意”））外部可以传入标签，从而实现复用。在food中添加计算属性computedRatings，定义数组并遍历将符合的ratings放入（当选中所有时push（rating）或者当前选择类型和这条评价类型相同，也push（rating））从而按情况显示ratings

三、food组件-rating-select组件

1. 布局

2. 实现

（1）rating-select组件接收数据

（2）rating-select组件使用

（3）添加点击事件

（4）控制列表显示变化

一、food组件-商品部分

1. 概述

（在rating-select中的每个选项添加点击事件select，toggle 。由于selectType是传递过来的props不能直接修改，因此把这个props的值派发到父组件food，让后让父组件做修改，响应式更新数据，通过props再影响子组件。）

2. 布居

当点击某一商品时点击可以查看详情，主要分为：头部图片+商品购物+商品信息+评价

商品评价可以有选项分类，有全部、推荐、吐槽，并且有一个按钮可以只看有内容的评价

二期：goods组件需要基于API实现

    <transition name="move" @after-leave="afterLeave">
        <div class="food" v-show="visible">
            <cube-scroll :data="computedRatings" ref="scroll">
                <div class="food-content">
                    <div class="image-header"></div>
                    <div class="content">
                        <div class="cart-control-wrapper">
                            <cart-control @add="addFood" :food="food"></cart-control>
                        </div>
                        <transition name="fade"><div class="buy">加入购物车</div>     </transition>
                    </div>
                    <split v-show="food.info"></split>
                    <div class="info" v-show="food.info"></div>
                    <split></split>
                    <div class="rating">
                        <rating-select></rat