<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/swiper-3.4.2.min.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/init.css" /> <link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_647640_to180rktm1butyb9.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/weui.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/example.css" /> <link rel="stylesheet" type="text/css" href="/themes/simplebootx/Portal/Template/css/shopcar.css" /> <script src="/themes/simplebootx/Portal/Template/js/base.js" type="text/javascript" charset="utf-8"></script> <title>购物车</title> <style> [v-cloak]{ display:none; } .nodata{ margin-top: 90px; text-align: center; color: #999; font-size: 14px; } .weui-toast { position: fixed; z-index: 5000; width: 2rem; /*height: 1rem; line-height: 1rem;*/ height: 2rem; top:0; bottom: 0; left: 0; right:0; margin: auto; /*margin-left: -3.8em;*/ background: rgba(17, 17, 17, 0.7); text-align: center; border-radius: 5px; color: #FFFFFF; font-size: 0.2rem; } .foot_cartnum { position: absolute; width: 0.36rem; height: 0.36rem; background-color: #FF4800; right: -0.1rem; top: 0rem; border-radius: 50%; color: #FFFFFF; font-size: 0.2rem; text-align: center; line-height: 0.36rem; } body{ -webkit-overflow-scrolling:touch; } </style> </head> <body onload="load()"> <div class="container" style="overflow-x: hidden;" id="shopcar"> <div class="shop_car_item" data-allmoney='' v-cloak v-for="(item,index) in carlist" v-bind:id="item.cart_id" v-if="item .goods_num>0"> <input type="checkbox" class="choose" :checked="item.checked" name="" id="" value="" @click="check(item,index)"/> <img v-bind:src="item.thumb" /> <div class="shop_car_item_text"> <p class="shop_car_item_name">{{item.goods_name}}</p> <p class="shop_car_item_other_name">{{item.goods_description}}</p> <div class="shop_car_item_text_num"> <span class="shop_car_item_text_num_icon">¥</span><span class="shop_car_item_text_money">{{item.goods_price}}</span> </div> </div> <span class="shop_car_item_delete" @click="delcart(item.cart_id)">删除</span> <div class="shop_car_item_btn"> <i class="iconfont icon-icon--" v-on:click="reducenum(item,index)"></i> <input type="" name="" class="shop_car_num" v-model="item.goods_num"/> <i class="iconfont icon-jia" v-bind:id="JSON.stringify(item)" @click="addnum(item,index)"></i> </div> </div> <!--结算--> <div class="count" style="background-color: #FFFFFF;" v-cloak> <input type="checkbox" class="all_choose" name="" id="" value="" :checked="checkgood" @click="choseall()"/> <span class="count_all" >全选</span><span class="count_all_text">合计:</span><span class="count_all_num">{{totalmoney.money}}</span> <span class="count_btn" @click="accounts()">结算 ></span> </div> <!-- loading toast 数据加载中--> <div id="loadingToast" style="display:none"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <i class="weui-loading weui-icon_toast"></i> <p class="weui-toast__content">数据加载中</p> </div> </div> <!--库存不足弹出框--> <div id="unstock" style="display:none"> <div class="weui-mask_transparent"></div> <div class="weui-toast"> <!-- <i class="weui-icon-success-no-circle weui-icon_toast"></i>--> <p class="weui-toast__content">该商品每天限购一份</p> </div> </div> <div class="nodata" v-if="carlist.length==0"> 您还没有下单哦,快去下单吧 </div> <!--footer--> <div class="footer" v-cloak> <div class="footer_item"> <a href="{:U('Template/index')}"><img src="/themes/simplebootx/Portal/Template/img/menu_icon1_select@2x_81.png" /><span>首页</span></a> </div> <div class="footer_item footer_active"> <a href="{:U('Template/shopcar')}"><img src="/themes/simplebootx/Portal/Template/img/9拷贝@2x_55.png" /> <span>购物车</span> </a> <p class="foot_cartnum" v-if="cartnum>0">{{cartnum}}</p> </div> <div class="footer_item"> <a href="{:U('Template/PersonCenter')}"><img src="/themes/simplebootx/Portal/Template/img/menu_icon3_select@2x.png" /><span>我的</span></a> </div> </div> </div> <script src="/themes/simplebootx/Portal/Template/js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/vue.min.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/cookie.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/swiper-3.4.2.jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="/themes/simplebootx/Portal/Template/js/zepto.min.js"></script> <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script> <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script> <script src="/themes/simplebootx/Portal/Template/js/shopcar.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> //全选 var count_btn = document.getElementsByClassName('count_btn')[0]; var all_choose = document.getElementsByClassName('all_choose')[0]; var choose = document.getElementsByClassName('choose'); var shop_car_num = document.getElementsByClassName('shop_car_num'); var count_all_num = document.getElementsByClassName('count_all_num')[0]; var shop_car_item_text_money = document.getElementsByClassName('shop_car_item_text_money')[0]; var shop_car_item = document.getElementsByClassName('shop_car_item'); //全选 all_choose.onclick = function() { if(all_choose.checked) { for(i = 0; i < choose.length; i++) { if(choose[i].type == 'checkbox') { choose[i].checked = true; } } } else { for(var i = 0; i < choose.length; i++) { if(choose[i].type == "checkbox") { choose[i].checked = false; } } } } //给shop_car_num data_id for(i = 0; i < shop_car_item.length; i++) { shop_car_num[i].setAttribute('id', ''); } //删除商品 var shop_car_item_delete = document.getElementsByClassName('shop_car_item_delete'); for(i = 0; i < shop_car_item_delete.length; i++) { shop_car_item_delete[i].onclick = function() { this.parentNode.parentNode.removeChild(this.parentNode); } } </script> </body> </html>