Vue实现购物车详情页面的方法


Posted in Javascript onAugust 20, 2019

上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在页面中的样子:

Vue实现购物车详情页面的方法 

如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那么我们现在可以进行复用。

搭出购物车结构

我们将购物车底部构建出来,

<templete>
<div class="shopcart" :class="{'highligh':totalCount>0}">
    <div class="shopcart-wrapper">
      
    </div>
</div>
</templete>

老情况,在templete模板下的shopcart-wrapper内完成底部购物车一栏:

1 count大于0.让它打开

<!-- 左=>内容包含购物车icon 金额 配送费 -->
      <div class="content-left">
        <div class="logo-wrapper" :class="{'highligh':totalCount>0}" @click="toggleList">
          <span class="icon-shopping_cart logo" :class="{'highligh':totalCount>0}"></span>
          <i class="num" v-show="totalCount">{{totalCount}}</i>
        </div>
        <div class="desc-wrapper">
          <p class="total-price" v-show="totalPrice">¥{{totalPrice}}</p>
          <p class="tip" :class="{'highligh':totalCount>0}">另需{{poiInfo.shipping_fee_tip}}</p>
        </div>
      </div>
      <!-- 去结算 -->
      <div class="content-right" :class="{'highligh':totalCount>0}">
        {{payStr}}
      </div>

搭建所选商品列表

 Vue实现购物车详情页面的方法

如图所示,我们分好结构,紧接着搭建所选商品的列表

所选商品的列表 shopcart-list默认隐藏的,也就是说我们在没有选择食品的时候,点击购物车它不会展开。

1.list-hearder,左右结构包括1号口袋与清空购物车

2.list-content 列表,存放我们选择的食物

2.1左边是我们的食物名字,商品描述;右侧是数量,加减商品的组件。

<div class="shopcart-list" v-show="listShow" :class="{'show':listShow}">
        <!--列表顶部满减信息-->
        <div class="list-top" v-if="poiInfo.discounts2">
          {{poiInfo.discounts2[0].info}}
        </div>
        <!--1号口袋 清空功能-->
        <div class="list-header">
          <h3 class="title">1号口袋</h3>
          <div class="empty" @click="emptyFn">
            <img src="./ash_bin.png" />
            <span>清空购物车</span>
          </div>
        </div>
        <!--所选商品列表-->
        <div class="list-content" ref='listContent'>
          <ul>
            <li class="food-item" v-for="food in selectFoods">
              <div class="desc-wrapper">
                <!--左侧-->
                <div class="desc-left">
                  <!--所选商品名字-->
                  <p class="name">{{food.name}}</p>
                  <!--所选商品描述 unit 例 des 霆锋苦辣鸡腿堡1个-->
                  <p class="unit" v-show="!food.description">{{food.unit}}</p>
                  <p class="description" v-show="food.description">{{food.description}}</p>
                </div>
                <!--商品单价-->
                <div class="desc-right">
                  <span class="price">¥{{food.min_price}}</span>
                </div>
              </div>
              <!--复用商品增减组件 Cartcontrol-->
              <div class="cartcontrol-wrapper">
                <Cartcontrol :food='food'></Cartcontrol>
              </div>
            </li>
          </ul>
        </div>
        <div class="list-bottom"></div>
      </div>

加入遮罩层

<!-- 遮罩层 -->
    <div class="shopcart-mask" v-show="listShow" @click="hideMask()"></div>

到这里,结构咱们就搭好了。

注册组件,添加功能

我们通过props为购物车组件传入所需要的数据;

计算属性:

  • 通过totalCount计算所选的商品数量;
  • 通过totalPrice计算所选商品的总价;
  • 通过payStr控制去结算;

listShow是我们控制购物车详情页展示的要点,依据totalCount所选商品数量对fold折叠进行控制,fold为true,商品数量为0.购物车详情页为折叠状态。

接着我们将状态取反赋值到show,并且依据show,来控制商品详情页面商品一定多时,可以进行鼠标滚动。

方法:

通过toggleList点击购物车logo时候,进行判断,如果没有选择商品那么我们什么也不做。如果我们选择了商品,那么将fold取反。因为我们在计算属性listShow中设置过实例中的fold属性为true,所有它是折叠的。在我们取反后,它就会展开。

emptyFn清空购物车

最后我们点击遮罩层的时候,让遮罩层隐藏,也就是fold为true。

<script>
  // 导入BScroll
  import BScroll from 'better-scroll'
  // 导入Cartcontrol
  import Cartcontrol from 'components/Cartcontrol/Cartcontrol'

  export default {
    data() {
      return {
        fold: true
      }
    },
    props: {
      poiInfo: {
        type: Object,
        default: {}
      },
      selectFoods: {
        type: Array,
        default() {
          return [
            //            {
            //              min_price: 10,
            //              count: 3
            //            },
            //            {
            //              min_price: 7,
            //              count: 1
            //            }
          ];
        }
      }
    },
    computed: {
      // 总个数
      totalCount() {
        let num = 0;
        this.selectFoods.forEach((food) => {
          num += food.count;
        });

        return num;
      },
      // 总金额
      totalPrice() {
        let total = 0;
        this.selectFoods.forEach((food) => {
          total += food.min_price * food.count;
        });

        return total;
      },
      payStr() {
        if(this.totalCount > 0) {
          return "去结算";
        } else {
          return this.poiInfo.min_price_tip;
        }
      },
      listShow() {
        if(!this.totalCount) { // 个数为0
          this.fold = true;

          return false;
        }

        let show = !this.fold;

        // BScoll相关
        if(show) {
          this.$nextTick(() => {
            if(!this.shopScroll) {
              this.shopScroll = new BScroll(this.$refs.listContent, {
                click: true
              });
            } else {
              this.shopScroll.refresh();
            }
          });
        }

        return show;
      }
    },
    methods: {
      toggleList() {
        if(!this.totalCount) { // 个数为0
          return;
        }
        this.fold = !this.fold;
      },
      emptyFn() {
        this.selectFoods.forEach((food) => {
          food.count = 0;
        });
      },
      hideMask() {
        this.fold = true;
      }
    },
    components: {
      Cartcontrol,
      BScroll
    }
  }
</script>

样式

<style>
.shopcart-wrapper{
  width: 100%;
  height: 51px;
  background: #514f4f;
  position: fixed;
  left: 0;
  bottom: 0;
  display: flex;
  z-index: 99;
}
.shopcart-wrapper.highligh{
  background: #2d2b2a;
}
.shopcart-wrapper .content-left{
  flex: 1;
}
.shopcart-wrapper .content-left .logo-wrapper{
  width: 50px;
  height: 50px;
  background: #666666;
  border-radius: 50%;
  position: relative;
  top: -14px;
  left: 10px;
  text-align: center;
  float: left;
}
.shopcart-wrapper .content-left .logo-wrapper.highligh{
  background: #ffd161;
}
.shopcart-wrapper .content-left .logo-wrapper .logo{
  font-size: 28px;
  color: #c4c4c4;
  line-height: 50px;
}
.shopcart-wrapper .content-left .logo-wrapper .logo.highligh{
  color: #2D2B2A;
}
.shopcart-wrapper .content-left .logo-wrapper .num{
  width: 15px;
  height: 15px;
  line-height: 15px;
  border-radius: 50%;
  font-size: 9px;
  color: white;
  background: red;
  position: absolute;
  right: 0;
  top: 0;
}
.shopcart-wrapper .content-left .desc-wrapper{
  float: left;
  margin-left: 13px;
}
.shopcart-wrapper .content-left .desc-wrapper .total-price{
  font-size: 18px;
  line-height: 33px;
  color: white;
}
.shopcart-wrapper .content-left .desc-wrapper .tip{
  font-size: 12px;
  color: #bab9b9;
  line-height: 51px;
}
.shopcart-wrapper .content-left .desc-wrapper .tip.highligh{
  line-height: 12px;
}
.shopcart-wrapper .content-right{
  flex: 0 0 110px;
  font-size: 15px;
  color: #BAB9B9;
  line-height: 51px;
  text-align: center;
  font-weight: bold;
}
.shopcart-wrapper .content-right.highligh{
  background: #FFD161;
  color: #2D2B2A;
}
.shopcart-wrapper .shopcart-list{
  position: absolute;
  left: 0;
  top: 0;
  z-index: -1;
  width: 100%;
}
.shopcart-wrapper .shopcart-list.show{
  transform: translateY(-100%);
}
.shopcart-wrapper .shopcart-list .list-top{
  height: 30px;
  text-align: center;
  font-size: 11px;
  background: #f3e6c6;
  line-height: 30px;
  color: #646158;
}
.shopcart-wrapper .shopcart-list .list-header{
  height: 30px;
  background: #F4F4F4;
}
.shopcart-wrapper .shopcart-list .list-header .title{
  float: left;
  border-left: 4px solid #53c123;
  padding-left: 6px;
  line-height: 30px;
  font-size: 12px;
}
.shopcart-wrapper .shopcart-list .list-header .empty{
  float: right;
  line-height: 30px;
  margin-right: 10px;
  font-size: 0;
}
.shopcart-wrapper .shopcart-list .list-header .empty img{
  height: 14px;
  margin-right: 9px;
  vertical-align: middle;
}
.shopcart-wrapper .shopcart-list .list-header .empty span{
  font-size: 12px;
  vertical-align: middle;
}
.shopcart-wrapper .shopcart-list .list-content{
  max-height: 360px;
  overflow: hidden;
  background: white;
}
.shopcart-wrapper .shopcart-list .list-content .food-item{
  height: 38px;
  padding: 12px 12px 10px 12px;
  border-bottom: 1px solid #F4F4F4;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper{
  float: left;
  width: 240px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left{
  float: left;
  width: 170px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .name{
  font-size: 16px;
  margin-bottom: 8px;
  /* 超出部分隐藏*/
  -webkit-line-clamp: 1;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  height: 16px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .unit{
  font-size: 12px;
  color: #B4B4B4;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-left .description{
  font-size: 12px;
  color: #B4B4B4;
  /* 超出部分隐藏*/
  overflow: hidden;
  height: 12px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-right{
  float: right;
  width: 70px;
  text-align: right;  
}
.shopcart-wrapper .shopcart-list .list-content .food-item .desc-wrapper .desc-right .price{
  font-size: 12px;
  line-height: 38px;
}
.shopcart-wrapper .shopcart-list .list-content .food-item .cartcontrol-wrapper{
  float: right;
  margin-top: 6px;
}
.shopcart .shopcart-mask{
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  z-index: 98;
  background: rgba(7,17,27,0.6);
}
</style>

总结

我们从搭购物车结构,到所选商品列表细化,这里我们复用了增减商品的组件,然后加入遮罩层。通过计算属性与方法,加入控制逻辑完成了购物车的详情页面。

以上所述实小编给大家介绍的Vue实现购物车详情页面的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
HTML Dom与Css控制方法
Oct 25 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
深入理解JavaScript系列(37):设计模式之享元模式详解
Mar 04 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
微信小程序 欢迎页面的制作(源码下载)
Jan 09 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
基于vue.js路由参数的实例讲解——简单易懂
Sep 07 Javascript
webpack打包node.js后端项目的方法
Mar 10 Javascript
搭建基于express框架运行环境的方法步骤
Nov 15 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
Angular 多模块项目构建过程
Feb 13 Javascript
bootstrap实现tab选项卡切换
Aug 09 Javascript
详解解决小程序中webview页面多层history返回问题
Aug 20 #Javascript
JavaScript使用表单元素验证表单的示例代码
Aug 20 #Javascript
vue悬浮可拖拽悬浮按钮的实例代码
Aug 20 #Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
Aug 20 #Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 #Javascript
微信小程序webview与h5通过postMessage实现实时通讯的实现
Aug 20 #Javascript
JS中的算法与数据结构之队列(Queue)实例详解
Aug 20 #Javascript
You might like
php调用google接口生成二维码示例
2014/04/28 PHP
php之可变变量的实例详解
2017/09/12 PHP
PHP实现基于栈的后缀表达式求值功能
2017/11/10 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
两个Javascript小tip资料
2010/11/23 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
2013/11/23 Javascript
jQuery中的height innerHeight outerHeight区别示例介绍
2014/06/15 Javascript
20分钟轻松创建自己的Bootstrap站点
2016/05/12 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
微信小程序wx:for循环的实例详解
2018/10/07 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
借助云开发实现小程序短信验证码的发送
2020/01/06 Javascript
python生成随机密码或随机字符串的方法
2015/07/03 Python
python制作一个桌面便签软件
2015/08/09 Python
python2.7 mayavi 安装图文教程(推荐)
2017/06/22 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
Python方法的延迟加载的示例代码
2017/12/18 Python
PyQt5实现简易计算器
2020/05/30 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
Pytorch的mean和std调查实例
2020/01/02 Python
python 追踪except信息方式
2020/04/25 Python
使用CSS3 制作一个material-design 风格登录界面实例
2016/12/12 HTML / CSS
Sneaker Studio匈牙利:购买运动鞋
2018/03/26 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
CK澳大利亚官网:Calvin Klein澳大利亚
2020/12/12 全球购物
英国运动风奢侈品购物网站:Maison De Fashion
2020/08/28 全球购物
办公室文员工作自我评价
2013/12/01 职场文书
情侣吵架检讨书
2014/02/05 职场文书
学生社团文化节开幕式主持词
2014/03/28 职场文书
小学生操行评语
2014/04/22 职场文书
离职证明标准格式
2014/09/15 职场文书
Mysql排序的特性详情
2021/11/01 MySQL
Java死锁的排查
2022/05/11 Java/Android