购物车

最新推荐文章于 2024-09-14 19:44:09 发布

jia109014

最新推荐文章于 2024-09-14 19:44:09 发布

阅读量140

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/jia109014/article/details/104686247

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <link rel="stylesheet" type="text/css" href="./gouwu.css"/>
   </head>
   <body>
       <div class="warp">
       <div class="cart-top"><span>购物车</span></div>
       <div>
       <ul class="plist">
       <li>
       <div class="con-l"><img src="$(pobj.pid)"></div>
       <div class="con-r">
       <div class="con-r-1">
       <p>新乐敦滴眼液</p>
       </div>
       <div class="con-r-2">
       <p>￥23.00</p>
       </div>
       <div class="con-r-3">
       <span>-</span>
       <input type="text">
       <span>+</span>
       </div>
       <div class="con-r-4">
       <p>￥23.00</p>
       </div>
       <div class="con-r-5">
       <i class="iconfont icon-shanchudelete30">×</i>
       </div>
       </div>
       </li>
       </ul>
       </div>
       <div class="cart-bottom">
       <div class="cart-bottom-l">
       <p>已选择  <span id="cart-pnum"></span>  件商品</p>
       </div>
       <div class="cart-bottom-r">
       <div class="cart-bottom-r-1">
       <i>总价</i>
       <span id="zongJia">￥00.00</span>
       </div>
       <div class="cart-bottom-r-2">
       <p>支持免邮</p>
       </div>
       <div class="cart-bottom-r-3">
       <button id="btn-go-plist">继续购物</button>
       <button id="btn-go-price">去结算</button>
       </div>
       <div class="cart-bottom-r-4">
       <p>请在下一步使用优惠券</p>
       </div>
       </div>
       </div>
       </div>
       <script src="jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
       <script type="text/javascript">
           let user = localStorage.getItem("username")
           let uid = localStorage.getItem("uid")
           if (user) {
           $('#user').html("用户：" + user + '  <a id="userOut" href="javscript:;">退出</a>')
           $('#userOut').click(function () {
           localStorage.clear()
           })
           }
           //---------加载用户购物车中的商品
           $.ajax({
           url: "http://jx.xuzhixiang.top/ap/api/cart-list.php",
           type: "get",
           data: {
           id: uid
           }
           }).then(res => {
                       console.log(res)
           let arr = res.data;
           if (arr.length >= 1) {
           let html = '';
           for (let i = 0; i < arr.length; i++) {
           html += `
           <li>
           <div class="con-l"><img src="${arr[i].pimg}"></div>
           <div class="con-r">
           <div class="con-r-1">
           <p>${arr[i].pname}</p>
           </div>s
           <div class="con-r-2">
           <p>￥${arr[i].pprice}</p>
           </div>
           <div class="con-r-3">
           <span class="sub-btn" data-pid="${arr[i].pid}">-</span>
           <input type="text" value="${arr[i].pnum}" disabled="disabled">
           <span class="add-btn" data-pid="${arr[i].pid}">+</span>
           </div>
           <div class="con-r-4">
           <p class="pid-price">￥${(arr[i].pnum * arr[i].pprice).toFixed(2)}</p>
           </div>
           <div class="con-r-5">
           <i data-pid="${arr[i].pid}" class="del-btn iconfont icon-shanchudelete30">x</i>
           </div>
           </div>
           </li>
           `
           }
           $(".plist").html(html)

           let num2 = 0
           for(let i=0;i<arr.length;i++){
           num2 += parseFloat(arr[i].pnum)
           }
           $('#cart-pnum').html(num2)

           let priceArr = $('.pid-price').text().slice(1).split("￥")
           let num = 0
           for (let i = 0; i < priceArr.length; i++) {
           num += parseFloat(priceArr[i])
           }
           console.log(num);
           $('#zongJia').html('￥' + num.toFixed(2))


           /* -----------加按钮------减按钮 ----- 删除按钮--------- */
           //删除
           $('.del-btn').on('click', function () {
           let pid = $(this).attr('data-pid')

           $.ajax({
           url: 'http://jx.xuzhixiang.top/ap/api/cart-delete.php',
           type: "get",
           data: {
           uid, pid
           }
           }).then(res => {
           //待测试 ----------------
           let a = $(this).parent().parent().children('.con-r-3').children('input').val()
           console.log($('#cart-pnum').text());
           console.log(a);
           let c = $('#cart-pnum').text()
           $('#cart-pnum').text(c-a)
           //------------

           $(this).parent().parent().parent().remove()
           alert(res.msg)
           location.reload()

           })


           })
           //加按钮
           $('.add-btn').click(function () {
           let pid = $(this).attr('data-pid')
           let pObj = arr.find(v => v.pid == pid)
           pObj.pnum++;
           $(this).prev().val(pObj.pnum)
           $.ajax({
           url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
           type: "get",
           data: {
           uid, pid, pnum: pObj.pnum
           }
           }).then(res => {

           countPrice(pObj, this,arr)
           })
           })
           //减按钮
           $('.sub-btn').click(function () {
           let pid = $(this).attr('data-pid')
           let pObj = arr.find(v => v.pid == pid)
           if (pObj.pnum == 1) {
           return
           }
           pObj.pnum--;
           $(this).next().val(pObj.pnum)
           $.ajax({
           url: "http://jx.xuzhixiang.top/ap/api/cart-update-num.php",
           type: "get",
           data: {
           uid, pid, pnum: pObj.pnum
           }
           }).then(res => {

           countPrice(pObj, this,arr)
           })
           })


           } else {
           $(".plist").html('空空如也不明觉厉')
           }
           })

           /* 加减按钮算单个商品的总价函数封装 */
           function countPrice(pObj, element,plist) {
           $(element).parent().next().children().html('￥' + (pObj.pnum * pObj.pprice).toFixed(2))

           let arr = $('.pid-price').text().slice(1).split("￥")
           let num = 0
           for (let i = 0; i < arr.length; i++) {
           num += parseFloat(arr[i])
           }
           console.log(num);
           $('#zongJia').html('￥' + num.toFixed(2))

           //总共购买了多少件商品//

           let num2 = 0
           for(let i=0;i<plist.length;i++){
           num2 += parseFloat(plist[i].pnum)
           }
           $('#cart-pnum').html(num2)

           }
           /* ---------- 总价 --------------- */

           //继续购物按钮
           $("#btn-go-plist").on('click', function () {
           location.href = 'xiangmu.html'
           })

       </script>
   </body>
</html>