vue实现淘宝购物车功能


Posted in Javascript onApril 20, 2020

本文实例为大家分享了vue实现淘宝购物车的具体代码,供大家参考,具体内容如下

淘宝购物车功能,效果如下图

vue实现淘宝购物车功能

非常简单的逻辑,没有做代码的封装,代码如下

<div class="list-container">
    <div class="top-ops">
        <div>
          <img src="../../../static/images/HomeRecommendShopInfoAdress@2x.png" alt="">
          <span>浙江省杭州市...</span>
        </div>
        <div class="ops">
          <span v-if="cartStatus === 'account'" @click="cartStatus = 'edit'">编辑商品</span>
          <span v-if="cartStatus === 'edit'" @click="cartStatus = 'account'">完成</span>
        </div>
    </div>
    <div class="paddingB200">
      <div class="shop-list" v-for="(item,index) in cartShops" :key="index">
        <div class="shop-name">
          <label>
            <input type="checkbox"
              name="shopRadio"
              :value="item.productShopId"
              @click="shopCheck($event,cartShops)"
            class="disN">
            <b></b>
          </label>
          <div>
            <div>
              <img src="../../../static/images/mall@2x.png" alt="">
              <span class="name">{{item.shopName}}</span>
            </div>
            <span>
              <img src="../../../static/images/jtxq@2x.png" alt="">
            </span>
          </div>
        </div>
        <div class="goods-list" v-for="(goods,goodsIndex) in item.detailLists" :key="goodsIndex">
          <label>
            <input type="checkbox"
              name="goodRadio"
              :price="goods.price"
              :num="goods.number" :dataId="item.productShopId"
              :value="goods.cartDetailId"
              @click="goodsCkeck($event,item.detailLists,cartShops,item.productShopId)"
            class="disN">
            <b></b>
          </label>
          <div class="middle">
            <img :src="goods.reportImage" alt="">
            <div>
              <p class="name">{{goods.name}}</p>
              <p class="spec">{{goods.specifications}}</p>
              <p class="tab">
                <img src="../../../static/images/lsspbq@2x.png" alt="">
              </p>
            </div>
          </div>
          <div class="right">
            <p class="price">¥{{goods.price}}</p>
            <p class="num">X{{goods.number}}</p>
            <p class="caculate">
              <span class="mark" @click="numDecrease(goods.number)"></span>
              <span class="beeforCacul">{{goods.number}}</span>
              <span class="cacul" :num="goods.cartDetailId">{{goods.number}}</span>
              <span class="mark" @click="numAdd(goods.number)"></span>
            </p>
          </div>
        </div>
      </div>
      <div class="edit" v-if="cartStatus === 'edit'">
        <label>
          <input type="checkbox" name="allRadio" class="disN" @click="allCheck($event)">
          <b></b>
          <span>全选</span>
        </label>
        <span class="delet">删除(3)</span>
      </div>
      <div class="gotopay" v-if="cartStatus === 'account'">
        <label>
          <input type="checkbox" name="allRadio" class="disN" @click="allCheck($event)">
          <b></b>
          <span class="marginR40">全选</span>
          <span>合计:</span>
          <span class="sum">¥{{sumPrice.toFixed(2)}}</span>
        </label>
        <span class="delet" @click="cauSum">去结算({{totalNumber}})</span>
      </div>
    </div>
</div>
export default {
  components: {
     
  },
  name: "life",
  data() {
    return {
      cartStatus:"account", //购物车状态,account结算,edit删除编辑状态
      cartShops: [], //店铺列表
      sumPrice:0, //合计金额
      totalNumber: 0, //总数
      shopList:[], //店铺列表
      goodsList:[], //商品列表
    };
  },
  watch: {
     
  },
  mounted() {
    this.getCartDetail();           
  },
  methods: {
    //购物车列表
    getCartDetail: function(){
      this.$http.get("api/product/v1/getCartDetail").then( res => {
        if(res.data.code === 200){
          //console.log(res.data.data)
          this.cartShops = res.data.data.cartShops;
        }else{
          Toast(res.data.msg);
        }
      }).catch( error => {
        console.log(error)
      })
    },
    //商品选择
    goodsCkeck: function(event,goodsList,shopList,shopId){                 
      //商品列表+-,店铺是否checked(店铺列表+-),全选是否checked
      var input = document.getElementsByTagName('input')
      if(event.currentTarget.checked){
        this.goodsList.push(String(event.currentTarget.value));
        //如果店铺内所有商品全选,店铺选中
        var newArr = this.goodsList;
        var tt = goodsList.every(function(itemValue){
          return (newArr.indexOf(String(itemValue.cartDetailId)) != -1)
        })
        if(tt){
          //店铺内全选,店铺checked,店铺列表+
          for(var i = 0;i<input.length;i++){
            if(input[i].value == shopId){
              input[i].checked = true;
            }
          }
          this.shopList.push(String(shopId)); //防止shopid是number类型造成麻烦
          //如果所有店铺都全选,则全选按钮checked
          if(this.shopList.length === shopList.length){
            //所有店铺全选
            for(var i = 0;i<input.length;i++){
              if(input[i].name == 'allRadio'){
                input[i].checked = true;
              }
            }
          }
        }
      }else{
        //商品列表--
        this.goodsList.splice(this.goodsList.indexOf(event.currentTarget.value),1)
        //如果店铺checked,则取消,店铺列表--
        for(var i = 0;i<input.length;i++){
          if(input[i].value == shopId){
            if(input[i].checked){
              input[i].checked = false;
              this.shopList.splice(this.shopList.indexOf(String(shopId)),1); //防止shopid是number类型造成麻烦
            }
          }
          //任意一个不选,全选取消
          if(input[i].name == 'allRadio'){
            input[i].checked = false;
          }
        }
      }
      //计算总价和数量
      this.caculate();
    },
    //店铺选择
    shopCheck: function(event,shopList){
      //店铺选中则对应商品全选,否则全不选
      //console.log(event.currentTarget)
      var input = document.getElementsByTagName('input')
      if(event.currentTarget.checked){
        //店铺列表+,店铺checked,店铺内商品全checked,商品列表++
        //console.log(this.shopList)
        this.shopList.push(String(event.currentTarget.value));
        //店铺内商品全checked
        for(var i = 0;i<input.length;i++){
          if(input[i].getAttribute('dataId') == event.currentTarget.value){
            //将没有选中的checked,并加入列表,去重
            if(!input[i].checked){
              input[i].checked = true;
              //商品列表++
              this.goodsList.push(String(input[i].value))
            }
          }
        }
        //所有店铺全选
        if(this.shopList.length === shopList.length){
          for(var i = 0;i<input.length;i++){
            if(input[i].name == 'allRadio'){
              input[i].checked = true;
            }
          }
        }
      }else{
        //店铺取消checked,店铺列表--,店铺内所有商品取消checked,商品列表--
        this.shopList.splice(this.shopList.indexOf(String(event.currentTarget.value)),1);
        //店铺内所有商品取消checked
        for(var i = 0;i<input.length;i++){
          if(input[i].getAttribute('dataId') == event.currentTarget.value){
            input[i].checked = false;
            //商品列表--
            this.goodsList.splice(this.goodsList.indexOf(input[i].value),1);
          }
          //任意一个不选,全选取消
          if(input[i].name == 'allRadio'){
            input[i].checked = false;
          }
        }
      }
      //计算总价和数量
      this.caculate();
    },
    //所有全选
    allCheck: function(event){
      var input = document.getElementsByTagName('input')
      if(event.currentTarget.checked){
        //全选checked,所有店铺checked,店铺列表++,所有商品checked,商品列表++
        for(var i = 0;i<input.length;i++){
          //去重
          if(!input[i].checked){
            input[i].checked = true;
            if(input[i].name == 'shopRadio'){
              this.shopList.push(String(input[i].value))
            }
            if(input[i].name == 'goodRadio'){
              this.goodsList.push(String(input[i].value))
            }
          }
        }
      }else{
        //全不选取消checked,店铺全部取消checked,店铺列表清空,所有商品取消checked,商品列表清空
        for(var i = 0;i<input.length;i++){
          input[i].checked = false;
          this.shopList = [];
          this.goodsList = [];
        }
      }
      //计算总价和数量
      this.caculate();
    },
    //计算总金额总数量
    caculate: function(){
      var input = document.getElementsByTagName('input');
      var newArr = [];
      for(var i = 0;i<input.length;i++){
        if(input[i].name == 'goodRadio' && input[i].checked){
          var num = input[i].parentNode.parentNode.children[2].children[2].children[2].innerHTML;
          newArr.push(
            {
              'price': input[i].getAttribute('price'),
              'num': num
            }
          )
        }
      }
      this.totalNumber = newArr.length;
      //归零
      this.sumPrice = 0;
      for(var j = 0,len = newArr.length;j<len;j++){
        this.sumPrice += newArr[j].price * newArr[j].num;
      }
    },
    //数量减小
    numDecrease: function(num){
      //如果当前input选中,则修改数量计算价格,如果当前input没有选中,则修改数量不计算价格
      var spanList = event.currentTarget.parentNode.children;
      for(var i = 0,len = spanList.length;i<len;i++){
        if(spanList[i].getAttribute("class") == 'beeforCacul'){
          spanList[i].style.display = 'none';
        }
        if(spanList[i].getAttribute("class") == 'cacul'){
          spanList[i].style.display = 'block';
          var caculNum = spanList[i].innerHTML;
          if(caculNum < 2){
            Toast('宝贝不能再少了哦');
          }else{
            caculNum --
            spanList[i].innerHTML = caculNum;
          }
        }
      }
      if(event.currentTarget.parentNode.parentNode.parentNode.children[0].children[0].checked){
        this.caculate();
      }
    },
    //数量增加
    numAdd: function(num){
      var spanList = event.currentTarget.parentNode.children;
      //console.log(event.currentTarget.parentNode.children)
      for(var i = 0,len = spanList.length;i<len;i++){
        if(spanList[i].getAttribute("class") == 'beeforCacul'){
          spanList[i].style.display = 'none';
        }
        if(spanList[i].getAttribute("class") == 'cacul'){
          spanList[i].style.display = 'block';
          var caculNum = spanList[i].innerHTML;
          caculNum ++;
          spanList[i].innerHTML = caculNum;
        }
      }
      if(event.currentTarget.parentNode.parentNode.parentNode.children[0].children[0].checked){
        this.caculate();
      }
    },
    //去结算
    cauSum:function(){
      if(this.sumPrice === 0){
        Toast('您还没有选择宝贝哦');
      }else{
        this.$router.push('/cart/order')
      }
    },
  }
};

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
070823更新的一个[消息提示框]组件 兼容ie7
Aug 29 Javascript
Ajax搜索结果页面下方的分页按钮的生成
Apr 05 Javascript
关于在IE下的一个安全BUG --可用于跟踪用户的系统鼠标位置
Apr 17 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
AngularJs定制样式插入到ueditor中的问题小结
Aug 01 Javascript
AngularJs上传前预览图片的实例代码
Jan 20 Javascript
JS全角与半角转化实例(分享)
Jul 04 Javascript
Javascript别踩白块儿(钢琴块儿)小游戏实现代码
Jul 20 Javascript
javascript将list转换成树状结构的实例
Sep 08 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
Dec 06 Javascript
新手快速入门微信小程序组件库 iView Weapp
Jun 24 Javascript
Vue防止白屏添加首屏动画的实例
Oct 31 Javascript
javascript利用键盘控制小方块的移动
Apr 20 #Javascript
vue实现购物车的监听
Apr 20 #Javascript
详解微信小程序工程化探索之webpack实战
Apr 20 #Javascript
Vue中el-form标签中的自定义el-select下拉框标签功能
Apr 20 #Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
Apr 20 #Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
Apr 20 #Javascript
JS实现横向跑马灯效果代码
Apr 20 #Javascript
You might like
JSON 学习之JSON in JavaScript详细使用说明
2010/02/23 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
js实现的点击数量加一可操作数据库
2014/05/09 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
js实现n秒倒计时后才可以点击的效果
2015/12/20 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
Vue实现导出excel表格功能
2018/03/30 Javascript
Angular父组件调用子组件的方法
2018/04/02 Javascript
使用D3.js+Vue实现一个简单的柱形图
2018/08/05 Javascript
微信小程序访问豆瓣电影api的实现方法
2019/03/31 Javascript
基于 jQuery 实现键盘事件监听控件
2019/04/04 jQuery
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
Python聚类算法之凝聚层次聚类实例分析
2015/11/20 Python
Python爬虫模拟登录带验证码网站
2016/01/22 Python
深入浅析python with语句简介
2018/04/11 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
Python爬取数据并写入MySQL数据库的实例
2018/06/21 Python
Numpy之文件存取的示例代码
2018/08/03 Python
pyqt5 获取显示器的分辨率的方法
2019/06/18 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
详解pyqt5的UI中嵌入matplotlib图形并实时刷新(挖坑和填坑)
2020/08/07 Python
JupyterNotebook 输出窗口的显示效果调整实现
2020/09/22 Python
pycharm激活码免费分享适用最新pycharm2020.2.3永久激活
2020/11/25 Python
Diesel美国网上商店:意大利牛仔时装品牌
2020/12/10 全球购物
后进生转化工作制度
2014/01/17 职场文书
社区学习十八大感想
2014/01/22 职场文书
教育实践活动对照检查材料
2014/09/23 职场文书
农业生产宣传标语
2014/10/08 职场文书
学习十八大标语
2014/10/09 职场文书
加强作风建设心得体会
2014/10/22 职场文书
小学班主任教育随笔
2015/08/15 职场文书
2016年国培心得体会及反思
2016/01/13 职场文书
经销商会议开幕词
2016/03/04 职场文书
闭幕词的写作格式与范文!
2019/06/24 职场文书