search_win.html 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269
  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. <meta name="format-detection"content="telephone=no">
  8. <title>index</title>
  9. <link rel="stylesheet" type="text/css" href="../../css/api.css"/>
  10. <link rel="stylesheet" href="../../css/projeck.css">
  11. <style media="screen">
  12. body,html{
  13. margin: 0;
  14. background: #fff;
  15. }
  16. .aui-searchbar{
  17. width: 86%;
  18. height: 50px;
  19. margin-left: 40px;
  20. background-color: transparent;
  21. }
  22. .aui-searchbar .aui-searchbar-btn{
  23. color: #fff;
  24. }
  25. .aui-searchbar-input{
  26. background: #fff;
  27. }
  28. .aui-searchbar-input input{
  29. color: #000;
  30. }
  31. #search-input::placeholder{
  32. color: #ccc;
  33. font-size: 14px;
  34. }
  35. .search_ico{
  36. width: 16px;
  37. height: 16px;
  38. display: block;
  39. position: absolute;
  40. background: url("../../image/search.png") no-repeat;
  41. background-size: cover;
  42. top: 8px;
  43. left: 17px;
  44. }
  45. .backBtn{
  46. margin-left: 5px;
  47. }
  48. #search-input{
  49. font-size: 14px;
  50. height: 28px;
  51. }
  52. .aui-searchbar-input{
  53. margin-right: 60px;
  54. }
  55. .search_btn{
  56. position: absolute;
  57. bottom: 9px;
  58. right: 10px;
  59. width: 54px;
  60. height: 31px;
  61. line-height: 31px;
  62. -webkit-border-radius: 50px;
  63. -moz-border-radius: 50px;
  64. border-radius: 50px;
  65. color: #000;
  66. background: #fff;
  67. font-size: 13px;
  68. }
  69. nav{
  70. background: #009fe8;
  71. position: relative;
  72. }
  73. .row{
  74. padding: 0 30px 24px 30px;
  75. }
  76. .row li{
  77. padding: 5px;
  78. color: #72e5ff;
  79. font-size: 16px;
  80. position: relative;
  81. }
  82. .row li.selectIndex{
  83. color: #fff;
  84. }
  85. .row li.selectIndex:after{
  86. content: '';
  87. position: absolute;
  88. bottom: 0;
  89. left: 0;
  90. width: 100%;
  91. height: 2px;
  92. background: #fff;
  93. }
  94. .radius_top{
  95. width: 100%;
  96. height: 10px;
  97. background: #fff;
  98. border-top-left-radius: 10px;
  99. border-top-right-radius: 10px;
  100. -webkit-border-top-left-radius: 10px;
  101. -webkit-border-top-right-radius: 10px;
  102. position: absolute;
  103. bottom: 0;
  104. left: 0;
  105. }
  106. </style>
  107. </head>
  108. <body>
  109. <div class="api_layout">
  110. <header class="header-login">
  111. <img class="backBtn" src="../../image/btn_back.png" alt="" onclick="backIndex()">
  112. <div class="aui-searchbar" id="search">
  113. <div class="aui-searchbar-input aui-border-radius">
  114. <i class="search_ico"></i>
  115. <form>
  116. <input type="text" placeholder="搜索" id="search-input">
  117. </form>
  118. </div>
  119. <span class="search_btn" onclick="seacrhWinFun(inputValue)">搜索</span>
  120. </div>
  121. </header>
  122. <nav>
  123. <ul class="row flex-space">
  124. <li class="selectIndex" onclick="randomSwitchBtn(this)">二维码</li>
  125. <!-- <li onclick="randomSwitchBtn(this)">设备物资</li> -->
  126. <!-- <li onclick="randomSwitchBtn(this)">固定电缆</li> -->
  127. <!-- <li onclick="randomSwitchBtn(this)">添加人</li> -->
  128. </ul>
  129. <div class="radius_top"></div>
  130. </nav>
  131. </div>
  132. </body>
  133. </html>
  134. <script type="text/javascript" src="../../script/api.js"></script>
  135. <!-- <script src="../../script/fastclick.min.js" charset="utf-8"></script> -->
  136. <script type="text/javascript" src="../../script/config.js"></script>
  137. <script type="text/javascript">
  138. var inputValue = '',addLinkUrl = ''
  139. apiready = function () {
  140. $api.fixStatusBar($api.dom('header') );
  141. // api.parseTapmode();
  142. // var info = $api.getStorage('data'),
  143. // token = JSON.parse(info).data.access_token;
  144. fnInitUIInput();
  145. funIniGroup();
  146. addLinkUrl = api.pageParam.type;
  147. };
  148. var eHeaderLis,index = 0;
  149. function funIniGroup(){
  150. eHeaderLis = $api.domAll('.row li'),
  151. frames = [];
  152. for (var i = 0,len = eHeaderLis.length; i < len; i++) {
  153. frames.push( {
  154. name: 'search_frame'+i,
  155. url: 'search_frame'+i+'.html',
  156. bgColor : '#fff',
  157. bounces:true
  158. } )
  159. }
  160. api.openFrameGroup({
  161. name: 'group',
  162. scrollEnabled: true,
  163. rect: {
  164. x: 0,
  165. y: $api.dom('header').offsetHeight+$api.dom('nav').offsetHeight-2,
  166. w: api.winWidth,
  167. h: $api.winHeight
  168. },
  169. index: 0,
  170. frames: frames
  171. }, function (ret, err) {
  172. index = ret.index;
  173. menuSelected(ret.index);
  174. });
  175. };
  176. function menuSelected(index) {
  177. for (var i = 0; i < eHeaderLis.length; i++) {
  178. if(index == i ){
  179. $api.addCls(eHeaderLis[i], 'selectIndex');
  180. }else {
  181. $api.removeCls(eHeaderLis[i], 'selectIndex');
  182. }
  183. }
  184. }
  185. function randomSwitchBtn( tag ) {
  186. if( tag == $api.dom('.row li.selectIndex') )return;
  187. var eFootLis = $api.domAll('.row li');
  188. index = 0;
  189. for (var i = 0,len = eFootLis.length; i < len; i++) {
  190. if( tag == eFootLis[i] ){
  191. index = i;
  192. }else{
  193. $api.removeCls(eFootLis[i], 'selectIndex');
  194. }
  195. }
  196. $api.addCls( eFootLis[index], 'selectIndex');
  197. api.setFrameGroupIndex({
  198. name: 'group',
  199. index: index
  200. });
  201. }
  202. function backIndex() {
  203. api.sendEvent({
  204. name: 'userInfo',
  205. extra: {
  206. key1: 'value1',
  207. key2: 'value2'
  208. }
  209. });
  210. api.closeWin();
  211. }
  212. // input
  213. function fnInitUIInput() {
  214. var searchText = $api.byId('search-input');
  215. var rect = $api.offset(searchText);
  216. var UIInput = api.require('UIInput');
  217. UIInput.open({
  218. rect: {
  219. x: rect.l,
  220. y: rect.t+1,
  221. w: rect.w,
  222. h: rect.h-1
  223. },
  224. styles: {
  225. bgColor: '#fff',
  226. size: 14,
  227. color: '#000',
  228. placeholder: {
  229. color: '#ccc'
  230. }
  231. },
  232. autoFocus: false,
  233. maxRows: 1,
  234. placeholder: '搜索',
  235. keyboardType: 'default',
  236. fixedOn: api.frameName
  237. }, function(ret, err) {
  238. if (ret) {
  239. var uiInputId = ret.id;
  240. if (ret && ret.eventType == "show") {
  241. setTimeout(function() {
  242. UIInput.popupKeyboard({id: uiInputId});
  243. }, 300)
  244. } else if (ret.eventType == "change") {
  245. UIInput.value({
  246. id: uiInputId
  247. }, function(ret, err) {
  248. if (ret) {
  249. if (ret.status) {
  250. inputValue = ret.msg;
  251. seacrhWinFun(ret.msg);
  252. }
  253. }
  254. });
  255. }
  256. }
  257. });
  258. }
  259. // 查询
  260. function seacrhWinFun(text) {
  261. api.execScript({
  262. name: 'search_win',
  263. frameName: 'search_frame'+index,
  264. script: 'seachQrcodeFun'+index+'("'+text+'","'+addLinkUrl+'");'
  265. });
  266. }
  267. </script>