购物车页面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0"> <title>购物车</title> <link rel="stylesheet" href="css/base.css"> <link rel="stylesheet" href="css/shopCart.css"> </head> <body> <div id="app"> <!--头部区域--> <div class="header"> <a href="index.html" class="icon_back"></a> <h3>购物车</h3> <a href="" class="icon_menu"></a> </div> <!--安全提示--> <div class="jd_safe_tip"> <p class="tip_word"> 您正在安全购物环境中，请放心购物 </p> </div> <!--中间的列表--> <main class="jd_shopCart_list"> <section v-for="(shop,index) in shopListArr"> <div class="shopCart_list_title"> <span class="cart_logo"></span> <span class="cart_title">京东自营</span> <span class="cart_sale">您享受满100元免运费服务</span> </div> <div class="shopCart_list_con"> <div class="list_con_left"> <a href="javascript:;" class="cart_check_box" :checked="shop.checked" @click="singerShopSelected(shop)"></a> </div> <div class="list_con_right"> <div class="shop_img"> <img :src="shop.shopImage" alt="shop.shopName"> </div> <div class="shop_con"> <a href="" v-text="shop.shopName"></a> <div class="shop_price"> <div class="singer">{{shop.shopPrice | moneyFormat(shop.shopPrice)}}</div> <div class="total">{{shop.shopPrice * shop.shopNumber | moneyFormat(shop.shopPrice * shop.shopNumber)}}</div> </div> <div class="shop_deal"> <div class="shop_deal_left"> <span @click="singerShopPrice(shop,false)">-</span> <input type="tel" value="shop.shopNumber" v-model="shop.shopNumber"> <span @click="singerShopPrice(shop,true)">+</span> </div> <div class="shop_deal_right" @click="clickTrash(shop)"> <span></span> <span></span> </div> </div> </div> </div> </div> </section> </main> <!--底部通栏--> <div id="tab_bar"> <div class="tab-bar-left"> <a href="javascript:;" class="cart_check_box" :checked="isSelectedAll" @click="selectedAll(isSelectedAll)"></a> <span style="font-size: 16px;">全选</span> <div class="select-all"> 合计：<span class="total-price">{{totalPrice | moneyFormat(totalPrice)}}</span> </div> </div> <div class="tab-bar-right"> <a href="index.html" class="pay">去结算</a> </div> </div> <!--弹出面板--> <div class="panel" :class="{'panel_is_show':isHideDelPanel}"> <div class="panel_content"> <div class="panel_title">您确认删除这个商品吗?</div> <div class="panel_footer"> <button class="cancel" @click="isHideDelPanel=true">取消</button> <button class="submit" @click="delShop()">确定</button> </div> </div> </div> </div> <script src="lib/vue.js"></script> <script src="lib/vue-resource.js"></script> <script src="js/base.js"></script> <!-- <script src="js/shopCart.js"></script> --> <script src="js/shopCartloop.js"></script> </body> </html>
vue.js
new Vue({ el:'#app', data:{ // 购物车中的数据 shopListArr:[], // 是否全选 isSelectedAll:false, // 所有商品的总价格 totalPrice:0, // 是否隐藏弹出面板 isHideDelPanel:true, // 当前要删除的一个商品 currentDelShop:{}, }, // 组件已经加载完毕，请求网络数据,业务处理。 mounted(){ // 请求本地的数据 this.getLocalData(); }, // 过滤 filters:{ // 格式化金钱 moneyFormat(money){ return '￥' + money.toFixed(2); } }, // 方法 methods:{ // 1.请求本地的数据 getLocalData(){ this.$http.get('data/cart.json').then(response => { // console.log(response.body); // 拿列表的数据 const res = response.body; if(res){ this.shopListArr = res.allShops.shopList; // console.log(this.shopListArr); } }, response => { alert('请求数据失败！'); }); }, // 2.单个商品的加减 singerShopPrice(shop, flag){ // 2.1 数量改变 if(flag){ // 加 shop.shopNumber += 1; }else{ //减 if (shop.shopNumber <= 1){ shop.shopNumber = 1; return; } shop.shopNumber -= 1; } // 2.2 计算总价格 this.getAllShopPrice(); }, // 3.选择所有的商品 selectedAll(flag){ // 3.1总控制 this.isSelectedAll = !flag; // 3.2遍历所有的商品数据 全选或全不选 this.shopListArr.forEach((value,index)=>{ if(typeof value.checked === 'undefined'){ //给原数据添加一个属性 this.$set(value, 'checked', !flag); }else{ // 修改属性 value.checked = !flag; } }); // 3.3 计算总价格 this.getAllShopPrice(); }, // 4.计算商品的总价格 getAllShopPrice(){ let totalPrice = 0; // 4.1 遍历所有的商品 this.shopListArr.forEach((value,index)=>{ // 判断商品是否被选中 if(value.checked){ totalPrice += value.shopPrice * value.shopNumber; } }); this.totalPrice = totalPrice; }, // 5.单个商品的选中和取消 singerShopSelected(shop){ // 5.1 判断有没有这个属性 if(typeof shop.checked === 'undefined'){ //给原数据添加一个属性 this.$set(shop, 'checked', true); }else{ // 修改属性 shop.checked = !shop.checked; } // 5.2计算总价格 this.getAllShopPrice(); // 5.3 判断是否全选 this.hasSelectedAll(); }, // 6.判断是否全选 hasSelectedAll(){ let flag = true; this.shopListArr.forEach((value,index)=>{ if(!value.checked){ // 只要有一个商品没选中，那么全选就不会选中。 flag = false; } }); this.isSelectedAll = flag; }, // 7.点击垃圾篓 clickTrash(shop){ // 显示弹出面板 this.isHideDelPanel = false; // 当前要删除的一个商品 this.currentDelShop = shop; }, // 8. 删除当前的商品 delShop(){ // 8.1 隐藏面板 this.isHideDelPanel = true; // 拿到商品的索引值 下标 const index = this.shopListArr.indexOf(this.currentDelShop); this.shopListArr.splice(index,1); // 删除该商品 // 8.2计算总价格 this.getAllShopPrice(); } } })