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 相关文章推荐
js 中的switch表达式使用示例
Jun 03 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
May 12 Javascript
关于jQuery EasyUI 中刷新Tab选项卡后一个页面变形的解决方法
Mar 02 Javascript
使用react-router4.0实现重定向和404功能的方法
Aug 28 Javascript
React中上传图片到七牛的示例代码
Oct 10 Javascript
五步轻松实现JavaScript HTML时钟效果
Mar 25 Javascript
基于vue-cli创建的项目的目录结构及说明介绍
Nov 23 Javascript
Nginx设置为Node.js的前端服务器方法总结
Mar 27 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
Feb 11 Javascript
几款主流好用的富文本编辑器(所见即所得常用编辑器)介绍
Mar 17 Javascript
简单聊聊Vue中的计算属性和属性侦听
Oct 05 Vue.js
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
PHP备份/还原MySQL数据库的代码
2011/01/06 PHP
JavaScript 拾漏补遗
2009/12/27 Javascript
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
jquery滚动条插件jScrollPane的使用介绍
2013/11/08 Javascript
jQuery实现仿路边灯箱广告图片轮播效果
2015/04/15 Javascript
apply和call方法定义及apply和call方法的区别
2015/11/15 Javascript
原生js实现百叶窗效果及原理介绍
2016/04/12 Javascript
jQuery操作属性和样式详解
2016/04/13 Javascript
解析浏览器端的AJAX缓存机制
2016/06/21 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
Vue分页组件实例代码
2017/04/17 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
JS实现水平遍历和嵌套递归操作示例
2019/08/15 Javascript
vue cli3.0打包上线静态资源找不到路径的解决操作
2020/08/03 Javascript
微信小程序换肤功能实现代码(思路详解)
2020/08/25 Javascript
javascript代码实现简易计算器
2021/01/25 Javascript
[03:57]DOTA2英雄梦之声_第03期_幻影刺客
2014/06/21 DOTA
Python之读取TXT文件的方法小结
2018/04/27 Python
Python Scapy随心所欲研究TCP协议栈
2018/11/20 Python
python+flask实现API的方法
2018/11/21 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
python使用turtle库绘制奥运五环
2020/02/24 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
OpenCV+python实现实时目标检测功能
2020/06/24 Python
马来西亚太阳镜、眼镜和隐形眼镜网上商店:Focus Point
2018/12/13 全球购物
《石榴》教学反思
2014/03/02 职场文书
分层教学实施方案
2014/03/19 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
计生办班子群众路线教育实践活动个人对照检查材料思想汇报
2014/10/04 职场文书
副检察长四风问题对照检查材料思想汇报
2014/10/07 职场文书
个人年底工作总结
2015/03/10 职场文书
个人收入证明范本
2015/06/12 职场文书
教学反思怎么写
2016/02/24 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
Python基础数据类型tuple元组的概念与用法
2021/08/02 Python