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>

搭建所选商品列表

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

所选商品的列表 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实现购物车详情页面的方法,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

(0)

相关推荐

  • Vue实现购物车的全选、单选、显示商品价格代码实例

    今天中午废了一会时间,总算把项目中的购物车的单选.全选.以及实现数据的动态显示做出来了,给小白分享一下我个人一个解决办法: 购物车的基本页面如下: 先说实现的总体思路 1.给table表中表头th加一个 checkbox,设这两个事件:@click="checkAll" v-model="checkall": 2.给对应的tr加一个 checkbox 绑定一个事件 v-model="checked",checked设为数组,专门放商品Id: 3.

  • vue框架制作购物车小球动画效果实例代码

    最近在学习前端制作了一个购物车小球的动画效果 直接上图看看效果 下面介绍一下制作这个动画的详细过程: 1.因为使用vue锁业需要使用transition标签包裹 并指定动画三个动画生命周期函数 <transition @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter"> <div class="ball" v-if=&quo

  • vue.js购物车添加商品组件的方法

    现实向购物车添加商品组件 代码 <template> <div class="cartcontrol"> <!--商品减一区域--> <div class="reduce" v-show="food.count>0"> <i class="icon-remove_circle_outline"></i> </div> <!--商品数

  • vue+vant-UI框架实现购物车的复选框全选和反选功能

    购物车页面的设计图 商品的列表 代码: <ul v-if="shoppingListData.rows.length"> <li v-for="(item,index) in shoppingListData.rows" :key="index" > <van-checkbox :value="item.goods_id" v-model="item.isChecked" ch

  • Vue商品控件与购物车联动效果的实例代码

    本篇我们将构建商品控件与购物车联动. 商品控件 商品控件的结构编写 在商品组件的<template>标签内完成项目结构,以及数据,事件的绑定,与判断逻辑的书写. <template> <div class="goods"> <div class="menu-wrapper" ref="menuScroll"> <ul> <!--专场--> <li class="

  • vue 实现购物车总价计算

    效果如下所示: js <script type="text/javascript"> window.οnlοad=function () { var vm = new Vue({ el:'#huo', data:{ myList:[ { number:0, price:23 }, { number:0, price:14.5 }, { number:1, price:8 }, { number:0, price:20 } ], total:0, //总价 bestValue

  • vue实现购物车小案例

    本文实例为大家分享了vue实现购物车小案例的具体代码,供大家参考,具体内容如下 最终效果 HTML部分: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>shopcar.html</title> <script src="https://cdn.jsdelivr.net/npm/vue&q

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

    上次我们为商品分类菜单添加了显示购物数量,这篇我们继续推进项目,来实现购物车的详情页面,在开始之前我们先看它在页面中的样子: 如上所示,此页面包含了购物列表,而它由商品名称,单价,增减商品功能构成,增减商品功能我们在商品列表中实现过,那么我们现在可以进行复用. 搭出购物车结构 我们将购物车底部构建出来, <templete> <div class="shopcart" :class="{'highligh':totalCount>0}">

  • 多页vue应用的单页面打包方法(内含打包模式的应用)

    一.简介 关于如何以及为什么要构建多页vue应用,我们在上一篇文章中已经介绍过,感兴趣的请参考构建多页vue应用.本文我们要介绍的是,对于一个多页应用,如何单独打包其中一个(或几个)页面. 一般来说,多页应用不需要打包单个页面,这多个页面可以作为整个应用直接放在静态资源服务器上.不过我们也说过,多页应用的每个页面也可能会放在不同的服务器上,这时候如果往每个服务器上都放置完整的资源包,就会显得过于臃肿.于是我们可能就需要将某个页面单独打包出来. 诚然,有一个很明显的方法,就是在每次打包的时候直接删

  • MVC+EasyUI+三层新闻网站建立 详情页面制作方法(八)

    MVC新闻网站建立,完成详情页面的制作. 详情就是点击详情后弹出一个div,所以需要现在boby里面先建立一个div <div id="detailDiv"> <table> <tr> <td>标题:</td> <td><input class="easyui-textbox" style="width:250px;height:32px" id="title

  • Android应用自动跳转到应用市场详情页面的方法

    前言 众所周知在Android应用开发过程中,可能会有需求,比如:推广时跳转到应用市场下载应用,跳转到应用市场给自己的应用打分,跳转到应用市场更新自己的应用. 那如何跳转到应用市场呢? 可能跳转的方法大家都是知道的,方法如下: public static void goToMarket(Context context, String packageName) { Uri uri = Uri.parse("market://details?id=" + packageName); Int

  • vue实现购物车抛物线小球动画效果的方法详解

    本文实例讲述了vue实现购物车抛物线小球动画效果的方法.分享给大家供大家参考,具体如下: 先上最终效果图,在商品页面和商品详情页面点击加号添加商品时都可以看到小球抛物线落入购物车的动画效果 此文章只写了商品页面购物小球的实现,商品详情页原理类似 实现步骤: 1. 需要三个组件,最下方包含蓝色购物车的[购物车]组件shopCart.vue(子组件),每个[加减号]组成的购物小球组件cartControl.vue(子组件),和包含每个商品信息的goods组件goods.vue(父组件) 2. 原理,

  • vue页面跳转后返回原页面初始位置方法

    vue页面跳转到新页面之后,再由新页面返回到原页面时候若想返回调出原页面的初始位置,怎么来解决这个问题呢?首先我们应该在跳出页面时候记录下跳出的scrollY,返回原页面的时候在设置返回位置为记录下的scrolly即可,scrolly我用的是vuex状态管理器来保存的.整个环境是基于vue-cli搭建的 一.main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二.main.js里面vuex状态管理 var store =

  • vue中进入详情页记住滚动位置的方法(keep-alive)

    > 有时业务提出这样一个需求 就是从商品页面进入到列表详情页 要保存当前滚动的位置,这里我就想到了keep-alive 1.首先在路由中引入需要的模块 { path: '/scrollDemo', name: 'scrollDemo', meta: { keepAlive: true // 需要缓存 }, component: resolve => { require(['../view/scrollDemo.vue'], resolve) } } 2.在App.vue中设置缓存组件 <

  • vue返回上一页面时回到原先滚动的位置的方法

    项目结束,测试时发现在首页商品列表中,向上滑动几页后点击进入详情,从详情页面返回商品列表时,页面回到了最顶部,测试不通过说是用户体验不好,要求从哪里点击进去返回该页面时回到原先的滚动页面. 思路:因为vue是单页面应用,进入其他页面时会销毁该页面,用keep-alive不让其刷新,具体实现为: (1).在App.vue中加入: <template> <div id="app"> <!--<router-view/>--> <!--页

  • vue 每次渲染完页面后div的滚动条保持在最底部的方法

    实例如下: //每次页面渲染完之后滚动条在最底部 updated:function(){ this.$nextTick(function(){ var div = document.getElementById('dialogue_box'); div.scrollTop = div.scrollHeight; }) } //第一次页面渲染完之后滚动条在最底部 methods:function(){ this.$nextTick(function(){ var div = document.ge

  • vue中使用axios post上传头像/图片并实时显示到页面的方法

    在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto" v-show="personalPhoto"> <div class="viewPhoto"> <img src="" alt="" id="portrait"style=&q

随机推荐