购物车啊

最新推荐文章于 2020-10-11 00:06:35 发布

小胖胖哈

最新推荐文章于 2020-10-11 00:06:35 发布

阅读量216

点赞数

本文链接：https://blog.csdn.net/xxb52306/article/details/78596589

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       
       <link rel="stylesheet" href="../../ionic/css/ionic.css" />
       <script type="text/javascript" src="../../ionic/js/ionic.bundle.min.js"></script>
       <script>
           var app = angular.module("myApp", ["ionic"]);
           app.controller("myCtrl", function($scope) {
               $scope.items = [{
                   name: "纯手工制作木质时钟精致家具",
                   price: 150,
                   num: 1,
                   url: "../image/a.png",
                   state: false
               }, {
                   name: "纯手工制作木质时钟精致家具",
                   price: 119,
                   num: 2,
                   url: "../image/b.png",
                   state: false
               }, {
                   name: "纯手工制作木质时钟精致家具",
                   price: 120,
                   num: 0,
                   url: "../image/c.png",
                   state: false
               }];

               //完成商品的加减功能
               $scope.less = function(index) {
                   if($scope.items[index].num == 0) {
                       alert("已经减到0了");
                   } else {
                       $scope.items[index].num -= 1;
                       $scope.allPrice = 0;
                       for(index in $scope.items) {
                           if($scope.items[index].state) {
                               $scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
                           }
                       }
                   }
               } //数量增加
               $scope.add = function(index) {
                   $scope.items[index].num += 1;
                   $scope.allPrice = 0;
                   for(index in $scope.items) {
                       if($scope.items[index].state) {
                           $scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
                       }
                   }
               }
               //删除功能
               $scope.delete = function(index) {
                   if(window.confirm("确定要删除当前项吗？")) {
                       $scope.items.splice(index, 1);

                       $scope.allPrice = 0;
                       for(index in $scope.items) {
                           if($scope.items[index].state) {
                               $scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
                           }
                       }
                   }
               }

               //检测是否有选中项，计算总价
               $scope.selectAll = false;
               $scope.allPrice = 0;
               $scope.checkSelAll = function() {
                   //判断全选按钮是否选中
                   if($scope.selectAll) {
                       //alert(111);
                       for(index in $scope.items) {
                           //所有商品状态变为选中
                           $scope.items[index].state = false;
                       }
                       $scope.allPrice = 0;
                       $scope.selectAll = false;
                   } else {
                       //alert("222");
                       //遍历所有上面计算总价
                       for(index in $scope.items) {
                           //所有商品状态变为选中
                           $scope.items[index].state = true;
                       }
                       for(index in $scope.items) {
                           $scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
                           //alert($scope.allPrice);
                       }
                       $scope.selectAll = true;
                   }
               }

               //选中每一个多选按钮，计算当前的总价
               $scope.selectItem = function(index) {
                   $scope.allPrice = 0;
                   for(index in $scope.items) {
                       if($scope.items[index].state) {
                           $scope.allPrice = $scope.items[index].num * $scope.items[index].price + $scope.allPrice;
                       }
                   }
               }
           });
       </script>
       <style>
           #myInput {
               margin-right: 40px;
               margin-left: 50px;
           }

           img {
               vertical-align: middle;
               margin-top: 6px;
           }

           #selectAll {
               margin-right: 40px;
               margin-left: 80px;
           }
       </style>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <ion-header-bar align-title="center" class="bar-positive">
           <h1 class="title">购物车</h1>
       </ion-header-bar>
       <ion-content>
           <ion-checkbox ng-model="isChecked">趣艺工坊</ion-checkbox>
           
           <ion-list>
               <ion-item ng-repeat="item in items">
                   <div style="width: 100%; height: 100px;">
                       <div style="float: left;">
                           <input id="myInput" ng-click="selectItem($index)" type="checkbox" ng-model="item.state" />
                           <img src="{{item.url}}" />
                       </div>
                       <div style="float: left; margin-left: 50px;">
                           <span>{{item.name}}</span><br/><br/>
                           <span>{{item.price}}</span><br /><br />
                           <button ng-click="less($index)">-</button>
                           <span>{{item.num}}</span>
                           <button ng-click="add($index)">+</button>
                           <span style="margin-left: 200px;" ng-click="delete($index)">删除</span>
                       </div>
                   </div>
               </ion-item>
           </ion-list>

           <div style="width: 100%; height: 100px; margin-top: 50px;">
               <input id="selectAll" type="checkbox" ng-model="selectAll" ng-click="checkSelAll()" />全选
               <span style="margin-left: 250px;">合计：<span>{{allPrice | currency:"￥："}}</span></span>
               <button style="margin-left: 50px;">结算</button>
           </div>
           
       </ion-content>
   </body>

</html>