Слияние кода завершено, страница обновится автоматически
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
<title>皮克桃商城--购物车页面</title>
<link rel="stylesheet" type="text/css" href="css/webbase.css"/>
<link rel="stylesheet" type="text/css" href="css/pages-cart.css"/>
</head>
<body>
<div id="cartApp">
<div class="top">
<shortcut/>
</div>
<div class="cart py-container">
<!--logoArea-->
<div class="logoArea">
<div class="fl logo"><span class="title">购物车</span></div>
</div>
<!--All goods-->
<div class="allgoods">
<h4>全部商品<span>11</span></h4>
<div class="cart-main">
<div class="yui3-g cart-th">
<div class="yui3-u-1-4"><input type="checkbox" v-model="check" @click="checkAll()"/> 全部</div>
<div class="yui3-u-1-4">商品</div>
<div class="yui3-u-1-8">单价（元）</div>
<div class="yui3-u-1-8">数量</div>
<div class="yui3-u-1-8">小计（元）</div>
<div class="yui3-u-1-8">操作</div>
</div>
<div class="cart-item-list">
<div class="cart-body">
<div class="cart-list">
<ul class="goods-list yui3-g" v-for="(cart,index) in carts" :key="index">
<li class="yui3-u-1-24">
<input type="checkbox" v-model="selected" name="" :value="cart"/>
</li>
<li class="yui3-u-11-24">
<div class="good-item">
<div class="item-img"><img :src="cart.image" width="80px" height="80px"/></div>
<div class="item-msg">
<span style="line-height:70px ">
{{cart.title}}
</span>
<span v-for="(val, key, index) in JSON.parse(cart.ownSpec)">{{val + " "}}</span>
</div>
</div>
</li>
<li class="yui3-u-1-8"><span style="line-height:70px " class="price">{{ly.formatPrice(cart.price)}}</span>
</li>
<li class="yui3-u-1-8" style="padding-top: 20px">
<a href="javascript:void(0)" class="increment mins" @click="decr(cart)">-</a>
<input autocomplete="off" type="text" v-model="cart.num" minnum="1" class="itxt"/>
<a href="javascript:void(0)" class="increment plus" @click="incr(cart)">+</a>
</li>
<li class="yui3-u-1-8"><span style="line-height:70px " class="sum">{{ly.formatPrice(cart.price * cart.num)}}</span>
</li>
<li class="yui3-u-1-8">
<a href="javascript:void(0);" @click="deleteCart(index)">删除</a><br/>
<a href="#none">移到我的关注</a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="cart-tool">
<div class="select-all">
<input type="checkbox" name="" id="" value=""/>
<span>全选</span>
</div>
<div class="option">
<a href="#none">删除选中的商品</a>
<a href="#none">移到我的关注</a>
<a href="#none">清除下柜商品</a>
</div>
<div class="toolbar">
<div class="chosed">已选择<span>{{total}}</span>件商品</div>
<div class="sumprice">
<span><em>总价（不含运费） ：</em><i class="summoney">{{ly.formatPrice(totalPrice)}}</i></span>
<span><em>已节省：</em><i>-¥20.00</i></span>
</div>
<div class="sumbtn">
<a class="sum-btn" href="javascript:void(0);" @click="toOrder()" target="_blank">结算</a>
</div>
</div>
</div>
<div class="clearfix"></div>
<div class="deled">
<span>已删除商品，您可以重新购买或加关注：</span>
<div class="cart-list del">
<ul class="goods-list yui3-g">
<li class="yui3-u-1-2">
<div class="good-item">
<div class="item-msg">Apple Macbook Air 13.3英寸笔记本电脑 银色（Corei5）处理器/8GB内存</div>
</div>
</li>
<li class="yui3-u-1-6"><span class="price">8848.00</span></li>
<li class="yui3-u-1-6">
<span class="number">1</span>
</li>
<li class="yui3-u-1-8">
<a href="#none">重新购买</a>
<a href="#none">移到我的关注</a>
</li>
</ul>
</div>
</div>
<div class="liked">
<ul class="sui-nav nav-tabs">
<li class="active">
<a href="#index" data-toggle="tab">猜你喜欢</a>
</li>
<li>
<a href="#profile" data-toggle="tab">特惠换购</a>
</li>
</ul>
<div class="clearfix"></div>
<div class="tab-content">
<div id="index" class="tab-pane active">
<div id="myCarousel" data-ride="carousel" data-interval="4000" class="sui-carousel slide">
<div class="carousel-inner">
<div class="active item">
<ul>
<li>
<img src="img/like1.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like2.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like3.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like4.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
</ul>
</div>
<div class="item">
<ul>
<li>
<img src="img/like1.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like2.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like3.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
<li>
<img src="img/like4.png"/>
<div class="intro">
<i>Apple苹果iPhone 6s (A1699)</i>
</div>
<div class="money">
<span>$29.00</span>
</div>
<div class="incar">
<a href="#" class="sui-btn btn-bordered btn-xlarge btn-default"><i
class="car"></i><span class="cartxt">加入购物车</span></a>
</div>
</li>
</ul>
</div>
</div>
<a href="#myCarousel" data-slide="prev" class="carousel-control left">‹</a>
<a href="#myCarousel" data-slide="next" class="carousel-control right">›</a>
</div>
</div>
<div id="profile" class="tab-pane">
<p>特惠选购</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="./js/vue/vue.js"></script>
<script src="js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script type="text/javascript">
var cartVm = new Vue({
el: "#cartApp",
data: {
ly,
carts: [],
selected: [],
check: true
},
created() {
ly.verify().then(res => {
ly.http.get("/cart").then(res => {
const localCarts = ly.store.get("PKT_CART");
if (localCarts) {
this.resCarts = res.data;
const map = {};
localCarts.forEach(localCart => {
map[localCart.skuId] = localCart;
});
this.resCarts.forEach(cart => {
if (map[cart.skuId]) {
cart.num += map[cart.skuId].num;
this.carts.push(cart);
ly.http.put("/cart", cart);
} else {
this.carts.push(cart);
}
ly.http.post("/cart", {num: cart.num, skuId: cart.skuId});
});
} else {
this.carts = res.data;
}
this.selected = this.carts;
ly.store.del("PKT_CART");
})
}).catch(() => {
this.carts = ly.store.get("PKT_CART");
this.selected = this.carts;
});
},
computed: {
total() {
return this.selected.reduce((c1, c2) => c1 + c2.num, 0);
},
totalPrice() {
return this.selected.reduce((c1, c2) => c1 + c2.num * c2.price, 0);
}
},
methods: {
toOrder() {
ly.verify().then(res => {
ly.store.set("PKT_SELECTED", this.selected);
window.location = "http://www.piketao.com/getOrderInfo.html";
}).catch(() => {
window.location = "http://www.piketao.com/login.html?returnUrl=http://www.piketao.com/cart.html"
});
},
incr(cart) {
cart.num++;
ly.verify().then(res => {
ly.http.put("/cart", {num: cart.num, skuId: cart.skuId});
}).catch(() => {
ly.store.set("PKT_CART", this.carts);
});
},
decr(cart) {
if (cart.num > 1) {
cart.num--;
}
ly.verify().then(res => {
ly.http.put("/cart", {num: cart.num, skuId: cart.skuId});
}).catch(() => {
ly.store.set("PKT_CART", this.carts);
});
},
deleteCart(index) {
ly.verify().then(res => {
ly.http.delete("/cart?" + "skuId=" + this.carts[index].skuId).then(res => {
this.carts.split(index, 1);
});
}).catch(() => {
this.carts.splice(index, 1);
ly.store.set("PKT_CART", this.carts);
});
window.location = "http://www.piketao.com/cart.html";
},
checkAll() {
if (!this.check) {
this.selected = this.carts;
} else {
this.selected = [];
}
}
},
components: {
shortcut: () => import("/js/pages/shortcut.js")
}
})
</script>
<!-- 底部栏位 -->
<!--页面底部，由js动态加载-->
<script type="text/javascript" src="js/plugins/jquery/jquery.min.js"></script>
<div class="clearfix footer"></div>
<script type="text/javascript">$(".footer").load("foot.html");</script>
<!--页面底部END-->
<script type="text/javascript" src="js/plugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/plugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
</body>
</html>
Вы можете оставить комментарий после Вход в систему
Неприемлемый контент может быть отображен здесь и не будет показан на странице. Вы можете проверить и изменить его с помощью соответствующей функции редактирования.
Если вы подтверждаете, что содержание не содержит непристойной лексики/перенаправления на рекламу/насилия/вульгарной порнографии/нарушений/пиратства/ложного/незначительного или незаконного контента, связанного с национальными законами и предписаниями, вы можете нажать «Отправить» для подачи апелляции, и мы обработаем ее как можно скорее.
Опубликовать ( 0 )