购物车发货

来源：互联网发布：环保部水质检测数据编辑：程序博客网时间：2024/06/10 22:19

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/angular.js"></script>
<script type="text/javascript" src="js/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: "发货",
chek: false
}, {
id: 2,
goodName: "小米6",
userName: "李四",
num: 155666666666666,
price: 2999.00,
city: "上海",
time: "09-01 10:00",
state: "已发货",
chek: false
}, {
id: 3,
goodName: "华为P9",
userName: "王五",
num: 15577777777777,
price: 3999.00,
city: "天津",
time: "10-01 10:00",
state: "已收货",
chek: false
}, {
id: 4,
goodName: "OPPO R11",
userName: "赵六",
num: 155888888888,
price: 4999.00,
city: "重庆",
time: "11-11 10:00",
state: "发货",
chek: false
}];
//批量删除
$scope.deleteSel = function() {
var userNames = [];
//遍历users数组，获取状态是选中的user对象的名字
for(index in $scope.orders) {
if($scope.orders[index].chek == true) {
userNames.push($scope.orders[index].goodName);
}
}

if(userNames.length > 0) {
if(confirm("是否删除选中项？")) {
for(i in userNames) {
var goodName = userNames[i];
for(i2 in $scope.orders) {
if($scope.orders[i2].goodName == goodName) {
//alert($scope.orders[i2].goodName);
$scope.orders.splice(i2, 1);
}
}
}
}
} else {
alert("请选择删除项");
}
}
//定义跳转方法
$scope.goToPath = function() {
$location.path("/addOrder");
}
//全选
$scope.selectAll = false;
$scope.selectAllFun = function() {
if($scope.selectAll) {
for(index in $scope.orders) {
$scope.orders[index].chek = true;
}
} else {
for(index in $scope.orders) {
$scope.orders[index].chek = false;
}
}
}
//反选
$scope.checkSelectAll = function() {
var flag = false;
for(index in $scope.orders) {
if($scope.orders[index].chek) {

} else {
flag = true;
}
}
//至少有一个没有被选中
if(flag) {
$scope.selectAll = false;
} else {
$scope.selectAll = true;
}
};
$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 = "已发货";
}
//排序
$scope.orderID = function (desc, od) {
$scope.order = 'iden';
}
$scope.orderPrice = function (desc, od) {
$scope.order = 'price';
}
$scope.orderTime = function (desc, od) {
$scope.order = 'downtime';
}
});
//添加订单控制器
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" ng-model="na" />
<input type="text" placeholder="手机号搜索" size="8" ng-model="telp" />
<select ng-model="cty">
<option>选择城市</option>
<option>北京</option>
<option>上海</option>
<option>天津</option>
<option>重庆</option>
</select>
<select ng-model="sta">
<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>
<button ng-click="deleteSel()">批量删除</button><br /><br />
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()" /> </th>
<th>ID　<button ng-click="orderID(desc=!desc)">排序</button></th>
<th>商品名</th>
<th>用户名</th>
<th>手机号</th>
<th>价格　<button ng-click="orderPrice(desc=!desc)">排序</button></th>
<th>城市</th>
<th>下单时间<button ng-click="orderTime(desc=!desc)">排序</button></th>
<th>状态</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="order in orders|orderBy:order:desc|filter:{userName:na}|filter:{num:telp}|filter:{city:cty}|filter:{state:sta}" ng-if="filterTime($index)">
<td><input type="checkbox" ng-model="order.chek" ng-click="checkSelectAll()" /> </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