main.html 7.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  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, html {
  14. width: 100%;
  15. height: 100%;
  16. }
  17. .aui-nav .aui-bar-tab {
  18. background: #fff;
  19. }
  20. .aui-bar {
  21. text-align: center;
  22. height: 3.3rem;
  23. }
  24. #footer {
  25. border-top: 1px solid #ddd;
  26. }
  27. .btn-icon {
  28. width: 1.2rem;
  29. margin: 0 auto;
  30. margin-bottom: 3px;
  31. }
  32. .aui-bar-tab .aui-bar-tab-item {
  33. padding: 10px 0;
  34. box-sizing: border-box;
  35. }
  36. .aui-bar1 {
  37. position: relative;
  38. top: 0;
  39. right: 0;
  40. left: 0;
  41. z-index: 10;
  42. width: 100%;
  43. min-height: 2.25rem;
  44. font-size: 0.9rem;
  45. text-align: center;
  46. display: table;
  47. }
  48. /*底部切换栏*/
  49. .aui-bar-tab1 {
  50. position: fixed;
  51. top: auto;
  52. bottom: 0;
  53. table-layout: fixed;
  54. background-color: #ffffff;
  55. color: #757575;
  56. }
  57. .aui-bar-tab1 .aui-bar-tab-item {
  58. display: table-cell;
  59. position: relative;
  60. width: 1%;
  61. height: 2.5rem;
  62. text-align: center;
  63. vertical-align: middle;
  64. padding: 5px 0;
  65. }
  66. .aui-bar-tab-label {
  67. font-size: 0.8rem;
  68. margin-top: -5px;
  69. }
  70. .myBg {
  71. background: linear-gradient(45deg, #005fa3, #00a0ea) !important;
  72. }
  73. </style>
  74. </head>
  75. <body>
  76. <div id="container">
  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 onclick="randomSwitchBtn(0,'main')">
  84. <img src="../../image/img/images/tabar_home_active.png" id="index1" class="btn-icon"/>
  85. <div class="aui-bar-tab-label">
  86. {{ $t('tabBar.index') }}
  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 aui-active" tapmode onclick="randomSwitchBtn(2,'msg')">
  96. <img src="./luntai/img/images/xiaoxi.png" id="index1" class="btn-icon"/>
  97. <div class="aui-bar-tab-label">
  98. 消息
  99. </div>
  100. </div>-->
  101. <div class="aui-bar-tab-item" tapmode onclick="randomSwitchBtn(3,'may')">
  102. <img src="../../image/img/images/wode.png" id="index2" class="btn-icon"/>
  103. <div class="aui-bar-tab-label">
  104. {{ $t('tabBar.my') }}
  105. </div>
  106. </div>
  107. </footer>
  108. </div>
  109. </body>
  110. <script type="text/javascript" src="../../script/api.js"></script>
  111. <script type="text/javascript" src="../../script/aui-tab.js" ></script>
  112. <script type="text/javascript" src="../../script/vue.js"></script>
  113. <script type="text/javascript" src="../../script/vue-i18n.js"></script>
  114. <script type="text/javascript" src="./js/zh.js"></script>
  115. <script type="text/javascript" src="./js/en.js"></script>
  116. <script type="text/javascript">
  117. apiready = function() {
  118. let langType = $api.getStorage('lang') || 'cn'
  119. const i18n = new VueI18n({
  120. locale: langType,//设置语言
  121. messages: {
  122. en: getEn(),
  123. cn: getCn()
  124. }
  125. })
  126. new Vue({
  127. el: '#container',
  128. i18n,
  129. data: {}
  130. })
  131. // $api.clearStorage();
  132. // setTimeout(function(){
  133. // console.log($api.getStorage("kunnr"));
  134. // },3000)
  135. var header = $api.byId('aui-header');
  136. $api.fixStatusBar(header);
  137. var headerPos = $api.offset(header);
  138. var body_h = $api.offset($api.dom('body')).h;
  139. var footer_h = $api.offset($api.byId('footer')).h;
  140. var loginid = $api.getStorage("kunnr");
  141. // openFrameGroup(headerPos, body_h, footer_h);
  142. if (loginid == "" || typeof loginid == 'undefined') {
  143. /// 登录页面
  144. setTimeout(function() {
  145. openLogin(headerPos, body_h, footer_h);
  146. }, 200);
  147. } else {
  148. openFrameGroup(headerPos, body_h, footer_h);
  149. }
  150. api.addEventListener({
  151. name: 'keyback'
  152. }, function(ret, err){
  153. if( ret ){
  154. setTimeout(function(){
  155. api.confirm({
  156. title : "提醒",
  157. msg : "即将退回到登录页?",
  158. buttons : ["取消","确认"],
  159. }, function(ret, err) {
  160. if(ret.buttonIndex==2){
  161. api.sendEvent({
  162. name: 'rebacklogin'
  163. });
  164. $api.clearStorage();
  165. api.openWin({
  166. name : 'login',
  167. url : '../login.html',
  168. rect : {
  169. x : 0,
  170. y : 0,
  171. w : 'auto',
  172. h : 0
  173. },
  174. animation : {
  175. type : "none", //动画类型(详见动画类型常量)
  176. subType : "from_right", //动画子类型(详见动画子类型常量)
  177. duration : 200 //动画过渡时间,默认300毫秒
  178. }
  179. });
  180. }
  181. });
  182. },300);
  183. }else{
  184. alert( JSON.stringify( err ) );
  185. }
  186. });
  187. /// 打开页面组
  188. api.addEventListener({
  189. name : 'openFrameGroupTbr'
  190. }, function(ret, err) {
  191. //coding...
  192. openFrameGroup(headerPos, body_h, footer_h);
  193. setTimeout(function() {
  194. api.closeWin({
  195. name : 'login',
  196. animation : {
  197. type : "push", //动画类型(详见动画类型常量)
  198. subType : "from_right", //动画子类型(详见动画子类型常量)
  199. duration : 300
  200. }
  201. });
  202. }, 1200);
  203. });
  204. var tab = new auiTab({
  205. element : document.getElementById("footer"),
  206. }, function(ret) {
  207. if (ret.index == 1) {
  208. $api.attr($api.byId('index1'), 'src', '../../image/img/images/tabar_home_active.png');
  209. $api.attr($api.byId('index2'), 'src', '../../image/img/images/wode.png');
  210. } else {
  211. $api.attr($api.byId('index1'), 'src', '../../image/img/images/tabar_home_inactive.png');
  212. $api.attr($api.byId('index2'), 'src', '../../image/img/images/wode_active.png');
  213. };
  214. api.setFrameGroupIndex({
  215. name : 'indexGrouptbr',
  216. index : (ret.index - 1),
  217. });
  218. api.sendEvent({
  219. name:'updateLang'
  220. })
  221. });
  222. };
  223. // 打开登陆页面
  224. function openLogin(headerPos, body_h, footer_h) {
  225. api.openWin({
  226. name : 'login',
  227. url : '../login.html',
  228. rect : {
  229. x : 0,
  230. y : 0,
  231. w : 'auto',
  232. h : body_h - footer_h - headerPos.h
  233. },
  234. animation : {
  235. type : "none", //动画类型(详见动画类型常量)
  236. subType : "from_right", //动画子类型(详见动画子类型常量)
  237. duration : 200 //动画过渡时间,默认300毫秒
  238. }
  239. });
  240. }
  241. // 打开页面组
  242. function openFrameGroup(headerPos, body_h, footer_h) {
  243. api.openFrameGroup({
  244. name : 'indexGrouptbr',
  245. scrollEnabled : false,
  246. rect : {
  247. x : 0,
  248. y : 0,
  249. w : 'auto',
  250. h : body_h - footer_h
  251. },
  252. index : 0,
  253. frames : [{
  254. name : 'home',
  255. url : 'pages/home/home.html',
  256. vScrollBarEnabled : false,
  257. hScrollBarEnabled : false,
  258. bounces : false,
  259. },{
  260. name : 'my',
  261. url : 'pages/mine/meber.html',
  262. vScrollBarEnabled : false,
  263. hScrollBarEnabled : false,
  264. bounces : false
  265. }],
  266. }, function(ret, err) {
  267. if(ret.index == 1){
  268. $api.addCls($api.byId('aui-header'),'myBg');
  269. }else{
  270. $api.removeCls($api.byId('aui-header'),'myBg');
  271. }
  272. });
  273. }
  274. </script>
  275. </html>