loginJump.html 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <title>教育平台登录</title>
  7. <script src="./axios.min.js"></script>
  8. <style>
  9. body {
  10. font-family: Arial, sans-serif;
  11. display: flex;
  12. justify-content: center;
  13. align-items: center;
  14. height: 100vh;
  15. margin: 0;
  16. background-color: #f0f2f5;
  17. }
  18. .login-container {
  19. text-align: center;
  20. background: white;
  21. padding: 2rem;
  22. border-radius: 8px;
  23. box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  24. }
  25. .login-btn {
  26. display: block;
  27. width: 200px;
  28. padding: 12px;
  29. margin: 20px auto;
  30. border: none;
  31. border-radius: 4px;
  32. color: white;
  33. font-size: 16px;
  34. cursor: pointer;
  35. transition: background-color 0.3s;
  36. }
  37. .student-btn {
  38. background-color: #1890ff;
  39. }
  40. .teacher-btn {
  41. background-color: #52c41a;
  42. }
  43. .login-btn:hover {
  44. opacity: 0.9;
  45. }
  46. * {
  47. margin: 0;
  48. padding: 0;
  49. box-sizing: border-box;
  50. }
  51. body {
  52. font-family: 'Arial', sans-serif;
  53. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  54. min-height: 100vh;
  55. display: flex;
  56. align-items: center;
  57. justify-content: center;
  58. }
  59. .container {
  60. text-align: center;
  61. }
  62. .loading-container {
  63. background: rgba(255, 255, 255, 0.95);
  64. border-radius: 20px;
  65. padding: 40px;
  66. box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  67. backdrop-filter: blur(10px);
  68. margin-bottom: 30px;
  69. transition: all 0.3s ease;
  70. }
  71. .spinner {
  72. width: 50px;
  73. height: 50px;
  74. border: 5px solid #f3f3f3;
  75. border-top: 5px solid #667eea;
  76. border-radius: 50%;
  77. animation: spin 1s linear infinite;
  78. margin: 0 auto 20px;
  79. }
  80. @keyframes spin {
  81. 0% { transform: rotate(0deg); }
  82. 100% { transform: rotate(360deg); }
  83. }
  84. .loading-text {
  85. font-size: 18px;
  86. color: #333;
  87. font-weight: 500;
  88. }
  89. /* 准备进入状态样式 */
  90. .ready-enter {
  91. animation: pulse 2s infinite;
  92. }
  93. @keyframes pulse {
  94. 0% {
  95. transform: scale(1);
  96. box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  97. }
  98. 50% {
  99. transform: scale(1.05);
  100. box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  101. }
  102. 100% {
  103. transform: scale(1);
  104. box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  105. }
  106. }
  107. .trigger-btn {
  108. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  109. color: white;
  110. border: none;
  111. padding: 15px 30px;
  112. font-size: 16px;
  113. border-radius: 50px;
  114. cursor: pointer;
  115. transition: all 0.3s ease;
  116. box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  117. }
  118. .trigger-btn:hover {
  119. transform: translateY(-3px);
  120. box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2);
  121. }
  122. .trigger-btn:active {
  123. transform: translateY(0);
  124. }
  125. </style>
  126. </head>
  127. <body>
  128. <div class="container">
  129. <div class="loading-container" id="loadingContainer">
  130. <div class="spinner"></div>
  131. <div class="loading-text" id="loadingText">加载中...</div>
  132. </div>
  133. <!-- <button class="trigger-btn" id="triggerBtn">发起网络请求</button>-->
  134. </div>
  135. <!--<div class="login-container">-->
  136. <!-- <h1>在线教育平台</h1>-->
  137. <!-- <button class="login-btn student-btn" onclick="login()">登录</button>-->
  138. <!--</div>-->
  139. <!--http://localhost:63342/onlineEducation-front/public/html/loginJump.html?_ijt=eqdbr9d1k5uh8if53et5u8j8su&_ij_reload=RELOAD_ON_SAVE&code=teacher&state=type=1&id=1958766027408039938-->
  140. <script>
  141. let loadingContainer
  142. let loadingText
  143. let triggerBtn
  144. let baseUrl = 'http://192.168.1.213:9003'
  145. let baseUrlt = 'http://192.168.1.202:9000'
  146. let baseUrls = 'http://192.168.1.202:9000'
  147. // 创建axios实例,参考request.js中的配置
  148. const service = axios.create({
  149. baseURL: '/api',
  150. timeout: 10000
  151. });
  152. // 登录函数
  153. const login = async () => {
  154. const urlParams = new URLSearchParams(window.location.search);
  155. let code = urlParams.get('code');
  156. let type = urlParams.get('state').split('=')[1];
  157. let id = urlParams.get('id');
  158. if (code == undefined || type == undefined) {
  159. alert('数据参数不对');
  160. return
  161. }
  162. if (type == 1 && id == undefined) {
  163. alert('数据参数不对 没有id');
  164. return
  165. }
  166. console.log('什么数值呢', code)
  167. loadingContainer.classList.remove('ready-enter');
  168. loadingText.textContent = '加载中...';
  169. // 这里需要替换为实际的登录接口URL
  170. const loginUrl = baseUrl+'/api/webapp/disk/CollegeUser/getUser';
  171. let res = await service.get(loginUrl, {
  172. params: {
  173. code
  174. },
  175. headers: {
  176. 'account': 'admin',
  177. }
  178. })
  179. console.log('登录状况:', res.data);
  180. if (res.data.code === 200) {
  181. let url = baseUrl+'/api/webapp/auth/b/getLoginUser'
  182. let ress = await service.get(url, {
  183. headers: {
  184. 'token': res.data.data,
  185. }
  186. })
  187. console.log('获取人员信息:', ress);
  188. if(ress.data.code == 200 && ress.data.data.eduIdentity == 1){
  189. // 请求完成后切换到准备进入状态
  190. loadingText.textContent = '准备进入';
  191. loadingContainer.classList.add('ready-enter');
  192. // 可选:移除spinner,只显示文字
  193. const spinner = document.querySelector('.spinner');
  194. if (spinner) {
  195. spinner.style.display = 'none';
  196. }
  197. //去教师段
  198. // 构建带参数的URL
  199. const params = new URLSearchParams({
  200. userId: ress.data.data.id,
  201. type,
  202. id
  203. });
  204. const redirectUrl = `${baseUrlt}/jump?${params.toString()}`;
  205. window.location.href = redirectUrl;
  206. }
  207. }
  208. // .then(response => {
  209. //
  210. // // alert('登录成功');
  211. // // // 保存token等操作
  212. // // console.log('登录成功:', response.data);
  213. // // } else {
  214. // // alert(`登录失败: ${response.data.msg}`);
  215. // // }
  216. // })
  217. // .catch(error => {
  218. // console.error('登录请求失败:', error);
  219. // alert('登录请求失败,请检查网络连接');
  220. // });
  221. // // 发送登录请求
  222. // service.post(loginUrl, loginData)
  223. // .then(response => {
  224. // if (response.data.code === 200) {
  225. // alert(`${userType === 'student' ? '学生' : '教师'}端登录成功`);
  226. // // 保存token等操作
  227. // console.log('登录成功:', response.data);
  228. // } else {
  229. // alert(`登录失败: ${response.data.msg}`);
  230. // }
  231. // })
  232. // .catch(error => {
  233. // console.error('登录请求失败:', error);
  234. // alert('登录请求失败,请检查网络连接');
  235. // });
  236. }
  237. // 在<script>标签内添加
  238. window.onload = function() {
  239. console.log('页面加载完成');
  240. loadingContainer = document.getElementById('loadingContainer');
  241. loadingText = document.getElementById('loadingText');
  242. triggerBtn = document.getElementById('triggerBtn');
  243. login()
  244. // 在这里可以执行初始化操作
  245. // 比如自动登录等
  246. // login(); // 如果需要自动执行登录
  247. };
  248. </script>
  249. </body>
  250. </html>