基于vue

 
全选
选择
商品
单价
运费
数量
操作
－＋
删除
店铺总运费: 
店铺商品总金额: 
全选
商品总运费:
商品总金额:

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

购物车
{{item.supplier_name}}
认证 {{cart.name}}  {{cart.spec_name}}
OEM：{{cart.oem}}  {{cart.epc_name}}
品级：4S价配套金虎银虎其他拆车
单价：￥{{cart.price}} 
小计：￥{{(cart.num*cart.price).toFixed(2)}}-+
配送方式：
预计到达时间：
全选合计：￥{{price_all}}去结算删除

JS

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();}}}})

爬坑之路无限乐趣，填坑

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！