woniu_family
/
cart.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/cart.css">
</head>
<body>
    <!-- 头部 -->
    <header>
        <div class="head">
          <div class="logo">
            <a href="./usercenter.html"></a>
            <a href="./index.html" class="link_a">
              <img src="./images/logo.png" alt="" />
            </a>
          </div>
          <!--个人信息 -->
          <div class="user_info">
            <div class="link">
              <span><a class="link_a" href="./login.html">登录</a></span>
              <span>|</span>
              <span><a class="link_a" href="./regesiter.html">注册</a></span>
            </div>
            <div class="search">
              <input type="text" placeholder="热门搜索：干花花瓶" />
              <a class="link_a" href=""><button></button></a>
            </div>
            <div class="icon">
              <a href="./usercenter.html" class="link_a">
                <img src="./images/grzx.png" alt="" />
              </a>
              <a href="" class="link_a">
                <img src="./images/ewm.png" alt="" />
              </a>
              <a href="./cart.html" class="link_a">
                <img src="./images/gwc.png" alt="" />
              </a>
            </div>
          </div>
        </div>
        <!-- 导航 -->
      <!-- 导航 -->
      <nav>
        <!-- <div class="navigation">

          </div> -->
        <div class="navigation">
          <a href="" class="link_a">首页</a>
          <a href="" class="link_a" name="all">
            所有商品
            <!-- 根据nav定位 -->
            <div class="all_product">
              <!-- 全部商品 漂浮 -->
              <div class="center">

                <div class="product_item">
                  <div>
                    <img src="./images/nav1.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav5.jpg" alt="">
                  </div>
                  <div>浪漫美式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav6.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav7.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
                <div class="product_item">
                  <div>
                    <img src="./images/nav8.jpg" alt="">
                  </div>
                  <div>浓情欧式</div>
                </div>
              </div>
              <!-- 全部商品 漂浮 -->
            </div>
          </a>
          <a href="" class="link_a" name="accessories">
            装饰配件
             <!-- 样式  -->
            <div class="css">
              <div class="center">
                <span>干花花艺</span>
                <span>花瓶花艺</span>
              </div>
            </div>
          </a>
             <!-- 样式  -->

          <a href="" class="link_a" name="decorations">
            布艺软饰
            <div class="decorations">
              <div class="content">
                <span>桌布罩件</span>
                <span>抱枕靠枕</span>
              </div>
            </div>
          </a>
          <a href="./paint.html" class="link_a">墙饰壁挂</a>
          <a href="" class="link_a">蜡艺香薰</a>
          <a href="" class="link_a">创意家居</a>
        </div>
      </nav>
      <!-- 导航 -->
    </header>
    <!-- 头部 -->

    <!-- 进度 -->
    <div class="position">
      <div>购物车</div>
      <div>
        <img src="./images/temp/cartTop01.jpg" alt="">
      </div>
      <div>
        <a href="">继续购物></a>
      </div>
    </div>
    <!-- 进度 -->

    <!-- 表格 -->
    <table>
        <thead>
            <tr>
                <th></th>
                <th>商品</th>
                <th>单价</th>
                <th>数量</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>

        </tbody>
        <!-- 表格脚 -->
        <tfoot>
            <tr>
                <td>
                    <label for="checks">
                      <input type="checkbox" name="" id="checks" onclick="checkAll()">全选
                    </label>
                </td>
                <td>
                    <a style="cursor:pointer" class="del_item" onclick="del_items()">删除</a>
                </td>
                <td>

                </td>
                <td>共<span class="count_nums">0</span>件商品</td>
                <td>合计<span>￥</span><span class="cash">0.00</span></td>
                <td>
                    <button type="submit" id="pay">
                        结算
                    </button>
                </td>
            </tr>
        </tfoot>
    </table>
    <!-- 表格 -->

    <!-- 页脚 -->
    <footer>
            <div class="promise">
              <div class="promiser">
                <div class="item">
                  <a href="" class="link_a">
                    <img class="margin" src="./images/foot1.png" alt="" />
                  </a>
                  <div>7天无理由退货</div>
                </div>
                <div class="item">
                  <a href="" class="link_a">
                    <img class="margin" src="./images/foot2.png" alt="" />
                  </a>
                  <div>15天免费换货</div>
                </div>
                <div class="item">
                  <a href="" class="link_a">
                    <img class="margin" src="./images/foot3.png" alt="" />
                  </a>
                  <div>满599包邮</div>
                </div>
                <div class="item">
                  <a href="" class="link_a">
                    <img class="margin" src="./images/foot4.png" alt="" />
                  </a>
                  <div>手机特色服务</div>
                </div>
              </div>
            </div>
            <div class="copyright">
              <div>蜗牛家居©2019-2021公司版权所有 京ICP备080100-xx号</div>
              <div>
                违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
              </div>
            </div>
    </footer>
    <!-- 页脚 -->


    <script>
      let goods_arr = [
        {id:1,src:"./images/temp/cart01.jpg",title:"创意现代简约干花花瓶摆件",info:"白色瓷瓶+白色串枚",price:20,num:1,check:true},
        {id:2,src:"./images/temp/cart01.jpg",title:"创意现代简约干花花瓶摆件",info:"白色瓷瓶+白色串枚",price:20,num:1,check:true},
        {id:3,src:"./images/temp/cart01.jpg",title:"创意现代简约干花花瓶摆件",info:"白色瓷瓶+白色串枚",price:20,num:1,check:true},
        {id:4,src:"./images/temp/cart01.jpg",title:"创意现代简约干花花瓶摆件",info:"白色瓷瓶+白色串枚",price:20,num:1,check:true},
        {id:5,src:"./images/temp/cart01.jpg",title:"创意现代简约干花花瓶摆件",info:"白色瓷瓶+白色串枚",price:20,num:1,check:false},
      ]

      // 定义区域
      // 定义这个大tbody
      let oTbody = document.querySelector("table tbody")
      // 定义合计
      let count_cash = document.querySelector("tfoot .cash")
      // 定义统计商品数量
      let count_nums = document.querySelector(".count_nums")
      // 定义下面的全部大选择框
      let checks_All = document.querySelector("tfoot #checks")
      // 定一下面的删除
      let del_item = document.querySelector("del_item")
      // 定义结算按钮
      let payBtn = document.querySelector("#pay")

      function show(){
        let data = ""
        let count_money = 0
        let count_number = 0
        for (let i = 0; i < goods_arr.length; i++) {
          data = data +           `
                                    <tr>
                                      <td>
                                          <input type="checkbox" name="select" ${goods_arr[i].check &&"checked"} onclick="selectOne(${i})">
                                      </td>
                                      <td>
                                          <div><img src=${goods_arr[i].src}></div>
                                          <div>
                                              <div>创意现代简约干花花瓶摆件</div>
                                              <span>颜色分类：</span>
                                              <br>
                                              <span>
                                                  <a href="" class="link_a">
                                                      ${goods_arr[i].info}
                                                  </a>
                                              </span>
                                          </div>
                                      </td>
                                      <td>￥${goods_arr[i].price}</td>
                                      <td>
                                          <button type="submit" onclick="remove_num(${i})">-</button>
                                          <span>${goods_arr[i].num}</span>
                                          <button type="submit" onclick="add_num(${i})">+</button>
                                      </td>
                                      <td>￥${goods_arr[i].price * goods_arr[i].num}</td>
                                      <td>
                                          <a style="cursor:pointer" class="link_a" onclick=del_commodity(${i})>
                                              删除
                                          </a>
                                      </td>
                                    </tr>
                                  `

        }
        oTbody.innerHTML = data

        for (let i = 0; i < goods_arr.length; i++) {
          count_money += goods_arr[i].price * goods_arr[i].num * goods_arr[i].check
          if(goods_arr[i].check == true){
            count_number += goods_arr[i].num
          }

        }
        count_cash.innerText = count_money
        count_nums.innerText = count_number
        payBtnStyle()
        checkr()
      }

      // 删除 右
      function del_commodity(i){
        goods_arr.splice(i,1)
        show()
      }
      // 小计 在 show()函数里面

      // 加
      function add_num(i){
        goods_arr[i].num++
        show()
      }
      // 减
      function remove_num(i){
        if (goods_arr[i].num >= 1){
          goods_arr[i].num--
        }
        show()
      }
      // 点击取反  及 反馈到全部选择框上面
      function selectOne(i){
        goods_arr[i].check = !goods_arr[i].check
        let status = goods_arr.every(e=>e.check == true)
        if(status){
          checks_All.checked = true
        }else{
          checks_All.checked = false
        }
        show()
      }
      // 全部选择框按钮 函数
      function checkAll(){
        goods_arr.map(e=>e.check = checks_All.checked)
        show()
      }
      // 删除 下
      function del_items(){
        goods_arr = goods_arr.filter(e=>e.check == false)
        show()
      }
      // 结算按钮 动态变化
      function payBtnStyle(){
        let confirm = goods_arr.some(e=>e.check == true)
        if(confirm){
          payBtn.style.background = "red"
          payBtn.style.color = "white"
        }else{
          payBtn.style.background = "gray"
          payBtn.style.color = "black"
        }
      }
      function checkr(){
        goods_arr.length == 0 ? checks_All.checked = false : checks_All.checked = checks_All.checked
      }
      function main(){
        show()
      }


      main()
    </script>
</body>
</html>