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

最新推荐文章于 2023-09-21 19:48:21 发布

小白Rachel

最新推荐文章于 2023-09-21 19:48:21 发布

阅读量1.6k

点赞数

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

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

版权

饿了么Vue项目总结专栏收录该内容

7 篇文章 9 订阅

订阅专栏

说明：本总结来源于慕课网 @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></rating-select>
                        <div class="rating-wrapper"></div>
                    </div>
                </div>
            </cube-scroll>
        </div>
    </transition>

需要接收food这个props，需要根据不同的food渲染不同内容，开始是隐藏的，通过通过使用visible控制显隐，其中的<transition>对应左滑的过渡动画，内部使用cube-scroll组件实现滚动.

3. 实现

（1）添加头图

使用height：0 padding-top：100%的方式，让图片可以达到等比效果

（2）使用声明式调用food（未采用）

即在goods组件中引入food组件。使用food组加需要传入：food="selectedFood"，在goods组件中，当选中列表的一项时，添加点击事件selectFood(food),并实现方法(将food赋值给selectedFood)。在data中声明一个当前选中的商品selectedFood.并且给添加一个ref="food"

selectFood(food){
	this.selectedFood = food
	this.$refs.food.show()
}

发现效果是在下面区域显示整个food组件而没有遮盖头部部分。

原因：food是fixed布局，外部有一个transform，fixed布局会受到transform影响，因此对于全屏类弹层组件，组件的样式很容易受到父元素影响，（fixed布局是全屏类的）

解决方法：使用create-API模块，让good组件动态挂载到body下。这样就可以使用fixed全屏布局以及层级的z-index来控制是否盖住下面的header部分。

（3）注册api组件

定义私有方法_showFood（），当选择的food变化了，selectedFood响应式变化

selectFood(food) {
            this.selectedFood = food
            this._showFood()
            this._showShopCartSticky()
        },
_showFood() {
            this.foodComp = this.foodComp || this.$createFood({
                $props: {
                    food: 'selectedFood'
                },
                $events: {
                    leave: () => {
                        this._hideShopCartList()
                    },
                    add: (el) => {
                        this.shopCartStickyComp.drop(el)
                    }
                }
            })
            this.foodComp.show()
        },

（4）实现food 组件内部滚动

scroll每次需要初始化，在food组件中添加created

const EVENT_SHOW = 'show'
created() {
        this.$on(EVENT_SHOW, () => {
            this.$nextTick(() => {
                this.$refs.scroll.refresh()
            })
        })
    },

（5）使用sticky组件

在goods组件中，打开food组件时，同时要将shop-cart-sticky组件显示出来。同时定义showSopCartSticky()方法

selectFood(food) {
            this.selectedFood = food
            this._showFood()
            this._showShopCartSticky()
        },
_showShopCartSticky() {
            this.shopCartStickyComp = this.shopCartStickyComp || this.$createShopCartSticky({
                $props: {
                    selectFoods: 'selectFoods',
                    deliveryPrice: this.seller.deliveryPrice,
                    minPrice: this.seller.minPrice,
                    fold: true
                }
            })
            this.shopCartStickyComp.show()
        },
_hideShopCartSticky() {
            this.shopCartStickyComp.hide()
        }

当动画结束时隐藏sticky组件，在food组件添加过渡钩子函数after-leave=afterLeave

afterLeave() {
            this.$emit(EVENT_LEAVE)  //leave
        },

并且在goods组件中的——showFood中添加event（hideShopCartSticky）

_showFood() {
            this.foodComp = this.foodComp || this.$createFood({
                $props: {
                    food: 'selectedFood'
                },
                $events: {
                    leave: () => {
                        this._hideShopCartSticky()
                    },
                    add: (el) => {
                        this.shopCartStickyComp.drop(el)
                    }
                }
            })
            this.foodComp.show()
        },

（6）在商品详情页进行购物

比之前的cart-control多一步，在没有购买时会显示“加入购物车”，

实现：使用两层，一层是使用cat-control组件，另一层是一个按钮，并且使用<tansition>组件包裹，驱动动画的变化，通过food.count控制显隐，当count是0或者undefined，就是显示的，否则相反。都是用绝对定位，让“加入购物车”部分盖住cart-control

<div class="cart-control-wrapper">
          <cart-control @add="addFood" :food="food"></cart-control>
</div>
<transition name="fade">
          <div @click="addFirst" class="buy" v-show="!food.count">加入购物车</div>
</transition>

并且在“加入购物车”添加addFirst方法，（没有count时设置为1）点击按钮驱动外层的shop-cart-sticky组件，因此需要派发EVENT_ADD；在cart-control添加addFood方法（事件向父组件传递，food组件的父组件是goods，里面含有shopCartStickyComp,它的drop()方法才是真正调用小球动画的，因此事件需要一层层派发）

addFirst(event) {
            this.$set(this.food, 'count', 1)
            this.$emit(EVENT_ADD, event.target)
        },
addFood(target) {
            this.$emit(EVENT_ADD, target)
        },

这是在goods中监听add方法完成动画

_showFood() {
            this.foodComp = this.foodComp || this.$createFood({
                $props: {
                    food: 'selectedFood'
                },
                $events: {
                    leave: () => {
                        this._hideShopCartSticky()
                    },
                    add: (el) => {
                        this.shopCartStickyComp.drop(el)
                    }
                }
            })
            this.foodComp.show()
        },

二、food组件-评价部分

1. 布局

除了有对评价的显示，还有对评价的过滤，可以对评价列表进行切换。

<div class="rating">
       <h1 class="title">商品评价</h1>
       <rating-select></rating-select>
       <div class="rating-wrapper">
              <ul>
                    <li class="rating-item border-bottom-1px">
                        <div class="user">
                            <span class="name">{{rating.username}}</span>
                            <img class="avatar" :src="rating.avatar">
                        </div>
                        <div class="time">{{format(rating.rateTime)}}</div>
                       <p class="text"></p>
                   </li>
             </ul>
            <div class="no-rating" v-show="!computedRatings || !computedRatings.length">暂无评价</div>
      </div>
 </div>

2. 实现

（1）显示整个评论列表

ratings使用计算属性（简化书写）

<div class="rating-wrapper">
        <ul v-show="computedRatings && computedRatings.length">
             <li
                 v-for="(rating, index) in computedRatings"
                 class="rating-item border-bottom-1px"
                 :key="index">
                 <div class="user"><div>
                 <div class="time">{{format(rating.rateTime)}}</div>
                 <p class="text"> </p>
            </li>
       </ul>
</div>

computed: {
        ratings() {
            return this.food.ratings
        }
    },

遍历整个列表，渲染出所有的ratings,包含时间，评价，用户，手指图标

（2）时间部分

通常日期的显示服务端不会显示时间，而是时间戳。而前端可以按照自己的要求改变为字符串。这里使用了moment的开源组件（Moment.js）可以添加format()方法，使用moment的方法即可

format(time) {
            return moment(time).format('YYYY-MM-DD hh:mm')
        }

至此完成了评价列表

（3）评价过滤功能

有两个维度实现过滤：首先可以查看评价类型（全部、推荐、吐槽）过滤评论的同时模块激活状态颜色改变；还有“只看有内容的评价”，将其设置为rating-select组件，在rating-select中的每个选项添加点击事件select，toggle，由于不能直接修改selectType，（传递过来的props）因此把这个props的值派发到父组件food，让后让父组件做修改，响应式更新数据再影响子组件。

因此在food组件中可以监听这两个方法onselect() ontoggle()控制改变。

三、food组件-rating-select组件

1. 布局

主要是（全部、推荐、吐糟）+只看有内容的评论

<div class="rating-select">
        <div class="rating-type border-bottom-1px">
            <span @click="select(2)" class="block positive" :class="{'active': selectType===2}">{{desc.all}}
                <span class="count">{{ratings.length}}</span>
            </span>
            <span @click="select(0)" class="block positive" :class="{'active': selectType===0}">{{desc.positive}}
                <span class="count">{{positives.length}}</span>
            </span>
            <span @click="select(1)" class="block positive" :class="{'active': selectType===1}">{{desc.negative}}
                <span class="count">{{negatives.length}}</span>
            </span>
        </div>
        <div @click="toggle" class="switch" :class="{'on':onlyContent}">
            <span class="icon-check_circle"></span>
            <span class="text">只看有内容的评价</span>
        </div>
    </div>

2. 实现

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

设置props，外部可以传入的变量。

接收ratings是个数组（通过ratings可以计算各部分的评价个数）；selectType是选择类型（有三种类型，定义三种常量POSITIVE、NEGATIVE、ALL）使用常量增加可读性；onlycontent是否有内容；desc描述（对象默认描述：all:"全部" positive：“满意” negative:“不满意”）

const POSITIVE = 0
const NEGATIVE = 1
const ALL = 2

props: {
        ratings: {
            type: Array,
            default() {
                return []
            }
        },
        selectType: {
            type: Number,
            default: ALL
        },
        onlyContent: {
            type: Boolean,
            default: false
        },
        desc: {
            type: Object,
            default() {
                return {
                    all: '全部',
                    positive: '满意',
                    negative: '不满意'
                }
            }
        }
    },

添加计算属性positive negative，根据服务端约定数据得到，计算每个部分的数量

computed: {
        positives() {
            return this.ratings.filter((rating) => {
                return rating.rateType === POSITIVE
            })
        },
        negatives() {
            return this.ratings.filter((rating) => {
                return rating.rateType === NEGATIVE
            })
        }
    },

（2）rating-select组件使用

在food组件写入date，包括onlyContent，selectType,desc(“全部、推荐、吐槽”)

data() {
        return {
            onlyContent: true,
            selectType: ALL，
            desc: {
                all: '全部',
                positive: '推荐',
                negative: '吐槽'
            }
        }
    },

然后在rating-select中绑定数据

<rating-select
                            :ratings="ratings"
                            :onlyContent="onlyContent"
                            :selectType="selectType"
                            :desc="desc"
                            @select="onSelect"
                            @toggle="onToggle">
 </rating-select>

（3）添加点击事件

在rating-select中的每个选项添加点击事件（如上代码），并写方法select，toggle

const EVENT_SELECT = 'select'
const EVENT_TOGGLE = 'toggle'
methods: {
        select(type) {
            this.$emit(EVENT_SELECT, type)
        },
        toggle() {
            this.$emit(EVENT_TOGGLE)
        }
    }

思路：这时不能直接修改selectType，不能修改传递过来的props，因此把这个props的值派发到父组件food，让后让父组件做修改，响应式更新数据，这个数据通过props再影响子组件。

因此在food组件中可以监听这两个方法onselect() ontoggle()控制改变。

methods: {
        onSelect(type) {
            this.selectType = type
        },
        onToggle() {
            this.onlyContent = !this.onlyContent
        }
    }

（在这个地方使用v-model不是很合适）

至此只是完成了交互效果，所有交互的效果应该影响列表，根据onlycontent 和 select计算而来

（4）控制列表显示变化

在food中添加计算属性computedRatings，定义数组遍历，

解释：当选中所有时push（rating）或者当前选择类型和这条评价类型相同，也push（rating）最后返回数组

computed: {
        computedRatings() {
            const ret = []
            this.ratings.forEach((rating) => {
                if (this.onlyContent && !rating.text) {
                    return
                }
                if (this.selectType === ALL || this.selectType === rating.rateType) {
                    ret.push(rating)
                }
            })
            return ret
        }
    },

使用这个计算属性, 在每一个li中遍历computedRatings,并且当没有评价时显示为“暂无评价”

<ul v-show="computedRatings && computedRatings.length">
          <li
            v-for="(rating, index) in computedRatings"
             class="rating-item border-bottom-1px"
            :key="index">
         </li>
</ul>

后续章节传送：

项目总结：vue.js2.5饿了么APP（6）主要组件实现 - 评价页+商家页部分

项目总结：vue.js2.5饿了么APP（7）项目部署与总结

小白Rachel

关注

0
点赞
踩
10

收藏

觉得还不错? 一键收藏
打赏
0
评论
项目总结：vue.js2.5饿了么APP（5）主要组件实现 - 商品详情页部分

说明：本总结来源于慕课网 @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）主要组件实现 ...
复制链接

扫一扫