卖家中心物流管理收货地址空状态编辑功能

src/main/webapp/resources/js/vendor/controllers/forstore/vendor_logistics_ctrl.js

@@ -10,6 +10,10 @@ define(['app/app', 'calendar'], function (app) {
 		$rootScope.active = 'vendor_logistics';
 		$scope.tab = 'logistic';
 		$scope.canAddTotal = 20;
+        $scope.isSendType = true;
+        $scope.newAddr = {};
+        $scope.isSetTop = false;
+
         //是寄售店铺
 		if ($rootScope.store && (!$rootScope.store.status || $rootScope.store.status === 'OPENED')){
             $scope.isCONSIGNMENT = false;
@@ -125,6 +129,99 @@ define(['app/app', 'calendar'], function (app) {
 			});
 		};
 
+        $scope.checkAddrForm = function (num) {
+            var size;
+            if (num == 1) {
+                if ($scope.newAddr.name) {
+                    size = $scope.newAddr.name.replace(/[^\x00-\xff]/g,
+                        '**').length;
+                    if (size > 20) {
+                        console.log(size);
+                        $scope.userError = true;
+                        return;
+                    }
+                    $scope.userError = false;
+                }
+            } else if (num == 2) {
+                if ($scope.newAddr.tel) {
+                    size = $scope.newAddr.tel.replace(/[^\x00-\xff]/g,
+                        '**').length;
+                    if (size < 8 || size > 11) {
+                        $scope.telError = true;
+                        return;
+                    }
+                    $scope.telError = false;
+                    var telPatt = new RegExp("^[0-9]+$");
+                    if (telPatt.test($scope.newAddr.tel)) {
+                        $scope.telPatternError = false;
+                    } else {
+                        $scope.telPatternError = true;
+                    }
+                }
+            } else if (num == 3) {
+                if ($scope.newAddr.detailAddress) {
+                    size = $scope.newAddr.detailAddress.replace(
+                        /[^\x00-\xff]/g, '**').length;
+                    if (size > 60) {
+                        $scope.addrError = true;
+                        return;
+                    }
+                    $scope.addrError = false;
+                }
+            } else if (num == 4) {
+                var emailPatt = new RegExp(
+                    "^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$");
+                if ($scope.newAddr.email.length > 0 && !emailPatt.test(
+                    $scope.newAddr.email)) {
+                    $scope.emailPatternError = true;
+                } else {
+                    $scope.emailPatternError = false;
+                }
+            }
+        };
+
+        $scope.reset = function(type) {
+            type.$setPristine();
+            type.$setUntouched();
+            angular.forEach($scope.newAddr, function(value, key) {
+                $scope.newAddr[key] = '';
+            })
+        };
+
+        $scope.save = function () {
+            var address = $scope.newAddr;
+
+            if (!address){
+                toaster.pop('error', '请补充未填写的信息');
+                return ;
+            }
+            if (!address.name || !address.province || !address.city || !address.district ||
+                !address.detailAddress || !address.tel){
+                toaster.pop('error', '请补充未填写的信息');
+                return ;
+            }
+            if ($scope.userError || $scope.telError || $scope.addrError || $scope.telPatternError ||
+                $scope.emailPatternError){
+                toaster.pop('error', '请修改红色框内的信息');
+                return ;
+            }
+
+            //拼装地区
+            address.area = address.province + ',' + address.city + ',' + address.district;
+
+            // send属性 控制本地址是否是发货地址
+            ShippingAddress.save({
+                isSetTop: $scope.isSetTop,
+                send: $scope.isSendType,
+                isPersonal: !$scope.isSendType
+            }, address, function () {
+                toaster.pop('success', '成功 ', '保存收货地址成功');
+                $scope.loadAddresses();
+            }, function (res) {
+                toaster.pop('error', '保存收货地址失败 ', res.data);
+            });
+        };
+
 
 		/**********************************************************************
 		 * 地址相关操作

src/main/webapp/resources/view/sso/ssoAddress.html

@@ -242,7 +242,7 @@
     <div class="rt_menu"><span>收货地址</span></div>
     <div class="logistic-content">
         <div class="menu-title row">现有收货地址<span>&nbsp;已保存<em>{{total}}</em>条，还能新增<em>{{canAddTotal-total}}</em>条地址</span></div>
-        <div class="add-log row" ng-if="total < canAddTotal || (addressList.length <= 0 || !addressList)"><button ng-click="modifyAddress()"><i class="fa fa-plus-square"></i>新增收货地址</button></div>
+        <div class="add-log row" ng-if="total < canAddTotal && addressList && addressList.length > 0"><button ng-click="modifyAddress()"><i class="fa fa-plus-square"></i>新增收货地址</button></div>
         <div class="log-tab" ng-if="addressList && addressList.length > 0">
             <table class="table" style="table-layout: auto">
                 <thead>
@@ -376,6 +376,9 @@
     </div>
 </div>
 <style type="text/css">
+    .new-address {
+        padding-top:20px;
+    }
     .new-address label{
         margin-right: -15px;
         font-size: 14px;

src/main/webapp/resources/view/vendor/forstore/vendor_logistics.html

@@ -79,8 +79,8 @@
 		<!--收货地址-->
 		<div class="logistic-content" ng-if="tab=='logistic'">
 			<div class="menu-title row">现有发货地址<span>&nbsp;已保存<em>{{total}}</em>条，还能新增<em>{{canAddTotal-total}}</em>条地址</span></div>
-			<div class="add-log row" ng-if="total < canAddTotal"><button ng-click="editShippingAddress()"><i class="fa fa-plus-circle"></i>&nbsp;新增发货地址</button></div>
-			<div class="log-tab">
+			<div class="add-log row" ng-if="total < canAddTotal && addressList && addressList.length > 0"><button ng-click="editShippingAddress()"><i class="fa fa-plus-circle"></i>&nbsp;新增发货地址</button></div>
+			<div class="log-tab" ng-if="addressList && addressList.length > 0">
 				<table class="table">
 					<thead>
 					<tr>
@@ -107,19 +107,170 @@
 					</tr>
 					</tbody>
 				</table>
-				<div class="empty" ng-if="addressList.length == 0">
-					<p class="empty-img">
-						<img src="static/img/all/empty-cart.png">
-					</p>
-					<div class="empty-info">
-						<p class="grey"> 暂无发货地址,赶快去新增吧 </p>
-						<!--<a href="vendor#/index"><i class="fa fa-mail-reply fa-xs"></i>返回上一页</a>-->
+			</div>
+			<div class="new-address" ng-if="addressList.length <= 0 || !addressList">
+				<div class="edit-rec-addr">
+					<div class="row">
+						<div class="col-sm-12">
+							<form name="myForm" class="form-horizontal" role="form" ng-submit="save(newAddr)">
+								<div class="form-group">
+									<label for="userName" class="col-sm-3 control-label"><strong class="text-inverse">* </strong>
+										<span>发货人姓名：</span>
+									</label>
+									<div class="col-sm-5">
+										<input required ng-model="newAddr.name" type="text" class="form-control" id="userName" name="userName"
+											   placeholder="请输入你的姓名" autocomplete="off" ng-change="checkAddrForm(1)">
+									</div>
+									<div class="col-sm-4">
+										<span class="text-inverse error" ng-show="newAddr.name && userError">请勿超过10个字</span>
+										<span class="text-inverse heigth30" ng-show="myForm.userName.$touched && myForm.userName.$invalid">请输入发件人姓名</span>
+										<span ng-show="!myForm.userName.$invalid && !userError" class="text-success heigth30">填写正确</span>
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="tel" class="col-sm-3 control-label"><strong class="text-inverse">* </strong>联系电话：</label>
+									<div class="col-sm-5">
+										<input required ng-model="newAddr.tel" type="text" autocomplete="off" class="form-control" ng-change="checkAddrForm(2)" id="tel" name="tel"
+											   placeholder="请输入您的联系电话">
+									</div>
+									<div class="col-sm-4" >
+										<span class="text-inverse error" ng-show="newAddr.tel && (telError || telPatternError)">请输入正确的号码</span>
+										<span class="text-inverse heigth30" ng-show="myForm.tel.$touched && myForm.tel.$invalid">请输入联系电话</span>
+										<span ng-show="!myForm.tel.$invalid && !telError && !telPatternError" class="text-success heigth30">填写正确</span>
+									</div>
+								</div>
+								<div class="form-group">
+									<label for="email" class="col-sm-3 control-label">邮箱：</label>
+									<div class="col-sm-5">
+										<input name="email" ng-model="newAddr.email" type="text" class="form-control" id="email"
+											   placeholder="请填写正确的邮箱，可用于接收订单提醒" maxlength="50" ng-change="checkAddrForm(4)">
+									</div>
+									<div class="col-sm-4">
+										<span ng-show="newAddr.email && emailPatternError" class="text-inverse heigth30">请输入正确的邮箱</span>
+									</div>
+								</div>
+								<div class="form-group ">
+									<label class="col-sm-3 control-label"><strong
+											class="text-inverse">* </strong>所在地区：</label>
+									<div class="mar-rt0 row checkbox">
+										<div class="col-sm-3">
+											<select required="" class="select-adder form-control"
+													ng-model="newAddr.province"
+													ng-options="key as key for (key,value) in division"
+													ng-change="newAddr.city='';newAddr.district='';"
+													style="opacity: 1;">
+												<option value="">省级行政区</option>
+											</select>
+										</div>
+										<div class="col-sm-3 ">
+											<select class="select-adder form-control" ng-model="newAddr.city"
+													ng-options="key as key for (key,value) in division[newAddr.province]"
+													ng-change="newAddr.district='';"
+													style="opacity: 1;">
+												<option value="">市</option>
+											</select>
+										</div>
+										<div class="col-sm-3">
+											<select class="select-adder form-control" ng-model="newAddr.district" style="opacity: 1;"
+													ng-options="value as value for value in division[newAddr.province][newAddr.city]" required>
+												<option value="">区</option>
+											</select>
+										</div>
+									</div>
+								</div>
+								<div class="form-group" style="margin-bottom: 0;">
+									<label class="col-sm-3 control-label"><strong class="text-inverse">* </strong>详细地址：</label>
+									<div class="col-sm-8" style="width: 530px; padding-right: 0;">
+										<input required ng-model="newAddr.detailAddress" type="text" class="form-control" name="addr" id="addr"
+											   placeholder="建议你填写详细地址，例如街道名、门牌号，楼层和房间号等信息" autocomplete="off" ng-change="checkAddrForm(3)">
+									</div>
+									<div class="col-sm-2" style="padding: 0; width: 100px; padding-left: 10px;line-height: 34px;">
+										<span class="text-inverse error" ng-show="newAddr.detailAddress && addrError">请勿超过30个字</span>
+										<span ng-show="!myForm.addr.$invalid && !addrError" class="text-success heigth30">填写正确</span>
+										<span class="text-inverse error" ng-show="myForm.addr.$touched && myForm.addr.$invalid">请输入详细地址</span>
+									</div>
+								</div>
+								<div class="form-group" style="margin-bottom:20px;margin-top:10px;">
+									<div class="col-sm-4" style="margin-left: 120px;">
+										<div class="checkbox">
+											<label class="check-active">
+												<input ng-model="isSetTop" type="checkbox" id="check-act">
+												<label for="check-act"></label>
+												<span>设置为默认发货地址</span>
+											</label>
+										</div>
+									</div>
+								</div>
+							</form>
+						</div>
 					</div>
 				</div>
+				<div class="edit-btn">
+					<button class="btn btn-default" ng-click="reset(myForm)" type="button">取消</button>
+					<button class="btn btn-success" ng-click="save()" type="button">保存</button>
+				</div>
 			</div>
 		</div>
 	</div>
 </div>
+<style type="text/css">
+	.new-address {
+		padding-top:20px;
+	}
+	.new-address label{
+		margin-right: -15px;
+		font-size: 14px;
+		font-weight: inherit;
+		line-height: 34px;
+	}
+	.heigth30 {
+		height: 30px;
+		line-height: 30px;
+	}
+	.edit-rec-addr .form-control {
+		color: black;
+	}
+	.edit-rec-addr strong {
+		color: red;
+	}
+	.edit-rec-addr .format-correct {
+		color: #008000;
+		height: 30px;
+		line-height: 30px;
+	}
+	.edit-rec-addr .format-error {
+		color: red;
+		height: 30px;
+		line-height: 30px;
+	}
+	.select-adder{
+		background:url("static/img/user/images/xiala.png") right no-repeat ;
+		background-position-x: 180px;
+	}
+	.form-control{
+		border-radius: 3px;
+	}
+	.new-address .edit-btn{
+		text-align: center;
+	}
+	.new-address.edit-btn button{
+		width: 70px;
+		height: 32px;
+		border-radius: 0;
+	}
+	.new-address.edit-btn button.btn-default{
+		background: #c8c6c6 !important;
+		color: #fff !important;
+		border: none !important;
+	}
+	.form-horizontal .control-label{
+		width: 120px;
+		padding-right: 5px;
+	}
+	.checkbox .col-sm-3{
+		width: 177px;
+	}
+</style>
 <style>
 	.com-del-box{
 		position: fixed;