简单入门的购物车事件

html

    
    
         
     
      
      
        
               
       店铺名称      
      
      
      
        
       
          
                  
                
       
        
       
          
                
       
        
       
          
        
         {
   {item.goods_name}}
        
          
        
         {
   {item.goods_unit_value}}{
   {item.goods_unit}}
        
          
        
            
         ￥{ {item.goods_price}}            
         
 
           
           
           
           
         
          
        
        
       
      
      
    
     
    
         
     
    
     
      
      
        
               
               
       全选      
      
      
      
        
       总计:{
   {totalPrice}}      
      
      
      
       去结算
      
    
     
    
       
    
复制代码

css

body{  background-color: #f5f5f5;}nav {  display: flex;  justify-content: flex-start;  padding: 0 0 0 0.2rem;  align-items: center;  font-size: 0.18rem;  background-color: #fff;  margin-bottom: 0.02rem;}.back,.search_scan {  width: 0.36rem;  height: 0.5rem;  display: flex;  justify-content: center;  align-self: center;  flex-direction: column;}.back_row {  width: 0.12rem;  height: 0.2rem;}.ipt_sea {  width: 75%;  font-size: 0.18rem;  border: 0.01rem solid #eee;  border-radius: 0.2rem;  height: 0.3rem;  padding-left: 0.1rem;}.head_search {  width: 0.26rem;  height: 0.26rem;} .car_list {  display: flex;  flex-direction: column;  justify-content: flex-start;  background-color: #fff;  padding: 0 0 0 0.15rem;  font-size: 0.12rem;  margin-bottom: 0.1rem;}.item_title {  display: flex;  justify-content: flex-start;  height: 0.40rem;  align-items: center;  color: #424242;  font-size: 0.120rem;}.itemimg{  width: 0.4rem;  height: 0.5rem;  display: flex;  justify-content: center;  align-items: center;}.items_img {  width: 0.25rem;  height: 0.25rem;  margin-left: 0.05rem;  margin-right: 0.10rem;}.item_img {  width: 0.15rem;  height: 0.15rem;  margin-right: 0.05rem;} .item_info {  display: flex;  justify-content: flex-start;  margin: 0rem 0 0.20rem 0;  align-items: center;} .item_info_photo {  width: 1rem;  height: 1rem;}.item_info_img {  width: 100%;  height: 100%;}.item_info_text {  height: 1rem;  display: flex;  flex-direction: column;  justify-content: space-between;  font-size: 0.12rem;  width: 58%;  margin-left: 0.1rem;} .info_span {  overflow: hidden;  text-overflow: ellipsis;  display: -webkit-box;  -webkit-line-clamp: 2;  -webkit-box-orient: vertical;}.item_icon, .item_icon_text {  width: 0.2rem;  height:0.2rem;  margin-right: 0rem;  display: inline-block;}.item_icon_text {  text-align: center;  font-size: 0.12rem;  line-height: 0.35rem;  width: 0.3rem;  border: none;}.introduce{  display: flex;  justify-content: space-around;  align-items: center;  width: 80%;}.item_info_introduce{  padding-right: 0.2rem;  display: flex;  justify-content: space-between;  align-items: center}.footer {  position: fixed;  bottom: 0.55rem;  left: 0;  height: 0.5rem;  background-color: #fff;  display: flex;  justify-content: space-between;  width: 100%;  align-items: center;  box-shadow: 0.10rem -0.01rem 0.05rem rgba(214, 214, 214, 0.5);  font-size: 0.12rem}  .foot_left {  padding-left: 0.15rem;  width: 20%;}.gobuy {  background-color: #e61e56;  height: 0.5rem;  width: 1rem;  text-align: center;  line-height: 0.5rem;  color: #fff;  font-size: 0.18rem;}.total_price {  color: #e61e56;}.place{  height: 1.1rem}复制代码

图

js完整代码

//初学vue 不会使用路由跳转// 截取传来的字符串var strHref = location.href;if (strHref.indexOf("?")) {  var intPos = strHref.indexOf("?");  intPos = intPos + 3;  // 从二级分类跳转过来的二级id  var num = strHref.substring(66, strHref.length);}console.log(num);// 现在固定为''var id = num ? num : false;// var id = "";var app = new Vue({  el: "#app",  data: {    buyer_id: "",    dept_id: "",    total: [],    totalnone: false,    totalPrice: 0,    allselected: false,    ipt: "",    goback: false  },  created() {    // 如果是从详情页跳转进来的话设置back    this.goback = id;    console.log(this.goback);    this.buyer_id = localStorage.getItem("buyer_id");    this.dept_id = localStorage.getItem("dept_id");    var data = {      dept_id: this.dept_id,      buyer_id: this.buyer_id    };    this.InitAjax(data);  },  computed: {},  watch: {},  methods: {    /**     * 请求数据     */    InitAjax(data) {      var that = this;      $.ajax({        type: "POST",        contentType: "application/json",        url: "url数据地址",        data: JSON.stringify(data),        error: function(request) {          alert("Connection error");        },        success: function(res) {          if (res.stateCode == 200) {            for (var dr = 0; dr < res.data.length; dr++) {              res.data[dr].single_selected = false;              // res.data[dr].ipt_num = res.data[dr].goods_count;            }            that.total = res.data;            console.log(res);          } else {            console.log("请求数据失败");          }        }      });    },    /**     * 勾选商品 SelectImg     * 1 获取商品id  遍历商品数组找到商品     * 2 计算单个商品的总价     * 3 判断是否全选     *       遍历商品数组得到所有商品的价格总和     *       选中商品的所有单个商品的总价之和     *       两个价格总价进行比较     *           相等则全选 否则反之     */    SelectImg(parm) {      console.log("勾选商品事件传入的参数", parm);      var id = parm;      var single_total = 0;      var select_arr = this.total;      for (var s = 0; s < select_arr.length; s++) {        if (select_arr[s].goods_id == id) {          if (!select_arr[s].single_selected) {            select_arr[s].single_selected = true;            single_total =              select_arr[s].goods_price * select_arr[s].goods_count;            this.totalPrice = this.totalPrice + single_total;          } else {            select_arr[s].single_selected = false;            single_total =              select_arr[s].goods_price * select_arr[s].goods_count;            this.totalPrice = this.totalPrice - single_total;            this.allselected = false;          }        }      }      this.total = select_arr;      var zero_price = 0;      for (var d = 0; d < select_arr.length; d++) {        zero_price =          zero_price + select_arr[d].goods_price * select_arr[d].goods_count;      }      if (zero_price == this.totalPrice) {        this.allselected = true;      } else {        this.allselected = false;      }      // this.$forceUpdate();    },    /**     * 全选函数     * 1 修改全选状态     * 2 由全选状态修改单个商品的选中状态     * 3 由单个商品的选中状态决定总价格     */    Allselect() {      this.allselected = !this.allselected;      var select_arr = this.total;      for (var s = 0; s < select_arr.length; s++) {        if (this.allselected) {          select_arr[s].single_selected = true;        } else {          select_arr[s].single_selected = false;        }      }      var single_total = 0;      for (var s = 0; s < select_arr.length; s++) {        if (select_arr[s].single_selected) {          select_arr[s].single_selected = true;          single_total = select_arr[s].goods_price * select_arr[s].goods_count;          this.totalPrice = this.totalPrice + single_total;        } else {          select_arr[s].single_selected = false;          single_total = select_arr[s].goods_price * select_arr[s].goods_count;          this.totalPrice = this.totalPrice - single_total;        }      }    },    /**     * 单个商品的数量减少 cardown()     * 1 获取商品id 遍历商品数组找到商品     * 2 计算 数量值的差和差价     * 3 更新总价     * 注意     *    需要注意在减少到0时候需要做等于0的处理     */    Cardown(parm) {      console.log(parm, "商品的数量减少事件");      var id = parm;      var select_arr = this.total;      var single_num = 0;      var change_num = 0;      var change_money = 0;      for (var s = 0; s < select_arr.length; s++) {        if (select_arr[s].goods_id == id) {          if (select_arr[s].single_selected) {            single_num = select_arr[s].goods_count;            select_arr[s].goods_count = select_arr[s].goods_count - 1;            if (select_arr[s].goods_count == 0) {              select_arr[s].goods_count = 0;              select_arr[s].single_selected = false;              this.allselected = false;            }            change_num = single_num - select_arr[s].goods_count;            change_money = select_arr[s].goods_price * change_num;            this.totalPrice = this.totalPrice - change_money;            if (this.totalPrice < 0) {              this.totalPrice = 0;            }          } else {            console.log("请选择商品");          }        }      }      this.total = select_arr;    },    /**     * 单个商品数量增加     * 1 获取商品id 遍历商品数组找到商品     * 2 计算 数量值的差和差价     * 3 更新总价     */    Caradd(parm) {      console.log(parm, "商品增加数量");      var money = 0;      var id = parm;      var select_arr = this.total;      for (var s = 0; s < select_arr.length; s++) {        if (select_arr[s].goods_id == id) {          if (select_arr[s].single_selected) {            select_arr[s].goods_count = select_arr[s].goods_count + 1;            if (select_arr[s].goods_count < 0) {              select_arr[s].goods_count = 0;            }            this.totalPrice = this.totalPrice + select_arr[s].goods_price;            if (this.totalPrice < 0) {              this.totalPrice = 0;            }          } else {            console.log("请选择商品");          }        }      }      this.total = select_arr;    },    /**     * input框的修改数量事件     * 1 获取商品id 遍历商品列表 找到商品     * 2 输入框与商品的数量的双向绑定     *       在商品数量<=1 那么数量就只可以为1     * 3 遍历商品列表计算选中商品的总价     *       注意在总价的相加的时候需要在循环之外进行     * 4 根据总价的数目 设置全选的状态     */    inputFunc(parm) {      console.log(parm, "商品数量的修改");      var id = parm;      var select_arr = this.total;      for (var s = 0; s < select_arr.length; s++) {        if (select_arr[s].goods_id == id) {          if (select_arr[s].single_selected) {            if (select_arr[s].goods_count <= 1) {              select_arr[s].goods_count = 1;            }          } else {            console.log("请先选择商品");          }        }      }      var single_total = 0;      for (var s = 0; s < select_arr.length; s++) {        if (select_arr[s].single_selected) {          single_total =            single_total +            select_arr[s].goods_price * select_arr[s].goods_count;        }      }      this.totalPrice = single_total;      this.total = select_arr;      if (!this.totalPrice) {        this.allselected = false;      }    },    /**     * 删除商品     * 1 获取商品主键 universalid     * 2 判断该商品是否选中     * 3 将主键放入需要删除的数组中     * 4 前端页面删除该商品 在商品列表中找到该商品     * 5 发送请求  数据库删除商品     */    DelGood(parm) {      console.log(parm, "删除商品");      var del_arr = [];      var universalid = parm;      var total_arr = this.total;      for (var t = 0; t < total_arr.length; t++) {        if (total_arr[t].universalid == universalid) {          if (total_arr[t].single_selected) {            del_arr.push(universalid);            total_arr.splice(t, 1);            this.total = total_arr;            console.log(del_arr);            $.ajax({              type: "POST",              contentType: "application/json",              url:                "http://192.168.197.12:8080/platform/api/deleteShoppingCartGoods",              data: JSON.stringify(del_arr),              error: function(request) {                alert("Connection error");              },              success: function(res) {                if (res.stateCode == 200) {                  console.log("删除成功");                } else {                  console.log("删除失败");                }              }            });          } else {            console.log("选择需要删除的商品");          }        }      }    },    /**     * 去结算  shoppingCartCommoditySettlement 只是生成订单并未提交  跳转订单详情页面勾选地址 然后提交订单      */    GoBuy() {      console.log('点击结算生成订单')      var buy_arr = [];      var total = this.total;      for (var b = 0; b < total.length; b++) {        if (total[b].single_selected) {          buy_arr.push({            goods_id: total[b].goods_id,            goods_count: total[b].goods_count,            universalid: total[b].universalid,            dept_id: total[b].dept_id          });        }      }      var data = {        buyer_id: this.buyer_id,        goods: buy_arr      };      console.log(data);      // 判断是否勾选商品      if (buy_arr.length) {        $.ajax({          type: "POST",          contentType: "application/json",          url: "url数据地址",          data: JSON.stringify(data),          error: function(request) {            alert("Connection error");          },          success: function(res) {            if (res.stateCode == 200) {              console.log('生成订单成功返回数据',res)            } else {              console.log("生成订单失败");            }          }        });      } else {        console.log('选择商品进行结算')      }    },    /**     * 只有从详情页面跳转之后才会有返回上一级的箭头     * 同时才可以执行事件     * 返回上一级     */    back() {      window.history.go(-1);    }    // method结尾  }});复制代码

出现的问题

商品全选之后逐个修改数量为0，最后的总价为最后修改的商品的单价

点击全选 重新全部选中，总价为上一次修改单个商品的最后一个商品的单价

造成以上的原因

在输入框修改数量事件中

var single_total = 0;      for (var s = 0; s < select_arr.length; s++) {        if (select_arr[s].single_selected) {          single_total = single_total + select_arr[s].goods_price * select_arr[s].goods_count;          this.totalPrice = single_total;        }      }复制代码

 修改为

var single_total = 0;      for (var s = 0; s < select_arr.length; s++) {        if (select_arr[s].single_selected) {          single_total = single_total + select_arr[s].goods_price * select_arr[s].goods_count;        }      }      this.totalPrice = single_total;复制代码

解释

在计算总价的时候需要判断商品列表中的单个商品的选中状态，然后计算总价；

注意 如果将

this.totalPrice = single_total; 复制代码

写在循环内部，这行代码写在循环里面则修改最后一个商品的数量的时候虽然single_total 已经为0，但是this.totalPrice 仍然会记录上一次的this.totalPrice 所以会出现以上问题。

解决方法就是讲计算总价的

this.totalPrice = single_total; 

写在循环外部

for (var s = 0; s < select_arr.length; s++) {        if (select_arr[s].single_selected) {          single_total = single_total + select_arr[s].goods_price * select_arr[s].goods_count;        }      }      this.totalPrice = single_total;复制代码

以上的问题解决了。

注意

在勾选单个商品的时候需要记录商品状态，那么记录的状态的值需要在数据中 原本 存在，所以在请求数据的时候我直接写入这个状态了，在此说明记录一下，免得自己以后不知道是为什么。

在vue中的条件渲染的时候用到的键值必须是在数据中本来已经存在。