购物车分店铺，全选，店铺全选，计算，增加商品，APP购物车，类似淘宝购物车

不念不忘少年蓝@ 2022-05-26 13:39 262阅读 0赞

基于vue

<!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>vuejs-购物车</title>
    <style type="text/css">
    *{
      padding:0;
      margin: 0;
      box-sizing: border-box;
      font-size: 16px;
    }
    a {
      text-decoration: none;
      color: #333;
    }
    .clearfix:after {
      content: ".";
      visibility: hidden;
      display: block;
      height: .1px;
      font-size: .1em;
      line-height: 0;
      clear: both;
    }
    .quantity-selector {
      margin: 0 auto;
      width: 8.571rem;
      line-height: 30px;
      border: 1px solid #d1d6e4;
      border-radius: 3px;
    }
    .quantity-selector .reduce, 
    .quantity-selector .add {
      float: left;
      width: 33.33%;
      border-right: 1px solid #d1d6e4;
      text-align: center;
      cursor: pointer;
    }
    .quantity-selector .number {
      float: left;
      width: 33.33%;
      height: 30px;
      border: none;
      padding-left: 10px;
      text-align: center;
    }
    .quantity-selector .add {
      border-left: 1px solid #d1d6e4;
      border-right: none;
    }
    .quantity-selector .disable {
      color: #d2d2d2;
      cursor: default;
    }
     
    label {
      cursor: pointer;
    }
     
    .choose-all {
      margin-left: 20px;
    }
     
    /*店铺开始*/
    .store-item {
      width: 600px;
      margin: 30px auto;
    }
    .store-item th {
      height: 40px;
      background: #d2d2d2;
      -webkit-text-stroke: 1px #ff7500;
      font-size: 18px;
    }
    .store-item td {
      height: 60px;
      text-align: center;
    }
    .cal-store-box {
      text-align: right;
    }
    .store-footer {
      width: 600px;
      margin: 50px auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    /*店铺结束*/
    </style>
    </head>
    <body>
    <div class="store-item" v-for="(index1, item) in goodsObj"> 
      <p>
        <span v-html="item.name"></span>
        <label class="choose-all">
          <input type="checkbox" name="all" v-on:click="chooseShopGoods(index1)" v-model="item.checked" />
          <span>全选</span>
        </label>
      </p>
      <table class="store-item">
        <col width="10%"></col>
        <col width="15%"></col>
        <col width="15%"></col>
        <col width="10%"></col>
        <col width="40%"></col>
        <col width="10%"></col>
        <thead class="thead">
          <tr>
            <th>选择</th>
            <th>商品</th>
            <th>单价</th>
            <th>运费</th>
            <th>数量</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="(index, data) in item.list">
            <td>
              <input type="checkbox" name="all" v-model="data.checked" v-on:click="choose(index1, index)" />
            </td>
            <td>
              <p><span v-html="data.name"></span></p>
            </td>
            <td v-html="(data.price).toFixed(2)"></td>
            <td v-html="(data.fare).toFixed(2)"></td>
            <td>
              <div class="quantity-selector clearfix">
                <span class="reduce" v-on:click="numChange(index1, $index, -1)" v-bind:class="{ 'disable' : data.num==1 }">－</span>
                <input type="number" v-bind:value="data.num" class="number" v-bind:data-realStock="data.realStock" v-on:keyUp="numEntry(index1, $index)" v-on:keyDown="numEntry(index1, $index)" v-model="data.num"/>
                <span class="add" v-on:click="numChange(index1, $index, 1)" v-bind:class="{ 'disable' : data.num==data.realStock }">＋</span>
              </div>
            </td>
            <td>
              <a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" v-on:click="delGoods(index1, index)">删除</a>
            </td>
          </tr>
        </tbody>
      </table>
      <div class="cal-store-box">
        <p>店铺总运费: <span v-html="calEveryFare(index1)"></span></p>
        <p>店铺商品总金额: <span v-html="calEveryStore(index1)"></span></p>
      </div>
    </div>
     
    <div class="store-footer">
      <label>
        <input type="checkbox" v-on:click="chooseAllGoods($event)" v-model="allChecked" />
        <span>全选</span>
      </label>
      <div class="cal-box">
        <p>商品总运费:<span v-html="totalFare.toFixed(2)"></span></p>
        <p>商品总金额:<span v-html="totalMoney.toFixed(2)"></span></p>
      </div>
    </div>
     
    <script src="http://cdn.bootcss.com/vue/1.0.7/vue.js"></script>
    <script>
    var goodsObj = [
      {
        name : '大胖的店',
        checked : false,
        list : [
          {
            name : '麻辣二胖',
            price : 23.00,
            realStock : 10,
            fare : 1.5,
            num : 1,
            checked : false,
          },
     
          {
            name : '香辣二胖',
            price : 21.00,
            realStock : 2,
            fare : 1.5,
            num : 2,
            checked : false,
          },
     
          {
            name : '红烧二胖',
            price : 88.00,
            realStock : 8,
            fare : 1.5,
            num : 4,
            checked : false,
          }
        ]
      },
     
      {
        name : '二胖的店',
        checked : false,
        list : [
          {
            name : '漂亮的裙子',
            price : 166.00,
            realStock : 10,
            fare : 2,
            num : 1,
            checked : false,
          },
     
          {
            name : '漂亮的短袖',
            price : 188.00,
            realStock : 2,
            fare : 1.5,
            num : 2,
            checked : false,
          },
     
          {
            name : '漂亮的鞋子',
            price : 299.00,
            realStock : 1,
            fare : 3,
            num : 1,
            checked : false,
          }
        ]
      },
     
      {
        name : '胖胖的店',
        checked : false,
        list : [
          {
            name : '福满多',
            price : 3.00,
            realStock : 10,
            fare : .5,
            num : 10,
            checked : false,
          },
     
          {
            name : '精品卫龙',
            price : 1.50,
            realStock : 2,
            fare : 2,
            num : 2,
            checked : false,
          },
     
          {
            name : '周长江',
            price : 2.50,
            realStock : 3,
            fare : 5,
            num : 2,
            checked : false,
          }
        ]
      },
    ];
    var vue = new Vue({
      el : 'body',
      data : {
        goodsObj : goodsObj,
        totalMoney : 0,
        totalFare : 0,
        allChecked : false
      },
      ready : function() {},
      methods : {
     
        // 全部商品全选
        chooseAllGoods : function() {
          var flag = true;
          if ( this.allChecked ) {
            flag = false;
          }
          for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
            this.goodsObj[i]['checked'] = flag;
            var list = this.goodsObj[i]['list'];
            for ( var k = 0, len1 = list.length; k < len1; k++ ) {
              list[k]['checked'] = flag;
            }
          }
          this.allChecked = !this.allChecked;
          this.calTotalMoney();
          this.calTotalFare();
        },
     
        // 每个店铺全选
        chooseShopGoods : function( index) {
          var list = this.goodsObj[index]['list'],
            len = list.length;
          if ( this.goodsObj[index]['checked'] ) {
            for (var i = 0; i < len; i++ ) {
              list[i]['checked'] = false;
            }
          } else {
            for (var i = 0; i < len; i++ ) {
              list[i]['checked'] = true;
            }
          }
          this.goodsObj[index]['checked'] = !this.goodsObj[index]['checked'];
     
          // 判断是否选择所有商品的全选
          this.isChooseAll();
     
          this.cal(index);
        },
     
        // 单个选择
        choose : function( index1, index) {
          var list = this.goodsObj[index1]['list'],
            len = list.length;
          if ( list[index]['checked'] ) {
            this.goodsObj[index1]['checked'] = false;
            this.allChecked = false;
            list[index]['checked'] = !list[index]['checked'];
          } else {
            list[index]['checked'] = !list[index]['checked'];
     
            // 判断是否选择当前店铺的全选
            var flag = true;
            for (var i = 0; i < len; i++ ) {
              if ( list[i]['checked'] == false ) {
                flag = false;
                break;
              }
            }
            flag == true ? this.goodsObj[index1]['checked'] = true : this.goodsObj[index1]['checked'] = false;
          }
     
          // 判断是否选择所有商品的全选
          this.isChooseAll();
     
          this.cal(index);
        },
     
        // 判断是否选择所有商品的全选
        isChooseAll : function() {
          var flag1 = true;
          for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
            if ( this.goodsObj[i]['checked'] == false ) {
              flag1 = false;
              break;
            }
          }
          flag1 == true ? this.allChecked = true : this.allChecked = false;
        },
     
        // 商品数量控制
        numChange : function(index1, index, numChange) {
          var goods = this.goodsObj[index1]['list'][index],
            oThis = this;
          if ( numChange == 1 ) {
            goods.num++;
          } else if ( numChange == -1 ) {
            goods.num--;
          }
     
          if ( goods.num <= 1 ) {
            goods.num = 1;
          } 
     
          if ( goods.num >= goods.realStock ) {
            goods.num = goods.realStock;
          }
     
          this.cal(index);
        },
     
        // 用户填写容错处理
        numEntry : function(index1, index) {
          var goods = this.goodsObj[index1]['list'][index];
          if ( goods.num <=1 ) {
            goods.num = 1;
          }
     
          if ( goods.num > goods.realStock ) {
            goods.num = goods.realStock;
          }
          this.cal(index);
        },
     
        // 计算每个店铺的商品总额
        calEveryStore : function(index) {
          var everyStoreMoney = 0,
            list = this.goodsObj[index]['list'];
          list.forEach(function(item, index, arr) {
            if ( list[index]['checked'] ) { 
              everyStoreMoney += parseFloat(item.price) * parseFloat(item.num);
            }
          });
          return everyStoreMoney.toFixed(2);
        },
     
        // 计算每个店铺的运费总额
        calEveryFare : function(index) {
          var everyStoreFare = 0,
            list = this.goodsObj[index]['list'];
          list.forEach(function(item, index, arr) {
            if ( list[index]['checked'] ) { 
              everyStoreFare += parseFloat(item.fare) * parseFloat(item.num);
            }
          });
          return everyStoreFare.toFixed(2);
        },
     
        // 计算商品总金额
        calTotalMoney : function () {
          var oThis = this;
          this.totalMoney = 0;
          for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
            var list = this.goodsObj[i]['list'];
            list.forEach(function(item, index, arr) {
              if ( list[index]['checked'] ) {
                oThis.totalMoney += parseFloat(item.price) * parseFloat(item.num);
              }
            });
          }
        },
     
        // 计算商品总运费
        calTotalFare : function () {
          var oThis = this;
          this.totalFare = 0;
          for ( var i = 0, len = this.goodsObj.length; i < len; i++ ) {
            var list = this.goodsObj[i]['list'];
            list.forEach(function(item, index, arr) {
              if ( list[index]['checked'] ) {
                oThis.totalFare += parseFloat(item.fare) * parseFloat(item.num);
              }
            });
          }
        },
     
        // 计算方法集合
        cal : function(index) {
          this.calEveryStore(index);
          this.calEveryFare(index);
          this.calTotalMoney();
          this.calTotalFare();
        },
     
        // 删除操作
        delGoods : function(index1, index) {
          console.log(index1);
          console.log(index);
          this.goodsObj[index1]['list'].splice(index, 1);
          this.cal(index);
        }
         
      }
    })
    </script>
    </body>
    </html>

app版购物车与上面基本类似布局不同

<!DOCTYPE html>
    <html>
    
    	<head>
    		<meta charset="utf-8">
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
    		<title>购物车</title>
    		<link href="css/mui.css" rel="stylesheet" />
    		<link rel="stylesheet" href="css/iconfont.css" />
    		<link rel="stylesheet" type="text/css" href="css/style.css" />
    		<link rel="stylesheet" href="css/shopping_cart.css" />
    		<script src="js/getRem.js"></script>
    	</head>
    
    	<body class="cart_body">
    		<header class="mui-bar mui-bar-nav header_bar">
    			<h1 class="mui-title">购物车<span @click="edit()" class="mui-pull-right edit" v-text="editmes"></span></h1>
    		</header>
    		
    		<div class="mui-scroll-wrapper cart" id="cart_app">
    		<div class="mui-scroll">
    			
    			
    				<div style="width: 100%;" v-if="cart_pic_null">
    					<img src="images/cartnull.png" style="width: 100%;"/>
    				</div>
    				
    				<ul v-for="(item,index0) in allList">
    					
    					<li>
    						<div class="mui-input-row mui-checkbox mui-left choose_box" >
    							<label v-on:tap="checked_tot(index0)">
    							<input type="checkbox" v-model="item.checked" name="all"   />
    							</label>
    						</div>
    						<div class="tit_name">
    							{
       {item.supplier_name}}
    						</div>
    					</li>
    					
    					<li v-for="(cart,index1) in item.lCarts">
    						<div class="mui-input-row mui-checkbox mui-left choose_box" >
    							<label>
    							<input type="checkbox" v-model="cart.checked" name="checkbox"  v-on:tap="checked_one(index0,index1)" />
    							</label>
    						</div>
    						<div class="product_img">
    							
    							<img src="images/guteyi_tire.jpg" alt="" />
    						</div>
    						<div class="product_detail">
    							<p><span class="certification">认证</span><span> {
       {cart.name}} </span> {
       {cart.spec_name}}</p>
    							<p>OEM：<span>{
       {cart.oem}} </span><span style="margin-left: 0.05rem;"> {
       {cart.epc_name}}</span></p>
    							<p>品级：
    								<span v-if="cart.spec_id == 1 || cart.spec_id == 2">4S价</span>
    								<span v-if="cart.spec_id == 3 || cart.spec_id == 4">配套</span>
    								<span v-if="cart.spec_id == 5 || cart.spec_id == 6">金虎</span>
    								<span v-if="cart.spec_id == 7 || cart.spec_id == 8">银虎</span>
    								<span v-if="cart.spec_id == 9 || cart.spec_id == 10">其他</span>
    								<span v-if="cart.spec_id == 11 || cart.spec_id == 12">拆车</span>
    							</p>
    							<p>单价：<span style="color:#FF3333;">￥{
       {cart.price}} </span></p>
    							<div>小计：
    								<strong class="priceStyle">￥{
       {(cart.num*cart.price).toFixed(2)}}</strong>
    								<div class="input-numbox mui-pull-right" >
    									<button class="input_minus"  v-on:click="reduction(index0,index1,cart.cart_id)">-</button>
    									<input type="number" :id="'numbox_'+index0+index1"  class="input_numbox" :value="cart.num" v-on:change="upnum(index0,index1,cart.cart_id)" />
    									<button class="input_plus"  v-on:click="add(index0,index1,cart.cart_id)">+</button>
    								</div>
    							</div>
    							<p>配送方式：</p>
    							<p>预计到达时间：</p>
    						</div>
    					</li>
    				</ul>
    				<div style="height: 1.6rem;"></div>
    			
    		</div>
    		<div class="settlement">
    			<div class="mui-input-row mui-checkbox mui-left choose_all" v-on:tap="chooseAll">
    				<label>全选
    				<input type="checkbox" v-model="allChecked"  />
    				</label>
    			</div>
    			<div class="total">合计：<span>￥{
       {price_all}}</span></div>
    			<div>
    				<button class="mui-pull-right checkout">去结算</button>
    				<button style="display: none;" class="mui-pull-right del">删除</button>
    			</div>
    		</div>
    		
    		</div>
    		
    		
    		<nav class="mui-bar mui-bar-tab nav_bottom">
    			<a class="mui-tab-item1 goIndex">
    				<span class="mui-icon iconfont icon-main"></span>
    				<span class="mui-tab-label">首页</span>
    			</a>
    			
    			<a class="mui-tab-item1 defaultTab">
    				<span class="mui-icon iconfont icon-cart"></span>
    				<span class="mui-tab-label">购物车</span>
    			</a>
    			<a class="mui-tab-item1 goPersonCenter">
    				<span class="mui-icon iconfont icon-me"></span>
    				<span class="mui-tab-label">我的</span>
    			</a>
    		</nav>
    		
    		
    		<script src="js/config.js"></script>
    		<script src="js/jquery-3.1.1.js"></script>
    		<script src="js/vue.js"></script>
    		<script src="js/mui.js"></script>
    		<script src="js/jquery.base64.js"></script>
    		
    		<script src="js/navBtm.js"></script>
    		<script src="js/shop_car.js"></script>
    	</body>
    
    </html>

mui.init();
    
    mui.plusReady(function() {
    
    mui('.mui-scroll-wrapper').scroll({
    
    deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006
    
    });
    
    cart_app.getCartList();
    
    });
    
    var cart_app = new Vue({
    
    el: "#cart_app",
    
    data: {
    
    cart_pic_null: false, //购物车非空判断
    
    price_all: '0.00',
    
    allChecked: false,
    
    allList: '',
    
    },
    
    methods: {
    
    //获取购物车里的全部商品
    
    getCartList: function() {
    
    var that = this;
    
    $.ajax({
    
    type: "get",
    
    url: "http://192.168.1.113:8089/auto-api/v1/api/cart/listCarts?apikey=eyJhbGciOiJIUzUxMiJ9.eyJtZW1iZXJfaWQiOiIxMDM2NSIsIm1lbWJlcl90eXBlIjoxLCJzdWIiOiIxNTIzODY4MjYyNSIsImNvbXBhbnlfbHYiOiJubyIsInJvbGVfaWQiOjExLCJ0b2tlbl9uYW1lIjoiYXV0by1hcGkiLCJleHAiOjE1Mjc5MDE1OTcsImlhdCI6MTUyNTMwOTU5NywianRpIjoianRpIn0.bUPYM2uohvR9M-5XujAnWtm5ykSYOMMl6DOsfp_PCsTDL0mSJ12hgKXD1CuJd3qOdMFCRujg6Bhhn-URpXgzcw",
    
    async: true,
    
    success: function(data) {
    
    if(data.data != '') {
    
    for(var i = 0; i < data.data.length; i++) {
    
    data.data[i].checked = false;
    
    for(var j = 0; j < data.data[i].lCarts.length; j++) {
    
    data.data[i].lCarts[j].checked = false;
    
    }
    
    }
    
    that.allList = data.data;
    
    that.cart_pic_null = false;
    
    } else {
    
    that.cart_pic_null = true;
    
    }
    
    }.bind(this)
    
    });
    
    },
    
    // 全部商品全选
    
    chooseAll: function() {
    
    var flag = true;
    
    if(this.allChecked) {
    
    flag = false;
    
    }
    
    for(var i = 0, len = this.allList.length; i < len; i++) {
    
    this.allList[i].checked = flag;
    
    var list = this.allList[i].lCarts;
    
    for(var k = 0, len1 = list.length; k < len1; k++) {
    
    list[k].checked = flag;
    
    }
    
    }
    
    this.allChecked = !this.allChecked;
    
    this.calTotalMoney(); //计算总金额
    
    },
    
    // 每个店铺全选
    
    checked_tot: function(index0) {
    
    var list = this.allList[index0].lCarts,
    
    len = list.length;
    
    if(this.allList[index0].checked) {
    
    for(var i = 0; i < len; i++) {
    
    list[i].checked = false;
    
    }
    
    } else {
    
    for(var i = 0; i < len; i++) {
    
    list[i].checked = true;
    
    }
    
    }
    
    this.allList[index0].checked = !this.allList[index0].checked;
    
    // 判断是否选择所有商品的全选
    
    this.isChooseAll();
    
    this.calTotalMoney(); //计算总金额
    
    },
    
    // 判断是否选择所有商品的全选
    
    isChooseAll: function() {
    
    var flag1 = true;
    
    for(var i = 0, len = this.allList.length; i < len; i++) {
    
    if(this.allList[i].checked == false) {
    
    flag1 = false;
    
    break;
    
    }
    
    }
    
    flag1 == true ? this.allChecked = true : this.allChecked = false;
    
    this.calTotalMoney(); //计算总金额
    
    },
    
    // 单个选择
    
    checked_one: function(index0, index1) {
    
    var list = this.allList[index0].lCarts,
    
    len = list.length;
    
    if(list[index1].checked) {
    
    this.allList[index0].checked = false;
    
    this.allChecked = false;
    
    list[index1].checked = !list[index1].checked;
    
    } else {
    
    list[index1].checked = !list[index1].checked;
    
    // 判断是否选择当前店铺的全选
    
    var flag = true;
    
    for(var i = 0; i < len; i++) {
    
    if(list[i].checked == false) {
    
    flag = false;
    
    break;
    
    }
    
    }
    
    flag == true ? this.allList[index0].checked = true : this.allList[index0].checked = false;
    
    }
    
    // 判断是否选择所有商品的全选
    
    this.isChooseAll();
    
    this.calTotalMoney(); //计算总金额
    
    },
    
    // 计算商品总金额
    
    calTotalMoney: function() {
    
    var oThis = this;
    
    this.price_all = 0;
    
    for(var i = 0, len = this.allList.length; i < len; i++) {
    
    var list = this.allList[i].lCarts;
    
    list.forEach(function(cart, index, arr) {
    
    if(list[index].checked) {
    
    oThis.price_all += parseFloat(cart.price) * parseFloat(cart.num);
    
    }
    
    });
    
    }
    
    this.price_all = Number(this.price_all).toFixed(2);
    
    },
    
    //减少商品
    
    reduction: function(index0, index1, cart_id) {
    
    var that = this;
    
    var num_box = $("#numbox_" + index0 + index1).val();
    
    num_box--;
    
    if(num_box <= 1) {
    
    num_box = 1;
    
    }
    
    this.allList[index0].lCarts[index1].num = num_box;
    
    $.ajax({
    
    type: "post",
    
    url: "http://192.168.1.113:8089/auto-api/v1/api/cart/updateProductNum",
    
    async: true,
    
    data: {
    
    cart_id: cart_id,
    
    num: num_box,
    
    apikey: "eyJhbGciOiJIUzUxMiJ9.eyJtZW1iZXJfaWQiOiIxMDY4OSIsIm1lbWJlcl90eXBlIjoxLCJzdWIiOiIxNTIzODY4MjYyNSIsImNvbXBhbnlfbHYiOiJsdjIiLCJyb2xlX2lkIjoxMSwidG9rZW5fbmFtZSI6ImF1dG8tYXBpIiwiZXhwIjoxNTI3ODEzNjIxLCJpYXQiOjE1MjUyMjE2MjEsImp0aSI6Imp0aSJ9.0ErTUzNkfUVxMNOCOsfrroQfSFtn7KFCqKQxjdPQQ5G1O990DwsHdwRHzCqLRaAIRzz9p0jveWX4xz32M-f6hg"
    
    },
    
    success: function(data) {
    
    if(data.code == 200) {
    
    that.allList[index0].lCarts[index1].num = num_box;
    
    } else {
    
    mui.alert(data.message);
    
    }
    
    }.bind(this)
    
    });
    
    this.calTotalMoney(); //计算总金额
    
    },
    
    //增加数量
    
    add: function(index0, index1, cart_id) {
    
    var that = this;
    
    var num_box = $("#numbox_" + index0 + index1).val();
    
    num_box++;
    
    this.allList[index0].lCarts[index1].num = num_box;
    
    $.ajax({
    
    type: "post",
    
    url: "http://192.168.1.113:8089/auto-api/v1/api/cart/updateProductNum",
    
    async: true,
    
    data: {
    
    cart_id: cart_id,
    
    num: num_box,
    
    apikey: "eyJhbGciOiJIUzUxMiJ9.eyJtZW1iZXJfaWQiOiIxMDY4OSIsIm1lbWJlcl90eXBlIjoxLCJzdWIiOiIxNTIzODY4MjYyNSIsImNvbXBhbnlfbHYiOiJsdjIiLCJyb2xlX2lkIjoxMSwidG9rZW5fbmFtZSI6ImF1dG8tYXBpIiwiZXhwIjoxNTI3ODEzNjIxLCJpYXQiOjE1MjUyMjE2MjEsImp0aSI6Imp0aSJ9.0ErTUzNkfUVxMNOCOsfrroQfSFtn7KFCqKQxjdPQQ5G1O990DwsHdwRHzCqLRaAIRzz9p0jveWX4xz32M-f6hg"
    
    },
    
    success: function(data) {
    
    if(data.code == 200) {
    
    that.allList[index0].lCarts[index1].num = num_box;
    
    } else {
    
    mui.alert(data.message);
    
    }
    
    }.bind(this)
    
    });
    
    this.calTotalMoney(); //计算总金额
    
    },
    
    upnum: function(index0, index1, cart_id) {
    
    var that = this;
    
    var num_box = $("#numbox_" + index0 + index1).val();
    
    if(num_box <= 1 || num_box == '') {
    
    num_box = 1;
    
    $("#numbox_" + index0 + index1).val(num_box);
    
    }
    
    this.allList[index0].lCarts[index1].num = num_box;
    
    $.ajax({
    
    type: "post",
    
    url: "http://192.168.1.113:8089/auto-api/v1/api/cart/updateProductNum",
    
    async: true,
    
    data: {
    
    cart_id: cart_id,
    
    num: num_box,
    
    apikey: "eyJhbGciOiJIUzUxMiJ9.eyJtZW1iZXJfaWQiOiIxMDY4OSIsIm1lbWJlcl90eXBlIjoxLCJzdWIiOiIxNTIzODY4MjYyNSIsImNvbXBhbnlfbHYiOiJsdjIiLCJyb2xlX2lkIjoxMSwidG9rZW5fbmFtZSI6ImF1dG8tYXBpIiwiZXhwIjoxNTI3ODEzNjIxLCJpYXQiOjE1MjUyMjE2MjEsImp0aSI6Imp0aSJ9.0ErTUzNkfUVxMNOCOsfrroQfSFtn7KFCqKQxjdPQQ5G1O990DwsHdwRHzCqLRaAIRzz9p0jveWX4xz32M-f6hg"
    
    },
    
    success: function(data) {
    
    if(data.code == 200) {
    
    that.allList[index0].lCarts[index1].num = num_box;
    
    } else {
    
    mui.alert(data.message);
    
    }
    
    }.bind(this)
    
    });
    
    this.calTotalMoney(); //计算总金额
    
    },
    
    },
    
    })
    
    new Vue({
    
    el: '.header_bar',
    
    data: {
    
    editmes: '编辑'
    
    },
    
    methods: {
    
    edit: function() {
    
    if(this.editmes == '编辑') {
    
    this.editmes = '完成';
    
    $('.del').show();
    
    $('.checkout').hide();
    
    } else if(this.editmes == '完成') {
    
    this.editmes = '编辑';
    
    $('.del').hide();
    
    $('.checkout').show();
    
    }
    
    }
    
    }
    
    })

爬坑之路无限乐趣，填坑