购物车页面跳转功能实现

最新推荐文章于 2026-05-08 14:27:02 发布

原创最新推荐文章于 2026-05-08 14:27:02 发布 · 2.3k 阅读

本内容遵循CC 4.0 BY-SA版权协议

本文介绍了一个电商应用中，从主页面跳转到购物车页面的功能实现。在主页面，用户可以浏览商品并点击按钮将商品加入购物车。购物车页面会显示商品的数量、名称、单价和小计，且当购物车为空时，提示用户继续购物。通过ng-click事件处理，实现了页面之间的数据交互和操作功能。

//功能实现页面主页面

<!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: 700px;
               margin: 0 auto;
               padding: 20px;
           }

           ul {
               float: left;
           }

           li {
               margin: 0px 5px 5px 5px;
           }
           table {
               width: 80%;
               border-bottom: 1px solid;
           }

           table tr td {
               margin: 3px;
           }
       </style>
       <script>
           angular.module("myApp", ["ionic"])
               .config(function($stateProvider,$urlRouterProvider) {
                   $stateProvider
                       .state("state1", {
                           url: "/index",
                           templateUrl: "views/index.html"

                       })
                       .state("state2", {
                           url: "/cart",
                           templateUrl: "views/cart.html"

                       })

                       $urlRouterProvider.otherwise("/index");

               }).service("prodata", function($http) {
                   this.cart = [];
                   this.data = [{
                           "proname": "天天特价S925银渐变天鹅项链吊坠女纯银锁骨链韩版简约生日送女友",
                           "price": 158,
                           "type": "饰品"
                       },
                       {
                           "proname": "羊剪绒外套短款女仿皮草大衣连帽皮毛一体狐狸毛领",
                           "price": 120,
                           "type": "女装"
                       },
                       {
                           "proname": "星星的你同款皮草大衣女中长款狐狸毛内胆仿皮草外套",
                           "price": 278,
                           "type": "女装"
                       },
                       {
                           "proname": "天天特价男士棉服冬季韩版潮流面包服男款棉衣冬天袄子男冬装外套",
                           "price": 88,
                           "type": "男装"
                       },
                       {
                           "proname": "天天特价花花公子贵宾马甲男秋冬季外套羽绒棉背心休闲马夹坎肩潮",
                           "price": 69,
                           "type": "男装"
                       },
                       {
                           "proname": "天天特价马丁靴女秋冬女鞋2017新款短靴女百搭英伦风裸靴平底女靴",
                           "price": 79,
                           "type": "鞋包"
                       }
                   ];
               })
               .controller("democ", function($scope, prodata, $filter, $state) {
//                   $state.go("state1");
                   //总价
                   $scope.sumPrice = 0;
                   $scope.num = 0;
                   $scope.datas = prodata.data;   //首页的所有商品
                   $scope.cart = []; //购物车中的数量
                   //购物车
                   $scope.shop = function(i) {
                       $scope.num = $scope.num + 1;
                       var pro = $scope.datas[i];
                       $scope.sumPrice = $scope.sumPrice + pro.price;
                       $scope.addCart(pro); //调用处理购物车的逻辑
                   }

                   $scope.addCart = function(good) {
                       var b = false;
                       for(var i = 0; i < $scope.cart.length; i++) {
                           if($scope.cart[i].good == good) {
                               $scope.cart[i].num++;
                               b = true;
                               return;
                           }

                       }
                       if(!b) {
                           $scope.cart.push({
                               "good": good,
                               "num": 1
                           });
                       }
                       console.log("购物车商品:", $scope.cart)
                   }
                   $scope.del = function(i) {
                       var num = --$scope.cart[i].num;

                       if(num == 0) {
                           $scope.cart.splice(i, 1);
                       }
                       $scope.num = $scope.num - 1;
                       var pro = $scope.datas[i];
                       $scope.sumPrice = $scope.sumPrice - pro.price;

                   }

                   $scope.selectData = function(type) {
                       //过滤数据
                       $f = $filter("filter");
                       $scope.datas = $f(prodata.data, {
                           "type": type
                       });
                   }
               })
       </script>
   </head>

   <body ng-app="myApp" ng-controller="democ">

       <div class="bar bar-header bar-positive">
           <a class="button" href="#/index">运动商城</a>
           <div class="buttons">
               <span class="title">您的购物车:{{num}} 个商品 {{sumPrice|currency:"RMB ¥"}}</span>
               <a class="button" href="#/cart">结算</a>
           </div>
       </div>

       <ion-nav-view>
           

       </ion-nav-view>
   </body>

</html>

//购物车页面

<ion-view view-title="运动商城">
    <ion-content style="padding-top: 50px;">
       <div class="alert alert-warning" ng-show="cart.length==0">
        您的购物车是空的。<a href="#/index" class="alert-link">继续购物</a>
    </div>
   <table ng-hide="cart.length==0">
      <tr>
          <td>数量</td>
          <td>商品名称</td>
          <td>单价</td>
          <td>小计</td>
      </tr>
      <tr ng-repeat="good in cart ">
          <td>{{good.num}}</td>
          <td>{{good.good.proname}}</td>
          <td>{{good.good.price|currency:"RMB ￥"}}</td>
          <td>{{good.good.price*good.num |currency:"RMB ￥"}} <button class="button-small" ng-click="del($index)">删除</button></td>

      </tr>
   </table>
    </ion-content>
</ion-view>

//主页面布局

    <ion-view view-title="运动商城">
    <ion-content style="padding-top: 50px;">
   <ul>
           <li>
               <a class="button " style="width: 150px;" ng-click="selectData('')">首页</a>
           </li>
           <li>
               <button class="button " style="width: 150px;" ng-click="selectData('女装')">女装</button>
           </li>
           <li>
               <button class="button " style="width: 150px;" ng-click="selectData('男装')">男装</button>
           </li>
           <li>
               <button class="button " style="width: 150px;" ng-click="selectData('饰品')">饰品</a>
           </li>
           <li>
               <button class="button " style="width: 150px;" ng-click="selectData('鞋包')">鞋包</button>
           </li>
       </ul>
       <div id="content">
           <ul class="list">
               <li class="item" ng-repeat="p in datas ">
                   <h3>{{p.proname}}</h3>
                   <img src="img/y.jpg" width="100px" />
                   <button style="float: right;" class="button button-small button-assertive" ng-click="shop($index)">加入购物车</button>
                   <span style="float: right;"> {{p.price|currency:"RMB ¥"}}</span>
               </li>
           </ul>
       </div>

    </ion-content>
</ion-view>