ionic购物车

最新推荐文章于 2019-01-09 16:02:21 发布

biggrand

最新推荐文章于 2019-01-09 16:02:21 发布

阅读量621

点赞数

文章标签： ionic

本文链接：https://blog.csdn.net/biggrand/article/details/78576746

版权

<!DOCTYPE html>
<html>

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

        .p1 {
            margin-left: 900px;
        }

        .dv1 {
            margin: 20px;
            width: 200px;
            float: left;
        }

        .dv2 {
            margin: 20px;
            float: left;
            width: 900px;
        }

        .img1 {
            width: 50px;
            height: 50px;
            float: left;
        }

        .p3 {
            background-color: green;
            float: right;
            margin-top: -20px;
            margin-right: 10px;
        }

        a {
            text-decoration: none;
        }
    </style>
    <script>
        angular.module("myApp", ["ionic"])
            //使用路由点击 运动商城 时，下面的div跳至购物车联1.html页面
            .config(function($stateProvider) {
                $stateProvider
                    .state("state1", {
                        url: "/index",
                        templateUrl: "购物车联1.html"
                    })
                    .state("state2", {
                        url: "/tocart", //点击 结算超链接的路径    href="#/cart"
                        templateUrl: "购物车联2.html"
                    })
            })
            .controller("OneDeom", 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) {
                    $scope.getDatas = resp;
                    //                      $scope.goods = resp;
                    datagoods = resp;

                })
                //点击分类,显示对应类型的数据
                $scope.selData = function(t) {
                    $f = $filter("filter"); //从服务$filter中获取能够过滤数组的 过滤器
                    $scope.getDatas = $f(datagoods, {
                        "type": t
                    });
                }
                $scope.goCart = function(i) { //i 是显示商品的下标
                    //获取点击的商品信息
                    var good = $scope.getDatas[i];
                    $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="OneDeom">
    <ion-header-bar class="bar bar-dark">
        <a class="button" href="#/index">
            <h1>运动商城</h1></a>
        <p class="p1">您的购物车:{{count}} {{sumprice|currency:"RMB ￥"}}
            <a class="button" href="#/tocart">结算</a>
        </p>
    </ion-header-bar>
    <br /><br /><br />
    <!--购物车联1.html 页面通过 ui-view 放到这里-->
    <div ui-view ></div>
</body>
</html>

购物车联1 切换的商品页面

<div class="dv1">
<a href="#/s0"><button class="button button-block " ng-click=" selData( '') ">首页</button></a>
<a href="#/s1 "><button class="button button-block " ng-click="selData('女士衣服')">商品01</button>
</a>
<a href="#/s2"><button class="button button-block " ng-click=" selData( '男士上衣') ">商品02</button></a>
<a href="#/s2 "><button class="button button-block " ng-click="selData('电脑')">商品03</button>
</a>
<button class="button button-block">商品04</button>
</div>
<div class="dv2 list">
    <li class="item item-icon-left" ng-repeat="g in getDatas">
        <span style="width: 20px;"><h2>{{g.name}}</h2></span>
        <span class="img1"><img src="{{g.photo}}" style="width: 100px;height: 100px;"/></span>
        <span class="p3" style="color: #fff;font-size: 20px;">{{g.price|currency:"RMB￥"}}</span>
        <button class="button button-calm " ng-click="goCart($index)" style="float: right;margin-right: 10px;margin-top: 10px;">加入购物车</button>
    </li>
</div>

购物车联2 购物车的页面

    <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>

图示

您的购物车是空的。继续购物

数量	商品名称	单价	小计
{{c.num}}	{{c.good.proname}}	{{c.good.price}}	{{c.good.price * c.num\|currency:”RMB ￥”}} 删除

存放商品信息的json文件

[
    {
        "name": "888888888888888888888888",
        "type": "女士衣服",
        "photo": "img/二哈.jpg",
        "price": 1000
    },
    {
        "name": "77777777777777777777",
        "type": "男士上衣",
        "photo": "img/二哈.jpg",
        "price": 900
    },
    {
        "name": "6666666666666666666666",
        "type": "电脑",
        "photo": "img/二哈.jpg",
        "price": 800
    },
    {
        "name": "555555555555555555555555555",
        "type": "女士衣服",
        "photo": "img/二哈.jpg",
        "price": 700
    },
    {
        "name": "444444444444444444444",
        "type": "女士衣服",
        "photo": "img/二哈.jpg",
        "price": 600
    },
    {
        "name": "3333333333333333333333333",
        "type": "男士上衣",
        "photo": "img/二哈.jpg",
        "price": 500
    }
]

biggrand

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ionic购物车

<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title></title> <link href="lib/css/ionic.min.css" rel="stylesheet" /> <script src="lib/js/ionic.bundle.min.js"></script> <style
复制链接

扫一扫