基于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>
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();
}
}
}
})
爬坑之路无限乐趣，填坑
扫一扫
6018
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
