（九）实现页面底部购物车的样式

小咪咪 2022-05-24 23:25 160阅读 0赞

页面底部购物车的样式分为3种，如下图所示

![20180504085451571][]

图1

![20180504085532182][]

图2

![20180504085549115][]

图3

图1中的4元配送费和20元起送是后台返回的数据并且底部字体样色是灰色 的；图2是当有食品家务购物车的时候，购物车的字体变色并且logo右上方会有数字提示所加商品数，右边的“20元起送”变成“还差多少元起送”；图3当所加商品的总额超过还差20元的时候，最右边的“还差多少元起送”变成“去结算”并且字体样色和背景色变色

下面就看看如何实现购物车shopCart.vue这个组件

1、首先先将图1写出来

1）需要从goods.vue（父组件）中传递数据deliveryPrice和minPrice以及selectFoods，而这些数据又在seller里面，所以需要从App.vue（父组件）中传递数据seller，如下图所示

在App.vue中的<router-view>绑定变量seller

![20180504093153467][]

在goods.vue中通过props属性声明seller变量，并引入使用Shop-cart组件

![20180504094136108][]

在<shop-cart>组件里面绑定变量delivery-price和min-price，如上图所示

在shopCart.vue里面声明变量delivery-price和min-price，如下图所示

![20180504094456117][]

2、下面是shopCart.vue文件中的<template>中的内容

<template>
        <div class="shopCart">
          <div class="content">
            <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">
              
              <div class="pay" :class="payClass">
                {
       {payDesc}}
              </div>
            </div>
          </div>
        </div>
    </template>

3、shopCart.vue文件中的<script>内容

4、shopCart.vue文件中的<style>内容

[20180504085451571]: /images/20220525/4c09bc9299164ea68f2d57cece512ff2.png
[20180504085532182]: /images/20220525/7594b0b2ff9e4b21ab14ff36d67c837e.png
[20180504085549115]: /images/20220525/a0ea0113f34f4b3c95747804137c972c.png
[20180504093153467]: /images/20220525/fe5847b834e442bbae2ad15710c5ce22.png
[20180504094136108]: /images/20220525/439f3d95ec294710bb90d9e5ccc0e2ff.png
[20180504094456117]: /images/20220525/a9cedd5c52714193bfda587ead1e0fa7.png