github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/html/near/add_activity_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  
   162  		Zepto(function($) {
   163  			// 获取图片宽高
   164  			var normalW = $("#addpic img").width();
   165  			// ###############################################################
   166  			// 为图片添加点击预览功能,排除添加按钮
   167  			$("#imgslist").on("tap", "li:not(#addpic)", function() {
   168  				// 定义一个数组，存储需要预览的图片
   169  				var browerImgs = [];
   170  				$("#imgslist li:not(#addpic)").each(function() {
   171  					// 将图片追加到数组中
   172  					browerImgs.push($(this).find("img").attr("src"));
   173  				});
   174  				// 调用图片预览函数
   175  				openImageBrowser(browerImgs);
   176  				
   177  				//$api.setStorage("imglist", browerImgs);
   178  				//var Imgs = $api.getStorage("imglist");
   179      			//console.log("Imgs1 = " + Imgs);
   180      		
   181  			});
   182  			
   183  			// 添加图片绑定点击事件
   184  			$("#imgslist").on("tap", "#addpic", function() {
   185  				api.actionSheet({
   186  					title : '选择图片来源',
   187  					buttons : ['优雅自拍', '浏览相册']
   188  				}, function(ret, err) {
   189  					var index = ret.buttonIndex;
   190  					
   191  					switch(index) {
   192  						// 拍照
   193  						case 1:
   194  							// 打开拍照
   195  							api.getPicture({
   196  								sourceType : "camera",
   197  								encodingType : "jpg",
   198  								destinationType : "url",
   199  								mediaValue : "pic",
   200  								quality : 50,
   201  								saveToPhotoAlbum : true
   202  							}, function(ret, err) {
   203  								if (ret && ret.data) {
   204  									// 拍照返回的本地路径
   205  									var returnUrl = ret.data;
   206  									// 图片压缩
   207  									imgCompress(returnUrl, 1, 0.8, getExt(returnUrl), function(compressImg) {
   208  										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>';
   209  										// 追加图片
   210  										$("#addpic").before(showImgHtml);
   211  										// ########################################  绑定长按事件 ########################
   212  										addPress($("#imgslist img[src='" + compressImg + "']").parent("li"));
   213  										// ########################################
   214  										// ################### 上传图片 #########################
   215  										uploadFile(compressImg, function(serverImg) {											
   216  											imglist.push(serverImg);
   217  											$api.setStorage("imglist_key", JSON.stringify(imglist));
   218  											console.log("select imgs" + JSON.stringify(imglist));
   219  										});
   220  									});
   221  								} else {
   222  									api.toast({
   223  										msg : '没有选择，或者选择出错'
   224  									});
   225  								}
   226  							});
   227  							break;
   228  						// 打开图片选择器
   229  						case 2:
   230  							uiMediaScanner.open({
   231  								type : 'picture',
   232  								column : 4,
   233  								classify : true,
   234  								max : 6,
   235  								sort : {
   236  									key : 'time',
   237  									order : 'desc'
   238  								},
   239  								texts : {
   240  									stateText : '已选*项',
   241  									cancelText : '取消',
   242  									finishText : '完成'
   243  								},
   244  								styles : {
   245  									bg : '#fff',
   246  									mark : {
   247  										icon : '',
   248  										position : 'bottom_left',
   249  										size : 20
   250  									},
   251  									nav : {
   252  										bg : '#b23e4b',
   253  										stateColor : '#fff',
   254  										stateSize : 18,
   255  										cancelBg : 'rgba(0,0,0,0)',
   256  										cancelColor : '#fff',
   257  										cancelSize : 18,
   258  										finishBg : 'rgba(0,0,0,0)',
   259  										finishColor : '#fff',
   260  										finishSize : 18
   261  									}
   262  								}
   263  							}, function(ret) {
   264  								if (ret) {
   265  									for (var i = 0; i < ret.list.length; i++) {
   266  										var selectImg = ret.list[i];
   267  										// 获取图片的路径
   268  										var selectimgPath = selectImg.path;
   269  										var selectimgThumbPath = selectImg.thumbPath;
   270  										// IOS需要将虚拟路径转换为本地路径才可以压缩
   271  										if (isIOS) {
   272  											// 转换为真实路径
   273  											uiMediaScanner.transPath({
   274  												path : selectimgPath
   275  											}, function(transObj) {
   276  												// 图片压缩
   277  												imgCompress(transObj.path, 1, 0.8, selectImg.suffix, function(compressImg) {
   278  													$("#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>');
   279  													// ########################################  绑定长按事件 ########################
   280  													addPress($("#imgslist img[src='" + compressImg + "']").parent("li"));
   281  													// ########################################
   282  													// ################### 上传图片 #########################
   283  													uploadFile(compressImg, function(serverImg) {
   284  														imglist.push(serverImg);
   285  														$api.setStorage("imglist_key", JSON.stringify(imglist));
   286  														console.log("select imgs" + JSON.stringify(imglist));
   287  													});
   288  												});
   289  											});
   290  										} else {
   291  											// 图片压缩
   292  											imgCompress(selectimgPath, 1, 0.8, selectImg.suffix, function(compressImg) {
   293  												// 追加图片
   294  												$("#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>');
   295  												// ########################################  绑定长按事件 ########################
   296  												addPress($("#imgslist img[src='" + compressImg + "']").parent("li"));
   297  												// ########################################
   298  												// ################### 上传图片 #########################
   299  												uploadFile(compressImg, function(serverImg) {											
   300  													imglist.push(serverImg);
   301  													$api.setStorage("imglist_key", JSON.stringify(imglist));
   302  													console.log("select imgs" + JSON.stringify(imglist));								
   303  												});
   304  											});
   305  										}
   306  									}
   307  								}
   308  							});
   309  							break;
   310  					}
   311  				});
   312  				
   313  			});
   314  		});
   315  		apiready = function() {
   316  			// 引入多选模块
   317  			uiMediaScanner = api.require('UIMediaScanner');
   318  			// 引入过滤压缩模块
   319  			imageFilter = api.require("imageFilter");
   320  			// 引入图片浏览模块
   321  			imageBrowser = api.require('imageBrowser');
   322  			// 引入百度模块
   323  			bMap = api.require('baiduMap');
   324  			// 判断是否是IOS系统
   325  			isIOS = api.systemType == "ios" ? true : false;
   326  
   327  			var lon = "116.31";
   328  			var lat = "40.05"
   329  			// 获取当前位置
   330  			bMap.getLocation(
   331  				function(ret, err){
   332  				        var sta = ret.status;
   333  				        lat = ret.lat;
   334  				        lon = ret.lon;
   335  				        var t = ret.timestamp;
   336  				        if(sta){
   337  				            var str = '经度：'+ lon +'<br>';
   338  				            str += '纬度：'+ lat +'<br>';
   339  				            str += '更新时间：'+ t +'<br>';
   340  				            //api.alert({msg:str});
   341  				            console.log("location is " + str);
   342  				            $(".po").text(str);
   343  				        } else{
   344  				            api.alert({msg:err.msg});
   345  				        }
   346  				        
   347  			        	bMap.getNameFromLocation({
   348  						    lon:lon,
   349  						    lat:lat
   350  						},function(ret,err){
   351  							console.log("ret.status is " + ret.status);
   352  						    if (ret.status){
   353  						        //api.alert({title:'搜索结果',msg:ret.add});
   354  						        console.log("address is " + ret.add);
   355  						        console.log("address2 is " + ret.province + ret.city + ret.district + ret.streetName);
   356  						        addr = ret.add
   357  						        if(addr.length == 0) { 
   358  						        	addr = ret.province;
   359  						        	if(ret.province != ret.city){
   360  						        		addr = addr + ret.city;
   361  						        	}
   362  						        	addr = ret.district + ret.streetName;
   363  						       	}
   364  						       	console.log("location is " + addr);
   365  						        $(".po").text(addr);
   366  						    } else{
   367  						        api.alert({title:'搜索错误代码',msg:err.msg});
   368  						    }
   369  						});				        
   370  				    }
   371  			);
   372  		};
   373  		
   374  		//post
   375  		function lost_post(){
   376  			console.log("lost_post begin");
   377  			//get token and userid,if token is null,redirect to login
   378  			var key = "token"
   379  			var data = $api.getStorage(key);
   380      		console.log("key=" + key + " data=" + data);
   381      		
   382      		//secdata = $api.loadSecureValue("oss_key")
   383      		//console.log("key=" + "oss_key" + " data=" + secdata)
   384      		
   385      		//loadSecureValue();
   386      		
   387      		var content = $("#content").val();
   388      		console.log("content = " + content);
   389   
   390  			http_path = "/ay/lost/post";
   391  			//var payload = {"content": content, "loc":[1.1,2.2]};
   392  			var payload = {"content": content};
   393      		myajax(http_path,'POST',payload, function(ret_body) {
   394      			console.log("ret body = " + JSON.stringify(ret_body));
   395      		});
   396      		
   397      		var imglist = $api.getStorage("imglist_key");
   398      		if(imglist) {
   399      			imglist_json = JSON.parse(imglist);
   400      			console.log("Imglist = " + imglist);
   401      			$api.rmStorage('imglist_key');
   402      		}
   403  		}
   404  		
   405  		//get
   406  		function lost_get(){
   407  			console.log("lost_get begin");
   408  			//get token and userid,if token is null,redirect to login
   409  			user_id = $api.getStorage("user_id");
   410  			token = $api.getStorage("token");
   411  			http_path = "/v1/ay/" + user_id + "/lost/posts?" + "token=" + token
   412      		myajax(http_path,'GET','', function(ret_body){
   413      			console.log("ret body = " + JSON.stringify(ret_body));
   414      			alert(JSON.stringify(ret_body.posts[0]));
   415      		});
   416  		}
   417  		
   418  		//facematch
   419  		function lost_facematch(){
   420  			console.log("lost_post begin");
   421  			//get token and userid,if token is null,redirect to login 
   422  			http_path = "/v1/ay/lost/face_match";
   423      		var imglist_str = $api.getStorage("imglist_key");
   424      		if(imglist_str) {
   425      			imglist = JSON.parse(imglist_str);
   426      			console.log("Imglist = " + imglist_str);
   427      			$api.rmStorage('imglist_key');
   428      			
   429      			if(imglist.length < 2){
   430      				alert("请选择两个文件");
   431      			} else {
   432  	    			img1 = imglist[0]
   433  	    			img2 = imglist[1]
   434  	    			console.log("imgs = " + img1 + " " + img2);
   435  					var payload = {"img1": img1, "img2": img2};
   436  		    		myajax(http_path,'POST',payload, function(ret_body) {
   437  		    			console.log("ret body = " + JSON.stringify(ret_body));
   438  		    		});   			
   439      			}	
   440      		}
   441  		}
   442  		function loadSecureValue(){
   443  	        api.loadSecureValue({
   444  	            key:'oss_key'
   445  	        }, function(ret, err) {
   446  	            var value = ret.value;
   447  	            if(ret.status) {
   448  	            	alert("get key ok");
   449  	            } else {
   450  	            	alert({msg:err.code});
   451  	            }
   452  	        });
   453  		}
   454  	</script>
   455  </html>