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

src/App.vue

@@ -1,7 +1,7 @@
 <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 { ElMessage } from 'element-plus'
+import { ElMessage } from "element-plus";
 const getQueryVariable = (variable: string) => {
   if (window.location.hash.indexOf("?") < 0) {
     return null;
@@ -15,10 +15,12 @@ const getQueryVariable = (variable: string) => {
     }
   }
   return false;
-}
-const roomUid = getQueryVariable("roomUid") || sessionStorage.getItem("roomUid");
-if(!roomUid) {
-  ElMessage.error('房间不存在')
+};
+const roomUid =
+  getQueryVariable("roomUid") || sessionStorage.getItem("roomUid");
+
+if (!roomUid) {
+  ElMessage.error("房间不存在");
 } else {
   sessionStorage.setItem("roomUid", roomUid);
 }
@@ -71,18 +73,4 @@ body {
   background-color: #d5d5d5;
 }
 
-.el-dialog {
-  margin-bottom: 10vh;
-  .el-dialog__header {
-    // background: #363d55;
-    background: var(--color-primary);
-    padding: 15px 20px 15px;
-    .el-dialog__title {
-      color: #fff;
-    }
-    .el-dialog__headerbtn .el-dialog__close {
-      color: #fff;
-    }
-  }
-}
 </style>

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

@@ -1,33 +1,57 @@
-.action-bar{
+.action-bar {
   box-sizing: border-box;
   height: var(--action-bar-height);
   padding: 14px 22px;
   display: flex;
   align-items: center;
   justify-content: space-between;
-  button{
+
+  button {
     overflow: hidden;
   }
 }
+
 .bar-btn {
   display: flex;
   flex-direction: column;
   align-items: center;
   color: var(--live-color);
   font-size: 14px;
+
   .bar-btn-text {
     padding-top: 6px;
     line-height: 20px;
   }
-  & + & {
+
+  &+& {
     margin-left: 25px;
   }
 }
+
 :global {
+  .el-dialog {
+    margin-bottom: 10vh;
+
+    .el-dialog__header {
+      // background: #363d55;
+      background: var(--live-main-color);
+      padding: 15px 20px 15px;
+
+      .el-dialog__title {
+        color: #fff;
+      }
+
+      .el-dialog__headerbtn .el-dialog__close {
+        color: #fff;
+      }
+    }
+  }
+
   .el-button:active {
     // border-color: transparent;
     // background: rgba(94, 98, 109, 0.33);
   }
+
   .el-dropdown__popper.el-popper {
     border-color: var(--live-main-color) !important;
   }
@@ -43,17 +67,21 @@
     --el-slider-button-wrapper-offset: -17px;
     --el-slider-main-bg-color: var(--live-text-color);
   }
+
   .el-slider__button {
     border-color: var(--live-color);
     background-color: var(--live-text-color);
   }
+
   .el-dropdown-menu {
     background-color: var(--live-main-color);
     color: var(--live-color);
     border-radius: 2px;
+
     .el-dropdown-menu__item {
       color: inherit;
     }
+
     .el-dropdown-menu__item:not(.is-disabled):focus {
       background-color: var(--live-main-color);
       color: var(--live-color);
@@ -70,6 +98,7 @@
   height: 55px;
   background-color: var(--live-main-color);
   border-color: var(--live-main-color);
+
   .volumeIcon {
     width: 14px;
     height: 15px;

src/components/live-broadcast/action-bar.tsx

@@ -2,7 +2,7 @@ import { defineComponent } from 'vue'
 import { ElButton, ElDropdown, ElDropdownMenu, ElDropdownItem, ElSlider, ElDialog, ElIcon } from 'element-plus'
 import runtime, * as RuntimeUtils from './runtime'
 import styles from './action-bar.module.less'
-
+import Share from './share'
 export default defineComponent({
   name: 'LiveBroadcast-ActionBar',
   data() {
@@ -32,6 +32,7 @@ export default defineComponent({
   },
   methods: {
     startShare() {
+      console.log('调用')
       this.shareVisiable = true
     },
     volumeChange(value: number) {
@@ -189,7 +190,7 @@ export default defineComponent({
           </div>
 
         </div>
-        <div style={{ display: 'flex' }}>
+        <div style={{ display: 'flex' }} onClick={this.startShare}>
           <div class={styles['bar-btn']} >
             <div class={styles.btnInner}>
               <SvgIcon
@@ -200,12 +201,13 @@ export default defineComponent({
                 }}
               />
             </div>
-            <span class={styles['bar-btn-text']}>分享</span>
+            <span class={styles['bar-btn-text']} >分享</span>
           </div>
         </div>
         {/* <ElButton onClick={RuntimeUtils.shareScreenVideo}>屏幕共享</ElButton> */}
-        <ElDialog modelValue={this.shareVisiable} title="分享" before-close={() => { this.shareVisiable = false }}>
-          11111
+        <ElDialog width="510px"
+          append-to-body modelValue={this.shareVisiable} title="分享" before-close={() => { this.shareVisiable = false }}>
+            <Share />
         </ElDialog>
       </div>
     )

src/components/live-broadcast/share.tsx

@@ -33,7 +33,7 @@ export default defineComponent({
                     </ElFormItem>
                 </ElForm>
                 <div>
-                    <div class="linkWrap" v-if={this.form.shareType == 1}>
+                    <div class="linkWrap" v-if="this.form.shareType == 1">
                         <div class="shareWrap">
                             <h2>乐团老师邀请您参与直播课！</h2>
                             <h4>{this.detail.roomTitle}111</h4>
@@ -44,13 +44,13 @@ export default defineComponent({
                         <div class="shareBtn" onClick={this.copyText}>复制分享内容</div>
                     </div>
                 </div >
-                <div class="codeWrap" v-if={this.form.shareType == 2}>
+                <div class="codeWrap" v-if="this.form.shareType == 2">
                     <div class="shareWrap">
                         <preview form={this.detail} id="preview" />
                     </div>
                     <div class="shareBtn" onClick={this.shareImage}>复制分享内容</div>
                 </div>
-                <div class="groupWrap" v-if={this.form.shareType == 3}>
+                <div class="groupWrap" v-if="this.form.shareType == 3">
                     <groupChat />
                 </div>
             </div>

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

@@ -34,6 +34,7 @@ export default defineComponent({
   },
   mounted() {
     event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:SeatApply'], this.onSeatApply);
+    event.on(LIVE_EVENT_MESSAGE['RC:Chatroom:SeatResponse'], this.onSeatApply);
     event.on(LIVE_EVENT_MESSAGE['RM:RTC:UserLeave'], this.onSeatApply);
     event.on(LIVE_EVENT_MESSAGE['RM:RTC:SwitchRole'], this.onSwitchRole);
   },

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

@@ -1,6 +1,6 @@
 import { defineComponent } from "vue";
 import { ElButton } from 'element-plus'
-import * as RuntimeUtils from '/src/components/live-broadcast/runtime'
+import runtime, * as RuntimeUtils from '/src/components/live-broadcast/runtime'
 import styles from './index.module.less'
 import event, { LIVE_EVENT_MESSAGE } from '/src/components/live-broadcast/event';
 import { state } from '/src/state'