商城项目日结4

今天主要对商品列表页的商品进行数据渲染并调整样式，另外对商品详情页面进行数据渲染。
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>

// 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;
}

张运成

发布了9 篇原创文章 · 获赞 0 · 访问量 100

私信关注

猜你喜欢