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

基于vue<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>vuejs-购物车</title><

随便起的名字也被占用

3753人浏览 · 2018-05-03 14:23:29

随便起的名字也被占用 · 2018-05-03 14:23:29 发布

基于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 v-if="cart.picsArr && cart.picsArr.length>1" :src="'http://oss.zzbhxc.com/'+cart.picsArr[1]" />
							<img v-if="cart.picsArr && cart.picsArr.length<=1" :src="'http://oss.zzbhxc.com/'+cart.picsArr[0]" />-->
							<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 goAskPrice">
				<span class="mui-icon iconfont icon-inquiry-sheet"></span>
				<span class="mui-tab-label">询价单</span>
			</a>
			<a class="mui-tab-item1 goMessage">
				<span class="mui-icon iconfont icon-goods"></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/header.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();

}

}

}

})

爬坑之路无限乐趣，填坑

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^