订单发货试手

举一个栗子
于 2018-07-01 17:34:35 发布
阅读量93
点赞数
分类专栏：网页前段文章标签： anjularjs
网页前段专栏收录该内容
3 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>周三-练习题</title>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				font-size: 13px;
				color: #2F4F4F;
			}
			
			body {
				background-image: url(img/5ab1258a590c8.gif);
				background-size: cover;
			}
			
			#main {
				width: 1000px;
				margin: 0 auto;
				background-color: rgba(200, 200, 200, 0.3);
				text-align: center;
			}
			
			tr:nth-child(even) {
				background-color: whitesmoke;
			}
			
			tr:nth-child(odd) {
				background-color: white;
			}
			
			#bt {
				background-color: lightgray;
			}
			
			table {
				width: 95%;
				margin: 0 auto;
				padding-bottom: 50px;
			}
			
			[type=button] {
				border: 0px;
				border-radius: 6px;
				cursor: pointer;
				background-color: lightpink;
			}
			
			[value="已发货"] {
				background-color: lightgreen;
			}
			
			[value="未发货"] {
				background-color: lightblue;
			}
			
			#top {
				display: flex;
				justify-content: space-around;
				width: 750px;
				margin: 0 auto;
			}
			
			fieldset{
				width: 800px;
				margin: 0 auto;
			}
			
			[value="▽"]{
				background-color: lightcoral;
			}
		</style>
	</head>

	<body ng-app="myApp" ng-controller="myCtrl">
		<div id="main"><br /><br />
			<div id="top">
				<input type="button" value="新增订单" ng-click="clickAdd()" />
				<input type="button" value="批量删除" ng-click="delMore()" />
				<input type="text" placeholder="按商品名称查询" ng-model="selectByGname" />
				<input type="text" placeholder="按手机号查询" ng-model="selectByTel" />
				<select ng-model="selectByStat">
					<option value="">---请选择---</option>
					<option value="已发货">已发货</option>
					<option value="未发货">未发货</option>
				</select>
			</div><br /><br />

			<fieldset ng-show="isShowField">
				<legend>添加订单信息</legend>
				商品名：<input type="text" ng-model="aGname" id="aGname" /><br /><br /> 用户名：
				<input type="text" ng-model="aUname" id="aUname" /><br /><br /> 手机号：
				<input type="text" ng-model="aTel" id="aTel" /><br /><br /> 价格：
				<input type="text" ng-model="aPrice" id="aPrice" /><br /><br /> 城市：
				<select ng-model="province" id="province">
					<option value="">---请选择省份---</option>
				</select>
				<select ng-model="aCity" id="city">
					<option value="">---请选择城市---</option>
				</select><br /><br />
				<input type="button" value="保存" ng-click="add()" />
			</fieldset><br /><br />

			<table border="0" cellspacing="1" cellpadding="10px" ng-show="isShowTable">
				<tr id="bt">
					<th><input type="checkbox" ng-click="cb_all()" id="cb_all" /></th>
					<th>id <input type="button" value="△" id="orderById" ng-click="orderById()" /></th>
					<th>商品名</th>
					<th>用户名</th>
					<th>手机号</th>
					<th>价格 <input type="button" value="△" id="orderByPrice" ng-click="orderByPrice()" /></th>
					<th>城市</th>
					<th>下单时间 <input type="button" value="△" id="orderByRegdate" ng-click="orderByRegdate()" /></th>
					<th>状态</th>
				</tr>
				<tr ng-repeat="x in goods|filter:{gname:selectByGname,tel:selectByTel,state:selectByStat}|orderBy:orderby">
					<td><input type="checkbox" class="cb" value="{{x.id}}" ng-click="cbb()" /></td>
					<td>{{x.id}}</td>
					<td>{{x.gname}}</td>
					<td>{{x.uname}}</td>
					<td>{{x.tel}}</td>
					<td>{{x.price}}</td>
					<td>{{x.city}}</td>
					<td>{{x.regdate|date:"MM-dd hh:mm:ss"}}</td>
					<td><input type="button" value="{{x.state}}" ng-click="stateChange(x.id)" /></td>
				</tr>
			</table>
		</div>

		<script type="text/javascript">
			var app = angular.module("myApp", []);
			app.controller("myCtrl", function($scope, $http) {
				//http请求数据
				$http.get("http://result.eolinker.com/lKgJQ8Zec38423e5603b8e055d1193a8127c0c060bb1b55?uri=goodstest")
					.then(function(response) {
						$scope.goods = response.data;
					});

				//初始化talble_show值
				$scope.isShowTable = true;

				//初始化field_show值
				$scope.isShowField = false;
				
				//点击“新增订单”按钮
				$scope.clickAdd = function(){
					if ($scope.isShowField == false) {
						$scope.isShowField = true;
					}else {
						$scope.isShowField = false;
					}
				}
				
				//全选
				$scope.cb_all = function(){
					var cbs = $(".cb");
					if ($("#cb_all").prop("checked")) {
						cbs.each(function(){
							cbs.prop("checked",true);
						})
					} else{
						cbs.each(function(){
							cbs.prop("checked",false);
						})
					}
				}
				
				//单选
				$scope.cbb = function(){
					var flag = true;
					var cbs = $(".cb");
					var cb_all = $("#cb_all");
					for (var i = 0; i < cbs.length; i++) {
						if (!cbs[i].checked) {
							flag = false;
						}
					}
					
					if (flag) {
						cb_all.prop("checked",flag);
					} else{
						cb_all.prop("checked",flag);
					}
				}
				
				//排序
				var isOrder = true;
				
				//根据id
				$scope.orderById = function(){
					if (isOrder) {
						$scope.orderby = "id";
						$("#orderById").val("▽");
						isOrder = false;
					} else{
						$scope.orderby = "-id";
						$("#orderById").val("△");
						isOrder = true;
					}
				}
				
				//根据价格
				$scope.orderByPrice = function(){
					if (isOrder) {
						$scope.orderby = "price";
						$("#orderByPrice").val("▽");
						isOrder = false;
					} else{
						$scope.orderby = "-price";
						$("#orderByPrice").val("△");
						isOrder = true;
					}
				}
				
				//根据下单时间
				$scope.orderByRegdate = function(){
					if (isOrder) {
						$scope.orderby = "regdate";
						$("#orderByRegdate").val("▽");
						isOrder = false;
					} else{
						$scope.orderby = "-regdate";
						$("#orderByRegdate").val("△");
						isOrder = true;
					}
				}
				
				//改变状态
				$scope.stateChange = function(id){
					for (var i = 0; i < $scope.goods.length; i++) {
						if ($scope.goods[i].id == id) {
							$scope.goods[i].state = "已发货";
							break;
						}
					}
				}
				
				//批量删除
				$scope.delMore = function(){
					var cbs = $(".cb:checked");
					
					if (cbs.length == 0) {
						alert("请选中数据再删除！");
						return;
					}
					
					if (!confirm("是否删除这些数据？")) {
						return;
					}
					
					cbs.each(function(){
						for (var i = 0; i < $scope.goods.length; i++) {
							if ($scope.goods[i].id == $(this).val()) {
								if ($scope.goods[i].state == "已发货") {
									$scope.goods.splice(i,1);
									break;
								}
							}
						}
					})
				}
				
				//加载省份下拉框选项
				var datas = new Array();
				datas["北京"] = ["海淀","大兴","朝阳"];
				datas["河南"] = ["郑州"];
				datas["上海"] = ["浦东","黄埔"];
				for (province in datas) {
					$("#province").append("<option>"+province+"</option>");
				}
				
				//下拉框改变加载市的下拉选项
				$("#province").change(function(){
					var province = $(this).val();
					var citys = datas[province];
					$("#city").empty();
					$("#city").append("<option>---请选择城市---</option>");
					for (var i = 0; i < citys.length; i++) {
						$("#city").append("<option>"+citys[i]+"</option>");
					}
				})
				
				//添加
				$scope.add = function(){
					var flag = true;
					
					var gname = $scope.aGname;
					if (gname==null || gname=="" || gname.length==0) {
						$("#aGname").prop("placeholder","商品名不能为空！");
						flag = false;
					}else {
						flag = true;
					}
					
					var uname = $scope.aUname;
					if (uname==null || uname=="" || uname.length==0) {
						$("#aUname").prop("placeholder","用户名不能为空！");
						flag = false;
					}else {
						flag = true;
					}
					
					var tel = $scope.aTel;
					if (tel==null || tel=="" || tel.length==0) {
						$("#aTel").prop("placeholder","手机号不能为空！");
						flag = false;
					}else {
						flag = true;
					}
					
					var price = $scope.aPrice;
					if (price==null || price=="" || price.length==0) {
						$("#aPrice").prop("placeholder","价格不能为空！");
						flag = false;
					}else {
						flag = true;
					}
					
					var city = $scope.aCity;
					var d = new Date();
					var str = "";
					str += contactTime(d.getMonth()+1) + "-" +contactTime(d.getMonth())+" "+contactTime(d.getHours())+":"+contactTime(d.getMinutes())+":"+contactTime(d.getSeconds());
					
					var shop = {};
					shop.id = $scope.goods[$scope.goods.length-1].id++;
					shop.gname = gname;
					shop.uname = uname;
					shop.tel = tel;
					shop.price = price;
					shop.city = city;
					shop.state = "未发货";
					shop.regdate = str;
					if (flag) {
						$scope.goods.unshift(shop);
					}else {
						alert("信息不完善！");
					}
				}
				
			})
			function contactTime(dd){
				if (dd<10) {
					return "0" + dd;
				}
				return dd;
			}
		</script>
	</body>

</html>
举一个栗子
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
订单发货试手

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;周三-练习题&lt;/title&gt; &lt;script src="js/angular.min.js" type="text/javascript&quo
复制链接

扫一扫