github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/html/contacts/add_groups_frame.html (about)

     1  <!DOCTYPE HTML>
     2  <html>
     3  	<head>
     4  		<meta charset="utf-8">
     5  		<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
     6  		<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
     7  		<title>lost frame</title>
     8  		<link rel="stylesheet" type="text/css" href="../../css/api.css" />
     9  		<link rel="stylesheet" type="text/css" href="../../css/aui/aui.css" />
    10  		<style type="text/css">
    11  			.aui-input-row {
    12  				width: 100%;
    13  			}
    14  			#content {
    15  				height: 150px;
    16  			}
    17  			.aui-form {
    18  				margin-bottom: 10px;
    19  			}
    20  		</style>
    21  	</head>
    22  	<body>
    23  		<div class="aui-form">
    24  			<div class="aui-input-row">
    25  				<textarea name="content" class="aui-input" id="content" placeholder="总得说点什么吧"></textarea>
    26  			</div>
    27  		</div>
    28  		<div class="aui-content">
    29  			<ul class="aui-list-view">
    30  				<li class="aui-list-view-cell" data-win="list_arrow">
    31  					<span class="aui-iconfont aui-icon-locationfill"></span> 我的位置
    32  				</li>
    33  				<li class="aui-list-view-cell" data-win="list_arrow">
    34  					<font class="po">正在定位中...</font>
    35  				</li>
    36  				<li class="aui-list-view-cell" data-win="list_arrow">
    37  
    38  					<button class="aui-btn aui-btn-danger" onclick="lost_post()">
    39  						发布
    40  					</button>
    41  					<button class="aui-btn aui-btn-danger" onclick="lost_get()">
    42  						获取
    43  					</button>
    44  					<button class="aui-btn aui-btn-danger" onclick="lost_facematch()">
    45  						人脸匹配
    46  					</button>
    47  				</li>
    48  			</ul>
    49  		</div>
    50  		<div class="aui-content">
    51  			<ul class="aui-list-view aui-grid-view" id="imgslist">
    52  				<li class="aui-list-view-cell aui-img aui-col-xs-4" id="addpic">
    53  					<img class="aui-img-object" src="../../image/add.jpg">
    54  				</li>
    55  			</ul>
    56  		</div>
    57  	</body>
    58  	<script type="text/javascript" src="../../script/api.js"></script>
    59  	<script type="text/javascript" src="../../script/zepto.min.js"></script>
    60  	<script type="text/javascript" src="../../script/hammer.min.js"></script>
    61  	<script type="text/javascript" src="../../script/app.js"></script>
    62  	<script type="text/javascript">
    63  		var uiMediaScanner = null, imageFilter = null, imageBrowser = null, bMap = null;
    64  		var isIOS = false;
    65  		var imglist = new Array(); //用于保存选择的图片
    66  		// 生成guid,主要用于生成随机文件名
    67  		function NewGuid() {
    68  			function S4() {
    69  				return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
    70  			}
    71  
    72  			return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
    73  		}
    74  
    75  		// 获取当前的时间，拼接成2015-11-09这样的格式，主要用于对图片进行时间分类
    76  		function getNowFormatDate() {
    77  			var date = new Date();
    78  			var seperator1 = "-";
    79  			var year = date.getFullYear();
    80  			var month = date.getMonth() + 1;
    81  			var strDate = date.getDate();
    82  			if (month >= 1 && month <= 9) {
    83  				month = "0" + month;
    84  			}
    85  			if (strDate >= 0 && strDate <= 9) {
    86  				strDate = "0" + strDate;
    87  			}
    88  			var currentdate = year + seperator1 + month + seperator1 + strDate
    89  			return currentdate;
    90  		}
    91  
    92  		// 获取文件拓展名
    93  		function getExt(fileName) {
    94  			return fileName.substring(fileName.lastIndexOf('.') + 1);
    95  		}
    96  
    97  		// 图片压缩
    98  		// imgsrc：源图片的路径
    99  		// quality：图片压缩质量，一般建议0.5
   100  		// scale：图片压缩比例，也是建议0.5
   101  		// ext：源图片拓展名
   102  		// callback：转换成功之后回调函数
   103  		function imgCompress(imgsrc, quality, scale, ext, callback) {
   104  			// 压缩文件的保存目录
   105  			var savePath = api.cacheDir + "/" + getNowFormatDate() + "/";
   106  			// 压缩文件生成的随机文件名称
   107  			var savename = NewGuid() + "." + ext;
   108  			imageFilter.compress({
   109  				img : imgsrc,
   110  				quality : quality,
   111  				//scale : quality,
   112  				//size: {w:900, h:1200},
   113  				size: {w:400, h:600},
   114  				save : {
   115  					album : false,
   116  					imgPath : savePath,
   117  					imgName : savename
   118  				}
   119  			}, function(ret, err) {
   120  				if (ret) {
   121  					callback(savePath + savename);
   122  				} else {
   123  					alert(JSON.stringify(err));
   124  				}
   125  			});
   126  		}
   127  
   128  		// 打开图片浏览
   129  		// imgs：需要预览的图片集合
   130  		function openImageBrowser(imgs) {
   131  			imageBrowser.openImages({
   132  				imageUrls : imgs,
   133  				showList : false,
   134  				activeIndex : 0
   135  			});
   136  		}
   137  
   138  		// 添加长按方法
   139  		function addPress(obj, index) {
   140  			// 获取目前长按的对象
   141  			var hammertime = new Hammer(obj[0]);
   142  			// 绑定长按对象
   143  			hammertime.on("press", function(e) {
   144  				api.confirm({
   145  					title : '温馨提示',
   146  					msg : '您确定要删除该图片吗？',
   147  					buttons : ['确定', '取消']
   148  				}, function(ret, err) {
   149  					if (ret.buttonIndex == 1) {
   150  						// 移除自己
   151  						$(obj).remove();
   152  						api.toast({
   153  							msg : '删除成功！'
   154  						});
   155  					}
   156  				});
   157  			});
   158  		}
   159  
   160  		// 上传图片
   161  		// url：上传的url地址
   162  		// filepath：上传的文件
   163  		// callback：上传成功返回地址
   164  		function uploadFile(filepath, callback) {
   165  			post_id = $api.getStorage("user_id");
   166  			token = $api.getStorage("token");
   167  			http_url = "http://123.56.159.76/v1/ay/lost/" + post_id + "/upload_imgs" ;
   168  			http_url = "http://123.56.159.76/v1/ay/lost/" + "563ed050ce6a3d1f234f3eba" + "/upload_imgs?token=" + token;
   169  			api.ajax({
   170  				url : http_url,
   171  				method : 'post',
   172  				timeout : 30,
   173  				dataType : 'json',
   174  				returnAll : true,
   175  				data : {
   176  					files : {"file": filepath}
   177  				}
   178  			}, function(ret, err) {
   179  				if (ret) {
   180  			        console.log(JSON.stringify(ret));
   181  			        console.log(JSON.stringify(ret.body))
   182  					callback(ret.body.img_urls[0]);
   183  			        api.alert({
   184  	                    title: '上传成功',
   185  	                    msg: ret.body.img_urls,
   186  	                    buttons: ['确定']
   187  	                });  
   188  				} else {
   189  					api.alert({
   190  						msg : ('错误码：' + err.code + '；错误信息：' + err.msg + '；网络状态码：' + err.statusCode)
   191  					});
   192  				}
   193  			});
   194  		}
   195  
   196  		Zepto(function($) {
   197  			// 获取图片宽高
   198  			var normalW = $("#addpic img").width();
   199  			// ###############################################################
   200  			// 为图片添加点击预览功能,排除添加按钮
   201  			$("#imgslist").on("tap", "li:not(#addpic)", function() {
   202  				// 定义一个数组，存储需要预览的图片
   203  				var browerImgs = [];
   204  				$("#imgslist li:not(#addpic)").each(function() {
   205  					// 将图片追加到数组中
   206  					browerImgs.push($(this).find("img").attr("src"));
   207  				});
   208  				// 调用图片预览函数
   209  				openImageBrowser(browerImgs);
   210  				
   211  				//$api.setStorage("imglist", browerImgs);
   212  				//var Imgs = $api.getStorage("imglist");
   213      			//console.log("Imgs1 = " + Imgs);
   214      		
   215  			});
   216  			
   217  			// 添加图片绑定点击事件
   218  			$("#imgslist").on("tap", "#addpic", function() {
   219  				api.actionSheet({
   220  					title : '选择图片来源',
   221  					buttons : ['优雅自拍', '浏览相册']
   222  				}, function(ret, err) {
   223  					var index = ret.buttonIndex;
   224  					
   225  					switch(index) {
   226  						// 拍照
   227  						case 1:
   228  							// 打开拍照
   229  							api.getPicture({
   230  								sourceType : "camera",
   231  								encodingType : "jpg",
   232  								destinationType : "url",
   233  								mediaValue : "pic",
   234  								quality : 50,
   235  								saveToPhotoAlbum : true
   236  							}, function(ret, err) {
   237  								if (ret && ret.data) {
   238  									// 拍照返回的本地路径
   239  									var returnUrl = ret.data;
   240  									// 图片压缩
   241  									imgCompress(returnUrl, 1, 0.8, getExt(returnUrl), function(compressImg) {
   242  										var showImgHtml = '<li class="aui-list-view-cell aui-img aui-col-xs-4"><img class="aui-img-object" src="' + compressImg + '" style="width:' + normalW + 'px;height:' + normalW + 'px;"></li>';
   243  										// 追加图片
   244  										$("#addpic").before(showImgHtml);
   245  										// ########################################  绑定长按事件 ########################
   246  										addPress($("#imgslist img[src='" + compressImg + "']").parent("li"));
   247  										// ########################################
   248  										// ################### 上传图片 #########################
   249  										uploadFile(compressImg, function(serverImg) {											
   250  											imglist.push(serverImg);
   251  											$api.setStorage("imglist_key", JSON.stringify(imglist));
   252  											console.log("select imgs" + JSON.stringify(imglist));
   253  										});
   254  									});
   255  								} else {
   256  									api.toast({
   257  										msg : '没有选择，或者选择出错'
   258  									});
   259  								}
   260  							});
   261  							break;
   262  						// 打开图片选择器
   263  						case 2:
   264  							uiMediaScanner.open({
   265  								type : 'picture',
   266  								column : 4,
   267  								classify : true,
   268  								max : 6,
   269  								sort : {
   270  									key : 'time',
   271  									order : 'desc'
   272  								},
   273  								texts : {
   274  									stateText : '已选*项',
   275  									cancelText : '取消',
   276  									finishText : '完成'
   277  								},
   278  								styles : {
   279  									bg : '#fff',
   280  									mark : {
   281  										icon : '',
   282  										position : 'bottom_left',
   283  										size : 20
   284  									},
   285  									nav : {
   286  										bg : '#b23e4b',
   287  										stateColor : '#fff',
   288  										stateSize : 18,
   289  										cancelBg : 'rgba(0,0,0,0)',
   290  										cancelColor : '#fff',
   291  										cancelSize : 18,
   292  										finishBg : 'rgba(0,0,0,0)',
   293  										finishColor : '#fff',
   294  										finishSize : 18
   295  									}
   296  								}
   297  							}, function(ret) {
   298  								if (ret) {
   299  									for (var i = 0; i < ret.list.length; i++) {
   300  										var selectImg = ret.list[i];
   301  										// 获取图片的路径
   302  										var selectimgPath = selectImg.path;
   303  										var selectimgThumbPath = selectImg.thumbPath;
   304  										// IOS需要将虚拟路径转换为本地路径才可以压缩
   305  										if (isIOS) {
   306  											// 转换为真实路径
   307  											uiMediaScanner.transPath({
   308  												path : selectimgPath
   309  											}, function(transObj) {
   310  												// 图片压缩
   311  												imgCompress(transObj.path, 1, 0.8, selectImg.suffix, function(compressImg) {
   312  													$("#addpic").before('<li class="aui-list-view-cell aui-img aui-col-xs-4"><img class="aui-img-object" src="' + compressImg + '" style="width:' + normalW + 'px;height:' + normalW + 'px;"></li>');
   313  													// ########################################  绑定长按事件 ########################
   314  													addPress($("#imgslist img[src='" + compressImg + "']").parent("li"));
   315  													// ########################################
   316  													// ################### 上传图片 #########################
   317  													uploadFile(compressImg, function(serverImg) {
   318  														imglist.push(serverImg);
   319  														$api.setStorage("imglist_key", JSON.stringify(imglist));
   320  														console.log("select imgs" + JSON.stringify(imglist));
   321  													});
   322  												});
   323  											});
   324  										} else {
   325  											// 图片压缩
   326  											imgCompress(selectimgPath, 1, 0.8, selectImg.suffix, function(compressImg) {
   327  												// 追加图片
   328  												$("#addpic").before('<li class="aui-list-view-cell aui-img aui-col-xs-4"><img class="aui-img-object" src="' + compressImg + '" style="width:' + normalW + 'px;height:' + normalW + 'px;"></li>');
   329  												// ########################################  绑定长按事件 ########################
   330  												addPress($("#imgslist img[src='" + compressImg + "']").parent("li"));
   331  												// ########################################
   332  												// ################### 上传图片 #########################
   333  												uploadFile(compressImg, function(serverImg) {											
   334  													imglist.push(serverImg);
   335  													$api.setStorage("imglist_key", JSON.stringify(imglist));
   336  													console.log("select imgs" + JSON.stringify(imglist));								
   337  												});
   338  											});
   339  										}
   340  									}
   341  								}
   342  							});
   343  							break;
   344  					}
   345  				});
   346  				
   347  			});
   348  		});
   349  		apiready = function() {
   350  			// 引入多选模块
   351  			uiMediaScanner = api.require('UIMediaScanner');
   352  			// 引入过滤压缩模块
   353  			imageFilter = api.require("imageFilter");
   354  			// 引入图片浏览模块
   355  			imageBrowser = api.require('imageBrowser');
   356  			// 引入百度模块
   357  			bMap = api.require('baiduMap');
   358  			// 判断是否是IOS系统
   359  			isIOS = api.systemType == "ios" ? true : false;
   360  			var lon = "116.31";
   361  			var lat = "40.05"
   362  			// 获取当前位置
   363  			bMap.getLocation(
   364  				function(ret, err){
   365  				        var sta = ret.status;
   366  				        lat = ret.lat;
   367  				        lon = ret.lon;
   368  				        var t = ret.timestamp;
   369  				        if(sta){
   370  				            var str = '经度：'+ lon +'<br>';
   371  				            str += '纬度：'+ lat +'<br>';
   372  				            str += '更新时间：'+ t +'<br>';
   373  				            //api.alert({msg:str});
   374  				            console.log("location is " + str);
   375  				            $(".po").text(str);
   376  				        } else{
   377  				            api.alert({msg:err.msg});
   378  				        }
   379  				        
   380  			        	bMap.getNameFromLocation({
   381  						    lon:lon,
   382  						    lat:lat
   383  						},function(ret,err){
   384  							console.log("ret.status is " + ret.status);
   385  						    if (ret.status){
   386  						        //api.alert({title:'搜索结果',msg:ret.add});
   387  						        console.log("address is " + ret.add);
   388  						        console.log("address2 is " + ret.province + ret.city + ret.district + ret.streetName);
   389  						        addr = ret.add
   390  						        if(addr.length == 0) { 
   391  						        	addr = ret.province;
   392  						        	if(ret.province != ret.city){
   393  						        		addr = addr + ret.city;
   394  						        	}
   395  						        	addr = ret.district + ret.streetName;
   396  						       	}
   397  						       	console.log("location is " + addr);
   398  						        $(".po").text(addr);
   399  						    } else{
   400  						        api.alert({title:'搜索错误代码',msg:err.msg});
   401  						    }
   402  						});				        
   403  				    }
   404  			);
   405  		};
   406  		
   407  		//post
   408  		function lost_post(){
   409  			console.log("lost_post begin");
   410  			//get token and userid,if token is null,redirect to login
   411  			var key = "token"
   412  			var data = $api.getStorage(key);
   413      		console.log("key=" + key + " data=" + data);
   414      		
   415      		//secdata = $api.loadSecureValue("oss_key")
   416      		//console.log("key=" + "oss_key" + " data=" + secdata)
   417      		
   418      		//loadSecureValue();
   419      		
   420      		var content = $("#content").val();
   421      		console.log("content = " + content);
   422   
   423  			url = "http://123.56.159.76/v1/ay/lost/post";
   424  			//var payload = {"content": content, "loc":[1.1,2.2]};
   425  			var payload = {"content": content};
   426      		myajax(url,'POST',payload, function(ret_body) {
   427      			console.log("ret body = " + JSON.stringify(ret_body));
   428      		});
   429      		
   430      		var imglist = $api.getStorage("imglist_key");
   431      		if(imglist) {
   432      			imglist_json = JSON.parse(imglist);
   433      			console.log("Imglist = " + imglist);
   434      			$api.rmStorage('imglist_key');
   435      		}
   436  		}
   437  		
   438  		//get
   439  		function lost_get(){
   440  			console.log("lost_get begin");
   441  			//get token and userid,if token is null,redirect to login
   442  			user_id = $api.getStorage("user_id");
   443  			token = $api.getStorage("token");
   444  			url = "http://123.56.159.76/v1/ay/" + user_id + "/lost/posts?" + "token=" + token
   445      		myajax(url,'GET','', function(ret_body){
   446      			console.log("ret body = " + JSON.stringify(ret_body));
   447      			alert(JSON.stringify(ret_body.posts[0]));
   448      		});
   449  		}
   450  		
   451  		//facematch
   452  		function lost_facematch(){
   453  			console.log("lost_post begin");
   454  			//get token and userid,if token is null,redirect to login 
   455  			url = "http://123.56.159.76/v1/ay/lost/face_match";
   456      		var imglist_str = $api.getStorage("imglist_key");
   457      		if(imglist_str) {
   458      			imglist = JSON.parse(imglist_str);
   459      			console.log("Imglist = " + imglist_str);
   460      			$api.rmStorage('imglist_key');
   461      			
   462      			if(imglist.length < 2){
   463      				alert("请选择两个文件");
   464      			} else {
   465  	    			img1 = imglist[0]
   466  	    			img2 = imglist[1]
   467  	    			console.log("imgs = " + img1 + " " + img2);
   468  					var payload = {"img1": img1, "img2": img2};
   469  		    		myajax(url,'POST',payload, function(ret_body) {
   470  		    			console.log("ret body = " + JSON.stringify(ret_body));
   471  		    		});   			
   472      			}	
   473      		}
   474  		}
   475  		function loadSecureValue(){
   476  	        api.loadSecureValue({
   477  	            key:'oss_key'
   478  	        }, function(ret, err) {
   479  	            var value = ret.value;
   480  	            if(ret.status) {
   481  	            	alert("get key ok");
   482  	            } else {
   483  	            	alert({msg:err.code});
   484  	            }
   485  	        });
   486  		}
   487  	</script>
   488  </html>