更新

src/App.vue

@@ -1,7 +1,27 @@
 <script setup lang="ts">
 // This starter template is using Vue 3 <script setup> SFCs
 // Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
-// import HelloWorld from './components/HelloWorld.vue'
+import { ElMessage } from 'element-plus'
+const getQueryVariable = (variable: string) => {
+  if (window.location.hash.indexOf("?") < 0) {
+    return null;
+  }
+  let query = window.location.hash.split("?")[1];
+  let vars = query.split("&");
+  for (let i = 0; i < vars.length; i++) {
+    let pair = vars[i].split("=");
+    if (pair[0] == variable) {
+      return pair[1];
+    }
+  }
+  return false;
+}
+const roomUid = getQueryVariable("roomUid") || sessionStorage.getItem("roomUid");
+if(!roomUid) {
+  ElMessage.error('房间不存在')
+} else {
+  sessionStorage.setItem("roomUid", roomUid);
+}
 </script>
 
 <template>
@@ -29,9 +49,6 @@
 [v-cloak] {
   display: none !important;
 }
-html {
-  --color-primary: #00a79d;
-}
 body {
   background-color: #eef4f9 !important;
 }

src/base.css

@@ -1,5 +1,7 @@
 /* 基础颜色值 */
-
+:root {
+  --el-color-primary: #01A79E;
+}
 body{
   --live-backound-color: #25292E;
   --live-color: #fff;
@@ -7,6 +9,7 @@ body{
   --live-main-color: #32363B;
   --message-color: #575B61;
   --live-light-color: #01A79E;
+  --live-text-color: #00D6C9;
   --tips-backound-color: #32363B;
   --tips-color: #A4A6A9;
 }

src/components/live-broadcast/action-bar.module.less

@@ -41,11 +41,11 @@
     --el-slider-height: 2px;
     --el-slider-button-size: 14px;
     --el-slider-button-wrapper-offset: -17px;
-    --el-slider-main-bg-color: #00D6C9;
+    --el-slider-main-bg-color: var(--live-text-color);
   }
   .el-slider__button {
     border-color: var(--live-color);
-    background-color: #00D6C9;
+    background-color: var(--live-text-color);
   }
   .el-dropdown-menu {
     background-color: var(--live-main-color);

src/components/live-broadcast/header.module.less

@@ -10,3 +10,17 @@
     font-weight: normal;
   }
 }
+:global {
+  .el-message-box {
+    // --live-backound-color
+    border-color: transparent;
+    background-color: var(--live-main-color);
+  }
+  .el-message-box__header {
+    background-color: var(--live-backound-color);
+    color: var(--live-color)
+  }
+  .el-message-box__title, .el-message-box__container, .el-message-box__headerbtn .el-message-box__close {
+    color: var(--live-color)
+  }
+}

src/components/live-broadcast/header.tsx

@@ -39,7 +39,7 @@ export default defineComponent({
   render() {
     return (
       <div class={styles.header}>
-        <h3 class={styles.title}>直播内容：如何在校管乐团中锻炼孩子的自我管理及团队协作意识</h3>
+        <h3 class={styles.title}>直播内容：{ state.user?.liveRemark }</h3>
         {runtime.videoStatus === 'liveing' ? (
           <ElButton type="danger" color="#EA4132" onClick={this.closeLive}>关闭直播</ElButton>
         ) : (

src/components/live-broadcast/index.tsx

@@ -45,7 +45,7 @@ export default defineComponent({
         // runtime.mediaStreamTrack = mediaStreams.getTracks()
         // await RuntimeUtils.setTrack([microphoneAudioTrack], 'microphone')
         // w_3fi4PXQcooe5_VUseReE
-        const join = await RuntimeUtils.joinRoom('LIVE-2112263-12345', RTC.RCLivingType.VIDEO, {
+        const join = await RuntimeUtils.joinRoom(state.user?.roomUid, RTC.RCLivingType.VIDEO, {
           onMessageReceive(name, content) {
             console.log(name, content)
           },

src/components/live-message/index.module.less

@@ -2,7 +2,7 @@
   width: 385px !important;
   height: calc(100vh - var(--header-bar-height));
   background-color: var(--live-main-color);
-  position: relative
+  // position: relative
 }
 
 .dataCount {

src/components/live-message/model/index.module.less

@@ -46,7 +46,7 @@
   font-size: 14px;
   line-height: 20px;
   &.active {
-    color: #00D6C9;
+    color: var(--live-text-color);
   }
 }
 

src/helpers/request.ts

@@ -60,7 +60,6 @@ request.interceptors.response.use(async (res, options) => {
   setTimeout(() => {
     hideLoading()
   }, 200)
-  console.log(res, options, 'res')
   const url = new URL(res.url)
   if (res.status > 299 || res.status < 200) {
     const msg = '服务器错误，状态码' + res.status

src/main.ts

@@ -5,6 +5,7 @@ import 'element-plus/dist/index.css'
 import App from './App.vue'
 import router from './router'
 import 'element-plus/dist/index.css'
+// import '/src/theme/index.css'
 import SvgIcon from './components/svg-icon/install'
 import './permission'
 // import './icons' // icon

src/pages/home/header/index.module.less

@@ -7,6 +7,7 @@
   justify-content: space-between;
   align-items: center;
   color: var(--live-color);
+  overflow: overlay;
 
   .liveLogo {
     height: 36px;

src/pages/home/header/index.tsx

@@ -6,6 +6,7 @@ import request from '/src/helpers/request';
 import runtime, * as RuntimeUtils from "/src/components/live-broadcast/runtime";
 import { removeToken } from "/src/utils/auth";
 import { removeMedia } from '/src/components/live-broadcast/helpers'
+import { state } from '/src/state'
 
 export default defineComponent({
   methods: {
@@ -18,7 +19,12 @@ export default defineComponent({
         // console.log(this)
         // this.$message.success('退出成功');
         removeToken();
-        (this as any).$router.push('/login');
+        (this as any).$router.push({
+          path: '/login',
+          query: {
+            ...this.$route.query
+          }
+        });
       } catch(e) {
         // TODO: handle error
       }
@@ -29,11 +35,11 @@ export default defineComponent({
       <div class={styles.liveHeader}>
         <div class={styles.liveHeaderLeft}>
           <div class={styles.liveHeaderLeftIcon}>
-            <img class={styles.liveLogo} src="/src/assets/home/logo.png" alt=""/>
-            大雅乐盟
+            <img class={styles.liveLogo} src={state.user?.tenantLogo} alt=""/>
+            {state.user?.tenantName}
           </div>
           <div class={styles.liveHeaderLeftText}>
-            《2022大师直播第五期》
+            《{state.user.roomTitle}》
           </div>
         </div>
         <ElDropdown trigger={'hover'}
@@ -49,7 +55,7 @@ export default defineComponent({
           }}>
           <div class={styles.avatarWrapper}>
              <img class={styles.userAvatar} src="/src/assets/home/placehorder-icon.png" />
-            <span>诏老师</span>
+            <span>{ state.user?.speakerName }</span>
           </div>
         </ElDropdown>
       </div>

src/pages/login/index.module.less

@@ -142,6 +142,10 @@ body {
         }
       }
     }
+    .el-form-item__error {
+      padding-top: 8px;
+      padding-left: 54px;
+    }
 
     .el-form-item {
       border-bottom: 1px solid rgba(255, 255, 255, 0.12);

src/pages/login/index.tsx

@@ -7,14 +7,14 @@ import { setToken } from "/src/utils/auth";
 
 export default defineComponent({
   data() {
-    const validateUsername = (rule: any, value: any, callback: () => void) => {
-      if (!value) {
-        // @ts-ignore
-        callback(new Error("请输入用户名"));
-      } else {
-        callback();
-      }
-    }
+    // const validateUsername = (rule: any, value: any, callback: () => void) => {
+    //   if (!value) {
+    //     // @ts-ignore
+    //     callback(new Error("请输入手机号"));
+    //   } else {
+    //     callback();
+    //   }
+    // }
     const validatePassword = (rule: any, value: string | any[], callback: () => void) => {
       if (value.length < 6) {
         // @ts-ignore
@@ -30,7 +30,12 @@ export default defineComponent({
       } as any,
       loginRules: {
         username: [
-          { required: true, trigger: "blur", validator: validateUsername }
+          { required: true, message: '请输入手机号', trigger: 'blur' },
+          {
+            pattern: /^1[3456789]\d{9}$/,
+            message: '请输入正确的手机号',
+            trigger: 'blur',
+          },
         ],
         password: [
           { required: true, trigger: "blur", validator: validatePassword }
@@ -73,23 +78,33 @@ export default defineComponent({
         if (valid) {
           try {
             // 根据手机号获取学生信息
-// export const checkStudentPhone = (data) => request2({
-//   url: '/api-web/studentManage/queryUserByPhone',
-//   method: 'get',
-//   params: data,
-//   hideLoading: true
-// })
-            // const resPhone: any = await request('/api-web/studentManage/queryUserByPhone', {
-            //   params: {
-            //     mobile: loginForm.username
-            //   }
+            // export const checkStudentPhone = (data) => request2({
+            //   url: '/api-web/studentManage/queryUserByPhone',
+            //   method: 'get',
+            //   params: data,
+            //   hideLoading: true
             // })
+            // /auth-server/user/queryUserByPhone
+            const resPhone: any = await request('/api-auth/user/queryClient', {
+              params: {
+                phone: loginForm.username
+              }
+            })
+            console.log(resPhone)
+            // "SYSTEM,STUDENT,TEACHER"
+            const authType = resPhone.data
+            let clientType = 'SYSTEM'
+            if (authType.includes('SYSTEM')) {
+              clientType = 'SYSTEM'
+            } else if(authType.includes('TEACHER')) {
+              clientType = 'TEACHER'
+            }
             const res: any = await request.post('/api-auth/usernameLogin', {
               data: {
                 username: loginForm.username,
                 password: loginForm.password,
-                clientId: "teacher",
-                clientSecret: "teacher"
+                clientId: clientType,
+                clientSecret: clientType
               }
             })
             console.log(res, 'res');
@@ -97,16 +112,14 @@ export default defineComponent({
             console.log(token);
             setToken(token)
 
-            // const roomDetail = await request.get('/api-web/imLiveBroadcastRoom/queryRoom', {
-            //   params: {
-            //     roomUid: 'w_3fi4PXQcooe5_VUseReA'
-            //   }
-            // })
-            // console.log(roomDetail, 'roomDetail');
+            const roomUid = sessionStorage.getItem('roomUid')
+            const roomDetail = await request.get('/api-web/imLiveBroadcastRoom/queryRoom', {
+              params: {
+                roomUid: roomUid
+              }
+            })
             ElMessage.success('登录成功')
             this.$router.push(this.redirect || '/')
-            // this.$router.push({ path: "/home" });
-            console.log(res)
           } catch (error) {
             // console.log(error)
           }
@@ -152,8 +165,9 @@ export default defineComponent({
                 <ElInput ref="username"
                   class={styles.loginInput}
                   v-model={this.loginForm.username}
-                  placeholder="请输入用户名"
-                  type="text"
+                  placeholder="请输入手机号"
+                  maxlength="11"
+                  type="tel"
                   tabindex="1"
                   auto-complete="off" />
               </ElFormItem>

src/permission.ts

@@ -17,7 +17,6 @@ router.beforeEach(async (to, from, next) => {
   // start progress bar
   NProgress.start();
   const hasToken = getToken();
-  console.log(hasToken)
   if (hasToken) {
     if (to.path === "/login") {
       // 如果有tonken直接跳转到首页
@@ -25,17 +24,24 @@ router.beforeEach(async (to, from, next) => {
 
       NProgress.done();
     } else {
-      const hasGetUserInfo = state.user?.phone;
+      const hasGetUserInfo = state.user?.speakerId;
       // 有名字 说明有用户信息 跳走
       if (hasGetUserInfo) {
         next();
       } else {
         try {
           // 异步获取用户信息
-          await request.get('/api-teacher/teacher/queryUserInfo').then(res => {
-            console.log(res)
-            state.user = res.data
+          // await request.get('/api-web/employee/queryUserInfo').then(res => {
+          //   console.log(res)
+          //   state.user = res.data
+          // })
+          const roomUid = sessionStorage.getItem('roomUid')
+          const roomDetail = await request.get('/api-web/imLiveBroadcastRoom/queryRoom', {
+            params: {
+              roomUid: roomUid
+            }
           })
+          state.user = roomDetail.data
           next({ ...to, replace: true });
         } catch (error: any) {
           // remove token and go to login page to re-login

vite.config.ts

@@ -20,12 +20,12 @@ export default defineConfig({
   css: {
     preprocessorOptions: {
       less: {
-        // lessOptions: {
-        //   modifyVars: {
-        //     '@blue': '#14928A',
-        //     '@nav-bar-icon-color': '#14928A'
-        //   }
-        // }
+        lessOptions: {
+          modifyVars: {
+            '@blue': '#01A79E',
+            '@nav-bar-icon-color': '#01A79E'
+          }
+        }
       }
     }
   },