（十三）购物车详情页显示

た入场券 2022-05-25 01:29 233阅读 0赞

当我们在goods页面中，将商品添加到购物车的时候，购物车logo上方会显示添加的商品数，如下图所示

![2018050516522075][]

当购物车的商品数大于0的时候，点击底部的<shop-cart>部位，会触发显示添加到购物车的商品详情，如下图所示

![20180505165408529][]

当点击“清空”按钮的时候，购物车中的商品会删除掉，当点击“-”或者“+”按钮的时候，购物车的右上角的数字会减少或者增加，当点击“去结算”按钮的时候，会跳转到结算的界面。

下面讲讲如何实现上述功能的具体步骤

1、首先在shopCart.vue中书写购物车详情shopCartList的html

<transition name="fold">
            
            
            
            <div class="shopCartList" v-show="listShow">
              <div class="listHeader">
                <h1 class="title">购物车</h1>
                
                <span class="empty" @click="empty">清空</span>
              </div>
              <div class="listContent" ref="listContent">
                <ul>
                  <li class="food" v-for="food in selectFoods">
                    <span class="name">{
       {food.name}}</span>
                    <div class="price">
                      <span>￥{
       {food.price * food.count}}</span>
                    </div>
                    <div class="cartControlWrapper">
                      
                      <cart-control @add="addFood" :food="food"></cart-control>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </transition>

2、然后，在shopCart.vue中书写购物车详情shopCartList的css

.shopCartList
          position:absolute
          left:0
          top:0
          z-index: -1
          width:100%
          transform: translate3d(0, -100%, 0)
          &.fold-enter-active,&.fold-leave-active
            transiton:all 0.5s
          &.fold-enter,&.fold-leave-active
            transform:translate3d(0,0,0)
          .listHeader
            height:40px
            line-height:40px
            padding:0 18px
            background: #f3f5f7
            border-bottom:1px solid rgba(7,17,27,0.1)
            .title
              float:left
              font-size:14px
              color:rgb(7,17,27)
            .empty
              float:right
              font-size:12px
              color:rgb(0,160,220)
          .listContent
            padding: 0 18px
            max-height:217px
            over-flow:hidden
            background:#fff
            .food
              position:relative
              paddign:12px 0
              box-sizing:border-box
              border-1px(rgba(7,17,27,0.1))
              .name
                line-height:24px
                font-size:14px
                color:rgb(7,17,27)
              .price
                position:absolute
                right:90px
                bottom:1px
                line-height:24px
                font-size:14px
                font-weight:700
                color:rgb(240,20,20)
              .cartControlWrapper
                position: absolute
                right:0
                bottom:-5px

3、接着，在shopCart.vue中书写购物车详情的js

1）当购物车中有商品的时候，点击底部的shopCart.vue中的任意一个地方的时候，会弹出一个shopCartList，如下图所示

![20180505171804167][]

那么就需要在这个底部的容器里面定义一个点击事件，即toggleList()，其主要负责将在data()里面定义的变量fold的状态取反，即每次点击.content部分的区域，fold的值是true和false交替变化

fold在data()中的定义

fold:true //默认下该列表是折叠的

<template>中的定义如下

在<script>中定义的toggleList()事件如下：

//实现.content的展开与折叠，也就是设置fold的值false和true的交替变化
            toggleList(){
              if(!this.totalCount){
                //购物车还没有任何food
                return;
              }
              //更改fold的状态
              this.fold = !this.fold;
            }

然后，在.shopCartList中定义v-show='listShow'

<div class="shopCartList" v-show="listShow">

函数listShow()是在computed中定义的，当this.fold的值发生变化的时候，就会触发函数listShow()的执行

//是否展开.shopCartList的内容
            //主要有两个功能：设置该区域v-show的值
            //以及初始化better-scroll实例（.listContent），从而当内容高度大于规定高度的时候，该区域内容可以滚动
            listShow(){
              if(!this.totalCount>0){
                  //购物车还没有添加任何商品
                  this.fold = true;
                  return false;
              }
              let show = !this.fold;
              if(show){
                //show为true的时候，才去初始化content-list的better-scroll
                //异步执行，需要等到DOM更新完在初始化better-scroll
                this.$nextTick(()=>{
                  //由于.listContent的高度是不断变化的，所以需要进行判断处理
                  // this.scroll不存在，则需要创建
                  //this.scroll存在了，但是.listContent的高度发生变化
                  //需要重新计算better-scroll，当DOM结构发生变化的时候务必要调用refresh()，确保滚动效果
                  //正常
                  if(!this.scroll){
                    this.scroll = new BScroll(this.$refs.listContent,{
                      click:true
                    });
                  }else{
                    //存在，则直接调用better-scroll中的接口函数refresh()
                    this.scroll.refresh();
                  }
    
                });
              }
              return show;
            }
          },

2）点击“清空”按钮的时候，.shopCartList会消失

在“清空”按钮的DOM上定义点击事件，如下面所示：

<span class="empty" @click="empty">清空</span>

点击事件empty()在methods中定义：

//清空.foodList里面选中的food，就是把food.count设为0
            empty(){
              //对selectFoods中的每一个food进行遍历
              this.selectFoods.forEach((food)=>{
                food.count = 0;
              });
            },

3）当点击<cart-control>中的“+”或者“-”的时候，商品数量会自加或者会自减

<cart-control @add="addFood" :food="food"></cart-control>

在methods中addFood(target)定义如下

addFood(target) {
              //将子组件传过来的对象target，传给在shopCart.vue中定义的函数drop(target)
              this.drop(target);
            }

4）点击“去结算”按钮会跳转到结算界面，这里这是写了一个弹窗

在<template>中的定义 如下，注意智力定义的点击事件pay()，要防止冒泡

<div class="content-right" @click.stop.prevent="pay">
              
              <div class="pay" :class="payClass">
                {
       {payDesc}}
              </div>
            </div>

pay()在methods中的定义 如下：

//去结算
            pay(){
              if(this.totalPrice < this.minPrice){
                return;
              }
              window.alert(`支付${this.totalPrice}元`);
            }

5）然后，在弹出的.shopCartList中，有一个半透明的背景层，点击他的时候，会隐藏 掉.shopCartList和.listMask，当购物车有商品的时候，这个半透明层才会出现，所以用了v-show='listShow'，同上面的定义

在<template>中的定义如下：

在<style>中的定义如下：

.listMask
        position:fixed
        left:0
        top:0
        height:100%
        width:100%
        z-index:40
        opacity:1
        background: rgba(7, 17, 27, 0.6)
        &.fade-enter-active,&.fade-leave-active
          transition:all 0.4s
        &.fade-enter,&.fade-leave-active
          opacity:0
          background:rgba(7,17,27,0)

事件hideList()在methods中定义 如下：

//当.shopCartList展开的时候，点击半透明的背景层的时候，可以将.shopCartList隐藏掉
            hideList(){
              this.fold = true;
            }

以上大概就是实现购物车详情页面的显示的操作

完整代码如下：

<template>
      <div>
        <div class="shopCart">
          <div class="content" @click="toggleList">
            <div class="content-left">
              <div class="logo-wrapper">
                
                
                <div class="logo" :class="{'highlight':totalCount>0}">
                  <span class="icon-shopping_cart" :class="{'highlight':totalCount>0}"></span>
                </div>
                
                <div class="num" v-show="totalCount>0">{
       {totalCount}}</div>
              </div>
              
              <div class="price" :class="{'highlight':totalPrice>0}">￥{
       {totalPrice}}</div>
              <div class="desc">另需配送费￥{
       {deliveryPrice}}元</div>
            </div>
            
            
            
            <div class="content-right" @click.stop.prevent="pay">
              
              <div class="pay" :class="payClass">
                {
       {payDesc}}
              </div>
            </div>
          </div>
          
          <div class="ball-container">
            <div v-for="ball in balls">
              <transition name="drop" @before-enter="beforeDrop" @enter="dropping" @after-enter="afterDrop">
                <div class="ball" v-show="ball.show">
                  
                  <div class="inner inner-hook"></div>
                </div>
              </transition>
            </div>
          </div>
          
          <transition name="fold">
            
            
            
            <div class="shopCartList" v-show="listShow">
              <div class="listHeader">
                <h1 class="title">购物车</h1>
                
                <span class="empty" @click="empty">清空</span>
              </div>
              <div class="listContent" ref="listContent">
                <ul>
                  <li class="food" v-for="food in selectFoods">
                    <span class="name">{
       {food.name}}</span>
                    <div class="price">
                      <span>￥{
       {food.price * food.count}}</span>
                    </div>
                    <div class="cartControlWrapper">
                      
                      
                      
                      <cart-control @add="addFood" :food="food"></cart-control>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </transition>
        </div>
        <transition name="fade">
          <div class="listMask" v-show="listShow" @click="hideList"></div>
        </transition>
      </div>
    </template>

<style>

[2018050516522075]: /images/20220525/5a94b93d5df04f11b7f76c6974db02a7.png
[20180505165408529]: /images/20220525/490b6b85a2e44814b4147878aaef6e4e.png
[20180505171804167]: /images/20220525/c741a2731c81477eb207d8fcec1ccef5.png