购物车基本功能（添加，删除）

最新推荐文章于 2024-05-16 21:30:28 发布

yzp0507

最新推荐文章于 2024-05-16 21:30:28 发布

阅读量3.7k

点赞数

先导入ionic包

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
       <link rel="stylesheet" href="lib/css/ionic.css" />
       <script src="lib/js/ionic.bundle.js"></script>
       <style>
           body {
               width: 800px;
               margin: 0 auto;
           }

           ul: {
               float: left;
           }

           #content {
               width: 600px;
               background-color: red;
               float: right;
           }
       </style>
       <script>
           angular.module("myapp", ["ionic"])
               .config(function($stateProvider) {
                   $stateProvider
                       .state("state1", {
                           url: "/index",
                           templateUrl: "views/index.html"
                       })
                       .state("state2", {
                           url: "/tocart", //点击结算超链接的路径    href="#/cart"
                           templateUrl: "views/cart.html"
                       })

               })
               .controller("dataCtrl", function($scope, $http, $filter, $state) {
                   //默认把路径设置 state1
                   $state.go("state1");

                   //定义变量 ,存放从json得到数据
                   var datagoods;
                   $scope.count = 0; //总数量
                   $scope.sumprice = 0; //总价
                   $scope.goodCart = []; //买的商品 ,商品数量

                   $http.get("datas.json").success(function(resp) {

                       console.log("获取到的商品数组,", resp); //resp 指向数组
                       $scope.goods = resp;
                       datagoods = resp;

                   })
                   //点击分类,显示对应类型的数据
                   $scope.selData = function(t) {
                       $f = $filter("filter"); //从服务$filter中获取能够过滤数组的过滤器
                       $scope.goods = $f(datagoods, {
                           "type": t
                       });
                   }
                   $scope.goCart = function(i) { //i 是显示商品的下标
                       //获取点击的商品信息
                       var good = $scope.goods[i];
                       console.log("商品价格", good.price);
                       $scope.sumprice = $scope.sumprice + good.price;
                       $scope.count = $scope.count + 1;

                       /*
                       * 自定义向购物车中添加商品的方法addCart
                       */
                       addCart(good);

                   }
                   //向购物车中添加商品私有函数
                   addCart = function(good) {
                       // [{"good":{"proname","鼠标","price":10},"num":1},{"good":good,"num":1}] 购物车的结构
                       var b = false; //b=true,有 b=false 没有   b代表购物车中是否存在本次购买的商品

                           //遍历购物车,查找本次good是否在
                           for(var i = 0; i < $scope.goodCart.length; i++) {
                               if($scope.goodCart[i].good == good) {
                                   $scope.goodCart[i].num = $scope.goodCart[i].num + 1;
                                   b = true;
                                   return;
                               }
                           }
                           if(b == false) {
                               $scope.goodCart.push({
                                   "good": good,
                                   "num": 1
                               });
                           }
                   }


                   $scope.del=function(index){
                       //获取购物车的商品和数量
                      var gcart=    $scope.goodCart[index];
                      gcart.num=gcart.num-1;
                      //移除商品和数量以后数量0
                      if(gcart.num==0){
                       $scope.goodCart.splice(index,1);//index:删除指定索引, 1 删除1个
                      }

                   //改变标题栏
                   $scope.count = $scope.count-1; //总数量
                   $scope.sumprice = $scope.sumprice-gcart.good.price; //总价

                   }


               })
       </script>
   </head>

   <body ng-app="myapp" ng-controller="dataCtrl">
       <ion-header-bar align-title="right" class="bar-positive">
           <a class="button" href="#/index">运动商城</a>
           <h1 class="title">您的购物车:{{count}} {{sumprice|currency:"RMB ￥"}} </h1>
           <div class="buttons">
               <a class="button" href="#/tocart">结算</a>
           </div>
       </ion-header-bar>
       <br /><br /><br />
       <div ui-view></div>
   </body>

</html>

+++++++++++++++++++++++++++++++++++//主界面

<ul>
           <li><button class="button button-light" style="width: 200px;" ng-click="selData('')">首页</button> </li>
           <li><button class="button button-light" style="width: 200px;" ng-click="selData('女装')">女装</button> </li>
           <li><button class="button button-light" style="width: 200px;" ng-click="selData('男装')">男装</button> </li>
       </ul>
       <div id="content">
           
           <ul class="list">
               <li class="item" ng-repeat="g in goods">
                   <h3> {{g.proname}}</h3>
                   <img src="img/y.jpg" width="160px" />
                   <button class="button button-calm" style="float: right;" ng-click="goCart($index)">加入购物车</button>
                   <span style="float: right;">{{g.price|currency:"RMB ￥"}}</span>
               </li>
           </ul>
       </div>

++++++++++++++++++++++++++++++++++++++//结算的界面

<div class="alert alert-warning" ng-show="goodCart.length==0">
        您的购物车是空的。<a href="#/index" class="alert-link">继续购物</a>
</div>
<table ng-hide="goodCart.length==0">
   <tr>
       <th>数量</th>
       <th>商品名称</th>
       <th>单价</th>
       <th>小计</th>
   </tr>
   <tr ng-repeat="c in goodCart ">
           <td>{{c.num}}</td>
           <td>{{c.good.proname}}</td>
           <td>{{c.good.price}}</td>
           <td>{{c.good.price * c.num|currency:"RMB ￥"}}
           <button class="button-small" ng-click="del($index)">删除</button>

           </td>
   </tr>

</table>