github.com/jincm/wesharechain@v0.0.0-20210122032815-1537409ce26a/app/html/near/add_update_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>发布动态</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="mypost('nearby','update')"> 39 发布 40 </button> 41 <button class="aui-btn aui-btn-danger" onclick="myget('nearby','update')"> 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 58 59 <!--add for upload to oss tmp 60 <h4>您所选择的文件列表:</h4> 61 <div id="ossfile">你的浏览器不支持flash,Silverlight或者HTML5!</div> 62 <br/> 63 <div id="container"> 64 <a id="selectfiles" href="javascript:void(0);" class='btn'>选择文件</a> 65 <a id="postfiles" href="javascript:void(0);" class='btn'>开始上传</a> 66 </div> 67 <pre id="console"></pre> 68 <p> </p> 69 --> 70 71 </body> 72 73 <!--add for upload to oss tmp--> 74 <script type="text/javascript" src="../../lib/crypto1/crypto/crypto.js"></script> 75 <script type="text/javascript" src="../../lib/crypto1/hmac/hmac.js"></script> 76 <script type="text/javascript" src="../../lib/crypto1/sha1/sha1.js"></script> 77 <script type="text/javascript" src="../../lib/base64.js"></script> 78 <script type="text/javascript" src="../../lib/plupload-2.1.2/js/plupload.full.min.js"></script> 79 <script type="text/javascript" src="../../script/upload.js"></script> 80 81 <script type="text/javascript" src="../../script/api.js"></script> 82 <script type="text/javascript" src="../../script/zepto.min.js"></script> 83 <script type="text/javascript" src="../../script/hammer.min.js"></script> 84 <script type="text/javascript" src="../../script/app.js"></script> 85 <script type="text/javascript"> 86 var uiMediaScanner = null, imageFilter = null, imageBrowser = null, bMap = null; 87 var isIOS = false; 88 var imglist = new Array(); //用于保存选择的图片 89 // 定义一个数组,存储需要预览的图片 90 var browerImgs = []; 91 var browerImgs2 = []; 92 93 // 生成guid,主要用于生成随机文件名 94 function NewGuid() { 95 function S4() { 96 return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1); 97 } 98 99 return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4()); 100 } 101 102 // 获取当前的时间,拼接成2015-11-09这样的格式,主要用于对图片进行时间分类 103 function getNowFormatDate() { 104 var date = new Date(); 105 var seperator1 = "-"; 106 var year = date.getFullYear(); 107 var month = date.getMonth() + 1; 108 var strDate = date.getDate(); 109 if (month >= 1 && month <= 9) { 110 month = "0" + month; 111 } 112 if (strDate >= 0 && strDate <= 9) { 113 strDate = "0" + strDate; 114 } 115 var currentdate = year + seperator1 + month + seperator1 + strDate 116 return currentdate; 117 } 118 119 // 获取文件拓展名 120 function getExt(fileName) { 121 return fileName.substring(fileName.lastIndexOf('.') + 1); 122 } 123 124 // 图片压缩 125 // imgsrc:源图片的路径 126 // quality:图片压缩质量,一般建议0.5 127 // scale:图片压缩比例,也是建议0.5 128 // ext:源图片拓展名 129 // callback:转换成功之后回调函数 130 function imgCompress(imgsrc, quality, scale, ext, callback) { 131 // 压缩文件的保存目录 132 var savePath = api.cacheDir + "/" + getNowFormatDate() + "/"; 133 // 压缩文件生成的随机文件名称 134 var savename = NewGuid() + "." + ext; 135 imageFilter.compress({ 136 img : imgsrc, 137 quality : quality, 138 //scale : quality, 139 //size: {w:900, h:1200}, 140 size: {w:400, h:600}, 141 save : { 142 album : false, 143 imgPath : savePath, 144 imgName : savename 145 } 146 }, function(ret, err) { 147 if (ret) { 148 callback(savePath + savename); 149 } else { 150 alert(JSON.stringify(err)); 151 } 152 }); 153 } 154 155 // 打开图片浏览 156 // imgs:需要预览的图片集合 157 function openImageBrowser(imgs) { 158 imageBrowser.openImages({ 159 imageUrls : imgs, 160 showList : false, 161 activeIndex : 0 162 }); 163 } 164 165 // 添加长按方法 166 function addPress(obj, index) { 167 // 获取目前长按的对象 168 var hammertime = new Hammer(obj[0]); 169 // 绑定长按对象 170 hammertime.on("press", function(e) { 171 api.confirm({ 172 title : '温馨提示', 173 msg : '您确定要删除该图片吗?', 174 buttons : ['确定', '取消'] 175 }, function(ret, err) { 176 if (ret.buttonIndex == 1) { 177 // 移除自己 178 $(obj).remove(); 179 //browerImgs2.pop() 180 181 api.toast({ 182 msg : '删除成功!' 183 }); 184 //console.log($(obj)); 185 //alert($(obj));//jincm 186 } 187 }); 188 }); 189 } 190 191 192 Zepto(function($) { 193 // 获取图片宽高 194 var normalW = $("#addpic img").width(); 195 // ############################################################### 196 // 为图片添加点击预览功能,排除添加按钮 197 $("#imgslist").on("tap", "li:not(#addpic)", function() { 198 $("#imgslist li:not(#addpic)").each(function() { 199 // 将图片追加到数组中 200 browerImgs.push($(this).find("img").attr("src")); 201 //browerImgs2.push($(this).find("img").attr("src")); 202 console.log("browerImgs is " + browerImgs); 203 }); 204 // 调用图片预览函数 205 openImageBrowser(browerImgs); 206 207 console.log("browerImgs is " + browerImgs); 208 209 //$api.setStorage("imglist", browerImgs); 210 //var Imgs = $api.getStorage("imglist"); 211 //console.log("Imgs1 = " + Imgs); 212 213 }); 214 215 // 添加图片绑定点击事件 216 $("#imgslist").on("tap", "#addpic", function() { 217 api.actionSheet({ 218 title : '选择图片来源', 219 buttons : ['优雅自拍', '浏览相册'] 220 }, function(ret, err) { 221 var index = ret.buttonIndex; 222 223 switch(index) { 224 // 拍照 225 case 1: 226 // 打开拍照 227 api.getPicture({ 228 sourceType : "camera", 229 encodingType : "jpg", 230 destinationType : "url", 231 mediaValue : "pic", 232 quality : 50, 233 saveToPhotoAlbum : true 234 }, function(ret, err) { 235 if (ret && ret.data) { 236 // 拍照返回的本地路径 237 var returnUrl = ret.data; 238 // 图片压缩 239 imgCompress(returnUrl, 1, 0.8, getExt(returnUrl), function(compressImg) { 240 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>'; 241 // 追加图片 242 $("#addpic").before(showImgHtml); 243 // ######################################## 绑定长按事件 ######################## 244 addPress($("#imgslist img[src='" + compressImg + "']").parent("li")); 245 // ######################################## 246 browerImgs2.push(compressImg); 247 }); 248 } else { 249 api.toast({ 250 msg : '没有选择,或者选择出错' 251 }); 252 } 253 }); 254 break; 255 // 打开图片选择器 256 case 2: 257 uiMediaScanner.open({ 258 type : 'picture', 259 column : 4, 260 classify : true, 261 max : 6, 262 sort : { 263 key : 'time', 264 order : 'desc' 265 }, 266 texts : { 267 stateText : '已选*项', 268 cancelText : '取消', 269 finishText : '完成' 270 }, 271 styles : { 272 bg : '#fff', 273 mark : { 274 icon : '', 275 position : 'bottom_left', 276 size : 20 277 }, 278 nav : { 279 bg : '#b23e4b', 280 stateColor : '#fff', 281 stateSize : 18, 282 cancelBg : 'rgba(0,0,0,0)', 283 cancelColor : '#fff', 284 cancelSize : 18, 285 finishBg : 'rgba(0,0,0,0)', 286 finishColor : '#fff', 287 finishSize : 18 288 } 289 } 290 }, function(ret) { 291 if (ret) { 292 for (var i = 0; i < ret.list.length; i++) { 293 var selectImg = ret.list[i]; 294 // 获取图片的路径 295 var selectimgPath = selectImg.path; 296 var selectimgThumbPath = selectImg.thumbPath; 297 // IOS需要将虚拟路径转换为本地路径才可以压缩 298 if (isIOS) { 299 // 转换为真实路径 300 uiMediaScanner.transPath({ 301 path : selectimgPath 302 }, function(transObj) { 303 // 图片压缩 304 imgCompress(transObj.path, 1, 0.8, selectImg.suffix, function(compressImg) { 305 $("#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>'); 306 // ######################################## 绑定长按事件 ######################## 307 addPress($("#imgslist img[src='" + compressImg + "']").parent("li")); 308 // ######################################## 309 // ################### 上传图片 ######################### 310 browerImgs2.push(compressImg); 311 }); 312 }); 313 } else { 314 // 图片压缩 315 imgCompress(selectimgPath, 1, 0.8, selectImg.suffix, function(compressImg) { 316 // 追加图片 317 $("#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>'); 318 // ######################################## 绑定长按事件 ######################## 319 addPress($("#imgslist img[src='" + compressImg + "']").parent("li")); 320 // ######################################## 321 // ################### 上传图片 ######################### 322 browerImgs2.push(compressImg); 323 }); 324 } 325 } 326 } 327 }); 328 break; 329 } 330 }); 331 332 }); 333 }); 334 335 //added 336 function toLogin(){ 337 api.openWin({ 338 name:'login', 339 url:'widget://html/win_login.html' 340 }) 341 } 342 343 344 345 apiready = function() { 346 // 引入多选模块 347 uiMediaScanner = api.require('UIMediaScanner'); 348 // 引入过滤压缩模块 349 imageFilter = api.require("imageFilter"); 350 // 引入图片浏览模块 351 imageBrowser = api.require('imageBrowser'); 352 // 引入百度模块 353 bMap = api.require('baiduMap'); 354 // 判断是否是IOS系统 355 isIOS = api.systemType == "ios" ? true : false; 356 357 //browerImgs2 = []; 358 359 var lon = "116.31"; 360 var lat = "40.05" 361 // 获取当前位置 362 bMap.getLocation( 363 function(ret, err){ 364 var sta = ret.status; 365 lat = ret.lat; 366 lon = ret.lon; 367 var t = ret.timestamp; 368 if(sta){ 369 var str = '经度:'+ lon +'<br>'; 370 str += '纬度:'+ lat +'<br>'; 371 str += '更新时间:'+ t +'<br>'; 372 //api.alert({msg:str}); 373 console.log("location is " + str); 374 $(".po").text(str); 375 } else{ 376 api.alert({msg:err.msg}); 377 } 378 379 bMap.getNameFromLocation({ 380 lon:lon, 381 lat:lat 382 },function(ret,err){ 383 console.log("ret.status is " + ret.status); 384 if (ret.status){ 385 //api.alert({title:'搜索结果',msg:ret.add}); 386 console.log("address is " + ret.add); 387 console.log("address2 is " + ret.province + ret.city + ret.district + ret.streetName); 388 addr = ret.add 389 if(addr.length == 0) { 390 addr = ret.province; 391 if(ret.province != ret.city){ 392 addr = addr + ret.city; 393 } 394 addr = ret.district + ret.streetName; 395 } 396 console.log("location is " + addr); 397 $(".po").text(addr); 398 } else{ 399 api.alert({title:'搜索错误代码',msg:err.msg}); 400 } 401 }); 402 } 403 ); 404 }; 405 406 //post 407 //type:nearby or youni 408 //microclass:update/goodman/group/exchange/activity/help/lost/neitui/neijian/zhongchou/jiaoyu/zhekou 409 function mypost(type,microclass){ 410 console.log("lost_post begin"); 411 412 //get token and userid,if token is null,redirect to login 413 var key = "token" 414 var user_id = $api.getStorage("user_id"); 415 var token = $api.getStorage("token"); 416 console.log("key=" + key + " data=" + token); 417 if(typeof token == "undefined" || token == null) { 418 toLogin(); 419 return; 420 } 421 422 //secdata = $api.loadSecureValue("oss_key") 423 //console.log("key=" + "oss_key" + " data=" + secdata) 424 425 //loadSecureValue(); 426 427 var content = $("#content").val(); 428 console.log("content = " + content); 429 console.log(browerImgs2.length + ' imgs is ' + JSON.stringify(browerImgs2)); 430 431 //add for ali 432 /*var uploader2 = new plupload.Uploader({ 433 runtimes : 'html5,html4', 434 browse_button : 'selectfiles', 435 container: document.getElementById('container'), 436 //flash_swf_url : 'lib/plupload-2.1.2/js/Moxie.swf', 437 //silverlight_xap_url : 'lib/plupload-2.1.2/js/Moxie.xap', 438 439 url : host, 440 441 multipart_params: { 442 'Filename': '${filename}', 443 'key' : 'zuohaoshi/10002/${filename}', 444 'policy': policyBase64, 445 'OSSAccessKeyId': accessid, 446 'success_action_status' : '200', //让服务端返回200,不然,默认会返回204 447 'signature': signature, 448 }, 449 450 init: { 451 PostInit: function() { 452 console.log("aaaaaaaaaaaaaa"); 453 }, 454 455 FilesAdded: function(up, files) { 456 console.log("file add..............\n"); 457 plupload.each(files, function(file) { 458 console.log('ossfile' + file.id + file.name); 459 }); 460 }, 461 UploadProgress: function(up, file) { 462 console.log('ossfile' + file.id + file.name + file.percent); 463 }, 464 FileUploaded: function(up, file, info) { 465 console.log(info.status) 466 467 }, 468 Error: function(up, err) { 469 document.getElementById('console').appendChild(document.createTextNode("\nError xml:" + err.response)); 470 } 471 } 472 });*/ 473 474 475 //uploader2.init(); 476 /*for (var i = 0; i < browerImgs2.length; i++) { 477 var selectImg = browerImgs2[i]; 478 console.log("selectImg is " + selectImg); 479 myajax_upload_ali('', selectImg, function(img) { 480 console.log("upload file to ali" + img); 481 }); 482 //uploader2.addFile(selectImg); 483 console.log("addfile end " + selectImg); 484 }*/ 485 486 console.log("uploader start "); 487 //uploader2.start(); 488 489 //upload imgs to ali 490 if(browerImgs2.length > 0) { 491 myajax_upload('',browerImgs2,function(ret, err) { 492 if (ret) { 493 console.log(JSON.stringify(ret)); 494 console.log(JSON.stringify(ret.body.img_urls)) 495 496 //add imgs url to content 497 http_path = "/ay/" + microclass + "/post"; 498 //var payload = {"content": content, "loc":[1.1,2.2]}; 499 var payload = {"content": content, "img_urls": ret.body.img_urls}; 500 myajax(http_path,'POST',payload, function(ret, err) { 501 if(ret){ 502 console.log(JSON.stringify(ret.body)) 503 api.alert({ 504 title: '发布成功', 505 msg: ret.body.post_id, 506 buttons: ['确定'] 507 }, function (ret, err) { 508 if (ret.buttonIndex == 1) { 509 api.closeWin(); 510 } 511 }); 512 }else { 513 api.alert({ 514 msg:('错误码:'+err.code+';错误信息:'+err.msg+'网络状态码:'+err.statusCode) 515 }); 516 } 517 //console.log("ret body = " + JSON.stringify(ret_body)); 518 }); 519 520 } else { 521 api.alert({msg : ('错误码:' + err.code + ';错误信息:' + err.msg + ';网络状态码:' + err.statusCode)}); 522 } 523 }); 524 } else { 525 http_path = "/ay/" + microclass + "/post"; 526 //var payload = {"content": content, "loc":[1.1,2.2]}; 527 var payload = {"content": content}; 528 myajax(http_path,'POST',payload, function(ret, err) { 529 if(ret){ 530 console.log(JSON.stringify(ret.body)) 531 api.alert({ 532 title: '发布成功', 533 msg: ret.body.post_id, 534 buttons: ['确定'] 535 }, function (ret, err) { 536 if (ret.buttonIndex == 1) { 537 api.closeWin(); 538 } 539 }); 540 }else { 541 api.alert({ 542 msg:('错误码:'+err.code+';错误信息:'+err.msg+'网络状态码:'+err.statusCode) 543 }); 544 } 545 //console.log("ret body = " + JSON.stringify(ret_body)); 546 }); 547 } 548 549 console.log("uploader end "); 550 551 var imglist = $api.getStorage("imglist_key"); 552 if(imglist) { 553 imglist_json = JSON.parse(imglist); 554 console.log("Imglist = " + imglist); 555 $api.rmStorage('imglist_key'); 556 } 557 } 558 559 //get 560 function myget(type,microclass){ 561 console.log("lost_get begin"); 562 //get token and userid,if token is null,redirect to login 563 user_id = $api.getStorage("user_id"); 564 //token = $api.getStorage("token"); 565 http_path = "/ay/" + user_id + "/" + microclass + "/posts" 566 myajax(http_path,'GET','', function(ret,err){ 567 console.log("ret body = " + JSON.stringify(ret.body)); 568 alert(JSON.stringify(ret.body.posts[0])); 569 570 if(ret){ 571 console.log(JSON.stringify(ret.body)) 572 api.alert({ 573 title: '获取成功', 574 msg: ret.body, 575 buttons: ['确定'] 576 }, function (ret, err) { 577 if (ret.buttonIndex == 1) { 578 api.closeWin(); 579 } 580 }); 581 }else { 582 api.alert({ 583 msg:('错误码:'+err.code+';错误信息:'+err.msg+'网络状态码:'+err.statusCode) 584 }); 585 } 586 }); 587 } 588 589 //facematch 590 function lost_facematch(){ 591 console.log("lost_post begin"); 592 //get token and userid,if token is null,redirect to login 593 http_path = "/ay/lost/face_match"; 594 var imglist_str = $api.getStorage("imglist_key"); 595 if(imglist_str) { 596 imglist = JSON.parse(imglist_str); 597 console.log("Imglist = " + imglist_str); 598 $api.rmStorage('imglist_key'); 599 600 if(imglist.length < 2){ 601 alert("请选择两个文件"); 602 } else { 603 img1 = imglist[0] 604 img2 = imglist[1] 605 console.log("imgs = " + img1 + " " + img2); 606 var payload = {"img1": img1, "img2": img2}; 607 myajax(http_path,'POST',payload, function(ret,err) { 608 if(ret){ 609 console.log(JSON.stringify(ret.body)) 610 api.alert({ 611 title: '比较成功', 612 msg: ret.body, 613 buttons: ['确定'] 614 }, function (ret, err) { 615 if (ret.buttonIndex == 1) { 616 api.closeWin(); 617 } 618 }); 619 }else { 620 api.alert({ 621 msg:('错误码:'+err.code+';错误信息:'+err.msg+'网络状态码:'+err.statusCode) 622 }); 623 } 624 //console.log("ret body = " + JSON.stringify(ret.body)); 625 }); 626 } 627 } 628 } 629 function loadSecureValue(){ 630 api.loadSecureValue({ 631 key:'oss_key' 632 }, function(ret, err) { 633 var value = ret.value; 634 if(ret.status) { 635 alert("get key ok"); 636 } else { 637 alert({msg:err.code}); 638 } 639 }); 640 } 641 </script> 642 </html>