index.html 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267
  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,initial-scale=1.0,width=device-width" />
  6. <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
  7. <title>APP</title>
  8. <link rel="stylesheet" type="text/css" href="./css/api.css" />
  9. <!--<link rel="stylesheet" type="text/css" href="./css/aui.css" />-->
  10. <link rel="stylesheet" type="text/css" href="./css/aui-win.css" />
  11. <link rel="stylesheet" type="text/css" href="./css/iconfont.css" />
  12. <style type="text/css">
  13. body,
  14. html {
  15. width: 100%;
  16. height: 100%;
  17. }
  18. .aui-nav .aui-bar-tab {
  19. background: #fff;
  20. }
  21. .aui-bar {
  22. text-align: center;
  23. height: 3.3rem;
  24. }
  25. #footer {
  26. border-top: 1px solid #ddd;
  27. }
  28. .btn-icon {
  29. width: 1.2rem;
  30. margin: 0 auto;
  31. margin-bottom: 3px;
  32. }
  33. .aui-bar-tab .aui-bar-tab-item {
  34. padding: 10px 0;
  35. box-sizing: border-box;
  36. }
  37. .aui-bar1 {
  38. position: relative;
  39. top: 0;
  40. right: 0;
  41. left: 0;
  42. z-index: 10;
  43. width: 100%;
  44. min-height: 2.25rem;
  45. font-size: 0.9rem;
  46. text-align: center;
  47. display: table;
  48. }
  49. /*底部切换栏*/
  50. .aui-bar-tab1 {
  51. position: fixed;
  52. top: auto;
  53. bottom: 0;
  54. table-layout: fixed;
  55. background-color: #ffffff;
  56. color: #757575;
  57. }
  58. .aui-bar-tab1 .aui-bar-tab-item {
  59. display: table-cell;
  60. position: relative;
  61. width: 1%;
  62. height: 2.5rem;
  63. text-align: center;
  64. vertical-align: middle;
  65. padding: 5px 0;
  66. }
  67. .aui-bar-tab-label {
  68. font-size: 0.8rem;
  69. margin-top: -5px;
  70. }
  71. .myBg {
  72. background: linear-gradient(45deg, #005fa3, #00a0ea) !important;
  73. }
  74. </style>
  75. </head>
  76. <body>
  77. <header class="aui-bar aui-bar-nav" id="aui-header">
  78. <div class="aui-title" id="aui-title">
  79. 赛轮商城门店端
  80. </div>
  81. </header>
  82. <footer class="aui-bar1 aui-bar-tab1" id="footer">
  83. <div class="aui-bar-tab-item aui-active" tapmode>
  84. <img src="./luntai/img/images/tabar_home_active.png" id="index1" class="btn-icon" />
  85. <div class="aui-bar-tab-label">
  86. 首页
  87. </div>
  88. </div>
  89. <!--<div class="aui-bar-tab-item aui-active" tapmode onclick="randomSwitchBtn(1,'find')">
  90. <img src="./luntai/img/images/faxian.png" id="index1" class="btn-icon"/>
  91. <div class="aui-bar-tab-label">
  92. 发现
  93. </div>
  94. </div>-->
  95. <div class="aui-bar-tab-item" tapmode>
  96. <img src="./luntai/img/images/xiaoxi.png" id="index2" class="btn-icon" />
  97. <div class="aui-bar-tab-label">
  98. 消息
  99. </div>
  100. </div>
  101. <div class="aui-bar-tab-item" tapmode>
  102. <img src="./luntai/img/images/wode.png" id="index3" class="btn-icon" />
  103. <div class="aui-bar-tab-label">
  104. 我的
  105. </div>
  106. </div>
  107. </footer>
  108. </body>
  109. <script type="text/javascript" src="./script/api.js"></script>
  110. <script type="text/javascript" src="./script/aui-tab.js"></script>
  111. <script type="text/javascript">
  112. apiready = function() {
  113. // $api.clearStorage();
  114. var header = $api.byId('aui-header');
  115. $api.fixStatusBar(header);
  116. var headerPos = $api.offset(header);
  117. var footer = $api.byId('footer');
  118. $api.fixTabBar(footer)
  119. var body_h = $api.offset($api.dom('body')).h;
  120. var footer_h = $api.offset($api.byId('footer')).h;
  121. var loginid = $api.getStorage("loginid");
  122. // openFrameGroup(headerPos, body_h, footer_h);
  123. if (loginid == "" || typeof loginid == 'undefined') {
  124. /// 登录页面
  125. setTimeout(function() {
  126. openLogin(headerPos, body_h, footer_h);
  127. }, 200);
  128. } else {
  129. openFrameGroup(headerPos, body_h, footer_h);
  130. }
  131. /// 打开页面组
  132. api.addEventListener({
  133. name: 'openFrameGroup'
  134. }, function(ret, err) {
  135. //coding...
  136. openFrameGroup(headerPos, body_h, footer_h);
  137. setTimeout(function() {
  138. api.closeWin({
  139. name: 'login',
  140. animation: {
  141. type: "push", //动画类型(详见动画类型常量)
  142. subType: "from_right", //动画子类型(详见动画子类型常量)
  143. duration: 300
  144. }
  145. });
  146. }, 1200);
  147. });
  148. var tab = new auiTab({
  149. element: document.getElementById("footer"),
  150. }, function(ret) {
  151. if (ret.index == 1) {
  152. $api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_active.png');
  153. $api.attr($api.byId('index2'), 'src', './luntai/img/images/xiaoxi.png');
  154. $api.attr($api.byId('index3'), 'src', './luntai/img/images/wode.png');
  155. api.sendEvent({
  156. name: 'startLogin',
  157. extra: {}
  158. });
  159. } else if (ret.index == 2) {
  160. $api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_inactive.png');
  161. $api.attr($api.byId('index2'), 'src', './luntai/img/images/xiaoxi_active.png');
  162. $api.attr($api.byId('index3'), 'src', './luntai/img/images/wode.png');
  163. api.sendEvent({
  164. name: 'refushMsg',
  165. extra: {}
  166. });
  167. } else {
  168. $api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_inactive.png');
  169. $api.attr($api.byId('index2'), 'src', './luntai/img/images/xiaoxi.png');
  170. $api.attr($api.byId('index3'), 'src', './luntai/img/images/wode_active.png');
  171. api.sendEvent({
  172. name: 'refushMeber',
  173. extra: {}
  174. });
  175. }
  176. // if (ret.index == 1) {
  177. // $api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_active.png');
  178. // $api.attr($api.byId('index2'), 'src', './luntai/img/images/wode.png');
  179. // } else {
  180. // $api.attr($api.byId('index1'), 'src', './luntai/img/images/tabar_home_inactive.png');
  181. // $api.attr($api.byId('index2'), 'src', './luntai/img/images/wode_active.png');
  182. // api.sendEvent({
  183. // name: 'refushMeber',
  184. // extra: {
  185. // }
  186. // });
  187. //
  188. // }
  189. api.setFrameGroupIndex({
  190. name: 'indexGroup',
  191. index: (ret.index - 1),
  192. });
  193. });
  194. };
  195. // 打开登陆页面
  196. function openLogin(headerPos, body_h, footer_h) {
  197. api.openWin({
  198. name: 'login',
  199. url: 'luntai/login.html',
  200. rect: {
  201. x: 0,
  202. y: 0,
  203. w: 'auto',
  204. h: body_h - footer_h - headerPos.h
  205. },
  206. animation: {
  207. type: "none", //动画类型(详见动画类型常量)
  208. subType: "from_right", //动画子类型(详见动画子类型常量)
  209. duration: 200 //动画过渡时间,默认300毫秒
  210. }
  211. });
  212. }
  213. // 打开页面组
  214. function openFrameGroup(headerPos, body_h, footer_h) {
  215. api.openFrameGroup({
  216. name: 'indexGroup',
  217. scrollEnabled: false,
  218. rect: {
  219. x: 0,
  220. y: 0,
  221. w: 'auto',
  222. h: body_h - footer_h
  223. },
  224. index: 0,
  225. frames: [{
  226. name: 'main',
  227. url: 'luntai/index.html',
  228. vScrollBarEnabled: false,
  229. hScrollBarEnabled: false,
  230. bounces: false,
  231. }, {
  232. name: 'msg',
  233. url: 'luntai/msg.html',
  234. vScrollBarEnabled: false,
  235. hScrollBarEnabled: false,
  236. bounces: false,
  237. }, {
  238. name: 'my',
  239. url: 'luntai/meber.html',
  240. vScrollBarEnabled: false,
  241. hScrollBarEnabled: false,
  242. bounces: false
  243. }],
  244. }, function(ret, err) {
  245. if (ret.index == 1) {
  246. $api.addCls($api.byId('aui-header'), 'myBg');
  247. } else {
  248. $api.removeCls($api.byId('aui-header'), 'myBg');
  249. }
  250. });
  251. }
  252. </script>
  253. </html>