|
|
@@ -0,0 +1,88 @@
|
|
|
+<!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>
|
