github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/html/contacts/add_friends_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 361 var lon = "116.31"; 362 var lat = "40.05" 363 // 获取当前位置 364 bMap.getNameFromLocation({ 365 lon:lon, 366 lat:lat 367 },function(ret,err){ 368 console.log("ret.status is " + ret.status); 369 if (ret.status){ 370 //api.alert({title:'搜索结果',msg:ret.add}); 371 console.log("address is " + ret.add); 372 console.log("address2 is " + ret.province + ret.city + ret.district + ret.streetName); 373 addr = ret.add 374 if(addr.length == 0) { 375 addr = ret.province; 376 if(ret.province != ret.city){ 377 addr = addr + ret.city; 378 } 379 addr = ret.district + ret.streetName; 380 } 381 console.log("location is " + addr); 382 $(".po").text(addr); 383 } else{ 384 api.alert({title:'搜索错误代码',msg:err.msg}); 385 } 386 }); 387 }; 388 389 //post 390 function lost_post(){ 391 console.log("lost_post begin"); 392 //get token and userid,if token is null,redirect to login 393 var key = "token" 394 var data = $api.getStorage(key); 395 console.log("key=" + key + " data=" + data); 396 397 //secdata = $api.loadSecureValue("oss_key") 398 //console.log("key=" + "oss_key" + " data=" + secdata) 399 400 //loadSecureValue(); 401 402 var content = $("#content").val(); 403 console.log("content = " + content); 404 405 url = "http://123.56.159.76/v1/ay/lost/post"; 406 //var payload = {"content": content, "loc":[1.1,2.2]}; 407 var payload = {"content": content}; 408 myajax(url,'POST',payload, function(ret_body) { 409 console.log("ret body = " + JSON.stringify(ret_body)); 410 }); 411 412 var imglist = $api.getStorage("imglist_key"); 413 if(imglist) { 414 imglist_json = JSON.parse(imglist); 415 console.log("Imglist = " + imglist); 416 $api.rmStorage('imglist_key'); 417 } 418 } 419 420 //get 421 function lost_get(){ 422 console.log("lost_get begin"); 423 //get token and userid,if token is null,redirect to login 424 user_id = $api.getStorage("user_id"); 425 token = $api.getStorage("token"); 426 url = "http://123.56.159.76/v1/ay/" + user_id + "/lost/posts?" + "token=" + token 427 myajax(url,'GET','', function(ret_body){ 428 console.log("ret body = " + JSON.stringify(ret_body)); 429 alert(JSON.stringify(ret_body.posts[0])); 430 }); 431 } 432 433 //facematch 434 function lost_facematch(){ 435 console.log("lost_post begin"); 436 //get token and userid,if token is null,redirect to login 437 url = "http://123.56.159.76/v1/ay/lost/face_match"; 438 var imglist_str = $api.getStorage("imglist_key"); 439 if(imglist_str) { 440 imglist = JSON.parse(imglist_str); 441 console.log("Imglist = " + imglist_str); 442 $api.rmStorage('imglist_key'); 443 444 if(imglist.length < 2){ 445 alert("请选择两个文件"); 446 } else { 447 img1 = imglist[0] 448 img2 = imglist[1] 449 console.log("imgs = " + img1 + " " + img2); 450 var payload = {"img1": img1, "img2": img2}; 451 myajax(url,'POST',payload, function(ret_body) { 452 console.log("ret body = " + JSON.stringify(ret_body)); 453 }); 454 } 455 } 456 } 457 function loadSecureValue(){ 458 api.loadSecureValue({ 459 key:'oss_key' 460 }, function(ret, err) { 461 var value = ret.value; 462 if(ret.status) { 463 alert("get key ok"); 464 } else { 465 alert({msg:err.code}); 466 } 467 }); 468 } 469 </script> 470 </html>