今天主要对商品列表页的商品进行数据渲染 并调整样式,另外对商品详情页面进行数据渲染。
html代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="">
<link rel="stylesheet" href="../lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="../css/reset.css">
<link rel="stylesheet" href="../css/common.min.css">
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/footer.css">
<link rel="stylesheet" href="../lib/jquery-zoom/css/hizoom.min.css">
<link rel="stylesheet" href="../css/detail.css">
<style>
</style>
</head>
<body>
<!-- 头部 -->
<div class="layout-header-nav">
<div class="container">
<p class="header-benefit">
商城优惠大酬宾,全场满59元包邮
</p>
<div class="header-cart">
<a href="./cart.html" class="header-cart-link">
<div class="header-cart-button">
<div class="header-cart-button-img"></div>
<span class="header-cart-button-word">
购物车
</span>
</div>
</a>
</div>
<div class="header-nav">
<a href="./login.html" class="header-nav-item login">登录</a>
<span class="header-nav-item">|</span>
<a href="./register.html" class="header-nav-item">注册</a>
<span class="header-nav-item">|</span>
<a href="./cart.html" class="header-nav-item">我的订单</a>
<span class="header-nav-item">|</span>
<a href="#" class="header-nav-item">帮助中心</a>
<span class="header-nav-item">|</span>
<a href="#" class="header-nav-item">TP-LINK官网</a>
</div>>
</div>
</div>
<div class="layout-header-search">
<div class="container">
<a href="#">
<img src="" alt="" class="header-logo">
</a>
<div class="layout-banner-nav">
<div class="banner-nav-list">
<div class="container2">
</div>
</div>
</div>
<form action="" class="header-search">
<input type="text" class="header-search-input" autocomplete="off">
<input type="button" class="header-search-submit" value="">
</form>
</div>
</div>
<div class="nav_box">
<ul class="container">
</ul>
</div>
<!-- 商品详情 -->
<div class="container">
<div class="goodsInfo">
<div class="left">
<div class="hizoom zoom">
<img src="../images/img01.jpg" >
</div>
</div>
<div class="right">
<p class="goodsName">商品详细介绍</p>
<p class="price">100.00</p>
<div class="btn">
<button class="addCart">添加购物车</button>
<button class="buy">直接购买</button>
</div>
</div>
</div>
</div>
<!-- footer -->
<div class="footer-promise">
<div class="container">
<img src="http://www.tp-linkshop.com.cn/Content/themes/base/images/Shared/promise.jpg" alt="" class="footer-promise-img">
</div>
</div>
<div class="layout-footer-service">
<div class="container">
<ul class="footer-service">
</ul>
</div>
</div>
<script src="../lib/jquery/dist/jquery.min.js"></script>
<script src="../lib/jquery-cookie/jquery.cookie.js"></script>
<script src="../lib/jquery-zoom/js/hizoom.min.js"></script>
<script src="../js/detail.js"></script>
<script src="../js/footer.js"></script>
<script>
$(function(){
$('.zoom').hiZoom({
width: 400,
position: 'right'
});
})
</script>
</body>
</html>
js
// 1. 获取 localStorage 里面的数据
const info = JSON.parse(localStorage.getItem('goodsInfo'))
// 2. 判断数据是否存在
if (!info) {
// 能执行表示 !info 是一个 true
// 表示 info 是一个 false
// 表示数据不存在
alert('页面不存在')
// 跳转回列表页面
window.location.href = './list.html'
}
// 3. 渲染页面
bindHtml()
function bindHtml() {
$('.goodsInfo img').attr('src', info.list_url)
$('.goodsInfo .goodsName').text(info.list_name)
$('.goodsInfo .price').text('¥' + info.list_price)
}
// console.log(info)
// 4. 点击添加购物车
// 4-1. 添加点击事件
$('.addCart').click(() => {
// console.log('我要添加购物车了')
// 4-2. 判断是否登录
if ($.cookie('name')) {
console.log('用户登录')
// 4-3. 加入到购物车数组里面
// 先拿到 localStorage 里面的那个数组信息
// 如果原先没有数据, 那么我就用一个空数组来代替
// 如果有数据, 就用我们的数据
const cartList = JSON.parse(localStorage.getItem('cartList')) || []
// 象数组里面把本条数据添加进去
// 4-4. 判断有没有这个数据
// 每一个数据都有一个自己的 id
// 只要看数组里面有没有 id 一样的数据, 就知道有没有这个数据了
// 数组常用方法有一个叫做 some 的方法
// 返回值:
// true: 表示数组里面有这个信息
// false: 表示数组里面没有这个信息
let exits = cartList.some(item => {
// 数组里面每一个的 id === 本页面的这条数据的 id
return item.list_id === info.list_id
})
// console.log(exits)
if (exits) {
// 表示有这个信息了, 我们要让 number ++
// console.log('已经存在 number ++')
// 找到这个信息给他 number ++
let data = null
for (let i = 0; i < cartList.length; i++) {
if (cartList[i].list_id === info.list_id) {
data = cartList[i]
break
}
}
// data 就是我找到的这个信息
data.number++
// 4-5. 数量添加的时候, 小计价格要改变
data.subtotal = data.number * data.list_price // 数量 * 单价
} else {
// 表示没有这个信息, 直接 push 就可以了
// push 之前, 象里面添加一个 number 信息为 1
info.number = 1
// 4-5. 多添加一些信息
info.subtotal = info.list_price // 因为默认是第一个, 小计就是单价
info.isSelect = false // 默认不选中
cartList.push(info)
}
// 在存储到 localStorage 里面
localStorage.setItem('cartList', JSON.stringify(cartList))
}else{
//未登录直接跳转到登录页面
console.log('用户未登录')
window.location.href='./login.html'
}
})
css
.goodsInfo{
width: 1200px;
height: 600px;
margin: 20px auto;
display: flex;
align-items: center;
}
.goodsInfo >.left{
width: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.goodsInfo >.right{
flex: 1;
display: flex;
justify-content: space-between;
flex-direction: column;
height: 460px;
font-size: 40px;
}
.goodsInfo >.right .addCart{
width: 200px;
height: 50px;
font-size: 24px;
cursor: pointer;
border: none;
background: #FF3232;
color: #fff;
}
.goodsInfo >.right .buy{
width: 200px;
height: 50px;
font-size: 24px;
cursor: pointer;
border: 1px solid #FF3232;
background: #fff;
color: #FF3232;
}
.goodsInfo >.right .goodsName{
font-size: 30px;
color: #333;
letter-spacing: 0;
line-height: 40px;
font-weight: 400;
margin: 0;
padding-left: 50px;
}
.goodsInfo >.right .price{
width: 100%;
height: 40px;
margin: 16px 0;
padding-left: 50px;
font-size: 24px;
color: #FF3232;
line-height: 40px;
}