购物车简单

最新推荐文章于 2023-12-28 16:18:25 发布

人道烘炉_L

最新推荐文章于 2023-12-28 16:18:25 发布

阅读量239

点赞数

本文链接：https://blog.csdn.net/My_emotions_L/article/details/78578576

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />

       <title></title>
       <style>
           .button{
               color: lightslategray;
               font-size: 24px;
               margin-left: 17px;
               margin-top: 5px;
               border: none;
           }
           .t2{
               color: lightslategray;
               font-size: 17px;
               position: absolute;
               right: 73px;
               top: 13px;

           }
           .t3{
               position: absolute;
               right: 13px;

           }

           .t5{
               width: 100%;
               width: 1300px;
               height: 1000px;
               background-color: #E4E5E7;
               margin-left: 45px;
               float: left;
           }
       </style>
       <link rel="stylesheet" href="lib/css/ionic.min.css" />
       <script src="lib/js/ionic.bundle.js" ></script>
       <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">

            <div class="bar bar-header bar-dark">
              <div ><a class="button" href="#/index">运动商城</a></div>
              <div class="t2">您的购物车：{{count}} {{sumprice|currency:"RMB ￥"}}</div>
             <div class="t3"><a href="#/tocart"><button class="button button-stable">结账</button></a></div>
            </div>
       <div>

       <div ui-view class="t5" style="margin-top: 70px;"></div>

       </div>

   </body>
</html>