HTML angular:订单查询添加等

最新推荐文章于 2021-06-25 18:17:52 发布

qq_4027

最新推荐文章于 2021-06-25 18:17:52 发布

阅读量285

点赞数

分类专栏：网页

网页专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body
        {
            width: 1600px;
            margin: 0 auto;
            margin-top: 50px;
            text-align: center;
        }
        table
        {
            width: 1000px;
            margin: auto;
            margin-top: 50px;
        }
        div
        {
            margin: auto;
            margin-top: 20px;
            width: 500px;
            height: 500px;
            background: #c0a16b;
        }
        .b
        {
            background: red;
            width: 200px;
            height:200px;
        }
        button
        {
            background: #2aabd2;
        }
        .red
        {
            border: 1px solid red;
        }
    </style>
    <script type="text/javascript" src="js/angular.js" ></script>
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
             $scope.data=
                 [
                     {done:false,sname:"iPhone4",name:"张三",phone:"15111111111",price:4999,city:"北京",time:"08-01 10:00",zhuai:"发货"},
                     {done:false,sname:"小米6",name:"李四",phone:"1522222222",price:2999,city:"北京",time:"08-02 10:00",zhuai:"发货"},
                     {done:false,sname:"华为P9",name:"王五",phone:"15333333333",price:3999,city:"上海",time:"09-03 10:00",zhuai:"已发货"},
                     {done:false,sname:"oppo r11",name:"赵六",phone:"154444444444",price:4999,city:"天津",time:"09-05 10:00",zhuai:"已收货"},
                     {done:false,sname:"vivo",name:"周七",phone:"15555555555",price:2999,city:"重庆",time:"10-04 10:00",zhuai:"已发货"},
                 ]
            //隐藏
            $scope.show=false;
             //新增订单
            $scope.newD=function () {
                $scope.show=true;
            }
            $scope.uname="";
            $scope.uphone="";
            $scope.ucity="选择城市";
            //城市查询
            $scope.citys=function (item) {
               if( $scope.ucity!="选择城市")
               {
                       if( $scope.ucity==item.city)
                       {
                           return true;
                       }
                       else
                       {
                           return false;
                       }
               }
               else
               {
                   return true;
               }
            }
            //状态查询
            $scope.uzhuai="状态";
            //城市查询
            $scope.zhuais=function (item) {
                if( $scope.uzhuai!="状态")
                {
                    if( $scope.uzhuai==item.zhuai)
                    {
                        return true;
                    }
                    else
                    {
                        return false;
                    }
                }
                else
                {
                    return true;
                }
            }
            //状态变化
            $scope.zhuang=function (index) {
                if($scope.data[index].zhuai=="发货")
                {
                    $scope.data[index].zhuai="已发货";
                }
                if($scope.data[index].zhuai=="已发货")
                {
                    $scope.data[index].zhuai="已收货";
                }
            }
            //排序
            $scope.sortname="";

            $scope.pai=function (name) {
                $scope.sortname=name;
            }
            //批量删除
            $scope.delete=function () {
                var n=0;
                for(var i=0;i<$scope.data.length;i++)
                {
                    if($scope.data[i].done==true)
                    {
                        $scope.data.splice(i,1);
                        n++;
                        i--;
                    }
                }
                if(n==0)
                {
                    alert("请勾选!!!");
                }
            }
            //全选反选
            $scope.check=false;
            $scope.checkAll=function () {
                for(var i=0;i<$scope.data.length;i++)
                {
                    if( $scope.check==true)
                    {
                     $scope.data[i].done=true;
                    }
                    else
                    {
                        $scope.data[i].done=false;
                    }
                }
            }
            //全选按钮状态
            $scope.checks=function () {
                var n=0;

                for(var i=0;i<$scope.data.length;i++)
                {
                    if($scope.data[i].done==true)
                    {
                        n++;
                    }
                    else
                    {
                        n--;
                    }
                }
                if(n==$scope.data.length)
                {
                    $scope.check=true;
                }
                else
                {
                    $scope.check=false;
                }
            }
            //日期之间
            $scope.kai="开始月份";
            $scope.jie="结束月份";
            $scope.pan=function () {

                if( $scope.kai!="开始月份" && $scope.jie!="结束月份")
                {
                    //装换为int类型判断
                     var kai=parseInt( $scope.kai);
                     var jie=parseInt($scope.jie);
                     for(var i=0;i<$scope.data.length;i++)
                     {
                         //拆分时间
                         var arr=$scope.data[i].time.split("-");
                         var da=parseInt(arr[0]);
                         console.log(da);
                         //判断
                         if(da>=kai && da<=jie)
                         {
                             return true;
                         }
                         else
                         {
                             return false;
                         }
                     }
                }
                else
                {
                    return true;
                }
            }
            //添加新客户
            $scope.newsname="";
            $scope.newname="";
            $scope.newphone="";
            $scope.b=false;
            $scope.redcheck=false;
            $scope.newcity="请选择";
            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;
            $scope.tj=function () {

                if($scope.newsname==""|| $scope.newsname.length<6 || $scope.newsname.length>20 || $scope.newname.length<2 || $scope.newname>16 || $scope.newcity=="请选择")
                {
                    $scope.b=true;
                    $scope.redcheck=true;
                }
                else
                {
                    $scope.data.push({done:false,sname: $scope.newsname,name:$scope.newname,phone:$scope.newphone,price:1999,city:$scope.newcity,time:myTime,zhuai:"发货"})
                    $scope.b=false;
                    $scope.redcheck=false;
                }
            }
        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<input type="text" placeholder="用户名搜索" ng-model="uname">
<input type="text" placeholder="手机号搜索" ng-model="uphone">
<select ng-model="ucity">
    <option>选择城市</option>
    <option>北京</option>
    <option>上海</option>
    <option>天津</option>
    <option>重庆</option>
</select>
<select ng-model="uzhuai">
    <option>状态</option>
    <option>待发货</option>
    <option>发货</option>
    <option>已收货</option>
    <option>已发货</option>
</select>
<select ng-model="kai">
    <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="jie" ng-change="pan()">
    <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/><br/>
<button ng-click="newD()">新增订单</button><button ng-click="delete()">批量删除</button>
<table    border="1px solide #000">
    <thead>
    <tr>
        <th><input type="checkbox" ng-model="check" ng-click="checkAll()"></th>
        <th>下标<span><button ng-click="pai('$index')">排序</button></span></th>
        <th>商品名称</th>
        <th>用户名</th>
        <th>手机号</th>
        <th>价格<span><button ng-click="pai('price')">排序</button></span></th>
        <th>城市</th>
        <th>下单时间<span><button ng-click="pai('time')">排序</button></span></th>
        <th>状态</th>
    </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in data|filter:{'name':uname}|filter:{'phone':uphone}|filter:citys|filter:zhuais|orderBy:sortname|filter:pan">
            <td><input type="checkbox" ng-model="item.done" ng-click="checks()"></td>
            <td>{{$index}}</td>
            <td>{{item.sname}}</td>
            <td>{{item.name}}</td>
            <td>{{item.phone}}</td>
            <td>{{item.price|currency:"￥"}}</td>
            <td>{{item.city}}</td>
            <td>{{item.time}}</td>
            <td ng-click="zhuang($index)">{{item.zhuai}}</td>
        </tr>
    </tbody>
</table>
<div ng-show="show">
<h2>新增订单</h2>
    商品名:<input type="text" placeholder="6-20个字符" ng-class="{red:redcheck}" ng-model="newsname"><br/><br/>
    用户名:<input type="text" placeholder="4-16个字符" ng-class="{red:redcheck}" ng-model="newname"><br/><br/>
    手机号:<input type="text" ng-class="{red:redcheck}" ng-model="newphone"><br/><br/>
    城市:
    <select ng-model="newcity">
        <option>请选择</option>
        <option>北京</option>
        <option>上海</option>
        <option>天津</option>
        <option>重庆</option>
        </option>
    </select><br/><br/>
    <div class="b" ng-show="b">
        <p>商品名不能为空!</p>
        <p>商品名必须是6-12个字符!</p>
        <p>用户名不能为空!</p>
        <p>用户名必须是4-16个字符!</p>
        <p>手机号不能为空!</p>
    </div>
    <button ng-click="tj()">提交</button>
</div>
</body>
</html>