main.html 7.9 KB

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