购物流程web

最新推荐文章于 2022-06-18 15:32:06 发布

默语至于心乐

最新推荐文章于 2022-06-18 15:32:06 发布

阅读量383

点赞数

本文链接：https://blog.csdn.net/bawei11/article/details/79840772

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="libs/angular.min.js"></script>
<script src="libs/jquery-1.11.0.min.js"></script>
<script>
var app=angular.module("myApp",[]);
app.controller("myContro",function($scope,$http,$interval){
$http.get("http://result.eolinker.com/rR1VBtT56a6bb220c10b3d44b65b4787a8aec03c4ec32ce?uri=monthTest").then(function(response){
$scope.datas=response.data;
});

$scope.date = new Date().toLocaleTimeString();
$interval(function(){
$scope.date = new Date().toLocaleTimeString();
},1000,100);

$scope.showAdd=false;
$scope.showname=false;
$scope.showprice=false;
$scope.shownumber=false;
$scope.showusername=false;
$scope.showaddress=false;
$scope.checkAll=false;

$scope.qrAdd=function(){

var data={};

if($scope.name==null || $scope.name==""){
$scope.showname=true;
return false;
}else{
$scope.showname=false;
data.name=$scope.name;
}

reg=/^\d+$/;

if(reg.test($scope.price)==false || $scope.price<0 || $scope.price=="" || $scope.price==null){
$scope.showprice=true;
return false;
}else{
$scope.showprice=false;
data.price=$scope.price;
}

if(reg.test($scope.number)==false || $scope.number<0 || $scope.number=="" || $scope.number==null){
$scope.shownumber=true;
return false;
}else{
$scope.shownumber=false;
data.number=$scope.number;
}

if($scope.username =="" || $scope.username==null){
$scope.showusername=true;
return false;
}else{
$scope.showusername=false;
data.username=$scope.username;
}
data.address=$scope.pros+""+$scope.citys;

data.orderTime=$scope.date;

data.status=0;

$scope.datas.push(data);
$scope.showAdd=false;
}

$scope.deleteAll=function(){

if($scope.checkAll){
$scope.datas=[];
}else{
var ck=$("input[type=checkbox]:checked");
for(var i=ck.length-1;i>=0;i--){
$scope.datas.splice(ck[i].value,1);
}
}
}

$scope.showup=true;
$scope.isFirstClick=true;
$scope.fahuo=function(dname){

for(var i=0;i<$scope.datas.length;i++){
if($scope.datas[i].name==dname){
alert(i);
if($scope.isFirstClick){
$scope.showup=false;
$scope.showup2=true;
}else{
return false;
}
}
}
}
});
</script>
<style>
#button1{
background-color: greenyellow;
}
#button2{
background-color: red;
}
table{
text-align: center;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myContro">
<center>
<div>
<input type="text" placeholder="按商品名称查询" ng-model="selectName"/>
<input type="button" id="button1" value="添加" ng-click="showAdd=!showAdd"/>
<input type="button" id="button2" value="批量删除订单" ng-click="deleteAll();"/>
</div>
<div>

</div>
<table border="1px" cellspacing="0px" bordercolor="gray">
<tr style="background-color: grey;">
<th><input type="checkbox" ng-model="checkAll"/></th>
<th>商品名称</th>
<th>商品价格</th>
<th>购买数量</th>
<th>商品总计</th>
<th>下单时间</th>
<th>商品状态</th>
<th>商品会员</th>
<th>收货地址</th>
<th>修改状态</th>
</tr>
<tr ng-repeat="d in datas | filter:{name:selectName}">
<td><input type="checkbox" ng-model="checkAll" value="{{$index}}"/></td>
<td>{{d.name}}</td>
<td>￥{{d.price}}</td>
<td>{{d.number}}</td>
<td>￥{{d.price*d.number}}</td>
<td>{{d.orderTime |date:"yyyy-MM-dd日 hh:mm:ss"}}</td>
<td>{{d.status}}</td>
<td>{{d.username}}</td>
<td>{{d.address}}</td>
<td>
<input type="button" id="tr1" value="发货" style="background-color: dodgerblue;" ng-click="fahuo(d.name);" ng-show="showup"/>
<input type="button" value="已发货" ng-show="showup2" style="border-width: 0px; color: darkgray;"/>
</td>
</tr>
</table><br />
<div ng-show="showAdd">
商品名称:<input type="text" ng-model="name"/><span style="color: red;" ng-show="showname">*非空</span><br />
商品价格:<input type="text" ng-model="price"/><span style="color: red;" ng-show="showprice">*必须为数字而且不能小于0</span><br />
商品数量:<input type="text" ng-model="number"/><span style="color: red;" ng-show="shownumber">*必须为数字而且不能小于0</span><br />
会员名称:<input type="text" ng-model="username"/><span style="color: red;" ng-show="showusername">*非空</span><br />
收货地址:
<select id="pros" ng-model="pros" ng-init="pros='北京'" οnchange="getcitys();">
<option>北京</option>
<option>河南</option>
</select>
------
<select id="citys" ng-model="citys" ng-init="citys='西二旗'">
<option>东城</option>
<option>西城</option>
<option>西二旗</option>
</select>
<span style="color: red;" ng-show="showaddress">*默认显示为:北京-西二旗</span><br />
<input type="button" value="确认添加" ng-click="qrAdd();"/>
</div>
</center>
</body>
<script>
var data=[{pro:"北京",city:["东城","西城","西二旗"]},{pro:"河南",city:["郑州","洛阳","驻马店"]}];

function getcitys(){

$("#citys option").remove();

var datas_citys=[];

var p=$("#pros").val();

for(var i in data){
if(data[i].pro==p){
var datas_citys =data[i].city;
break;
}
}
for(var i in datas_citys){
var op=$("<option>"+datas_citys[i]+"</option>");
$("#citys").append(op);
}
}
</script>
</html>