小型购物车2

来源：互联网发布：帝国cms 相关文章编辑：程序博客网时间：2024/04/28 23:59
<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style>            .yi{                width: 700px;                margin: 0 auto;            }            table{                width: 700px;            }            th{                height: 30px;            }            tr:nth-of-type(odd){background: white;}            tr:nth-of-type(even){background: white;}            .in{                width: 100px;            }        </style>        <script src="js/angular.min.js"></script>        <script>            angular.module("app",[])            .controller("democ",function($scope){                //数据                $scope.users=[                    {state:false,id:7,goods:"OPPO R9sk",name:"关羽",phone:15777777777,num:499900,city:"北京",zt:"未发货",date:"03-09 10:00"},                    {state:false,id:12,goods:"VIVO X20",name:"赵云",phone:13333333333,num:299800,city:"上海",zt:"未发货",date:"08-22 10:00"},                    {state:false,id:1,goods:"iPhone 8 Plus",name:"曹操",phone:15111111111,num:758800,city:"北京",zt:"未发货",date:"09-04 10:00"},                    {state:false,id:11,goods:"小*Note5",name:"黄忠",phone:13222222222,num:69900,city:"重庆",zt:"未发货",date:"02-28 10:00"},                    {state:false,id:10,goods:"小*Mix2",name:"黄盖",phone:13111111111,num:329900,city:"北京",zt:"未发货",date:"03-15 10:00"},                    {state:false,id:9,goods:"红*5A",name:"周瑜",phone:15999999999,num:59900,city:"重庆",zt:"未发货",date:"06-16 10:00"},                    {state:false,id:8,goods:"红*Note4X",name:"张飞",phone:15888888888,num:99900,city:"上海",zt:"未发货",date:"05-18 10:00"},                    {state:false,id:2,goods:"华为畅享6S",name:"刘备",phone:15222222222,num:89900,city:"天津",zt:"未发货",date:"08-09 10:00"},                    {state:false,id:6,goods:"三星GalaXy Note8",name:"张辽",phone:15666666666,num:259900,city:"未北京",zt:"未发货",date:"04-02 10:00"},                    {state:false,id:5,goods:"魅蓝5S",name:"夏侯淳",phone:15555555555,num:99900,city:"北京",zt:"未发货",date:"10-03 10:00"},                    {state:false,id:4,goods:"三星 Galaxy S7",name:"司马懿",phone:15444444444,num:299900,city:"北京",zt:"未发货",date:"06-02 10:00"},                    {state:false,id:3,goods:"努比亚Z17",name:"孙权",phone:15333333333,num:209900,city:"上海",zt:"未发货",date:"07-01 10:00"},                ]                //调整状态                $scope.tiaozheng=function(){                    $scope.zt=true;                }                //添加                $scope.add=function(){                    var id=$scope.tid;                    var goods=$scope.tgoods;                    var name=$scope.tname;                    var phone=$scope.tphone;                    var num=$scope.tnum;                    var city=$scope.tcity;                    var time=new Date();                    $scope.users.push({id:id,goods:goods,name:name,phone:phone,num:num,date:time})                    $scope.zt=false;                }                //全选                $scope.check=function(){                    var is=$scope.checks;                    for(var i in $scope.users){                        $scope.users[i].state=is;                    }                }                //批量删除                $scope.del=function(){                    for(var i=0;i<$scope.users.length;i++){                        if($scope.users[i].state){                            $scope.users.splice(i,1);                            i--;                        }                    }                }                //批量发货                $scope.f=function(){                    for(var i=0;i<$scope.users.length;i++){                        if($scope.users[i].state){                            $scope.users[i].zt="已发货";                        }                    }                }                //选择城市                $scope.shuzu1=["选择城市","北京","上海","重庆","天津"]                $scope.sel1=function(){                    var xz1=$scope.xz1;                    if(xz1=="选择城市"){                        $scope.citys=undefined;                    }else{                        $scope.citys=xz1;                    }                }            })        </script>    </head>    <body ng-app="app" ng-controller="democ">        <div class="yi">            <input type="text" placeholder="用户名搜索" ng-model="cname" class="in"/>            <input type="text" placeholder="手机号搜索" ng-model="cphone" class="in"/>            <select ng-options="x for x in shuzu1" ng-model="xz1" ng-init="xz1=shuzu1[0]" ng-change="sel1()">                {{x}}            </select>            <select ng-model="zts">                <option value="">选择状态</option>                <option value="未发货">未发货</option>                <option value="已发货">已发货</option>            </select>            <br />            <input type="button" style="color: white; margin-top: 10px; background: green;" value="新增订单" ng-click="tiaozheng()" ng-init="zt:false"/>            <input type="button" style="color: white; background: green;" value="批量发货" ng-click="f()"/>            <input type="button" style="color: white; background: red;" value="批量删除" ng-click="del()"/>            <table border="1" cellpadding="0" cellspacing="0" style="margin-top: 10px;">                <tr style="background: #999999;">                    <th><input type="checkbox" ng-model="checks" ng-click="check()"/></th>                    <th>ID</th>                    <th>商品名</th>                    <th>用户名</th>                    <th>手机号</th>                    <th>价格</th>                    <th>城市</th>                    <th>下单时间</th>                    <th>状态</th>                    <th>操作</th>                </tr>                <tr ng-repeat="u in users| filter:{name:cname} | filter:{phone:cphone} |filter:{city:citys} |filter:{zt:zts}">                    <th><input type="checkbox" ng-model="u.state"/></th>                    <th>{{u.id}}</th>                    <th>{{u.goods}}</th>                    <th>{{u.name}}</th>                    <th>{{u.phone}}</th>                    <th>{{u.num |  currency : '￥'}}</th>                    <th>{{u.city}}</th>                    <th>{{u.date | date: 'MM-dd hh:mm'}}</th>                    <th>                        <a ng-show="u.zt=='未发货'" href="" ng-click="u.zt='已发货'">                            {{u.zt}}                        </a>                        <span ng-show="u.zt=='已发货'">{{u.zt}}</span>                    </th>                    <th></th>                </tr>            </table>            <div class="er" style="margin-top: 10px;" ng-show="zt">                id:<input type="text" ng-model="tid"/><br />                商品名:<input type="text" ng-model="tgoods"/><br />                用户名:<input type="text" ng-model="tname"/><br />                手机号:<input type="text" ng-model="tphone"/><br />                价格:<input type="text" ng-model="tnum"/><br />                城市:<input type="text" ng-model="tcity"/><br />                <input type="button" value="保存" style="width: 200px;" ng-click="add()"/>            </div>        </div>    </body></html>
阅读全文
0 0