订单

来源：互联网发布：西安军工知乎编辑：程序博客网时间：2024/04/27 15:11

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <script type="text/javascript" src="../AngularJS/angular.min.js" ></script>
       <script type="text/javascript" src="../AngularJS/angular-route.js" ></script>
       <script>
           var app = angular.module("myApp",['ngRoute']);
           //配置路由
           app.config(["$routeProvider",function($routeProvider){
               $routeProvider
                   .when("/",{})
                   .when("/addOrder",{
                       controller:"addOrderCtrl",
                       templateUrl:"addOrder.html"
                   })
                   .otherwise({redirectTo:"/addOrder"});
           }]);
           app.controller("myCtrl",function($scope,$location){
               //数据源
               $scope.orders = [{
                   id:1,
                   goodName:"iPone4",
                   userName:"张三",
                   num:15555555555555,
                   price:4999.00,
                   city:"北京",
                   time:"08-01 10:00",
                   state:"发货"
               },{
                   id:2,
                   goodName:"小米6",
                   userName:"李四",
                   num:155666666666666,
                   price:2999.00,
                   city:"上海",
                   time:"09-01 10:00",
                   state:"已发货"
               },{
                   id:3,
                   goodName:"华为P9",
                   userName:"王五",
                   num:15577777777777,
                   price:3999.00,
                   city:"天津",
                   time:"10-01 10:00",
                   state:"已收货"
               },{
                   id:4,
                   goodName:"OPPO R11",
                   userName:"赵六",
                   num:155888888888,
                   price:4999.00,
                   city:"重庆",
                   time:"11-11 10:00",
                   state:"发货"
               }];

               //定义跳转方法
               $scope.goToPath = function(){
                   $location.path("/addOrder");
               }

               $scope.startTime = "开始月份";
               $scope.endTime = "结束月份";
               //过滤时间
               $scope.filterTime = function(index){
                   //获得开始和结束月份

                   //获取当前订单的时间月份
                   var time = $scope.orders[index].time;
                   var month = parseInt(time.split("-")[0]);

                   if($scope.startTime == "开始月份" || $scope.endTime == "结束月份"){
                       return true;
                   }else{
                       var start = parseInt($scope.startTime);
                       var end = parseInt($scope.endTime);

                       if(month >=start && month<=end ){
                           return true;
                       }else{
                           return false;
                       }
                   }
               }

               //更改状态
               $scope.changeState = function(index){
                   $scope.orders[index].state = "已发货";
               }

           });
           //添加订单控制器
           app.controller("addOrderCtrl",function($scope){
               $scope.goodName = "";
               $scope.userName = "";
               $scope.num = "";
               $scope.city = "选择城市";

               $scope.li1 = false;
               $scope.li2 = false;
               $scope.li3 = false;
               $scope.li4 = false;
               $scope.li5 = false;
               $scope.li6 = false;
               $scope.li7 = false;


               $scope.sub = function(){
                   //判断商品名是否为空
                   if($scope.goodName == null || $scope.goodName == ""){
                       $scope.li1 = true;
                   }else{
                       $scope.li1 = false;
                       //判断商品名是否符合格式
                       if($scope.goodName.length <= 6 || $scope.goodName.length >= 20){
                           alert("asf")
                           $scope.li2 = true;
                       }else{
                           $scope.li2 = false;
                       }
                   }
                   //判断用户名是否为空
                   if($scope.userName == null || $scope.userName == ""){
                       $scope.li3 = true;
                   }else{
                       $scope.li3 = false;
                       //判断用户名是否符合格式
                       if($scope.userName.length <= 4 || $scope.userName.length >= 16){
                           $scope.li4 = true;
                       }else{
                           $scope.li4 = false;
                       }
                   }
                   //判断手机号是否为空
                   if($scope.num == null || $scope.num == ""){
                       $scope.li5 = true;
                   }else{
                       $scope.li5 = false;
                       //判断手机号是否符合格式
                       alert($scope.num.length);
                       if($scope.num.length == 11){
                           if(isNaN($scope.num)){
                               $scope.li6 = true;
                           }else{
                               $scope.li6 = false;
                           }
                       }else{
                           $scope.li6 = true;
                       }
                   }
                   //判断手机号是否符合格式
                   if($scope.city == "选择城市"){
                       $scope.li7 = true;
                   }else{
                       $scope.li7 = false;
                   }


                   if(!$scope.li1 && !$scope.li2 && !$scope.li3 && !$scope.li4 && !$scope.li5 && !$scope.li6 && !$scope.li7){
                       //全显示，格式全不正确，才能进来
                       //获得ID
                       var idMax = 0;
                       for(index in $scope.orders){
                           if($scope.orders[index].id>idMax){
                               idMax = $scope.orders[index].id;
                           }
                       }
                       //alert("添加");
                       var date = new Date();
                       var month = date.getMonth()+1;
                       var day = date.getDate();
                       var hours = date.getHours();
                       var minute = date.getMinutes();
                       var myTime = month+"-"+day+" "+hours+":"+minute;
                       var order = {
                           id:idMax+1,
                           goodName:$scope.goodName,
                           userName:$scope.userName,
                           num:$scope.num,
                           price:2999.00,
                           city:$scope.city,
                           time:myTime,
                           state:"发货"
                       };
                       //将订单添加到数据源
                       $scope.orders.push(order);
                   }else{
                       //
                   }
               }
           });
       </script>
   </head>
   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>订单页面</h3>
           <input type="text" placeholder="用户名搜索" size="8" />
           <input type="text" placeholder="手机号搜索" size="8" />
           <select>
               <option>选择城市</option>
               <option>北京</option>
               <option>上海</option>
               <option>天津</option>
               <option>重庆</option>
           </select>
           <select>
               <option>选择状态</option>
               <option>发货</option>
               <option>已发货</option>
               <option>已收货</option>
           </select>
           <select ng-model="startTime">
               <option>开始月份</option>
               <option>01</option>
               <option>02</option>
               <option>03</option>
               <option>04</option>
               <option>05</option>
               <option>06</option>
               <option>07</option>
               <option>08</option>
               <option>09</option>
               <option>10</option>
               <option>11</option>
               <option>12</option>
           </select>-
           <select ng-model="endTime">
               <option>结束月份</option>
               <option>01</option>
               <option>02</option>
               <option>03</option>
               <option>04</option>
               <option>05</option>
               <option>06</option>
               <option>07</option>
               <option>08</option>
               <option>09</option>
               <option>10</option>
               <option>11</option>
               <option>12</option>
           </select><br /><br />
           <button ng-click="goToPath()">新增订单</button>
           <button>批量发货</button><br /><br />
           <table border="1 solid blue" cellpadding="10" cellspacing="0">
               <thead>
                   <tr>
                       <th><input type="checkbox" /> </th>
                       <th>ID　排序</th>
                       <th>商品名</th>
                       <th>用户名</th>
                       <th>手机号</th>
                       <th>价格　排序</th>
                       <th>城市</th>
                       <th>下单时间　排序</th>
                       <th>状态</th>
                   </tr>
               </thead>
               <tbody>
                   <tr ng-repeat="order in orders" ng-if="filterTime($index)">
                       <td><input type="checkbox" /> </td>
                       <td>{{order.id}}</td>
                       <td>{{order.goodName}}</td>
                       <td>{{order.userName}}</td>
                       <td>{{order.num}}</td>
                       <td>{{order.price}}</td>
                       <td>{{order.city}}</td>
                       <td>{{order.time}}</td>
                       <td>
                       <span ng-if="order.state == '发货'"><a ng-click="changeState($index)" href="#">{{order.state}}</a></span>
                       <span ng-if="order.state == '已发货'">{{order.state}}</span>
                       <span ng-if="order.state == '已收货'">{{order.state}}</span>
                       </td>
                   </tr>
               </tbody>
           </table>
       </center>

       
       <script type="text/ng-template" id="addOrder.html">
           <center>
               <h3>新增订单</h3>
               商品名：<input type="text" ng-model="goodName" placeholder="6-20个字符"/><br /><br />
               用户名：<input type="text" ng-model="userName" placeholder="4-16个字符"/><br /><br />
               手机号：<input type="text" ng-model="num" placeholder="4-16个字符"/><br /><br />
               城市：<select ng-model="city">
                       <option>选择城市</option>
                       <option>北京</option>
                       <option>上海</option>
                       <option>天津</option>
                       <option>重庆</option>
               </select><br />
               <ul>
                   <li ng-show="li1">商品不能为空</li>
                   <li ng-show="li2">商品名必须是6-20个字符</li>
                   <li ng-show="li3">用户名不能为空</li>
                   <li ng-show="li4">用户名必须是4-16个字符</li>
                   <li ng-show="li5">手机号不能为空</li>
                   <li ng-show="li6">手机号格式不正确</li>
                   <li ng-show="li7">请选择城市</li>
               </ul>
               <input ng-click="sub()" type="button" value="提交"/><br />
           </center>
       </script>

       <div ng-view>

       </div>
   </body>
</html>

阅读全文

0 0