311 lines
13 KiB
HTML
311 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head lang="en">
|
|
<meta charset="UTF-8">
|
|
<title>购物车</title>
|
|
<link rel="stylesheet" href="../../css/swiper-bundle.min.css">
|
|
<link rel="stylesheet" type="text/css" href="../../css/logshoppingcar/login_cart.css"/>
|
|
<script src="../../js/swiper-bundle.min.js"></script>
|
|
<link rel="stylesheet" type="text/css" href="../../css/foot.min.css" />
|
|
<script src="../../js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
|
|
<script src="../../js/login_cart/login_cart.js" type="text/javascript" charset="utf-8"></script>
|
|
</head>
|
|
<style>
|
|
.foot-iframe {
|
|
margin-top: -30px;
|
|
color: rgb(255, 255, 255);
|
|
}
|
|
|
|
#gotoTop {
|
|
float: right;
|
|
position: relative;
|
|
right: 50px;
|
|
top: -50px;
|
|
}
|
|
</style>
|
|
|
|
<body>
|
|
<!-- 头部导航 -->
|
|
<iframe src="../../public/center-head.html" class="ty_herader" width="100%" height="285px" frameborder="0" scrolling="no"></iframe>
|
|
<div style="height: 30px;width: 100%;background: #f5f5f5;"></div>
|
|
|
|
<section>
|
|
<div class="whoil" style="padding: 0px 320px;">
|
|
<div class="whoil-1" style="background: #FFFFFF;">
|
|
<div class="all">全部商品(20)</div>
|
|
<!-- 选择 -->
|
|
<table border="0" cellspacing="0" style="border-collapse: separate;border-spacing: 0px 17px;margin-top: -17px;">
|
|
<thead>
|
|
<tr>
|
|
<th style="text-align: left;width: 110px;"><input type="checkbox" id="ckAll" onclick="checkAll()">全选</th>
|
|
<th style="text-align: left;width: 430px;">商品</th>
|
|
<th></th>
|
|
<th>单价</th>
|
|
<th style="width: 110px;">数量</th>
|
|
<th>小计</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="inline" valign="top">
|
|
<td style="width: 130px;">
|
|
<div style="display: flex;">
|
|
<input type="checkbox" name="ck" style="width: 15px;height: 15px;margin-right: 20px;" onclick="check()">
|
|
<img src="../../img/images/1-1.png" alt="图片丢失" title="购物车图片一" />
|
|
</div>
|
|
</td>
|
|
<td style="font-size: 15px;color: #525252;width: 430px;">
|
|
<div style="width: 430px;">竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画靠山书房壁画抽象艺术画 11时来运转8190</div>
|
|
</td>
|
|
<td style="font-size: 15px;color: #525252;"><span>x3</span></td>
|
|
<td style="font-size: 14px;font-weight: bold;color: #222222;">￥188.00</td>
|
|
<td>
|
|
<div style="display: flex;align-items: center;justify-content: center;">
|
|
<div style="width: 17px;height: 23px;background: #f0f0f0;border: 1px solid #e5e5e5;cursor: pointer;" class="reduce" onclick="reduceCount(this)">-</div>
|
|
<input style="width: 39px;height: 23px;display: inline-block;text-align: center;border: 1px solid #aaaaaa;" type="text" value="3" class="count-input">
|
|
<div style="width: 17px;height: 23px;background: #f0f0f0;border: 1px solid #e5e5e5;cursor: pointer;" class="add" onclick="addCount(this)">+</div>
|
|
</div>
|
|
</td>
|
|
<td style="font-size: 14px;font-weight: bold;color: #CB1919;">￥564.00</td>
|
|
<td>
|
|
<span class="delete" onclick="del(this)" style="font-size: 14px;color: #222222;">删除</span>
|
|
</td>
|
|
<tr class="inline" valign="top">
|
|
<td style="width: 130px;">
|
|
<div style="display: flex;">
|
|
<input type="checkbox" name="ck" style="width: 15px;height: 15px;margin-right: 20px;" onclick="check()">
|
|
<img src="../../img/images/1-1.png" alt="图片丢失" title="购物车图片一" />
|
|
</div>
|
|
</td>
|
|
<td style="font-size: 15px;color: #525252;width: 430px;">
|
|
<div style="width: 430px;">竹迪 客厅装饰画现代简约晶瓷画沙发背景墙挂画三联画餐厅墙画靠山书房壁画抽象艺术画 11时来运转8190</div>
|
|
</td>
|
|
<td style="font-size: 15px;color: #525252;"><span>x3</span></td>
|
|
<td style="font-size: 14px;font-weight: bold;color: #222222;">￥188.00</td>
|
|
<td>
|
|
<div style="display: flex;align-items: center;justify-content: center;">
|
|
<div style="width: 17px;height: 23px;background: #f0f0f0;border: 1px solid #e5e5e5;cursor: pointer;" class="reduce" onclick="reduceCount(this)">-</div>
|
|
<input style="width: 39px;height: 23px;display: inline-block;text-align: center;border: 1px solid #aaaaaa;" type="text" value="3" class="count-input">
|
|
<div style="width: 17px;height: 23px;background: #f0f0f0;border: 1px solid #e5e5e5;cursor: pointer;" class="add" onclick="addCount(this)">+</div>
|
|
</div>
|
|
</td>
|
|
<td style="font-size: 14px;font-weight: bold;color: #CB1919;">￥564.00</td>
|
|
<td>
|
|
<span class="delete" onclick="del(this)" style="font-size: 14px;color: #222222;">删除</span>
|
|
</td>
|
|
</tr>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div style="height: 50px;background: #f3f3f3;line-height: 50px;display: flex;justify-content: space-between;font-size: 14px;color: #333333;">
|
|
<div style="padding-left: 10px;">
|
|
<input type="checkbox" style="cursor: pointer;" id="ckAll"><span style="margin-left: 4px;cursor: pointer;">全选</span>
|
|
<span style="margin-left: 20px;cursor: pointer;">删除</span>
|
|
</div>
|
|
<div>
|
|
<span>合计：￥<span style="font-size: 20px;font-weight: bold;color: #CB1919;">0.00</span></span>
|
|
<span id="settlementt" class="settlement" style="height: 50px;background: #CB1919;color: #FFFFFF;display: inline-block;width: 130px;text-align: center;font-size: 18px;margin-left: 10px;cursor: pointer;">结算</span>
|
|
</div>
|
|
</div>
|
|
<!-- 轮播图 -->
|
|
<div class="swiper-container" style="padding-bottom: 50px;">
|
|
<div class="swiper-text">推荐商品</div>
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide"><img width="100%" alt="图片丢失" title="图片一" src="../../img/images/1.png">
|
|
<div class="font-20 m-sx16 clips1">艺术清酒--得寓(酒标作品)</div>
|
|
</div>
|
|
<div class="swiper-slide"><img width="100%" alt="图片丢失" title="图片二" src="../../img/images/2.png">
|
|
<div class="font-20 m-sx16 clips1">艺术清酒--得寓(酒标作品)</div>
|
|
</div>
|
|
<div class="swiper-slide"><img width="100%" alt="图片丢失" title="图片三" src="../../img/images/3.png">
|
|
<div class="font-20 m-sx16 clips1">艺术清酒--得寓(酒标作品)</div>
|
|
</div>
|
|
<div class="swiper-slide"><img width="100%" alt="图片丢失" title="图片四" src="../../img/images/4.png">
|
|
<div class="font-20 m-sx16 clips1">艺术清酒--得寓(酒标作品)</div>
|
|
</div>
|
|
<div class="swiper-slide"><img width="100%" alt="图片丢失" title="图片一" src="../../img/images/1.png">
|
|
<div class="font-20 m-sx16 clips1">艺术清酒--得寓(酒标作品)</div>
|
|
</div>
|
|
</div>
|
|
<!-- 分页器 -->
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
<script>
|
|
// 轮播
|
|
$(window).resize(function () {//监听窗口大小的改变
|
|
sixSwiper()
|
|
})
|
|
function sixSwiper() {
|
|
let showNum = 4
|
|
let spaceBetween = 25//图片间距
|
|
let windowWidth = $(window).width()
|
|
if (windowWidth * 1 <= 900) {
|
|
showNum = 2
|
|
spaceBetween = 10
|
|
} else if (windowWidth * 1 <= 1000) {
|
|
showNum = 3
|
|
spaceBetween = 10
|
|
} else if (windowWidth * 1 <= 1200) {
|
|
showNum = 3
|
|
} else if (windowWidth * 1 <= 1450) {
|
|
showNum = 4
|
|
spaceBetween = 10
|
|
}
|
|
let myswiper = new Swiper('.swiper-container', {
|
|
cssMode: false,//禁止鼠标滑动，切换
|
|
loop: true,
|
|
slidesPerView: showNum,//显示数量
|
|
spaceBetween: spaceBetween,//图片间距
|
|
autoplay: {
|
|
delay: 2000,
|
|
stopOnLastSlide: true,
|
|
disableOnInteraction: false,
|
|
},
|
|
// 分页器
|
|
pagination: {
|
|
el: '.swiper-pagination',
|
|
clickable: true,//点击跳转
|
|
},
|
|
grabCursor: true,//鼠标移入变手
|
|
});
|
|
// 鼠标移入轮播图范围，执行的函数
|
|
// myswiper.el.onmouseover = function () {
|
|
// myswiper.autoplay.stop();
|
|
// myswiper.navigation.$nextEl.removeClass('hide');
|
|
// myswiper.navigation.$prevEl.removeClass('hide');
|
|
// }
|
|
// // 鼠标移出轮播图范围，执行的函数
|
|
// myswiper.el.onmouseout = function () {
|
|
// myswiper.autoplay.start();
|
|
// myswiper.navigation.$nextEl.addClass('hide');
|
|
// myswiper.navigation.$prevEl.addClass('hide');
|
|
// }
|
|
}
|
|
sixSwiper()
|
|
//获取元素
|
|
var ckAll = document.getElementById('ckAll');
|
|
var cks = document.getElementsByName('ck');
|
|
var trs = document.getElementsByClassName('inline');
|
|
var allCount = document.getElementById('allCount');
|
|
var allPrice = document.getElementById('allPrice');
|
|
var countInput = document.getElementsByClassName('count-input');
|
|
var accounts = document.getElementById("accounts");
|
|
// 结算
|
|
function accounts() {
|
|
var sum = 0;
|
|
}
|
|
function accounts() {
|
|
accounts.style.display = "block";
|
|
alert("")
|
|
accounts.innerHTML = str;
|
|
}
|
|
|
|
//计算总数
|
|
function sumCount() {
|
|
var sum = 0;
|
|
for (var i = 0; i < cks.length; i++) {
|
|
if (cks[i].checked == true) {
|
|
var num = Number(countInput[i].value);
|
|
sum += num;
|
|
}
|
|
}
|
|
allCount.innerHTML = sum;
|
|
}
|
|
|
|
//计算总价
|
|
function sumPrice() {
|
|
var sum = 0;
|
|
for (var i = 0; i < cks.length; i++) {
|
|
if (cks[i].checked == true) {
|
|
var p = Number(trs[i].children[4].innerHTML);
|
|
sum += p;
|
|
}
|
|
}
|
|
allPrice.innerHTML = sum.toFixed(2);
|
|
}
|
|
|
|
//计算每一行的总价
|
|
function inlinePrice() {
|
|
for (var i = 0; i < trs.length; i++) {
|
|
//获取每一行单价
|
|
var price = Number(trs[i].children[2].innerHTML);
|
|
//获取数量
|
|
var num = Number(trs[i].children[3].children[1].value);
|
|
//小计
|
|
trs[i].children[4].innerHTML = (price * num).toFixed(2);
|
|
|
|
}
|
|
}
|
|
|
|
//数量增加
|
|
function addCount(e) {
|
|
var num = parseInt(e.previousElementSibling.value);
|
|
// 最大数量
|
|
if (num > 98) {
|
|
alert("不能再多了");
|
|
return;
|
|
}
|
|
//数量加1
|
|
e.previousElementSibling.value = num + 1;
|
|
inlinePrice();
|
|
sumPrice();
|
|
sumCount();
|
|
|
|
}
|
|
|
|
//数量递减
|
|
function reduceCount(e) {
|
|
var num = parseInt(e.nextElementSibling.value);
|
|
if (num <= 0) {
|
|
alert("不能再减了");
|
|
return;
|
|
}
|
|
|
|
e.nextElementSibling.value = num - 1;
|
|
inlinePrice();
|
|
sumPrice();
|
|
sumCount();
|
|
}
|
|
|
|
//全选和反选
|
|
function checkAll() {
|
|
for (var i = 0; i < cks.length; i++) {
|
|
cks[i].checked = ckAll.checked;
|
|
}
|
|
sumPrice();
|
|
sumCount();
|
|
}
|
|
|
|
//复选框
|
|
function check() {
|
|
for (var i = 0; i < cks.length; i++) {
|
|
if (cks[i].checked == false) {
|
|
ckAll.checked = false;
|
|
sumPrice();
|
|
sumCount();
|
|
return;
|
|
}
|
|
}
|
|
ckAll.checked = true;
|
|
sumPrice();
|
|
sumCount();
|
|
}
|
|
|
|
//单行删除
|
|
function del(e) {
|
|
e.parentElement.parentElement.remove();
|
|
sumPrice();
|
|
sumCount();
|
|
}
|
|
|
|
</script>
|
|
|
|
<!-- 底部导航 -->
|
|
<iframe src="../../public/foot-tab.html" class="foot-iframe" frameborder="0" scrolling="no"
|
|
marginwidth='0'></iframe>
|
|
<!-- 回到顶部 -->
|
|
<img id="gotoTop" onclick="pageScroll()" src="../../img/public/backTop.png" alt="图片丢失" title="回到顶部">
|
|
</body> |