Browse Source

注册页面

git-svn-id: svn+ssh://10.10.101.21/source/platform/platform-b2b@309 f3bf4e98-0cf0-11e4-a00c-a99a8b9d557d
suntg 11 years ago
parent
commit
17bfa35677

+ 48 - 0
src/main/webapp/resources/css/register.css

@@ -92,6 +92,16 @@ h1,h2,h3 {
 	width: 66px;
 	height: 66px;
 }
+
+/* common */
+.margin-b-0 {
+	margin-bottom: 0px;
+}
+
+.padding-b-0 {
+	padding-bottom: 0px;
+}
+
 /*header*/
 #top {
 	border-top: 4px solid #44b549;
@@ -191,6 +201,13 @@ h1,h2,h3 {
 	padding: 8px 15px;
 }
 
+form {
+	padding-top: 10px;
+	border: solid 1px #CCCCCC;
+	border-radius: 4px;
+	margin-bottom: 20px;
+}
+
 /*footer*/
 #footer {
 	color: #f1f1f1;
@@ -211,4 +228,35 @@ h1,h2,h3 {
 
 .navbar {
 	margin-bottom: 0px;
+}
+
+/*加载图标*/
+.spinner {
+	margin-left: 5px;
+  	text-align: center;
+  	display: inline-block;
+}
+ 
+.spinner > div {
+  	width: 10px;
+  	height: 10px;
+  	background-color: #FFFFFF;
+ 
+  	border-radius: 100%;
+  	display: inline-block;
+  	-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
+  	animation: bouncedelay 1.4s infinite ease-in-out;
+  	/* Prevent first frame from flickering when animation starts */
+  	-webkit-animation-fill-mode: both;
+  	animation-fill-mode: both;
+}
+ 
+.spinner .bounce1 {
+  	-webkit-animation-delay: -0.32s;
+  	animation-delay: -0.32s;
+}
+ 
+.spinner .bounce2 {
+  	-webkit-animation-delay: -0.16s;
+  	animation-delay: -0.16s;
 }

BIN
src/main/webapp/resources/img/all/pdf.jpg


BIN
src/main/webapp/resources/img/all/preview-error.jpg


+ 3 - 0
src/main/webapp/resources/js/register/main.js

@@ -6,6 +6,8 @@ require.config({
 		'ngAnimate': 'lib/angular/angular-animate.min',
 		'toaster' : 'lib/angular/angular-toaster.min',
 		'ui.router' : 'lib/angular/angular-ui-router.min',
+		'file-upload' : 'lib/angular/angular-file-upload.min',
+		'file-upload-shim' : 'lib/angular/angular-file-upload-shim.min',
 		'services' : 'js/common/services'
 	},
 	shim : {
@@ -15,6 +17,7 @@ require.config({
 		'ngAnimate' : ['angular'],
 		'ui.router' : ['angular'],
 		'toaster' : ['angular', 'ngAnimate'],
+		'file-upload': ['angular'],
 		'services': ['angular']
 	}
 });

+ 142 - 3
src/main/webapp/resources/js/register/registerApp.js

@@ -1,6 +1,6 @@
-define([ 'toaster', 'services' ,'ui.router'], function() {
+define([ 'toaster', 'services' ,'ui.router', 'file-upload', 'file-upload-shim'], function() {
 	'use strict';
-	var app = angular.module('myApp', [ 'toaster', 'common.services' ,'ui.router']);
+	var app = angular.module('myApp', [ 'toaster', 'common.services', 'angularFileUpload', 'ui.router']);
 	app.init = function() {
 		angular.bootstrap(document, [ 'myApp' ]);
 	};
@@ -18,8 +18,147 @@ define([ 'toaster', 'services' ,'ui.router'], function() {
     	});
 	});
 	
-	app.controller('Step1Ctrl', function() {
+	app.controller('Step1Ctrl', function($scope, $http, $location, $upload, toaster) {
+		$scope.loadingShow = false;//加载小图标,设为true即可显示
+		$scope.title = '注册表单';
+		$scope.enterprise = {};//企业实体
+		$scope.agree = true;//默认同意服务协议
 		
+		/**
+		 * 处理企业信息注册提交
+		 */
+		$scope.register = function(){
+			$scope.loadingShow = true;
+			var file = $scope.myFiles[0];
+			console.log($scope.enterprise);
+			$upload.upload({
+				url: 'signin/register.action',
+				file: file,
+				method: 'POST',
+				data: {
+					enterprise: $scope.enterprise
+				}
+			}).success(function(data){
+				$scope.loadingShow = false;
+				$location.path('step2');
+			}).error(function(data){
+				$scope.loadingShow = false;
+				toaster.pop('error', '操作失败', data.error);
+			});
+		};
+		
+		$scope.$watch('enterprise.enBussinessCode', function(){
+			if($scope.enterprise.enBussinessCode && $scope.enterprise.enBussinessCode.length==15) {
+				$http.get('signin/codeEnable', {
+					params: {
+						code: $scope.enterprise.enBussinessCode
+					}
+				}).success(function(data){
+					console.log(data);
+					if(data == 'ENABLE') {
+						$scope.myForm.enBussinessCode.$setValidity('available', true);
+					} else if(data == 'USED') {
+						$scope.myForm.enBussinessCode.$setValidity('available', false);
+						$scope.codeErrorInfo = '执照号已注册';
+					} else {
+						$scope.myForm.enBussinessCode.$setValidity('available', false);
+						$scope.codeErrorInfo = '执照号已申请';
+					}
+				}).error(function() {
+					$scope.myForm.enBussinessCode.$setValidity('available', false);
+					$scope.codeErrorInfo = '验证出错';
+				});
+			} else {
+				$scope.myForm.enBussinessCode.$setValidity('available', false);
+				if($scope.enterprise.enBussinessCode) $scope.codeErrorInfo = '格式错误';
+			}
+		});
+		
+		$scope.$watch('enterprise.enAdminTel', function(){
+			if($scope.enterprise.enAdminTel) {
+				$http.get('signin/telEnable', {
+					params: {
+						tel: $scope.enterprise.enAdminTel
+					}
+				}).success(function(data){
+					console.log(data);
+					if(data && data == 'true') {
+						$scope.myForm.enAdminTel.$setValidity('available', true);
+					} else {
+						$scope.myForm.enAdminTel.$setValidity('available', false);
+						$scope.telErrorInfo = '手机号已被使用';
+					}
+				}).error(function() {
+					$scope.myForm.enAdminTel.$setValidity('available', false);
+					$scope.telErrorInfo = '验证出错';
+				});
+			} else {
+				$scope.myForm.enAdminTel.$setValidity('available', false);
+			}
+		});
+		$scope.$watch('enterprise.enAdminEmail', function(){
+			if($scope.enterprise.enAdminEmail) {
+				$http.get('signin/emailEnable', {
+					params: {
+						email: $scope.enterprise.enAdminEmail
+					}
+				}).success(function(data){
+					if(data && data == 'true') {
+						$scope.myForm.enAdminEmail.$setValidity('available', true);
+					} else {
+						$scope.myForm.enAdminEmail.$setValidity('available', false);
+						$scope.emailErrorInfo = '邮箱已被使用';
+					}
+				}).error(function(){
+					$scope.myForm.enAdminEmail.$setValidity('available', false);
+					$scope.emailErrorInfo = '验证出错';
+				});
+			} else {
+				$scope.myForm.enAdminEmail.$setValidity('available', false);
+			}
+		});
+		$scope.previewShow = false;
+		$scope.pdfShow = false;
+		$scope.noneFileShow = true;
+		$scope.$watch('myFiles', function(){
+			if($scope.myFiles) {
+				$scope.noneFileShow = false;
+				var file = $scope.myFiles[0];
+				if(file.name.indexOf('.pdf') != -1 || file.name.indexOf('.PDF') != -1) {//pdf文件
+					$scope.pdfShow = true;
+					$scope.previewShow = false;
+					$scope.imgPreviewName = file.name;
+				} else{
+					if (typeof(Worker) !== "undefined") {//支持HTML5
+						$scope.imgPreview = getObjectURL(file);
+						$scope.imgPreviewName = file.name;
+					} else{//不支持HTML5
+						$scope.imgPreview = 'static/img/all/preview-error.jpg';
+						$scope.imgPreviewName = file.name;
+					}
+					$scope.previewShow = true;
+					$scope.pdfShow = false;
+				}
+				console.log($scope.myFiles[0]);
+				console.log(getObjectURL($scope.myFiles[0]));
+			} else {
+				$scope.noneFileShow = true;
+				$scope.previewShow = false;
+				$scope.pdfShow = false;
+			}
+		});
+		//建立一个可存取到该file的url
+		var getObjectURL = function(file) {
+			var url = null ; 
+			if (window.createObjectURL!=undefined) { // basic
+				url = window.createObjectURL(file) ;
+			} else if (window.URL!=undefined) { // mozilla(firefox)
+				url = window.URL.createObjectURL(file) ;
+			} else if (window.webkitURL!=undefined) { // webkit or chrome
+				url = window.webkitURL.createObjectURL(file) ;
+			}
+			return url ;
+		};
 	});
 	return app;
 });

File diff suppressed because it is too large
+ 1 - 0
src/main/webapp/resources/lib/angular/angular-file-upload-shim.min.js


File diff suppressed because it is too large
+ 1 - 0
src/main/webapp/resources/lib/angular/angular-file-upload.min.js


+ 29 - 20
src/main/webapp/resources/tpl/register/step1.html

@@ -37,14 +37,14 @@
 <div class="row" ng-controller="Step1Ctrl">
 	<!-- enterprise form start -->
 	<div class="col-md-9">
-		<form name="enterpriseForm" class="form-horizontal" role="form" ng-submit="register(enterprise)">
+		<form name="myForm" class="form-horizontal" role="form" ng-submit="register(enterprise)">
 		  	<div class="form-group">
 		    	<label for="enName" class="col-md-3 col-sm-4 control-label">企业名称:</label>
 			    <div class="col-md-5 col-sm-6">
 			      	<input required ng-model="enterprise.enName" type="text" class="form-control" id="enName" 
 			      		placeholder="请输入企业在工商局注册时使用的名称">
 			    </div>
-			    <label class="col-md-4 col-sm-offset-4 col-md-offset-0">请输入企业在工商局注册时使用的名称</label>
+			    <div class="col-md-4 col-sm-offset-4 col-md-offset-0">请输入企业在工商局注册时使用的名称</div>
 		  	</div>
 		  	<div class="form-group">
 		    	<label for="enShortname" class="col-md-3 col-sm-4 control-label">企业简称:</label>
@@ -56,17 +56,21 @@
 		  	<div class="form-group">
 		    	<label for="enBusinessCode" class="col-md-3 col-sm-4 control-label">营业执照注册号:</label>
 			    <div class="col-md-5 col-sm-6">
-			      	<input required ng-model="enterprise.enBussinessCode" type="text" class="form-control" id="enBusinessCode" 
+			      	<input required ng-model="enterprise.enBussinessCode" type="text" class="form-control" id="enBusinessCode" name="enBussinessCode"
 			      		placeholder="请输入企业在工商局注册时得到的15位营业执照注册号(注册证号)">
 			    </div>
-			    <label class="col-md-4 col-sm-offset-4 col-md-offset-0">请输入企业在工商局注册时得到的15位营业执照注册号(注册证号)</label>
+			    <div class="col-md-4 col-sm-offset-4 col-md-offset-0">
+			    	<span ng-show="!myForm.enBussinessCode.$invalid" class="text-success"><span class="glyphicon glyphicon-ok-circle"></span>恭喜您,执照号可用</span>
+			    	<span ng-show="myForm.enBussinessCode.$invalid && enterprise.enBussinessCode" class="text-danger"><span class="glyphicon glyphicon-remove-circle"></span>{{codeErrorInfo}}</span>
+			    	请输入企业在工商局注册时得到的15位营业执照注册号(注册证号)
+			    </div>
 		  	</div>
 		  	<div class="form-group">
 		    	<label for="enImage" class="col-md-3 col-sm-4 control-label">上传营业执照:</label>
 			    <div class="col-md-5 col-sm-6">
 			      	<input required ng-file-select accept="image/*,application/pdf,*.pdf" ng-model="myFiles" type="file" 
-			      		ng-multiple="false" class="form-control" name="enImage" placeholder="请上传企业营业执照复印件">
-			      	<div class="well" >
+			      		ng-multiple="false" class="form-control" id="enImage" name="enImage" placeholder="请上传企业营业执照复印件">
+			      	<div class="well margin-b-0" >
 			      		<div ng-show="previewShow">
 			      			<img ng-show="previewShow" alt="营业执照复印件" src="{{imgPreview}}" width="200px" height="100px">
 			      			<div>
@@ -82,7 +86,7 @@
 			      		</div>
 			      	</div>
 			    </div>
-			    <label class="col-md-4 col-sm-offset-4 col-md-offset-0">请上传企业营业执照复印件或清晰照片的图片文件或PDF文件</label>
+			    <div class="col-md-4 col-sm-offset-4 col-md-offset-0">请上传企业营业执照复印件或清晰照片的图片文件或PDF文件</div>
 		  	</div>
 		  	<div class="form-group">
 		    	<label for="enArea" class="col-md-3 col-sm-4 control-label">公司注册地区 :</label>
@@ -94,33 +98,38 @@
 			      		<option value="其他">其他</option>
 			      	</select>
 			    </div>
-			    <label class="col-md-4 col-sm-offset-4 col-md-offset-0">请选择公司注册地区</label>
+			    <div class="col-md-4 col-sm-offset-4 col-md-offset-0">请选择公司注册地区</div>
 		  	</div>
 		  	<div class="form-group">
 		    	<label for="enAdminTel" class="col-md-3 col-sm-4 control-label">管理员手机号:</label>
 			    <div class="col-md-5 col-sm-6">
-			      	<input required ng-model="enterprise.enAdminTel" ng-length="11" type="text" class="form-control" name="enAdminTel" placeholder="请输入系统管理员手机号">
+			      	<input required ng-model="enterprise.enAdminTel" ng-length="11" type="text" class="form-control" id="enAdminTel" name="enAdminTel" placeholder="请输入系统管理员手机号">
 			    </div>
-			    <label class="col-md-4 col-sm-offset-4 col-md-offset-0">
+			    <div class="col-md-4 col-sm-offset-4 col-md-offset-0">
 			    	<span ng-show="!myForm.enAdminTel.$invalid" class="text-success"><span class="glyphicon glyphicon-ok-circle"></span>恭喜您,手机号可用</span>
-			    	<span ng-show="myForm.enAdminTel.$invalid" class="text-danger"><span class="glyphicon glyphicon-remove-circle"></span>{{telErrorInfo}}</span>
-			    	&nbsp;&nbsp;可作为商务平台账号登录
-			    </label>
+			    	<span ng-show="myForm.enAdminTel.$invalid && enterprise.enAdminTel" class="text-danger"><span class="glyphicon glyphicon-remove-circle"></span>{{telErrorInfo}}</span>
+			    	可作为商务平台账号登录
+			    </div>
 		  	</div>
 		  	<div class="form-group">
 		    	<label for="enAdminEmail" class="col-md-3 col-sm-4 control-label">管理员邮箱:</label>
 			    <div class="col-md-5 col-sm-6">
-			      	<input required ng-model="enterprise.enAdminEmail" type="email" class="form-control" name="enAdminEmail" placeholder="请输入系统管理员邮箱地址">
+			      	<input required ng-model="enterprise.enAdminEmail" type="email" class="form-control" id="enAdminEmail" name="enAdminEmail" placeholder="请输入系统管理员邮箱地址">
 			    </div>
-			    <label class="col-md-4 col-sm-offset-4 col-md-offset-0">
+			    <div class="col-md-4 col-sm-offset-4 col-md-offset-0">
 			    	<span ng-show="!myForm.enAdminEmail.$invalid" class="text-success"><span class="glyphicon glyphicon-ok-circle"></span>恭喜您,邮箱可用</span>
-			    	<span ng-show="myForm.enAdminEmail.$invalid" class="text-danger"><span class="glyphicon glyphicon-remove-circle"></span>{{emailErrorInfo}}</span>
-			    	&nbsp;&nbsp;将用于接收激活邮件和系统邮件,可作为商务平台账号登录
-			    </label>
+			    	<span ng-show="myForm.enAdminEmail.$invalid && enterprise.enAdminEmail" class="text-danger"><span class="glyphicon glyphicon-remove-circle"></span>{{emailErrorInfo}}</span>
+			    	将用于接收激活邮件和系统邮件,可作为商务平台账号登录
+			    </div>
+		  	</div>
+		  	<div class="form-group">
+			    <div class="col-md-5 col-sm-6 col-md-offset-3 col-sm-offset-4">
+			    	<input type="checkbox" ng-model="agree" > 我已同意<a href="#">《优软商务平台服务协议》</a>
+			    </div>
 		  	</div>
 		  	<div class="form-group">
 		    	<div class="col-md-offset-3 col-md-4 col-sm-offset-3 col-sm-4">
-		      		<button ng-disabled="enterpriseForm.$invalid" type="submit" class="btn btn-success btn-block">下一步
+		      		<button ng-disabled="myForm.$invalid || !agree" type="submit" class="btn btn-success btn-block">下一步
 		      			<div class="spinner" ng-show="loadingShow">
 						  	<div class="bounce1"></div>
 						  	<div class="bounce2"></div>
@@ -129,7 +138,7 @@
 		      		</button>
 		    	</div>
 		    	<div class="col-md-4 col-sm-4">
-		      		<a href="#/registerStepB2B" class="btn btn-default btn-block">我已有B2B账号</a>
+		    		
 		    	</div>
 		  	</div>
 		</form>

+ 50 - 0
src/main/webapp/resources/tpl/register/step2.html

@@ -0,0 +1,50 @@
+<!-- step start -->
+<div class="row text-center">
+	<div class="step col-md-8 col-md-offset-2 col-sm-11 col-sm-offset-1">
+		<ol class="ui-step">
+			<li class="ui-step-start">
+				<div class="ui-step-line ui-step-line-active"></div>
+				<div class="ui-step-text ui-step-text-active">
+					<span class="ui-step-texttitle">第 1 步</span><br>
+					<span class="ui-step-textdetail">填写资料</span>
+				</div>
+    		</li>
+    		<li class="ui-step-start">
+				<div class="ui-step-line"></div>
+				<div class="ui-step-text ui-step-text-active">
+					<span class="ui-step-texttitle">第 2 步</span><br>
+					<span class="ui-step-textdetail">提交审核</span>
+				</div>
+    		</li>
+    		<li class="ui-step-start">
+				<div class="ui-step-text">
+					<span class="ui-step-texttitle">第 3 步</span><br>
+					<span class="ui-step-textdetail">注册成功</span>
+				</div>
+    		</li>
+		</ol>
+	</div>
+</div>	
+<!-- step end -->
+<!-- alert start -->
+<div class="alert alert-success" role="alert" >
+	&nbsp;您填写的信息已提交平台工作人员审核,我们会在2-3个工作日内邮件通知您审核结果,请您注意查收。
+</div>
+<!-- alert end -->
+
+<div class="row">
+	<!-- enterprise form start -->
+	<div class="col-md-9">
+		<form name="myForm" class="form-horizontal" role="form" ng-submit="register(enterprise)">
+		  	
+		</form>
+	</div>
+	<!-- enterprise form end  -->
+	<!-- remark start -->
+	<div class="col-md-3 well">
+		说明资料
+		<p>1....</p>
+		<p>2....</p>
+	</div>
+	<!-- remark end -->
+</div>

+ 49 - 0
src/main/webapp/resources/tpl/register/step3.html

@@ -0,0 +1,49 @@
+<!-- step start -->
+<div class="row text-center">
+	<div class="step col-md-8 col-md-offset-2 col-sm-11 col-sm-offset-1">
+		<ol class="ui-step">
+			<li class="ui-step-start">
+				<div class="ui-step-line ui-step-line-active"></div>
+				<div class="ui-step-text ui-step-text-active">
+					<span class="ui-step-texttitle">第 1 步</span><br>
+					<span class="ui-step-textdetail">填写资料</span>
+				</div>
+    		</li>
+    		<li class="ui-step-start">
+				<div class="ui-step-line ui-step-line-active"></div>
+				<div class="ui-step-text ui-step-text-active">
+					<span class="ui-step-texttitle">第 2 步</span><br>
+					<span class="ui-step-textdetail">提交审核</span>
+				</div>
+    		</li>
+    		<li class="ui-step-start">
+				<div class="ui-step-text ui-step-text-active">
+					<span class="ui-step-texttitle">第 3 步</span><br>
+					<span class="ui-step-textdetail">注册成功</span>
+				</div>
+    		</li>
+		</ol>
+	</div>
+</div>	
+<!-- step end -->
+<!-- alert start -->
+<div class="alert alert-success" role="alert" >
+	&nbsp;恭喜,您已经成功注册优软商务平台企业账号,请为您的账号管理员设置登陆密码
+</div>
+<!-- alert end -->
+<div class="row">
+	<!-- enterprise form start -->
+	<div class="col-md-9">
+		<form name="myForm" class="form-horizontal" role="form" ng-submit="register(enterprise)">
+		  	
+		</form>
+	</div>
+	<!-- enterprise form end  -->
+	<!-- remark start -->
+	<div class="col-md-3 well">
+		说明资料
+		<p>1....</p>
+		<p>2....</p>
+	</div>
+	<!-- remark end -->
+</div>

Some files were not shown because too many files changed in this diff