| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
- <title>聊天应用</title>
- <link href="https://www.dcloud.io/hellomui/css/mui.min.css" rel="stylesheet" />
- <script src="https://www.dcloud.io/hellomui/js/mui.min.js"></script>
- <style>
- .mui-bar-tab .mui-tab-item.mui-active {
- color: #007AFF;
- }
- .app-loading {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background-color: #fff;
- display: flex;
- justify-content: center;
- align-items: center;
- z-index: 9999;
- }
- </style>
- </head>
- <body>
- <div class="app-loading">
- <div class="mui-spinner mui-spinner-crescent"></div>
- </div>
-
- <!-- 底部选项卡 -->
- <nav class="mui-bar mui-bar-tab">
- <a class="mui-tab-item mui-active" href="pages/chat/chat-list.html">
- <span class="mui-icon mui-icon-chatbubble"></span>
- <span class="mui-tab-label">聊天</span>
- </a>
- <a class="mui-tab-item" href="pages/contacts/contacts.html">
- <span class="mui-icon mui-icon-contact"></span>
- <span class="mui-tab-label">通讯录</span>
- </a>
- <a class="mui-tab-item" href="pages/moments/moments.html">
- <span class="mui-icon mui-icon-star"></span>
- <span class="mui-tab-label">朋友圈</span>
- </a>
- <a class="mui-tab-item" href="pages/profile/profile.html">
- <span class="mui-icon mui-icon-person"></span>
- <span class="mui-tab-label">我的</span>
- </a>
- </nav>
-
- <!-- 主内容区域 -->
- <div class="mui-content">
- <iframe id="main-iframe" width="100%" height="800px" frameborder="0"></iframe>
- </div>
-
- <script src="js/app.js"></script>
- <script>
- mui.init();
-
- // 检查登录状态
- document.addEventListener('DOMContentLoaded', function() {
- if (!app.isLoggedIn()) {
- // 未登录，跳转到登录页
- window.location.href = 'pages/login/login.html';
- return;
- }
-
- // 已登录，加载默认页面
- document.querySelector('#main-iframe').src = 'pages/chat/chat-list.html';
- document.querySelector('.app-loading').style.display = 'none';
-
- // 底部选项卡切换
- mui('.mui-bar-tab').on('tap', '.mui-tab-item', function() {
- var href = this.getAttribute('href');
- document.querySelector('#main-iframe').src = href;
-
- // 更新选中状态
- var tabs = document.querySelectorAll('.mui-tab-item');
- for (var i = 0; i < tabs.length; i++) {
- tabs[i].classList.remove('mui-active');
- }
- this.classList.add('mui-active');
- });
- });
- </script>
- </body>
- </html>
|
