Home Explore Help
Register Sign In
bulomakaka
/
ekexiu.app
Watch 2
Star 1
Fork 0
Code Issues 0 Pull Requests 0 Commits 153 Releases 0 Wiki
Browse Source

新添加身份认证功能

xuchunyang 8 years ago
parent
aadb702448
commit
f0efa4580c
5 changed files with 436 additions and 0 deletions
Split View Show Diff Stats
  1. 106 0
      app/css/feedback-page.css
  2. 43 0
      app/html/identity-up.html
  3. 74 0
      app/html/identity.html
  4. BIN
      app/images/iconfont-tianjia.png
  5. 213 0
      app/js/identity-up.js

+ 106 - 0
app/css/feedback-page.css
View File 

@ -0,0 +1,106 @@
1 
body{background: #fff;}
2 
.feedback{background: #fff;}
3 
.feedback h4{font-size: 14px; color: #666;background:#efeff4; font-weight: normal; padding:8px 0; text-align: center;}
4 
.feedback p{ padding:10px 15px;}
5 
.feedback input,
6 
.feedback textarea {
7 
	border: none !important;
8 
}
9 
.feedback textarea {
10 
	height: 60px;
11 
	margin-bottom: 0 !important;
12 
	padding-bottom: 0 !important;
13 
}
14 
.feedback .row {
15 
	width: 100%;
16 
	background-color: #fff;
17 
}
18 
.feedback p {
19 
	padding: 8px 15px 0;
20 
}
21 
.feedback button#submit {
22 
	width: 90%;
23 
	height: 46px;
24 
	left: 50%;
25 
	-webkit-transform: translate(-50%);
26 
}
27 
.feedback .hidden {
28 
	display: none;
29 
}
30 
.feedback .image-list {
31 
	width: 100%;
32 
	background-size: cover;
33 
	padding: 10px 15px;
34 
	overflow: hidden;
35 
}
36
37 
.feedback .image-item {
38 
	width: 65px;
39 
	height: 65px;
40 
	background-image: url(../images/iconfont-tianjia.png);
41 
	background-size: 100% 100%;
42 
	display: inline-block;
43 
	position: relative;
44 
	border-radius: 5px;
45 
	margin-right: 5px;
46 
	margin-bottom: 10px;
47
48 
}
49 
.feedback .image-item  img {
50 
	width: 65px;
51 
	height: 65px;
52 
	border-radius: 5px;
53 
	margin-right: 10px;
54 
	margin-bottom: 10px;
55 
}
56 
.feedback .image-item input[type="file"] {
57 
	position: absolute;
58 
	left: 0px;
59 
	top: 0px;
60 
	width: 100%;
61 
	height: 100%;
62 
	opacity: 0;
63 
	cursor: pointer;
64 
	z-index: 0;
65 
}
66 
.feedback .image-item.space {
67 
	border: none;
68 
}
69 
.feedback .image-item .image-close {
70 
	position: absolute;
71 
	display: block;
72 
	right: -6px;
73 
	top: -6px;
74 
	width: 20px;
75 
	height: 20px;
76 
	text-align: center;
77 
	line-height: 20px;
78 
	border-radius: 12px;
79 
	background-color: #FF5053;
80 
	color: #f3f3f3;
81 
	border: solid 1px #FF5053;
82 
	font-size: 9px;
83 
	font-weight: 200;
84 
	z-index: 1;
85 
}
86 
.feedback .image-item.space .image-close {
87 
	display: none;
88 
}
89
90 
.del {
91 
  position: absolute;
92 
	display: block;
93 
	right: -6px;
94 
	top: -6px;
95 
	width: 20px;
96 
	height: 20px;
97 
	text-align: center;
98 
	line-height: 20px;
99 
	border-radius: 12px;
100 
	background-color: #FF5053;
101 
	color: #f3f3f3;
102 
	border: solid 1px #FF5053;
103 
	font-size: 9px;
104 
	font-weight: 200;
105 
	z-index: 1;
106 
    }

+ 43 - 0
app/html/identity-up.html
View File 

@ -0,0 +1,43 @@
1 
<!doctype html>
2 
<html>
3
4 
	<head>
5 
		<meta charset="UTF-8">
6 
		<title>账户与安全</title>
7 
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
8 
		<link href="../css/mui.min.css" rel="stylesheet" />
9 
		<link href="../css/app.css" rel="stylesheet" />
10 
		<link href="../css/feedback-page.css" rel="stylesheet" />
11 
		<script src="../js/public/zepto.min.js"></script>
12 
	</head>
13
14 
	<body>
15 
		<header class="mui-bar mui-bar-nav toptitbox">
16 
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
17 
		    <h1 class="mui-title toptit">身份认证</h1>
18 
		</header>
19 
		<div class="mui-content feedback">
20 
			<h4>科袖郑重承诺不对外提供您的个人信息</h4>
21 
			<p>请上传能够证明您身份的相关证件，<br />如工作证、在职证明、学生证、在读证明等：</p>
22 
			<div class="content">
23 
				<div style="margin-top: 10px;"></div>
24 
				<input type="hidden" id="ckjl.id" name="ckjl.id" value="429">
25 
				<div class="collapse-content" >
26 
					<form>
27 
					    <label class="row-label"></label>
28 
					    <div id='F_CKJLBS' class="row image-list">
29 
					        <div class="image-item " id="F_CKJLB" onclick="showActionSheet(this);"></div>
30 
					    </div>
31 
					</form>
32 
				</div>
33 
			</div>
34 
		</div>
35 
		<div class="mui-content-padded frmbox" style="margin-top:40px;">
36 
			<button class="mui-btn mui-btn-block mui-btn-outlined frmbtn" id="submit">提交认证</button>
37 
		</div>
38 
		<script src="../js/public/mui.min.js"></script>
39 
		<script src="../js/public/base.js"></script>
40 
		<script src="../js/identity-up.js"></script>
41 
</body>
42
43 
</html>

+ 74 - 0
app/html/identity.html
View File 

@ -0,0 +1,74 @@
1 
<!doctype html>
2 
<html>
3
4 
	<head>
5 
		<meta charset="UTF-8">
6 
		<title>账户与安全</title>
7 
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
8 
		<link href="../css/mui.min.css" rel="stylesheet" />
9 
		<link href="../css/app.css" rel="stylesheet" />
10 
	</head>
11
12 
	<body style="background: #fff;">
13 
		<header class="mui-bar mui-bar-nav toptitbox">
14 
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left topback"></a>
15 
		    <h1 class="mui-title toptit">身份认证</h1>
16 
		</header>
17 
		<div class="mui-content"  style="background: #fff; margin-top:10px;" id="navsub">
18 
			<h3 class="boxnav-title">请确认您现在的身份:</h3>
19 
			<ul class="boxnav">
20 
				<li><span typenum="1">科研工作者</span></li>
21 
				<li><span typenum="2">在企人员</span></li>
22 
				<li><span typenum="3">在校生</span></li>
23 
			</ul>
24 
		</div>
25 
		<div class="mui-content-padded frmbox" style="margin-top:40px;">
26 
			<button class="mui-btn mui-btn-block mui-btn-outlined frmbtn" id="nextStep">确定，下一步</button>
27 
		</div>
28 
		<script src="../js/public/mui.min.js"></script>
29 
		<script src="../js/public/base.js"></script>
30 
		<script>
31 
		    mui.plusReady(function(){
32 
		    	var self = plus.webview.currentWebview();
33 
		    	//判断用户初始化身份
34 
			    mui(".boxnav span").each(function () {
35 
					var typenum = this.getAttribute("typenum");
36 
					if(typenum==self.usertype){
37 
						this.parentNode.classList.add('set');
38 
					}
39 
				});
40 
		    })
41
42 
			tab("navsub");//身份切换
43
44 
			var nextStep = document.getElementById("nextStep");
45 
			nextStep.addEventListener('tap', function() {
46 
				var typetext = document.querySelector(".boxnav li.set");
47 
				mui.openWindow({
48 
					url: '../html/identity-up.html',
49 
					id: '../html/identity-up.html',
50 
					show: {
51 
						aniShow: "slide-in-right"
52 
					},
53 
					extras:{
54 
						usertype:typetext.innerText,
55 
					}
56 
				});
57 
			})
58
59 
			function tab(name) {
60 
				var oDome = document.getElementById(name);
61 
				var oSpan = oDome.getElementsByTagName('ul')[0].childNodes;
62 
				for(var i = 0; i < oSpan.length; i++) {
63 
					oSpan[i].onclick = function() {
64 
						for(var i = 0; i < oSpan.length; i++) {
65 
							oSpan[i].className = '';
66 
						}
67 
						this.className = 'set';
68 
					}
69 
				}
70 
			}
71 
		</script>
72 
	</body>
73
74 
</html>

BIN
app/images/iconfont-tianjia.png
View File


+ 213 - 0
app/js/identity-up.js
View File 

@ -0,0 +1,213 @@
1 
mui.plusReady(function() {
2 
	var userid = plus.storage.getItem('userid');
3 
	var self = plus.webview.currentWebview();
4 
	var usertype = self.usertype;
5 
	//var authapplyid;
6 
	console.log(self.usertype);
7 
	console.log(userid);
8 
	$('#submit').on("click", function() {
9 
		var imglen = $(".image-item img").length;
10 
		if(imglen == 0) {
11 
			plus.nativeUI.toast("请上传能够证明您身份的相关证件", toastStyle);
12 
		} else {
13 
			plus.nativeUI.showWaiting();
14 
			typename(userid, usertype);
15 
		}
16 
	})
17 
})
18
19 
//添加认证申请信息
20 
function typename(userid, usertype) {
21 
	mui.ajax(baseUrl + "/ajax/authApply", {
22 
		data: {
23 
			"professorId": userid,
24 
			"applyType": usertype
25 
		},
26 
		dataType: 'json', //数据格式类型
27 
		type: 'post', //http请求类型
28 
		async: false,
29 
		timeout: 10000, //超时设置
30 
		success: function(data) {
31 
			if(data.success) {
32 
				var identityPage = plus.webview.getWebviewById('../html/identity.html');
33 
				plus.webview.close(identityPage);
34 
				console.log(data.data);
35 
				var authapplyid = data.data;
36 
				mui(".image-item img").each(function() {
37 
					var base64 = this.getAttribute("data-preview-src");
38 
					console.log(base64);
39 
					typeimg(authapplyid, base64);
40 
				});
41
42 
				plus.nativeUI.closeWaiting();
43 
				mui.back();
44 
			    var securityPage = plus.webview.getWebviewById('html/security.html');
45 
				mui.fire(securityPage,'sPage', {
46 
					//phonetel:phoneName.value
47 
				});
48 
				plus.webview.open(securityPage);
49
50 
			}
51 
		},
52 
		error: function() {
53 
			plus.nativeUI.toast("服务器链接超时", toastStyle);
54 
			return;
55 
		}
56 
	});
57 
}
58
59 
//添加申请认证图片
60 
function typeimg(authapplyid, base64) {
61 
	mui.ajax(baseUrl + "/ajax/authImage", {
62 
		data: {
63 
			"authApplyId": authapplyid,
64 
			"base64": base64
65 
		},
66 
		dataType: 'json', //数据格式类型
67 
		type: 'post', //http请求类型
68 
		async: false,
69 
		timeout: 10000, //超时设置
70 
		success: function(data) {
71 
			console.log(JSON.stringify(data));
72 
			if(data.success) {
73 
				plus.nativeUI.toast("认证图片上传成功", toastStyle);
74 
			}
75 
		},
76 
		error: function() {
77 
			plus.nativeUI.toast("服务器链接超时", toastStyle);
78 
			return;
79 
		}
80 
	});
81 
}
82
83 
//选取图片的来源，拍照和相册
84 
function showActionSheet() {
85 
	var actionbuttons = [{
86 
		title: "拍照"
87 
	}, {
88 
		title: "相册选取"
89 
	}];
90 
	var actionstyle = {
91 
		title: "选择照片",
92 
		cancel: "取消",
93 
		buttons: actionbuttons
94 
	};
95 
	plus.nativeUI.actionSheet(actionstyle, function(e) {
96 
		if(e.index == 1) {
97 
			getImage();
98 
		} else if(e.index == 2) {
99 
			galleryImg();
100 
		}
101 
	});
102 
}
103
104 
//获取相册照片
105 
function galleryImg() {
106 
	plus.gallery.pick(function(e) {
107 
		//alert(e.files.length);
108 
		var zm = 0;
109 
		setTimeout(file, 200);
110
111 
		function file() {
112 
			plus.io.resolveLocalFileSystemURL(e.files[zm], function(entry) {
113 
				// console.log(entry.toLocalURL())
114 
				uploadHead(entry.toLocalURL())
115 
			}, function(e) {
116 
				plus.nativeUI.toast("读取拍照文件错误：" + e.message);
117 
			});
118 
			zm++;
119 
			if(zm < e.files.length) {
120 
				setTimeout(file, 200);
121 
			}
122 
		}
123
124 
	}, function(e) {
125 
		console.log("取消选择图片");
126 
	}, {
127 
		filename: "_doc/camera/",
128 
		filter: "image",
129 
		multiple: true
130 
	});
131 
}
132
133 
//拍照
134 
function getImage(divid) {
135 
	var cmr = plus.camera.getCamera();
136 
	cmr.captureImage(function(p) {
137 
		//alert(p);//_doc/camera/1467602809090.jpg
138 
		plus.io.resolveLocalFileSystemURL(p, function(entry) {
139 
			console.log(entry.toLocalURL())
140 
			uploadHead(entry.toLocalURL())
141 
		}, function(e) {
142 
			plus.nativeUI.toast("读取拍照文件错误：" + e.message);
143 
		});
144 
	}, function(e) {}, {
145 
		filename: "_doc/camera/",
146 
		index: 1
147 
	});
148 
}
149
150 
//上传图片
151 
function uploadHead(imgPath) {
152 
	console.log("imgPath = " + imgPath);
153 
	mainImage = imgPath;
154 
	//mainImage.style.width = "60px";
155 
	//mainImage.style.height = "60px";
156
157 
	var image = new Image();
158 
	image.src = imgPath;
159 
	image.onload = function() {
160 
		var imgData = getBase64Image(image);
161 
		console.log(imgData);
162 
		showImgDetail(imgData, mainImage);
163 
	}
164 
}
165
166 
//将图片压缩转成base64
167 
function getBase64Image(img) {
168 
	var canvas = document.createElement("canvas");
169 
	var width = img.width;
170 
	var height = img.height;
171 
	// calculate the width and height, constraining the proportions
172 
	/* if (width > height) {
173 
	     if (width > 100) {
174 
	         height = Math.round(height *= 100 / width);
175 
	         width = 100;
176 
	     }
177 
	 } else {
178 
	     if (height > 100) {
179 
	         width = Math.round(width *= 100 / height);
180 
	         height = 100;
181 
	     }
182 
	 } */
183 
	canvas.width = width; /*设置新的图片的宽度*/
184 
	canvas.height = height; /*设置新的图片的长度*/
185 
	var ctx = canvas.getContext("2d");
186 
	ctx.drawImage(img, 0, 0, width, height); /*绘图*/
187 
	var dataURL = canvas.toDataURL("image/jpeg", 0.8);
188 
	return dataURL.replace("data:image/jpeg;base64,", "");
189 
}
190
191 
//删除图片
192 
mui(document).on("click", '.del', function() {
193 
	var $this = $(this);
194 
	var bts = ["是", "否"];
195 
	plus.nativeUI.confirm("是否删除图片？", function(e) {
196 
		var i = e.index;
197 
		if(i == 0) {
198 
			$this.parent().remove();
199 
		}
200 
	}, "删除图片", bts);
201 
});
202
203 
//拼接图片样式
204 
function showImgDetail(newsrc, oldsrc) {
205 
	var html = "";
206 
	html += '<div  class="image-item">';
207 
	html += '    <img id="picBig" data-preview-src="' + newsrc + '" data-preview-group="1" src="' + oldsrc + '"/>';
208 
	html += '    <span class="del">';
209 
	html += '        <div class="fa fa-times-circle">X</div>';
210 
	html += '    </span>';
211 
	html += '</div>';
212 
	$("#F_CKJLBS").append(html);
213 
}