商品订单信息管理

最新推荐文章于 2021-01-16 02:33:48 发布

你的孤独虽败犹荣

最新推荐文章于 2021-01-16 02:33:48 发布

阅读量735

点赞数

本文链接：https://blog.csdn.net/zhou742626/article/details/78859845

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="../../../js/angular/angular.js"></script>
       </script>
       <style type="text/css">
           .kuan {
               width: 100px;
               height: 20px;
               border-top-left-radius: 5em;
               border-top-right-radius: 5em;
               border-bottom-right-radius: 5em;
               border-bottom-left-radius: 5em;
               margin-left: 10px;
           }

           .sjh {
               width: 100px;
               height: 20px;
               border-top-left-radius: 5em;
               border-top-right-radius: 5em;
               border-bottom-right-radius: 5em;
               border-bottom-left-radius: 5em;
               margin-left: 10px;
           }
       </style>
       <script type="text/javascript">
           var app = angular.module("myApp", []);
           var time1 = new Date("2017-12-19 10:00:00");
           var time2 = new Date("2017-12-19 12:00:00");
           var time3 = new Date("2017-12-19 14:00:00");
           var time4 = new Date("2017-12-19 16:00:00");
           app.controller("myCtrl", function($scope) {

               $scope.shops = [{
                       "id": 123,
                       "sname": "iphonex",
                       "yname": "张三",
                       "tel": 13716167236,
                       "price": 8699,
                       "city": "北京",
                       "time": time1,
                       "orderState": true,
                       "state": false

                   },
                   {
                       "id": 456,
                       "sname": "iphone6",
                       "yname": "王红",
                       "tel": 10086121212,
                       "price": 5635,
                       "city": "郑州",
                       "time": time4,
                       "orderState": true,
                       "state": false
                   },
                   {
                       "id": 789,
                       "sname": "iphone7",
                       "yname": "赵小龙",
                       "tel": 13693324137,
                       "price": 6180,
                       "city": "北京",
                       "time": time3,
                       "orderState": false,
                       "state": false
                   },
                   {
                       "id": 110,
                       "sname": "iphone8",
                       "yname": "赵强",
                       "tel": 13722335577,
                       "price": 7190,
                       "city": "上海",
                       "time": time2,
                       "orderState": false,
                       "state": false
                   }
               ];

               //更改状态
               $scope.changeOrderState = function(shop) {
                   shop.orderState = true;
               }

               //批量删除已发货商品
               $scope.deleteSel = function() {
                   var selArr = [];
                   for(index in $scope.shops) {
                       if($scope.shops[index].state) { //多选框被选中的商品
                           if($scope.shops[index].orderState) { //多选框被选中的已发货商品
                               selArr.push($scope.shops[index]);
                           }
                       }
                   }

                   if(selArr.length > 0) {
                       for(index1 in selArr) {
                           for(index2 in $scope.shops) {
                               if(selArr[index1] == $scope.shops[index2]) {
                                   $scope.shops.splice(index2, 1);
                               }
                           }
                       }
                   }else{
                       alert("先选择被选中的已发货商品");
                   }
               }

               //点击列明进行排序
                   $scope.flag = "";
                   $scope.column = "id";
                   $scope.orderColumn = function(column){
                       //alert(column);
                       $scope.column = column;
                       if($scope.flag == ""){
                           $scope.flag = "-";
                       }else{
                           $scope.flag = "";
                       }
                   }

           });
       </script>
   </head>

   <body ng-app="myApp" ng-controller="myCtrl">
       <center>
           <h3>商品订单信息管理</h3>
           <table border="1" cellspacing="0" cellpadding="10">

               <input type="button" value="新增订单" />
               <input type="button" value="批量删除" ng-click="deleteSel()" />
               <input type="text" placeholder="按照商品名称查询..." class="kuan" ng-model="search" />
               <input type="text" placeholder="按照手机号查询..." class="sjh" ng-model="telNum" />

               <select style="margin-left: 30px;" ng-model="orderStateSel">
                   <option value="">--按照状态查询--</option>
                   <option value="true">--已发货--</option>
                   <option value="false">--未发货--</option>
               </select><br /><br />

               <tr>
                   <th><input type="checkbox" ng-click="selectFun()" ng-model="selsectAll" /></th>
                   <th>id <input type="submit" value="排序" ng-click="pid(shop.id)" /></th>
                   <th>商品名</th>
                   <th>用户名</th>
                   <th>手机号</th>
                   <th>价格<input type="submit" value="排序" </th>
                       <th>城市</th>
                       <th>下单时间：
                           <input type="button" ng-click="orderColumn('time')" value="排序" />
                       </th>
                       <th>状态</th>

               </tr>
               <tr ng-repeat="shop in shops | filter:{sname:search,tel:telNum,orderState:orderStateSel} | orderBy:flag+column">
                   <td><input type="checkbox" ng-model="shop.state" /></td>
                   <td>{{shop.id}}</td>
                   <td>{{shop.sname}}</td>
                   <td>{{shop.yname}}</td>
                   <td>{{shop.tel}}</td>
                   <td>{{shop.price | currency:"￥："}}</td>
                   <td>{{shop.city}}</td>
                   <td>{{shop.time | date:"yyyy-MM-dd hh:mm:ss"}}</td>
                   <td>
                       <button disabled="disabled" style="background: green; border: none;" ng-show="shop.orderState">已发货</button>
                       <button style="background: yellow; border: none;" ng-show="!shop.orderState" ng-click="changeOrderState(shop)">未发货</button>
                   </td>
               </tr>

           </table>
           <fieldset id="" style="width: 500px;">
               <legend>添加商品列表</legend>

               <table border="1" cellspacing="0" cellpadding="10">
                   <tr>
                       <td>id</td>
                       <td><input type="text" /></td>
                   </tr>
                   <tr>
                       <td>商品名</td>
                       <td><input type="text" /></td>
                   </tr>
                   <tr>
                       <td>用户名</td>
                       <td><input type="text" /></td>
                   </tr>
                   <tr>
                       <td>手机号</td>
                       <td><input type="text" /></td>
                   </tr>

                   <tr>
                       <td>价格</td>
                       <td><input type="text" /></td>
                   </tr>
                   <tr>
                       <td>城市</td>
                       <td><input style="border:1px solid red;" type="text" /></td>
                   </tr>
                   <tr>
                       <td>下单时间</td>
                       <td><input type="text" /></td>
                   </tr>
                   <tr>
                       <td colspan="2"><input type="submit" value="提交" /></td>
                   </tr>
               </table>
           </fieldset>

       </center>
   </body>

</html>