bzy_image_detail.html 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Hello MUI</title>
  5. <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
  6. <meta name="apple-mobile-web-app-capable" content="yes">
  7. <meta name="apple-mobile-web-app-status-bar-style" content="black">
  8. <!--标准mui.css-->
  9. <link href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet">
  10. <link rel="stylesheet" href="../css/mui.min.css">
  11. <link rel="stylesheet" href="../css/iconfont.css">
  12. <link rel="stylesheet" href="../css/common.css">
  13. <!--App自定义的css-->
  14. <style type="text/css">
  15. body,html,.mui-content{
  16. background-color: #fff;
  17. }
  18. .bottomTxt >div{
  19. text-align: center;
  20. line-height: 40px;
  21. font-size: 22px;
  22. color: #656565;
  23. }
  24. .bottomTxt textarea{
  25. border: none;
  26. min-height: 200px;
  27. text-indent: 20px;
  28. font-size: 14px;
  29. letter-spacing: .2rem;
  30. }
  31. .bottomTxt .active{
  32. border: 1px solid #9a9a9a;
  33. width: 80%;
  34. margin: 0 auto;
  35. display: block;
  36. }
  37. #saveBox{
  38. margin-top: 10px;
  39. text-align: center;
  40. display: none;
  41. }
  42. #saveBox button{
  43. width: 30%;
  44. }
  45. </style>
  46. </head>
  47. <body>
  48. <header class="mui-bar mui-bar-nav">
  49. <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  50. <h1 class="mui-title" id="title">孢子仪图片描述</h1>
  51. <a class="headRightIcon fa fa-edit mui-pull-right" id="editBtn">编辑</a>
  52. </header>
  53. <div class="mui-content">
  54. <div class="">
  55. <img src="" width="100%" id="bzyImg"/>
  56. <!--<img src="http://120.27.222.26/bzy/pyftp/ftp_file/bzy_photo/866262040450529/20190513/20190513211133.jpg" width="100%" id="bzyImg"/>-->
  57. </div>
  58. <div class="bottomTxt">
  59. <div>图片描述</div>
  60. <textarea class="" readonly='readonly' id="describe" rows="" cols=""></textarea>
  61. </div>
  62. <div id="saveBox">
  63. <button type="button" id="cancelBtn" class="mui-btn mui-btn-primary">取 消</button>   
  64. <button type="button" id="sendBtn" class="mui-btn mui-btn-primary">保 存</button>
  65. </div>
  66. </div>
  67. </body>
  68. <script src="../js/jquery-2.1.0.js"></script>
  69. <script src="../js/mui.min.js"></script>
  70. <script>
  71. var equipId,addr,describeMsg;
  72. var startPage = 1;
  73. var totalPage = 0;
  74. var username;
  75. mui.plusReady(function() {
  76. var self = plus.webview.currentWebview();
  77. equipId = self.equipId;
  78. addr = self.addr;
  79. $('#bzyImg').attr('src','http://120.27.222.26/bzy/'+addr);
  80. // $('#bzyImg').attr('src','http://120.27.222.26/bzy/pyftp/ftp_file/bzy_photo/866262040450529/20190513/20190513211133.jpg');
  81. mui.ajax('http://120.27.222.26/bzy_describe_img', {
  82. data: {
  83. 'addr': addr
  84. },
  85. dataType: 'json', //服务器返回json格式数据
  86. type: 'get', //HTTP请求类型
  87. timeout: 10000, //超时时间设置为10秒;
  88. beforeSend: function() {
  89. plus.nativeUI.showWaiting('请求中...');
  90. },
  91. complete: function() {
  92. plus.nativeUI.closeWaiting();
  93. },
  94. success: function(data) {
  95. describeMsg = data;
  96. $('#describe').val(data || '暂无数据')
  97. },
  98. error: function(xhr, type, errorThrown) {
  99. mui.toast('请求失败')
  100. }
  101. });
  102. $('#editBtn').on('tap',function(){
  103. $('#describe').attr('readonly',false);
  104. $('#describe').addClass('active');
  105. $('#describe').val(describeMsg);
  106. $('#saveBox').show();
  107. })
  108. $('#cancelBtn').on('tap',function(){
  109. $('#describe').attr('readonly',true);
  110. $('#describe').val(describeMsg || '暂无数据');
  111. $('#describe').removeClass('active');
  112. $('#saveBox').hide();
  113. })
  114. $('#sendBtn').on('tap',function(){
  115. mui.ajax('http://120.27.222.26/bzy_describe_img', {
  116. data: {
  117. 'addr': addr,
  118. 'describe':$('#describe').val()
  119. },
  120. dataType: 'json', //服务器返回json格式数据
  121. type: 'post', //HTTP请求类型
  122. timeout: 10000, //超时时间设置为10秒;
  123. beforeSend: function() {
  124. plus.nativeUI.showWaiting('请求中...');
  125. },
  126. complete: function() {
  127. plus.nativeUI.closeWaiting();
  128. },
  129. success: function(data) {
  130. console.log(JSON.stringify(data))
  131. if(data == 0){
  132. describeMsg = $('#describe').val();
  133. $('#describe').val(describeMsg || '暂无数据');
  134. $('#describe').attr('readonly',true);
  135. $('#describe').removeClass('active');
  136. $('#saveBox').hide();
  137. }else{
  138. mui.toast('添加描述失败!');
  139. }
  140. },
  141. error: function(xhr, type, errorThrown) {
  142. mui.toast('请求失败')
  143. }
  144. });
  145. })
  146. $('#bzyImg').on('tap',function(){
  147. var imgsrc = document.getElementById('bzyImg').getAttribute('src');
  148. console.log(imgsrc)
  149. plus.nativeUI.previewImage([
  150. imgsrc
  151. ]);
  152. })
  153. })
  154. </script>
  155. </html>