master

分支 (1)

管理

管理

master

xiaomi
/
shoppingcar2.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>我的购物车-小米商城</title>
  <link rel="icon" href="public/imgs/favicon.ico">
</head>
<style>
  a{
    text-decoration: none;
    color: black;
  }
  *{
    margin: 0;
    padding: 0;
  }
  li{
    list-style: none;
  }
  body{
    background: #f5f5f5;;
  }
  header{
    width: 100%;
    height: 102px;
    font-size: 12px;
    border-bottom: 2px solid #ff6700;
    background: #fff;
    position: relative;
  }
  .container {
    width: 1226px;
    margin-right: auto;
    margin-left: auto;
    height: 74px;
  }
  .header-logo{
    width: 93px;
    height: 48px;
    float: left;
    margin-top: 26px;
  }
  .header-logo img{
    width: 48px;
    height: 48px;
  }
  .header-title{
    width: 491px;
    height: 60px;
    float: left;
    margin-top: 26px;
  }
  .header-title h2{
    margin-top: 20px;
    float: left;
    font-size: 28px;
    line-height: 10px;
  }
  .header-title p{
    float: left;
    height: 20px;
    line-height: 20px;
    margin-top: 20px;
    margin-left: 15px;
    color: #757575;
  }
  .user-info{
    width: 194px;
    height: 40px;
    float: right;
    margin-top: 33px;
  }
  .user-name{
    float: left;
    width: 110px;
    height: 40px;
    text-align: center;
    line-height: 40px;
  }
  .order{
    height: 20px;
    width: 80px;
    border-left: #8D8D8D 1px solid;
    float: left;
    margin-top: 10px;
    line-height: 20px;
    text-align: center;
  }
  .item-box-title{
    width: 1226px;
    height: 70px;
    margin: 40px auto 0;
    border-bottom: 1px solid #8D8D8D;
    background:white;
  }
  .item-box{
    border-bottom: solid 1px #e0e0e0;
    background-color: #fff;
    width: 1226px;
    height:117px;
    margin: 0 auto;
    line-height: 117px;
    display: flex;
    align-items: center;
  }
  .check{
    text-align: center;
    height: 70px;
    width: 110px;
    float: left;
    line-height: 70px;
  }
  .check-box-style{
    margin-left: 30px;
  }
  .item-picture{
    height: 70px;
    width: 120px;
    float: left;
  }
  .item-picture img{
    margin-bottom: 40px;
    width: 70px;
    height: 70px;
  }
  .item-name{
    width: 380px;
    height: 70px;
    line-height: 70px;
    float: left;
  }
  .item-price{
    width: 158px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    float: left;
  }
  .item-number{
    width: 150px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
  }
  .item-total{
    width: 201px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    float: left;
  }
  .item-action{
    width: 80px;
    height: 70px;
    text-align: center;
    line-height: 70px;
    float: left;
    display: flex;
    justify-content: center;
    align-items: center;

  }
  .item-remove{
    height: 22px;
    width: 22px;
    border-radius: 50%;
    text-align: center;
    border: none;
    background: white;
    line-height: 22px;
  }
  .item-remove:hover{
    background-color: #ff6700;
  }
  .total{
    width: 1226px;
    height: 50px;
    background-color:white;
    margin: 10px auto 0;
  }
  .total-left{
    width: 193px;
    height: 50px;
    line-height: 50px;
    float: left;
  }
  .total-right{
    width: 400px;
    height: 50px;
    float: right;

  }
  .total-right button{
    width: 200px;
    height: 50px;
    background-color:#ff6700;
    float: right;
    border: none;
    text-align: center;
    line-height: 50px;
    color: #f2f2f2;
    font-size: 18px;
    cursor: pointer;
    opacity: 0.9;
  }
  .total-right button:hover{
    opacity: 1;
  }
  .total-price{
    width: 200px;
    height: 50px;
    float: left;
    line-height: 50px;
    color: #ff6700;
  }
  .total-price-main{
    font-style: normal;
    font-size: 30px;
    color: #ff6700;
  }
  .shopping{
    color: #757575;text-decoration: none;font-size: 14px;padding-right: 15px;padding-left: 15px
  }
  .shopping:hover{
    color: #ff6700;

  }
  .item-number img{
    width: 20px;
    height: 20px;

  }
  .page-0{
    width: 1226px;
    height: 30px;
    margin: 0 auto;
  }
  .page-0 li{
    width: 100px;
    height: 30px;
    float: left;
    border: solid 1px #e0e0e0;
    text-align: center;
    line-height: 30px;
  }
  .page-0 button{
    width: 100px;
    height: 30px;
    border: none;
    cursor: pointer;
  }

</style>
<body>
<header>
  <div class="container">
    <div class="header-logo">
      <img src="public/imgs/logo-mi2.png">
    </div>
    <div class="header-title">
      <h2>我的购物车</h2>
      <p>
        温馨提示：产品是否购买成功，以最终下单为准哦，请尽快结算
      </p>
    </div>
    <div class="user-info">
      <div class="user-name">小朱</div>
      <div class="order">我的订单</div>
    </div>
  </div>
</header>
<div class="page-main-shopping">
  <div class="item-box-title">
    <div>
      <div class="check">
        <input type="checkbox" class="check-box-style">全选
      </div>
      <div class="item-picture"></div>
      <div class="item-name">商品名称</div>
      <div class="item-price">单价</div>
      <div class="item-number">数量</div>
      <div class="item-total">小计</div>
      <div class="item-action">操作</div>
    </div>
  </div>

</div>
<div class="page-0">
  <ul>
    <li><a href="shoppingcar.html"><button>首页</button></a></li>
    <li><a href="shoppingcar.html"><button class="page-1">1</button></a></li>
    <li style="background-color:#ff6700;"><a href="shoppingcar2.html"><button class="page-2" style="background-color:#ff6700;">2</button></a></li>
    <li><a href=""><button>3</button></a></li>
    <li><a href=""><button>4</button></a></li>
    <li><a href=""><button>5</button></a></li>
    <li><a href=""><button>6</button></a></li>
    <li><a href=""><button>7</button></a></li>
    <li><a href=""><button>8</button></a></li>
    <li><a href=""><button>9</button></a></li>
    <li><a href=""><button>10</button></a></li>
    <li><a href=""><button>尾页</button></a></li>
  </ul>
</div>
<div class="total">
  <div class="total-left">
    <a href="index.html" class="shopping">继续购物</a>
    <span style="color: #757575;padding-left: 10px;border-left:1px solid;">已选择1件</span>
  </div>
  <div class="total-right">
    <div class="total-price">
      <span>合计：</span>
      <span class="total-price-main"></span>
      <span style="color: #ff6700">元</span>
    </div>
    <button>
      去结算
    </button>
  </div>
</div>
<script>
  const xhr5=new XMLHttpRequest()
  const picture=document.querySelector('.item-picture')
  const name=document.querySelector('.item-box-name')
  const price=document.querySelector('.item-box-price')
  const page=document.querySelector('.page-main-shopping')
  const totalprice=document.querySelector('.total-price-main')
  var checkbox=document.querySelector('.check-box-style')
  var total=0;
  xhr5.onreadystatechange = function() {HTMLAllCollection
    if (xhr5.readyState === 4 && xhr5.status === 200) {
      const {data:res} =JSON.parse(xhr5.responseText)
      console.log(res)
      for (var i=0;i<res.records.length;i++){
        const div=document.createElement('div')
        div.className='item-box'
        page.appendChild(div)

        const check=document.createElement('div')
        check.className='check'
        div.appendChild(check)

        const input=document.createElement('input')
        input.className='check-box'
        input.type='checkbox'
        check.appendChild(input)

        const itempicture=document.createElement('div')
        itempicture.className='item-picture'
        div.appendChild(itempicture)

        const img=document.createElement('img')
        img.className='item-box-img'
        itempicture.appendChild(img)
        img.src=res.records[i].product_picture

        const itemname=document.createElement('div')
        itemname.className='item-name'
        div.appendChild(itemname)
        itemname.innerHTML=res.records[i].product_name

        const itemprice=document.createElement('div')
        itemprice.className='item-price'
        div.appendChild(itemprice)
        itemprice.innerHTML=res.records[i].product_price+'元'
        totalprice.innerHTML=(total+=res.records[i].product_price)

        const itemnumber=document.createElement('div')
        itemnumber.className='item-number'
        div.appendChild(itemnumber)
        const leftdiv=document.createElement('div')
        leftdiv.className='leftdiv'
        leftdiv.onclick=function () {
          if (inputnub.value>=2){
            inputnub.value--;
          }
         else {
           alert("商品数量不能为0")
          }
        }
        leftdiv.style.cssText='float:left;width:38px;height:38px;display: flex;justify-content:center;align-items:center;border-left: 1px solid;\n' +
                '    border-top: 1px solid;\n' +
                '    border-bottom: 1px solid;'
        itemnumber.appendChild(leftdiv)
        const leftimg=document.createElement('img')
        leftimg.src="public/imgs/jian.png"
        leftdiv.appendChild(leftimg)

        const inputnub=document.createElement('input')
        inputnub.id='inputnub'
        inputnub.style.cssText="width:72px;height:38px;border:1px solid; text-align: center;"
        inputnub.value=1;

        itemnumber.appendChild(inputnub)
        const rightdiv=document.createElement('div')
        rightdiv.style.cssText='float:left;width:38px;height:38px;display: flex;justify-content:center;align-items:center;border-right: 1px solid;\n' +
                '    border-top: 1px solid;\n' +
                '    border-bottom: 1px solid;'
        itemnumber.appendChild(rightdiv)

        const rightimg=document.createElement('img')
        rightimg.src="public/imgs/jia.png"
        rightdiv.appendChild(rightimg)

       var itemtotal=document.createElement('div')
        itemtotal.className='item-total'
        div.appendChild(itemtotal)
        itemtotal.innerHTML=res.records[i].product_price
        rightdiv.onclick=function () {
          inputnub.value++;
        }

        const itemaction=document.createElement('div')
        itemaction.className='item-action'
        div.appendChild(itemaction)

        const itemremove=document.createElement('button')
        itemremove.className='item-remove'
        itemremove.innerText='x'
        itemaction.appendChild(itemremove)

        var othercheck=document.querySelectorAll('.check-box')
        checkbox.onclick=function (){
          for (var i=0;i<othercheck.length;i++){
            if (checkbox.checked==true){
              othercheck[i].checked=true
            }
            else {
              othercheck[i].checked=false
            }
          }

        }
        const pid=res.records[i].order_id
        itemremove.onclick=function (){
          alert("确定删除该商品吗？")
          const xhr6=new XMLHttpRequest()
          xhr6.open('DELETE','http://43.138.138.11:1110/api/order/'+pid,false)
          xhr6.send()
          console.log(xhr6.responseText)
          location.href='shoppingcar.html'
        }
      }
    }

  }
  const id4 = localStorage.getItem('product_id2')
  const name5=localStorage.getItem('username')
  xhr5.open('GEt','http://43.138.138.11:1110/api/order/100/2/5',true)
  xhr5.send(null)
</script>
</body>
</html>