帐户中心收付款帐户新增空状态调整

src/main/webapp/resources/js/usercenter/controllers/forstore/pay_center_ctrl.js

@@ -356,27 +356,7 @@ define(['app/app'], function(app) {
 
 		//编辑账户
 		$scope.editAccount = function(data) {
-			var modalInstance = $modal.open({
-				templateUrl : 'static/view/common/bankInfoModal.html',
-				controller : 'BankInfoCtrl',
-				resolve : {
-					account : function() {
-						//深拷贝一份
-						return angular.copy(data);
-					}
-				}
-			});
-
-			modalInstance.result.then(function(account) {
-				if(data) {
-					$scope.accounts.splice(data.num - 1, 1, account);
-				}else {//如果是新增。
-					loadAccountData();
-				}
-
-			}, function() {
-
-			});
+            $scope.showAddFrame = true;
 		};
 
 		//获取数据的方法。
@@ -673,219 +653,215 @@ define(['app/app'], function(app) {
 				SessionService.unset("buyCenter");
 			}
 		});
-	}]);
-
-
-
-	app.register.controller('BankInfoCtrl', ['$scope', '$modalInstance', 'account', 'bankInfoService', 'toaster', function($scope, $modalInstance, account, bankInfoService, toaster){
-
-		/**
-		 * 目前只支持的银行
-		 * @type {string[]}
-		 */
-		$scope.bankList = [
-			'中国银行','中国建设银行','中国工商银行','中国农业银行','交通银行','招商银行','中国民生银行',
-			'兴业银行','中信银行','中国光大银行','广发银行','平安银行','中国邮政储蓄银行','华夏银行','浦发银行'
-		];
-
-		var initIndex = function () {
-			$scope.selectIndex = -1;
-			$scope.downIndex = 0;
-		};
-
-		$scope.getItemFocus = function() {
-			$scope.showBankFrame = true;
-			$scope.matchData = true;
-			$scope.resultList = $scope.bankList;
-			initIndex();
-		};
-
-		$scope.onItemBlur = function () {
-			if ($scope.time){
-				clearTimeout($scope.time);
-			}
-			$scope.time = setTimeout(function () {
-				$scope.$apply(function () {
-					$scope.showBankFrame = false;
-				});
-			}, 200);
-		};
-		$scope.onKeyUp = function () {
-			var dom = document.getElementById("ulContent");
-			console.log(event);
-			if ($scope.showBankFrame){
-				if(event.keyCode == 40) { //监听到按下键
-					$scope.selectIndex ++;
-					if ($scope.downIndex == 5){
-						dom.scrollTop += 44;
-					}
-					if ($scope.downIndex <= 4){
-						$scope.downIndex++;
-					}
-					if($scope.selectIndex >= $scope.resultList.length){
-						$scope.selectIndex = 0;
-						dom.scrollTop = 0;
-						$scope.downIndex = 1;
-					}
-					$scope.account.bankname = $scope.resultList[$scope.selectIndex];
-					// $scope.containsAttr($scope.logistics.companyName);
-				} else if(event.keyCode == 38) { //监听到按上键
-					$scope.selectIndex --;
-					if ($scope.downIndex == 1){
-						dom.scrollTop -= 44;
-					}
-					if ($scope.downIndex >= 2){
-						$scope.downIndex--;
-					}
-					if($scope.selectIndex < 0){
-						$scope.selectIndex = $scope.resultList.length - 1;
-						dom.scrollTop = 2400;
-						$scope.downIndex = 5;
-					}
-					$scope.account.bankname = $scope.resultList[$scope.selectIndex];
-					// $scope.containsAttr($scope.logistics.companyName);
-				} else if(event.keyCode == 13) { //确定键
-					$scope.showBankFrame = false;
-				}
-			}
-		};
-
-		$scope.showList = function () {
-			$scope.showBankFrame = !$scope.showBankFrame;
-			$scope.matchData = true;
-			$scope.resultList = $scope.bankList;
-		};
-
-		$scope.inputBankName = function () {
-			$scope.showBankFrame = true;
-		};
-
-		$scope.fitBankToAccount = function (item) {
-			$scope.account.bankname = item;
-			$scope.showBankFrame = false;
-		};
-
-		$scope.account = account;
-		if($scope.account) {
-			$scope.title = "修改账户";
-		}else {
-			$scope.title = "新增账户";
-			$scope.account = {};
-		}
-
-		var matchArray = function () {
-			$scope.account.bankname = $scope.account.bankname ? $scope.account.bankname : '';
-			$scope.resultList = $scope.bankList.filter(function (data) {
-				if (data.indexOf($scope.account.bankname) >= 0){
-					return data;
-				}
-			});
-			if ($scope.resultList.length > 0){
-				$scope.matchData = true;
-			}else{
-				$scope.matchData = false;
-			}
-		};
-
-		/**
-		 * 验证新增账户格式
-		 * @param num
-		 */
-		$scope.checkAccount = function (num) {
-			var size;
-			if (num == 1){
-				//验证开户银行名称
-				$scope.showBankFrame = true;
-				matchArray();
-			}else if(num == 2){
-				//验证开户支行名称
-				if($scope.account.branchname){
-					size = $scope.account.branchname.replace(/[^\x00-\xff]/g,'**').length;
-					if (size > 40){
-						$scope.branchError = true;
-					}else {
-						$scope.branchError = false;
-					}
-					var telPatt = new RegExp("^[\u2E80-\u9FFF]+$");
-					if (telPatt.test($scope.account.branchname)){
-						$scope.branchPattError = false;
-					}else {
-						$scope.branchPattError = true;
-					}
-				}
-			}else if(num == 3){
-				//验证银行账号
-				if ($scope.account.number){
-					size = $scope.account.number.replace(/[^\x00-\xff]/g,'**').length;
-					if (size > 30){
-						$scope.numberError = true;
-					}else {
-						$scope.numberError = false;
-					}
-					var numPatt = new RegExp("^[0-9]+$");
-					if (numPatt.test($scope.account.number)){
-						$scope.numberPattError = false;
-					}else {
-						$scope.numberPattError = true;
-					}
-					validateRepeat($scope.account.number);
-				}
-			}else if(num == 4){
-				//验证开户名称
-				if ($scope.account.accountname){
-					size = $scope.account.accountname.replace(/[^\x00-\xff]/g,'**').length;
-					if (size > 100){
-						$scope.nameError = true;
-					}else {
-						$scope.nameError = false;
-					}
-				}
-			}
-		};
 
-		var validateRepeat = function (number) {
-			bankInfoService.getCountByNumber({type:1061, number:number}, {}, function (data) {
-				if (data.success){
-					if (data.data != 0){
-						$scope.repeatError = true;
-					}else {
-						$scope.repeatError = false;
-					}
-				}else {
-					toaster.pop("info", data.message);
+		// 复制新增加部分
+        /**
+         * 目前只支持的银行
+         * @type {string[]}
+         */
+        $scope.bankList = [
+            '中国银行','中国建设银行','中国工商银行','中国农业银行','交通银行','招商银行','中国民生银行',
+            '兴业银行','中信银行','中国光大银行','广发银行','平安银行','中国邮政储蓄银行','华夏银行','浦发银行'
+        ];
+
+        var initIndex = function () {
+            $scope.selectIndex = -1;
+            $scope.downIndex = 0;
+        };
+
+        $scope.getItemFocus = function() {
+            $scope.showBankFrame = true;
+            $scope.matchData = true;
+            $scope.resultList = $scope.bankList;
+            initIndex();
+        };
+
+        $scope.onItemBlur = function () {
+            if ($scope.time){
+                clearTimeout($scope.time);
+            }
+            $scope.time = setTimeout(function () {
+                $scope.$apply(function () {
+                    $scope.showBankFrame = false;
+                });
+            }, 200);
+        };
+        $scope.onKeyUp = function () {
+            var dom = document.getElementById("ulContent");
+            if ($scope.showBankFrame){
+                if(event.keyCode == 40) { //监听到按下键
+                    $scope.selectIndex ++;
+                    if ($scope.downIndex == 5){
+                        dom.scrollTop += 44;
+                    }
+                    if ($scope.downIndex <= 4){
+                        $scope.downIndex++;
+                    }
+                    if($scope.selectIndex >= $scope.resultList.length){
+                        $scope.selectIndex = 0;
+                        dom.scrollTop = 0;
+                        $scope.downIndex = 1;
+                    }
+                    $scope.account.bankname = $scope.resultList[$scope.selectIndex];
+                    // $scope.containsAttr($scope.logistics.companyName);
+                } else if(event.keyCode == 38) { //监听到按上键
+                    $scope.selectIndex --;
+                    if ($scope.downIndex == 1){
+                        dom.scrollTop -= 44;
+                    }
+                    if ($scope.downIndex >= 2){
+                        $scope.downIndex--;
+                    }
+                    if($scope.selectIndex < 0){
+                        $scope.selectIndex = $scope.resultList.length - 1;
+                        dom.scrollTop = 2400;
+                        $scope.downIndex = 5;
+                    }
+                    $scope.account.bankname = $scope.resultList[$scope.selectIndex];
+                    // $scope.containsAttr($scope.logistics.companyName);
+                } else if(event.keyCode == 13) { //确定键
+                    $scope.showBankFrame = false;
+                }
+            }
+        };
+
+        $scope.showList = function () {
+            $scope.showBankFrame = !$scope.showBankFrame;
+            $scope.matchData = true;
+            $scope.resultList = $scope.bankList;
+        };
+
+        $scope.inputBankName = function () {
+            $scope.showBankFrame = true;
+        };
+
+        $scope.fitBankToAccount = function (item) {
+            $scope.account.bankname = item;
+            $scope.showBankFrame = false;
+        };
+
+        $scope.account = {};
+
+        var matchArray = function () {
+            $scope.account.bankname = $scope.account.bankname ? $scope.account.bankname : '';
+            $scope.resultList = $scope.bankList.filter(function (data) {
+                if (data.indexOf($scope.account.bankname) >= 0){
+                    return data;
+                }
+            });
+            if ($scope.resultList.length > 0){
+                $scope.matchData = true;
+            }else{
+                $scope.matchData = false;
+            }
+        };
+
+        /**
+         * 验证新增账户格式
+         * @param num
+         */
+        $scope.checkAccount = function (num) {
+            var size;
+            if (num == 1){
+                //验证开户银行名称
+                $scope.showBankFrame = true;
+                matchArray();
+            }else if(num == 2){
+                //验证开户支行名称
+                if($scope.account.branchname){
+                    size = $scope.account.branchname.replace(/[^\x00-\xff]/g,'**').length;
+                    if (size > 40){
+                        $scope.branchError = true;
+                    }else {
+                        $scope.branchError = false;
+                    }
+                    var telPatt = new RegExp("^[\u2E80-\u9FFF]+$");
+                    if (telPatt.test($scope.account.branchname)){
+                        $scope.branchPattError = false;
+                    }else {
+                        $scope.branchPattError = true;
+                    }
+                }
+            }else if(num == 3){
+                //验证银行账号
+                if ($scope.account.number){
+                    size = $scope.account.number.replace(/[^\x00-\xff]/g,'**').length;
+                    if (size > 30){
+                        $scope.numberError = true;
+                    }else {
+                        $scope.numberError = false;
+                    }
+                    var numPatt = new RegExp("^[0-9]+$");
+                    if (numPatt.test($scope.account.number)){
+                        $scope.numberPattError = false;
+                    }else {
+                        $scope.numberPattError = true;
+                    }
+                    validateRepeat($scope.account.number);
+                }
+            }else if(num == 4){
+                //验证开户名称
+                if ($scope.account.accountname){
+                    size = $scope.account.accountname.replace(/[^\x00-\xff]/g,'**').length;
+                    if (size > 100){
+                        $scope.nameError = true;
+                    }else {
+                        $scope.nameError = false;
+                    }
+                }
+            }
+        };
+
+        var validateRepeat = function (number) {
+            bankInfoService.getCountByNumber({type:1061, number:number}, {}, function (data) {
+                if (data.success){
+                    if (data.data != 0){
+                        $scope.repeatError = true;
+                    }else {
+                        $scope.repeatError = false;
+                    }
+                }else {
+                    toaster.pop("info", data.message);
+                }
+            });
+        };
+
+        $scope.confirm = function() {
+            var account = $scope.account;
+
+            if (!account){
+                toaster.pop('error', '请按要求填写正确的信息');
+                return ;
+            }
+            if (!account.bankname || !account.branchname || !account.number || !account.accountname){
+                toaster.pop('error', '请按要求填写正确的信息');
+                return ;
+            }
+            if (!$scope.matchData || $scope.branchError || $scope.branchPattError || $scope.numberError || $scope.numberPattError ||
+                $scope.nameError || $scope.repeatError){
+                toaster.pop('error', '请按要求填写正确的信息');
+                return ;
+            }
+
+            var method = 'saveBuyPersonalBank'; //不区分个人和企业账户
+            bankInfoService[method].call(null, null, $scope.account, function(data) {
+                if (data) {
+                    $scope.showAddFrame = false;
+                    $scope.account = {};
+                    $scope.account.files = null;
+                    toaster.pop('success', '保存成功');
+                    loadAccountData();
 				}
-			});
-		};
-
-		$scope.confirm = function() {
-			var account = $scope.account;
-
-			if (!account){
-				toaster.pop('error', '请按要求填写正确的信息');
-				return ;
-			}
-			if (!account.bankname || !account.branchname || !account.number || !account.accountname){
-				toaster.pop('error', '请按要求填写正确的信息');
-				return ;
-			}
-			if (!$scope.matchData || $scope.branchError || $scope.branchPattError || $scope.numberError || $scope.numberPattError ||
-				$scope.nameError || $scope.repeatError){
-				toaster.pop('error', '请按要求填写正确的信息');
-				return ;
-			}
-
-			var method = 'saveBuyPersonalBank'; //不区分个人和企业账户
-			bankInfoService[method].call(null, null, $scope.account, function(data) {
-				toaster.pop('success', '保存成功');
-				$modalInstance.close(data)
-			},function (err) {
-				toaster.pop('error', err.data || '保存信息失败');
-			});
-		};
-
-		$scope.cancel = function() {
-			$modalInstance.dismiss();
-		}
-
+            },function (err) {
+                toaster.pop('error', err.data || '保存信息失败');
+            });
+        };
+
+        $scope.cancel = function() {
+            $scope.showAddFrame = false;
+            $scope.account = {};
+            $scope.account.files = null;
+            $scope.showBankFrame = false;
+        }
 	}]);
 });

src/main/webapp/resources/view/common/bankInfoModal.html

@@ -1,132 +0,0 @@
-<style>
-	.margin15 {
-		margin: 0 7px 0 0;
-		font-size: 14px;
-		font-weight: normal;
-		width: 67px;
-	}
-
-	.divinline {
-		display: inline-block;
-	}
-	.modal-header {
-		padding: 15px 18px;
-		border-bottom: 1px solid #ddd;
-	}
-	.divinline .form-control {
-		opacity: 1;
-		width: 241px;
-		border-radius: 0;
-		position:relative;
-	}
-	.divinline .select-down{
-		float:left;
-		width: 241px;
-		max-height:230px;
-		overflow-y: scroll;
-		border-radius: 3px;
-		border:1px solid #5078cb;
-		position:absolute;
-		background: #fff;
-		top:34px;
-		z-index:1000;
-	}
-	.divinline .select-down li{
-		line-height: 32px;
-		padding:6px;
-		padding-left:12px;
-	}
-	.divinline .select-down li:hover{
-		background: #5078cb;
-		color:#fff;
-		cursor:pointer;
-	}
-	.divinline .select-down li.active{
-		background: #5078cb;
-		color:#fff;
-		cursor:pointer;
-	}
-	.modal-content {
-		width: 482px;
-	}
-	.modal-body .form-group .warn-message {
-		color: #f41b1b;
-		font-size: 12px;
-		margin-left: 10px;
-	}
-	.modal-body .remind-message {
-		width: auto;
-		font-size: 12px;
-		position: relative;
-		left: -15px;
-		bottom: 3px;
-	}
-	.modal-footer {
-		text-align: center;
-		border: none;
-		padding-top: 0;
-	}
-	.modal-footer button {
-		margin-right: 10px;
-	}
-</style>
-<div class="modal-header" style="position:relative">
-	<h3 class="modal-title" style="font-weight: 700">{{title}}</h3>
-	<span style="color:#cbcaca;width:10px;height:10px;position:absolute;top:15px;right:15px;"><i class="fa fa-close" style="font-size: 14px;" ng-click="cancel()"></i></span>
-</div>
-<form class="form-horizontal add-bank-account" style="margin-left: 17px;" name="myForm" novalidate>
-	<div class="modal-body">
-			<div class="form-group">
-		    	<label class="margin15"><b class="text-inverse">*&nbsp;</b>开户银行</label>
-		    	<div class="divinline" style="position:relative;margin-right:25px;">
-					<!--<select class="form-control select-adder">-->
-						<!--<option>请选择开户银行</option>-->
-						<!--<option value="1">1</option>-->
-						<!--<option value="2">2</option>-->
-					<!--</select>-->
-		    		<input name="bankname" ng-model="account.bankname" ng-change="checkAccount(1)" autocomplete="off" type="text" class="form-control" placeholder="请选择开户银行" required style="width:216px;border-right:transparent;border-radius:3px 0 0 3px;" ng-keydown="onKeyUp()" ng-focus="getItemFocus()" ng-blur="onItemBlur()">
-					<i class="select-adder" style="display:inline-block;width:25px;height:34px;border:1px solid #ddd;position:absolute;right:-25px;top:0;border-radius:0 3px 3px 0;border-left:transparent" ng-click="showList()"></i>
-					<ul class="select-down" ng-if="showBankFrame && matchData" id="ulContent">
-						<li ng-click="fitBankToAccount(bank)" ng-repeat="bank in resultList" ng-class="{'active': $index==selectIndex}">{{bank}}</li>
-					</ul>
-		  		</div>
-				<span class="warn-message" ng-if="account.bankname && !matchData">请填写正确的开户银行</span>
-				<span class="warn-message" ng-if="myForm.bankname.$touched && myForm.bankname.$invalid">开户银行不能为空</span>
-		  	</div>
-			<div class="form-group">
-				<label class="margin15"><b class="text-inverse">*&nbsp;</b>开户支行</label>
-				<div class="divinline">
-					<input name="branchname" type="text" class="form-control" ng-model="account.branchname" ng-change="checkAccount(2)" autocomplete="off"
-						   placeholder="例如：侨香支行" ng-required="true">
-				</div>
-				<span class="warn-message" ng-if="account.branchname && branchPattError">请填写正确的开户支行</span>
-				<span class="warn-message" ng-if="account.branchname && !branchPattError && branchError">请勿超过20个字</span>
-				<span class="warn-message" ng-if="myForm.branchname.$touched && myForm.branchname.$invalid">开户支行不能为空</span>
-			</div>
-		  	<div class="form-group">
-		  		<label class="margin15"><b class="text-inverse">*&nbsp;</b>银行账号</label>
-		  		<div class="divinline">
-		  			<input name="number" ng-model="account.number" type="text" class="form-control" 
-		  			placeholder="请填写银行账号" ng-required="true" ng-change="checkAccount(3)" autocomplete="off">
-		  		</div>
-				<span class="warn-message" ng-if="account.number && numberPattError">请填写正确的银行账号</span>
-				<span class="warn-message" ng-if="account.number && !numberPattError && numberError">请勿超过30个字符</span>
-				<span class="warn-message" ng-if="account.number && !numberPattError && !numberError && repeatError">该银行账号已存在</span>
-				<span class="warn-message" ng-if="myForm.number.$touched && myForm.number.$invalid">银行账号不能为空</span>
-		  	</div>
-			<div class="form-group">
-				<label class="margin15"><b class="text-inverse">*&nbsp;</b>开户名称</label>
-				<div class="divinline">
-					<input name="accountname" type="text" class="form-control" ng-model="account.accountname"
-						   placeholder="请填写开户人姓名或企业名称" ng-required="true" ng-change="checkAccount(4)" autocomplete="off">
-				</div>
-				<span class="warn-message" ng-if="account.accountname && nameError">请勿超过50个字</span>
-				<span class="warn-message" ng-if="myForm.accountname.$touched && myForm.accountname.$invalid">开户名称不能为空</span>
-			</div>
-		<label class="remind-message"><b class="text-inverse">*&nbsp;</b>为保障您的资金安全，账户信息加密显示且不可修改，只能删除后重新提交。</label>
-	</div>
-</form>
-<div class="modal-footer">
-	<button class="com-btn-level1 com-btn-cancel" ng-click="cancel()">取消</button>
-	<input type="submit" class="com-btn-submit com-btn-level1" ng-click="confirm()" value="确定" />
-</div>

src/main/webapp/resources/view/usercenter/forstore/pay_center.html

@@ -490,12 +490,75 @@
 			<div class="tab" ng-show="status == 'pay-info'" style="display: inline-block;">
 				<div class="tab-header">
 					<span>已设置的账户信息</span>
-					<div ng-click="editAccount()" ng-if="$$bankInfo.totalElements < 20">
+					<div ng-click="editAccount()" ng-if="$$bankInfo.totalElements < 20 && accounts.length > 0">
 						<i class="fa fa-plus-circle"></i>
 						<span>新增账户</span>
 					</div>
 				</div>
-				<table class="user-account-table table" ng-table="bankInfoTableParams">
+				<div class="new-accounts" ng-if="accounts && accounts.length <= 0">
+					<form name="myForm" novalidate>
+						<div class="row">
+							<div class="col-sm-3"><em class="colorRed">*</em>开户银行</div>
+							<div class="col-sm-5" style="position:relative;">
+								<input name="bankname" style="padding:12px 6px;width:90%;border-right:transparent!important;border-radius:3px 0 0 3px;" ng-model="account.bankname" ng-change="checkAccount(1)" autocomplete="off" type="text" class="form-control" placeholder="请选择开户银行" required ng-keydown="onKeyUp()" ng-focus="getItemFocus()" ng-blur="onItemBlur()">
+								<i class="select-adder" ng-click="showList()"></i>
+								<ul class="select-down" ng-if="showBankFrame && matchData" id="ulContent">
+									<li ng-click="fitBankToAccount(bank)" ng-repeat="bank in resultList" ng-class="{'active': $index==selectIndex}">{{bank}}</li>
+								</ul>
+							</div>
+							<div class="col-sm-4">
+								<p ng-if="account.bankname && !matchData">请填写正确的开户银行</p>
+								<p ng-if="myForm.bankname.$touched && myForm.bankname.$invalid">开户银行不能为空</p>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-sm-3"><em class="colorRed">*</em>开户支行</div>
+							<div class="col-sm-5">
+								<input name="branchname" type="text" class="form-control" ng-model="account.branchname" ng-change="checkAccount(2)" autocomplete="off"
+									   placeholder="例如：侨香支行" ng-required="true">
+							</div>
+							<div class="col-sm-4">
+								<p ng-if="account.branchname && branchPattError">请填写正确的开户支行</p>
+								<p ng-if="account.branchname && !branchPattError && branchError">请勿超过20个字</p>
+								<p ng-if="myForm.branchname.$touched && myForm.branchname.$invalid">开户支行不能为空</p>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-sm-3"><em class="colorRed">*</em>银行账号</div>
+							<div class="col-sm-5">
+								<input name="number" ng-model="account.number" type="text" class="form-control"
+									   placeholder="请填写银行账号" ng-required="true" ng-change="checkAccount(3)" autocomplete="off">
+							</div>
+							<div class="col-sm-4">
+								<p ng-if="account.number && numberPattError">请填写正确的银行账号</p>
+								<p ng-if="account.number && !numberPattError && numberError">请勿超过30个字符</p>
+								<p ng-if="account.number && !numberPattError && !numberError && repeatError">该银行账号已存在</p>
+								<p ng-if="myForm.number.$touched && myForm.number.$invalid">银行账号不能为空</p>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-sm-3"><em class="colorRed">*</em>开户名称</div>
+							<div class="col-sm-5">
+								<input name="accountname" type="text" class="form-control" ng-model="account.accountname"
+									   placeholder="请填写开户人姓名或企业名称" ng-required="true" ng-change="checkAccount(4)" autocomplete="off">
+							</div>
+							<div class="col-sm-4">
+								<p ng-if="account.accountname && nameError">请勿超过50个字</p>
+								<p ng-if="myForm.accountname.$touched && myForm.accountname.$invalid">开户名称不能为空</p>
+							</div>
+						</div>
+						<div class="row">
+							<div class="col-sm-9 col-sm-offset-2" style="position: relative;left: -10px;"><em class="colorRed">*</em>为保障您的资金安全，账户信息加密显示且不可修改，只能删除后重新提交。</div>
+						</div>
+					</form>
+					<div class="row">
+						<div class="col-sm-12" style="text-align: center;">
+							<button class="btn" ng-click="cancel()" style="background: #acabab;color:#fff">取消</button>
+							<button class="btn" type="submit" ng-click="confirm()" style="background: #5078cb;color:#fff">确定</button>
+						</div>
+					</div>
+				</div>
+				<table ng-if="accounts.length !== 0" class="user-account-table table" ng-table="bankInfoTableParams">
 					<thead>
 						<th>开户银行</th>
 						<th >开户支行</th>
@@ -517,14 +580,6 @@
 						</tr>
 					</tbody>
 				</table>
-				<div class="empty" ng-if="accounts.length == 0">
-					<p class="empty-img">
-						<img src="static/img/all/empty-cart.png">
-					</p>
-					<div class="empty-info">
-						<p class="grey f14">暂无账户信息</p>
-					</div>
-				</div>
 				<div style="text-align: right;margin-right:25px;margin-top:-30px;" ng-if="accounts.length !== 0">
 					<span class="count-tip">显示 {{$$bankInfo.start}}-{{$$bankInfo.end}} 条,共 <em ng-bind="$$bankInfo.totalElements" style="color: #5078cb">2506</em> 条</span>
 				</div>
@@ -717,8 +772,181 @@
                 </div>
 			</div>
 		</div>
-		<!--<div class="pay_banner">
-			<a href="#"><img src="static/img/user/images/pay_banner.jpg"/></a>
-		</div>-->
 	</div>
 </div>
+
+<!--  模态框 -->
+<div class="view-box" ng-if="showAddFrame">
+	<div class="box">
+		<div class="new-accounts">
+			<h2>新增账户信息</h2>
+			<span style="color:#cbcaca;width:10px;height:10px;position:absolute;top:15px;right:15px;"><i class="fa fa-close" ng-click="cancel()"></i></span>
+			<form name="myForm" novalidate>
+				<div class="row">
+					<div class="col-sm-3"><em class="colorRed">*</em>开户银行</div>
+					<div class="col-sm-5" style="position:relative;">
+						<input name="bankname" style="padding:12px 6px;width:90%;border-right:transparent!important;border-radius:3px 0 0 3px;" ng-model="account.bankname" ng-change="checkAccount(1)" autocomplete="off" type="text" class="form-control" placeholder="请选择开户银行" required ng-keydown="onKeyUp()" ng-focus="getItemFocus()" ng-blur="onItemBlur()">
+						<i class="select-adder" ng-click="showList()"></i>
+						<ul class="select-down" ng-if="showBankFrame && matchData" id="ulContent">
+							<li ng-click="fitBankToAccount(bank)" ng-repeat="bank in resultList" ng-class="{'active': $index==selectIndex}">{{bank}}</li>
+						</ul>
+					</div>
+					<div class="col-sm-4">
+						<p ng-if="account.bankname && !matchData">请填写正确的开户银行</p>
+						<p ng-if="myForm.bankname.$touched && myForm.bankname.$invalid">开户银行不能为空</p>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-sm-3"><em class="colorRed">*</em>开户支行</div>
+					<div class="col-sm-5">
+						<input name="branchname" type="text" class="form-control" ng-model="account.branchname" ng-change="checkAccount(2)" autocomplete="off"
+							   placeholder="例如：侨香支行" ng-required="true">
+					</div>
+					<div class="col-sm-4">
+						<p ng-if="account.branchname && branchPattError">请填写正确的开户支行</p>
+						<p ng-if="account.branchname && !branchPattError && branchError">请勿超过20个字</p>
+						<p ng-if="myForm.branchname.$touched && myForm.branchname.$invalid">开户支行不能为空</p>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-sm-3"><em class="colorRed">*</em>银行账号</div>
+					<div class="col-sm-5">
+						<input name="number" ng-model="account.number" type="text" class="form-control"
+							   placeholder="请填写银行账号" ng-required="true" ng-change="checkAccount(3)" autocomplete="off">
+					</div>
+					<div class="col-sm-4">
+						<p ng-if="account.number && numberPattError">请填写正确的银行账号</p>
+						<p ng-if="account.number && !numberPattError && numberError">请勿超过30个字符</p>
+						<p ng-if="account.number && !numberPattError && !numberError && repeatError">该银行账号已存在</p>
+						<p ng-if="myForm.number.$touched && myForm.number.$invalid">银行账号不能为空</p>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-sm-3"><em class="colorRed">*</em>开户名称</div>
+					<div class="col-sm-5">
+						<input name="accountname" type="text" class="form-control" ng-model="account.accountname"
+							   placeholder="请填写开户人姓名或企业名称" ng-required="true" ng-change="checkAccount(4)" autocomplete="off">
+					</div>
+					<div class="col-sm-4">
+						<p ng-if="account.accountname && nameError">请勿超过50个字</p>
+						<p ng-if="myForm.accountname.$touched && myForm.accountname.$invalid">开户名称不能为空</p>
+					</div>
+				</div>
+				<div class="row">
+					<div class="col-sm-10 col-sm-offset-2" style="position: relative;left: -43px;"><em class="colorRed">*</em>为保障您的资金安全，账户信息加密显示且不可修改，只能删除后重新提交。</div>
+				</div>
+			</form>
+			<div class="row">
+				<div class="col-sm-12" style="text-align: center;">
+					<button class="btn" ng-click="cancel()" style="background: #acabab;color:#fff">取消</button>
+					<button class="btn" type="submit" ng-click="confirm()" style="background: #5078cb;color:#fff">确定</button>
+				</div>
+			</div>
+		</div>
+	</div>
+</div>
+
+<style>
+	.view-box{
+		position: fixed;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		z-index: 1040;
+		background: rgba(0,0,0,.5);
+	}
+	.view-box .box{
+		width:645px;
+		height: 450px;
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		margin: auto;
+		box-shadow: 0 0 3px #888;
+		background: #fff;
+		border-radius: 5px;
+	}
+	.new-accounts{
+		font-size: 14px;
+		width: 100%;
+		position:relative;
+	}
+	.new-accounts .select-adder {
+		display:inline-block;
+		width:10%;
+		height:34px;
+		border:1px solid #ccc;
+		position:absolute;
+		right:0;
+		top:0;
+		border-radius:0 3px 3px 0;
+		border-left:transparent;
+	}
+	.new-accounts .select-down{
+		width:100%;
+		border:1px solid #89aefa;
+		border-radius:3px;
+		background: #fff;
+		max-height:230px;
+		overflow-y: scroll;
+		position:absolute;
+		top:34px;
+		left:0;
+		z-index:100;
+	}
+	.new-accounts .colorRed {
+		color: #f00;
+		font-size: 12px;
+		margin-right: 5px;
+	}
+	.new-accounts .select-down li{
+		line-height: 32px;
+		padding:6px;
+		padding-left:12px;
+
+	}
+	.new-accounts .select-down li:hover{
+		background: #89aefa;
+		color:#fff;
+		cursor:pointer;
+	}
+	.new-accounts .select-down li.active{
+		background: #89aefa;
+		color:#fff;
+		cursor:pointer;
+	}
+	.new-accounts h2{
+		width: 100%;
+		line-height: 45px;
+		padding-left: 20px;
+		font-size: 14px;
+		font-family: normal;
+		font-weight: bold;
+		border-bottom: #e5e5e5 1px solid;
+	}
+	.new-accounts .row{
+		margin: 15px 0 20px 0;
+		line-height: 34px;
+		font-size: 14px;
+	}
+	.new-accounts .row p{
+		color:#f00;
+	}
+	.new-accounts .col-sm-3{
+		text-align: right;
+	}
+	.new-accounts .col-sm-5{
+		padding:0;
+	}
+	.new-accounts .row label {
+		margin-left: 14px;
+	}
+	.btn:hover{
+		background: #5078cb !important;
+		border: #3f7ae3 1px solid;
+	}
+
+</style>

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

@@ -175,22 +175,22 @@
         padding: 15px 0;
         margin: 0;
     }
-    .beizhu .col-md-1{
+    .beizhu .col-sm-1{
         width: 44px;
         padding: 0;
         margin-left: 30px;
     }
-    .beizhu .col-md-11{
+    .beizhu .col-sm-11{
         line-height: 20px;
         font-size: 12px;
     }
     .grey{
         color: #999;
     }
-    .beizhu .col-md-11 a{
+    .beizhu .col-sm-11 a{
         color: #5078cb;
     }
-    .beizhu .col-md-11 a:hover{
+    .beizhu .col-sm-11 a:hover{
         font-weight: 700;
         text-decoration: underline;
     }
@@ -848,12 +848,12 @@
             <div class="tab" ng-show="tab == 'accountTab'" style="display: inline-block;">
                 <div class="tab-header">
                     <span>已设置的账户信息</span>
-                    <div ng-click="newAccount()" ng-if="$$bankInfo.totalElements < 20">
+                    <div ng-click="newAccount()" ng-if="$$bankInfo.totalElements < 20 && accounts.length > 0">
                         <i class="fa fa-plus-circle"></i>
                         <span>新增账户</span>
                     </div>
                 </div>
-                <table class="user-account-table table" ng-table="bankInfoTableParams" style="margin-bottom:45px;table-layout: fixed">
+                <table class="user-account-table table" ng-table="bankInfoTableParams" style="margin-bottom:45px;table-layout: fixed" ng-if="accounts && accounts.length > 0">
                     <thead>
                     <tr>
                         <th >开户银行</th>
@@ -885,7 +885,87 @@
                         </td>
                     </tr>
                 </table>
-                <p style="text-align:right;margin-right:28px;margin-top:-35px;">显示{{$$bankInfo.start}}-{{$$bankInfo.end}} 条，共 {{$$bankInfo.totalElements}}条</p>
+                <div class="add-count" ng-if="accounts && accounts.length <= 0">
+                    <form name="myForm">
+                        <div class="row">
+                            <div class="col-sm-3"><em class="colorRed">*</em>开户银行</div>
+                            <div class="col-sm-5" style="position:relative;">
+                                <input name="bankname" ng-keydown="onKeyUp()" ng-model="account.bankname" ng-change="checkAccount(1)" class="form-control" autocomplete="off" type="text" placeholder="例如：中国工商银行侨香支行" style="padding:12px 6px;width:91%;border-right:transparent;border-radius:3px 0 0 3px;" ng-focus="getItemFocus()" ng-blur="onItemBlur()" autocomplete="off">
+                                <i class="select-adder" ng-click="showList()" style="display:inline-block;width:10%;height:34px;box-shadow: inset 0 1px 1px rgba(0,0,0,.075);position:absolute;top:0;right:0;z-index:10;border:1px solid #ccc;border-radius:0 3px 3px 0;border-left:transparent"></i>
+                                <ul id="ulContent" class="select-down" ng-if="showBankFrame && matchData">
+                                    <li ng-click="fitBankToAccount(bank)" ng-repeat="bank in resultList" ng-class="{'active': $index==selectIndex}">{{bank}}</li>
+                                </ul>
+                            </div>
+                            <div class="col-sm-4">
+                                <p ng-if="account.bankname && !matchData">请填写正确的开户银行</p>
+                                <p ng-if="myForm.bankname.$touched && !account.bankname">开户银行不能为空</p>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-sm-3"><em class="colorRed">*</em>开户支行</div>
+                            <div class="col-sm-5">
+                                <input name="branchname" ng-model="account.branchname" ng-change="checkAccount(2)" class="form-control" autocomplete="off" type="text" placeholder="例如：侨香支行">
+                            </div>
+                            <div class="col-sm-4">
+                                <p ng-if="account.branchname && branchPattError">请填写正确的开户支行</p>
+                                <p ng-if="account.branchname && !branchPattError && branchError">请勿超过20个字</p>
+                                <p ng-if="myForm.branchname.$touched && !account.branchname">开户支行不能为空</p>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-sm-3"><em class="colorRed">*</em>银行账号</div>
+                            <div class="col-sm-5">
+                                <input name="number" ng-model="account.number" ng-change="checkAccount(3)" class="form-control" autocomplete="off" type="text" placeholder="请填写银行账号">
+                            </div>
+                            <div class="col-sm-4">
+                                <p ng-if="account.number && numberPattError">请填写正确的银行账号</p>
+                                <p ng-if="account.number && !numberPattError && numberError">请勿超过30个字符</p>
+                                <p ng-if="account.number && !numberPattError && !numberError && repeatError">该银行账号已存在</p>
+                                <p ng-if="myForm.number.$touched && !account.number">银行账号不能为空</p>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-sm-3"><em class="colorRed">*</em>开户名称</div>
+                            <div class="col-sm-5">
+                                <input name="accountname" ng-model="account.accountname" ng-change="checkAccount(4)" class="form-control" autocomplete="off" type="text" placeholder="请填写开户人姓名或企业名称">
+                            </div>
+                            <div class="col-sm-4">
+                                <p ng-if="account.accountname && nameError">请勿超过50个字</p>
+                                <p ng-if="myForm.accountname.$touched && !account.accountname">开户名称不能为空</p>
+                            </div>
+                        </div>
+                        <div class="row">
+                            <div class="col-sm-3"><em class="colorRed">*</em>上传开户许可证</div>
+                            <div class="col-sm-5 upload">
+                                <input type="text" readonly ng-model="account.attachUrl" class="form-control" style="width:70%;margin-right:10px;"/>
+                                <i>选择文件</i>
+                                <input type="file" class="upload01" ng-change="uploadChange()" ng-file-select ng-model="account.files" required ng-multiple="false" />
+                            </div>
+                            <div class="col-sm-4">
+                                <p ng-if="fileError">请上传可支持的格式</p>
+                                <p ng-if="!fileError && fileLegError">请勿超过3M</p>
+                            </div>
+                        </div>
+                    </form>
+                    <div class="row">
+                        <button style="width:0;height:0;background: transparent;border:0;"></button>
+                        <div class="col-sm-12" style="text-align: center;">
+                            <button class="btn" ng-click="cancelAdd()" style="background: #acabab;color:#fff">取消</button>
+                            <button class="btn" type="submit" ng-click="ensureAddAccount()" style="background: #5078cb;color:#fff">确定</button>
+                        </div>
+                    </div>
+                    <div class="beizhu row">
+                        <div class="col-sm-1" style="color: #f00;line-height: 20px;">*声明：</div>
+                        <div class="col-sm-10">
+                            1. 此账户为卖家收款账户，请仔细核对信息内容，若由信息错误造成的损失，优软商城不承担赔偿责任。<br/>
+                            2. 卖家只能有唯一一个“使用中”的收款账户，新增账户审核通过后，原账户将自动失效。<br/>
+                            3. 如您的企业名称、开户银行及账号变更，您须在优软商城开展资金结算前进行更正，否则发生转账错误优软商城不承担赔偿责任。<br/>
+                            4. 更多的条款请阅读<a href="help/helpDetail/51" style="color: #5078cb;" target="_blank">《优软商城代收代付协议》</a> 。<br/>
+                            5. 附件仅支持JPG、PNG、PDF格式，大小超过3M。
+                        </div>
+                    </div>
+                </div>
+                <p ng-if="accounts && accounts.length > 0" style="text-align:right;margin-right:28px;margin-top:-35px;">显示{{$$bankInfo.start}}-{{$$bankInfo.end}} 条，共 {{$$bankInfo.totalElements}}条</p>
                 <div class="com-del-box" ng-if="showReuseFrame">
                     <div class="title">
                         <a ng-click="cancelReuse()"><i class="fa fa-close fa-lg"></i></a>
@@ -911,36 +991,36 @@
             <span style="color:#cbcaca;width:10px;height:10px;position:absolute;top:15px;right:15px;"><i class="fa fa-close" ng-click="cancelAdd()"></i></span>
             <form name="myForm">
                 <div class="row">
-                    <div class="col-md-3"><em class="colorRed">*</em>开户银行</div>
-                    <div class="col-md-5" style="position:relative;">
+                    <div class="col-sm-3"><em class="colorRed">*</em>开户银行</div>
+                    <div class="col-sm-5" style="position:relative;">
                         <input name="bankname" ng-keydown="onKeyUp()" ng-model="account.bankname" ng-change="checkAccount(1)" class="form-control" autocomplete="off" type="text" placeholder="例如：中国工商银行侨香支行" style="padding:12px 6px;width:91%;border-right:transparent;border-radius:3px 0 0 3px;" ng-focus="getItemFocus()" ng-blur="onItemBlur()" autocomplete="off">
-                        <i class="select-adder" ng-click="showList()" style="display:inline-block;width:25px;height:34px;position:absolute;top:0;right:0;z-index:10;border:1px solid #ddd;border-radius:0 3px 3px 0;border-left:transparent"></i>
+                        <i class="select-adder" ng-click="showList()" style="display:inline-block;width:10%;height:34px;box-shadow: inset 0 1px 1px rgba(0,0,0,.075);position:absolute;top:0;right:0;z-index:10;border:1px solid #ccc;border-radius:0 3px 3px 0;border-left:transparent"></i>
                         <ul id="ulContent" class="select-down" ng-if="showBankFrame && matchData">
                             <li ng-click="fitBankToAccount(bank)" ng-repeat="bank in resultList" ng-class="{'active': $index==selectIndex}">{{bank}}</li>
                         </ul>
                     </div>
-                    <div class="col-md-4">
+                    <div class="col-sm-4">
                         <p ng-if="account.bankname && !matchData">请填写正确的开户银行</p>
                         <p ng-if="myForm.bankname.$touched && !account.bankname">开户银行不能为空</p>
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-md-3"><em class="colorRed">*</em>开户支行</div>
-                    <div class="col-md-5">
+                    <div class="col-sm-3"><em class="colorRed">*</em>开户支行</div>
+                    <div class="col-sm-5">
                         <input name="branchname" ng-model="account.branchname" ng-change="checkAccount(2)" class="form-control" autocomplete="off" type="text" placeholder="例如：侨香支行">
                     </div>
-                    <div class="col-md-4">
+                    <div class="col-sm-4">
                         <p ng-if="account.branchname && branchPattError">请填写正确的开户支行</p>
                         <p ng-if="account.branchname && !branchPattError && branchError">请勿超过20个字</p>
                         <p ng-if="myForm.branchname.$touched && !account.branchname">开户支行不能为空</p>
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-md-3"><em class="colorRed">*</em>银行账号</div>
-                    <div class="col-md-5">
+                    <div class="col-sm-3"><em class="colorRed">*</em>银行账号</div>
+                    <div class="col-sm-5">
                         <input name="number" ng-model="account.number" ng-change="checkAccount(3)" class="form-control" autocomplete="off" type="text" placeholder="请填写银行账号">
                     </div>
-                    <div class="col-md-4">
+                    <div class="col-sm-4">
                         <p ng-if="account.number && numberPattError">请填写正确的银行账号</p>
                         <p ng-if="account.number && !numberPattError && numberError">请勿超过30个字符</p>
                         <p ng-if="account.number && !numberPattError && !numberError && repeatError">该银行账号已存在</p>
@@ -948,23 +1028,23 @@
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-md-3"><em class="colorRed">*</em>开户名称</div>
-                    <div class="col-md-5">
+                    <div class="col-sm-3"><em class="colorRed">*</em>开户名称</div>
+                    <div class="col-sm-5">
                         <input name="accountname" ng-model="account.accountname" ng-change="checkAccount(4)" class="form-control" autocomplete="off" type="text" placeholder="请填写开户人姓名或企业名称">
                     </div>
-                    <div class="col-md-4">
+                    <div class="col-sm-4">
                         <p ng-if="account.accountname && nameError">请勿超过50个字</p>
                         <p ng-if="myForm.accountname.$touched && !account.accountname">开户名称不能为空</p>
                     </div>
                 </div>
                 <div class="row">
-                    <div class="col-md-3"><em class="colorRed">*</em>上传开户许可证</div>
-                    <div class="col-md-5 upload">
+                    <div class="col-sm-3"><em class="colorRed">*</em>上传开户许可证</div>
+                    <div class="col-sm-5 upload">
                         <input type="text" readonly ng-model="account.attachUrl" class="form-control" style="width:70%;margin-right:10px;"/>
                         <i>选择文件</i>
                         <input type="file" class="upload01" ng-change="uploadChange()" ng-file-select ng-model="account.files" required ng-multiple="false" />
                     </div>
-                    <div class="col-md-4">
+                    <div class="col-sm-4">
                         <p ng-if="fileError">请上传可支持的格式</p>
                         <p ng-if="!fileError && fileLegError">请勿超过3M</p>
                     </div>
@@ -972,14 +1052,14 @@
             </form>
             <div class="row">
                 <button style="width:0;height:0;background: transparent;border:0;"></button>
-                <div class="col-md-12" style="text-align: center;">
+                <div class="col-sm-12" style="text-align: center;">
                     <button class="btn" ng-click="cancelAdd()" style="background: #acabab;color:#fff">取消</button>
                     <button class="btn" type="submit" ng-click="ensureAddAccount()" style="background: #5078cb;color:#fff">确定</button>
                 </div>
             </div>
             <div class="beizhu row">
-                <div class="col-md-1" style="color: #f00;line-height: 20px;">*声明：</div>
-                <div class="col-md-10">
+                <div class="col-sm-1" style="color: #f00;line-height: 20px;">*声明：</div>
+                <div class="col-sm-10">
                     1. 此账户为卖家收款账户，请仔细核对信息内容，若由信息错误造成的损失，优软商城不承担赔偿责任。<br/>
                     2. 卖家只能有唯一一个“使用中”的收款账户，新增账户审核通过后，原账户将自动失效。<br/>
                     3. 如您的企业名称、开户银行及账号变更，您须在优软商城开展资金结算前进行更正，否则发生转账错误优软商城不承担赔偿责任。<br/>
@@ -1073,10 +1153,10 @@
     .add-count .row p{
         color:#f00;
     }
-    .add-count .col-md-3{
+    .add-count .col-sm-3{
         text-align: right;
     }
-    .add-count .col-md-5{
+    .add-count .col-sm-5{
        padding:0;
     }
     .add-count .row label{
@@ -1090,28 +1170,28 @@
 
     .upload i {
         background: #ff8522;
-        width: 25%;
-        height: 22px;
+        width: 28%;
+        height: 34px;
         display: inline-block;
         text-align: center;
         color: #fff;
-        line-height: 22px;
+        line-height: 34px;
         font-size: 14px;
         position: absolute;
-        right:0;
-        top: 9px;
+        right: 0;
+        top: 0;
         cursor: pointer;
         border-radius: 3px;
     }
     .upload01 {
+        width: 28%;
         height: 34px;
         filter:alpha(opacity=0);
         -moz-opacity:0;
         opacity:0;
         position: absolute;
-        width: 80px;
-        left: 195px;
-        top: 2px;
+        right: 0;
+        top: 0;
     }
     .upload-btn{
         width: 100px;
@@ -1129,18 +1209,18 @@
         background: #ebebeb;
         border-radius: 0 0 5px 5px;
     }
-    .add-count .beizhu .col-md-1{
+    .add-count .beizhu .col-sm-1{
         padding: 0;
         font-size: 12px;
         line-height: 20px;
         text-align: right;
     }
-    .add-count .beizhu .col-md-10{
+    .add-count .beizhu .col-sm-10{
         line-height: 20px;
         font-size: 12px;
         padding:0;
     }
-    .add-count .beizhu .col-md-10 a:hover{
+    .add-count .beizhu .col-sm-10 a:hover{
         font-weight: 700;
         text-decoration: underline;
     }