Merge branch 'master' of http://git.dayaedu.com/lex/dy-admin-live

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

@@ -25,8 +25,8 @@
 }
 :global {
   .el-button:active {
-    border-color: transparent;
-    background: rgba(94, 98, 109, 0.33);
+    // border-color: transparent;
+    // background: rgba(94, 98, 109, 0.33);
   }
   .el-dropdown__popper.el-popper {
     border-color: var(--live-main-color) !important;
@@ -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

@@ -44,7 +44,7 @@ export default defineComponent({
         runtime.videoRef && microphoneAudioTrack.play(runtime.videoRef)
         console.log(runtime.deviceStatus)
         runtime.videoStatus = 'stream'
-        const join = await RuntimeUtils.joinRoom(runtime.roomUid, RTC.RCLivingType.VIDEO, {
+        const join = await RuntimeUtils.joinRoom(state.user?.roomUid, RTC.RCLivingType.VIDEO, {
           onMessageReceive(name, content) {
             console.log(name, content)
           },

src/components/live-broadcast/runtime.ts

@@ -370,6 +370,7 @@ export const loopSyncLike = async () => {
   if (runtime.likeCount !== runtime.lastLikeCount || runtime.likeCount === 0) {
     try {
       await request.get('/api-web/imLiveBroadcastRoom/syncLike', {
+        hideLoading: true,
         params: {
           likeNum: runtime.likeCount,
           roomUid: runtime.roomUid,
@@ -387,10 +388,10 @@ type SendMessageType = 'text' | 'image' | 'audio' | 'video' | 'file' | 'SeatsCtr
 
 export const getSendMessageUser = () => {
   return {
-    id: state.user?.id,
-    name: state.user?.realName,
-    userId: state.user?.id,
-    userName: state.user?.realName,
+    id: state.user?.speakerId,
+    name: state.user?.speakerName,
+    userId: state.user?.speakerId,
+    userName: state.user?.speakerName,
   }
 }
 

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/message.module.less

@@ -6,11 +6,11 @@
     padding: 15px 16px;
   }
   .btn {
-    width: 88px;
     height: 30px;
     line-height: 30px;
     font-size: 14px;
     font-weight: 600;
+    padding: 0 15px;
     background: var(--message-color);
     border-radius: 2px;
     color: var(--live-color);

src/components/live-message/message.tsx

@@ -25,8 +25,8 @@ export default defineComponent({
     return (
       <div class={styles.message}>
         <div class={styles.buttonGroup}>
-          <div onClick={this.ChatBan} class={[this.options === 'ALL' ? styles.active : null, styles.btn]}>全体禁言</div>
-          <div onClick={this.SeatsCtrl} class={styles.btn}>禁止连麦</div>
+          <div onClick={this.ChatBan} class={[!runtime.allowChatCtrl ? styles.active : null, styles.btn]}>{runtime.allowChatCtrl ? '全体禁言' : '关闭全体禁言'}</div>
+          <div onClick={this.SeatsCtrl} class={[!runtime.allowSeatsCtrl ? styles.active : null, styles.btn]}>{runtime.allowSeatsCtrl ? '禁止连麦' : '关闭禁止连麦'}</div>
         </div>
       </div>
     )

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);
   }
 }
 
@@ -58,14 +58,23 @@
     display: flex;
     align-items: center;
   }
-  .btn {
-    font-size: 13px;
-    line-height: 20px;
-    background-color: var(--live-light-color);
-    text-align: center;
-    padding: 3px 15px 1px;
-    border-radius: 2px;
-    cursor: pointer;
+}
+
+.btn {
+  font-size: 13px;
+  line-height: 20px;
+  background-color: var(--live-light-color);
+  border-color: var(--live-light-color);
+  text-align: center;
+  padding: 3px 15px 1px;
+  border-radius: 2px;
+  cursor: pointer;
+  color: var(--live-color);
+  text-decoration: none;
+  &.downBtn {
+    background-color: transparent;
+    border-color: var(--live-light-color);
+    color: var(--live-light-color);
   }
 }
 

src/components/live-message/model/join-model.tsx

@@ -105,7 +105,7 @@ export default defineComponent({
       <div style={{ minHeight: '100%', position: 'relative' }}>
         {list.length > 0 ? list.map((item : any) => (
           <div class={styles.itemContent}>
-            <img src="/src/assets/home/placehorder-icon.png" alt="" />
+            {/* <img src="/src/assets/home/placehorder-icon.png" alt="" /> */}
             <div class={styles.itemInfo}>
               <div class={styles.itemName}>
                 <p class={styles.userName}>{item.name}</p>
@@ -115,14 +115,14 @@ export default defineComponent({
                   <div class={styles.join}>
                     申请连麦
                   </div>
-                  <ElButton size="small" disabled={this.count > 3} class={styles.btn} onClick={() => this.agree(item)}>上麦</ElButton>
+                  <ElButton size="small" type="primary" disabled={this.count > 3} class={styles.btn} onClick={() => this.agree(item)}>上麦</ElButton>
                 </div>
               ) : (
                 <div class={styles.joinText}>
                   <div class={styles.join}>
                     正在连麦
                   </div>
-                  <ElButton size="small" class={styles.btn} onClick={() => this.refuse(item)}>下麦</ElButton>
+                  <ElButton size="small" plain class={[styles.btn, styles.downBtn]} onClick={() => this.refuse(item)}>下麦</ElButton>
                 </div>
               )}
             </div>

src/components/live-message/model/look-model.tsx

@@ -70,7 +70,7 @@ export default defineComponent({
       <div>
         {this.lookList.length > 0 ? this.lookList.map((item : any) => (
           <div class={styles.itemContent}>
-            <img src="/src/assets/home/placehorder-icon.png" alt="" />
+            {/* <img src="/src/assets/home/placehorder-icon.png" alt="" /> */}
             <div class={styles.itemInfo} >
               <div class={styles.itemName}>
                 <p class={styles.userName}>{item.name}</p>

src/components/live-message/model/message-model.tsx

@@ -18,7 +18,7 @@ export default defineComponent({
   },
   data() {
     return {
-      messageList: [{ name: 1, id: 1 }] as any[], // 回复学生列表
+      messageList: [] as any[], // 回复学生列表
       loadingMessage: false, // 观看列表状态
     }
   },
@@ -100,7 +100,7 @@ export default defineComponent({
       <div style={{ minHeight: '100%', position: 'relative' }}>
         {this.messageList.length > 0 ? this.messageList.map((item : any) => (
           <div class={styles.itemContent}>
-            <img src="/src/assets/home/placeholder-icon.png" alt="" />
+            {/* <img src="/src/assets/home/placeholder-icon.png" alt="" /> */}
             <div class={styles.itemInfo}>
               <div class={styles.itemName}>
                 <p class={styles.userName}>{item.name} {item.isSelf ? <ElTag>主播</ElTag> : null}</p>

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: {
@@ -15,10 +16,13 @@ export default defineComponent({
         RuntimeUtils.closeDevice('camera')
         RuntimeUtils.closeDevice('microphone')
         ElMessage.success('退出成功');
-        // 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 +33,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 +53,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'
+          }
+        }
       }
     }
   },