10.25_2

最新推荐文章于 2020-07-05 11:45:27 发布
百分之99的爱
最新推荐文章于 2020-07-05 11:45:27 发布
阅读量171
点赞数
本文链接：https://blog.csdn.net/dongchangqi95/article/details/78338969
版权
<!DOCTYPE html>
<html ng-app="OrderApp">
<head>
    <meta charset="UTF-8">
    <title>订单管理</title>
    <script type="text/javascript" src="jquery.1.12.4.js"></script>
    <script type="text/javascript" src="angular-1.3.0.js"></script>
    <script type="text/javascript" src="data.js"></script>
    <style type="text/css">
        * {
            font-size: 14px;
            margin: 0;
            padding: 0;
        }

        body {
            padding: 16px 32px;
        }

        .filter {
            position: relative;
            width: 800px;
            height: 40px;
            margin: 0 auto;
        }

        .filter input {
            width: 152px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
            padding-left: 8px;
        }

        .filter select {
            width: 86px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
        }

        .buttons {
            width: 800px;
            height: 40px;
            margin: 0 auto;
        }

        .buttons button {
            width: 80px;
            height: 24px;
            background-color: green;
            border: 0;
            border-radius: 4px;
            color: white;
        }

        .list {
            width: 800px;
            margin: 0 auto;
        }

        .list table tr {
            height: 32px;
        }

        .list thead tr {
            background-color: #777;
        }

        .list tbody tr:nth-child(odd) {
            background-color: #ccc;
        }

        .list tbody tr:nth-child(even) {
            background-color: #fff;
        }

        .list button {
            width: 40px;
            height: 18px;
            line-height: 18px;
            background-color: green;
            border: 0;
            border-radius: 4px;
            color: white;
            font-size: 8px;
        }

        .form {
            width: 460px;
            border: 1px solid #999;
            margin: 0 auto;
        }

        .form div {
            clear: both;
        }

        .form .formErr {
            border: 1px solid red;
        }

        .form .label {
            display: block;
            float: left;
            width: 80px;
            height: 40px;
            line-height: 40px;
            text-align: end;
        }

        .form .txt {
            display: block;
            float: left;
            width: 340px;
            height: 40px;
            line-height: 40px;
            padding-left: 16px;
        }

        .form input {
            width: 312px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
            padding-left: 8px;
        }

        .form select {
            width: 86px;
            height: 24px;
            border: 1px solid #999;
            border-radius: 4px;
        }

        .form button {
            width: 56px;
            height: 24px;
            background-color: green;
            border: 0;
            border-radius: 4px;
            color: white;
        }

        .form .errTips {
            width: 226px;
            background-color: lightpink;
            color: darkred;
            border-radius: 4px;
            margin-left: 96px;
            margin-top: 6px;
            margin-bottom: 4px;
            padding: 16px 48px;
        }
    </style>
    <script type="text/javascript">
        var app = angular.module("OrderApp", []);
        app.controller("OrderCtrl", function ($scope) {
            $scope.data = data;

            $scope.filterByMonth = function (order) {
                if ($scope.filter_begin_month == undefined || $scope.filter_begin_month == "") {
                    return true;
                }

                if ($scope.filter_end_month == undefined || $scope.filter_end_month == "") {
                    return true;
                }

                if ($scope.filter_begin_month > $scope.filter_end_month) {
                    return true;
                }

                var month = order.dtCreated.substr(0, order.dtCreated.indexOf("-"));
                month = parseInt(month);
                return (month >= $scope.filter_begin_month && month <= $scope.filter_end_month);
            };

            $scope.changePriceOrderType = function () {
                if ($scope.price_order_type == "price") {
                    $scope.price_order_type = "-price";
                } else {
                    $scope.price_order_type = "price";
                }
            };
        });
    </script>
</head>
<body ng-controller="OrderCtrl">
<div class="filter">
    <input type="text" placeholder="用户名搜索" ng-model="filter_user_name"/>
    <input type="text" placeholder="手机号搜索" ng-model="filter_phone"/>
    <select class="choose_city" ng-model="filter_city">
        <option value="">选择城市</option>
        <option value="北京">北京</option>
        <option value="上海">上海</option>
        <option value="天津">天津</option>
        <option value="重庆">重庆</option>
    </select>
    <select class="choose_status" ng-model="filter_status">
        <option value="">选择状态</option>
        <option value="待发货">待发货</option>
        <option value="已发货">已发货</option>
        <option value="已收货">已收货</option>
    </select>
    <select class="choose_time_begin_month" ng-model="filter_begin_month">
        <option value="">开始月份</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select> -
    <select class="choose_time_end_month" ng-model="filter_end_month">
        <option value="">结束月份</option>
        <option value="1">01</option>
        <option value="2">02</option>
        <option value="3">03</option>
        <option value="4">04</option>
        <option value="5">05</option>
        <option value="6">06</option>
        <option value="7">07</option>
        <option value="8">08</option>
        <option value="9">09</option>
        <option value="10">10</option>
        <option value="11">11</option>
        <option value="12">12</option>
    </select>
    <select class="id_order" ng-model="id_order_type">
        <option value="">ID排序</option>
        <option value="id">ID正序</option>
        <option value="-id">ID倒序</option>
    </select>
</div>

<div class="buttons">
    <button class="add_btn">新增订单</button>
    <button class="deliver_btn">批量发货</button>
    <input type="hidden" ng-model="price_order_type" ng-init="price_order_type='price'"/>
</div>

<div class="list">
    <table width="800px" cellspacing="0" rules="cols" border="1px">
        <thead>
        <tr>
            <th width="4%">
                <input type="checkbox"/>
            </th>
            <th width="6%">ID</th>
            <th width="14%">商品名</th>
            <th width="12%">用户名</th>
            <th width="16%">手机号</th>
            <th width="12%">价格
                <button ng-click="changePriceOrderType()">排序</button>
            </th>
            <th width="10%">城市</th>
            <th width="18%">下单时间
                <button>排序</button>
            </th>
            <th width="8%">状态</th>
        </tr>
        </thead>
        <tbody>
        <tr align="center"
            ng-repeat="order in data | filter: {userName: filter_user_name} | filter: {phone: filter_phone} | filter: {city: filter_city} | filter: {status: filter_status} | filter: filterByMonth | orderBy: id_order_type | orderBy: price_order_type">
            <td>
                <input type="checkbox"/>
            </td>
            <td>{{order.id}}</td>
            <td>{{order.goodsName}}</td>
            <td>{{order.userName}}</td>
            <td>{{order.phone}}</td>
            <td>{{order.price | currency: "￥"}}</td>
            <td>{{order.city}}</td>
            <td>{{order.dtCreated}}</td>
            <td>
                <a href="javascript: void(0);" ng-show="order.status=='待发货'">发货</a>
                <span ng-show="order.status=='已发货'">已发货</span>
                <span ng-show="order.status=='已收货'">已收货</span>
            </td>
        </tr>
        </tbody>
    </table>
</div>

<div class="form" style="display: block">
    <div>
        <span class="label">新增订单</span>
        <span class="txt"></span>
    </div>
    <div>
        <span class="label">商品名</span>
        <span class="txt"><input type="text" placeholder="6-20个字符"/></span>
    </div>
    <div>
        <span class="label">用户名</span>
        <span class="txt"><input type="text" placeholder="4-16个字符" class="formErr"/></span>
    </div>
    <div>
        <span class="label">手机号</span>
        <span class="txt"><input type="text"/></span>
    </div>
    <div>
        <span class="label">城市</span>
        <span class="txt">
            <select>
                <option value="">选择城市</option>
                <option value="北京">北京</option>
                <option value="上海">上海</option>
                <option value="天津">天津</option>
                <option value="重庆">重庆</option>
            </select>
        </span>
    </div>
    <div class="errTips">
        <ul>
            <li>商品名不能为空！</li>
            <li>商品名必须是6-20个字符！</li>
            <li>用户名不能为空！</li>
            <li>用户名必须是4-16个字符！</li>
            <li>手机号不能为空！</li>
            <li>手机号格式不正确！</li>
            <li>请选择城市！</li>
        </ul>
    </div>
    <div>
        <span class="label"></span>
        <span class="txt"><button>提交</button></span>
    </div>
    <div style="clear: both"></div>
</div>
</body>
</html>
百分之99的爱
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
10.25_2

html>html ng-app="OrderApp">head> meta charset="UTF-8"> title>订单管理title> script type="text/javascript" src="jquery.1.12.4.js">script> script type="text/javascript" src="angular-1.3.0
复制链接

扫一扫