小程序共享屏幕，小程序页面优化，开关麦克风以及视频

.gitignore

@@ -23,10 +23,4 @@ pnpm-debug.log*
 *.sln
 *.sw?
 node_modules
-<<<<<<< HEAD
-node_modules
-node_modules
-node_modules
-=======
->>>>>>> ce7123d0f78fb925333f45cb0f43791061dc0431
 /dist

src/views/components/footerPhone.vue

@@ -10,11 +10,11 @@
             <img class="videoImg" src="@/assets/video_on.png" alt="" v-if="videoFlag" @click="videoClickOn" />
             <img class="videoImg" src="@/assets/video_off.png" alt="" v-else @click="videoClickOff" />
         </div>
-        <div class="sharing">
+        <!-- <div class="sharing">
             <img class="sharImg" src="@/assets/screenShare_on.png" alt="" v-if="sharFlag" @click="sharClickOn" />
             <img class="sharImg" src="@/assets/screenShare_off.png" alt="" v-else @click="sharClickOff" />
 
-        </div>
+        </div> -->
         <div class="mediationPop">
             <el-button type="warning" @click="mediationPop">调解</el-button>
         </div>
@@ -29,6 +29,7 @@
 import { startVideo, stopVideo, destructionRoom } from '@/api/room.js'
 export default {
     name: 'FooterPhone',
+    props: ["micFlag", "videoFlag", "sharFlag"],
     components: {
 
     },
@@ -36,7 +37,8 @@ export default {
         return {
             roomId: null,
             taskId: null,
-            roleFlag: false
+            roleFlag: false,
+            caseId:""
         };
     },
     methods: {
@@ -46,6 +48,35 @@ export default {
                 console.log(res, "解散房间");
             })
         },
+        /**开启麦克风 */
+    micClickOn() {
+      this.$emit("micClickOn");
+    },
+    /**关闭麦克风 */
+    micClickOff() {
+      this.$emit("micClickOff");
+    },
+    /**开启摄像头 */
+    videoClickOn() {
+      this.$emit("videoClickOn");
+    },
+    /**关闭摄像头 */
+    videoClickOff() {
+      this.$emit("videoClickOff");
+    },
+    /**共享屏幕 */
+    sharClickOn() {
+      this.$emit("sharClickOn");
+    },
+    /**关闭共享屏幕 */
+    sharClickOff() {
+      this.sharFlag = true;
+      this.$emit("sharClickOff");
+    },
+    // 弹出调解内容
+    mediationPop() {
+      this.$emit("mediationPop");
+    },
         exitRoom() {
             if (this.roleFlag) {
                 this.stopVideoFn();
@@ -57,7 +88,7 @@ export default {
         },
         async startVideoFn() {
             await startVideo({
-                caseId: 12865,
+                caseId: this.caseId,
                 roomId: this.roomId
             }).then(res => {
                 this.taskId = res.data.taskId
@@ -73,6 +104,7 @@ export default {
     async mounted() {
         this.roomId = this.$route.query.roomId;
         let roleFlag = this.$route.query.flag;
+        this.caseId = this.$route.query.caseId;
         this.roleFlag = roleFlag || false;
         if (roleFlag) {
             await this.startVideoFn();

src/views/components/roomFooter.vue

@@ -103,7 +103,7 @@ export default {
     this.roomId = this.$route.query.roomId;
     this.caseId = this.$route.query.caseId;
     let roleFlag = this.$route.query.flag;
-    this.roleFlag = roleFlag;
+    this.roleFlag = roleFlag || false;
     if (roleFlag) {
       await this.startVideoFn();
     }

src/views/room.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="page">
-    <div class="iconImg" v-if="!modileFlag && rightType" @click="checkList(1)">
+    <div class="iconImg" v-if="!modileFlag && rightType && rightTypeall" @click="checkList(1)">
       <i class="el-icon-d-arrow-left" style="font-size: 30px;color: aqua;"></i>
       <!-- <i class="el-icon-d-arrow-right"></i> -->
     </div>
@@ -21,15 +21,15 @@
         </div>
       </div>
       <div class="footerList">
-        <roomFooter @exitRoom="exitRoom" @micClickOn="micClickOn" @micClickOff="micClickOff"
-          @videoClickOn="videoClickOn" @videoClickOff="videoClickOff" @sharClickOn="sharClickOn"
-          @sharClickOff="sharClickOff" @mediationPop="mediationPop" :roomId="roomId" :micFlag="micFlag"
-          :videoFlag="videoFlag" :sharFlag="sharFlag"></roomFooter>
+        <roomFooter @exitRoom="exitRoom" @micClickOn="micClickOn" @micClickOff="micClickOff" @videoClickOn="videoClickOn"
+          @videoClickOff="videoClickOff" @sharClickOn="sharClickOn" @sharClickOff="sharClickOff"
+          @mediationPop="mediationPop" :roomId="roomId" :micFlag="micFlag" :videoFlag="videoFlag" :sharFlag="sharFlag">
+        </roomFooter>
       </div>
     </div>
     <div class="roomPhone">
       <div class="videoPage">
-        <div :class="sharingType">
+        <div :class="sharingType" id="screenShare">
         </div>
         <div :class="bodyPhoneType">
           <div :class="userClassPhone" id="localStream">
@@ -38,10 +38,16 @@
           <div :class="userClassPhone" v-for="(item, index) in userList" :key="index" :id="item">
             <div class="userNamePhone">{{ item }}</div>
           </div>
-          <i class="el-icon-d-arrow-right" style="font-size: 30px;color: aqua;" @click="checkList(2)" v-if="!rightType"></i>
+          <i class="el-icon-d-arrow-right" style="font-size: 30px;color: aqua;" @click="checkList(2)"
+            v-if="!rightType && rightTypeall"></i>
+          <!-- <i class="el-icon-d-arrow-left" style="font-size: 30px;color: aqua;" @click="checkList(2)"
+            v-if="!rightType && !rightTypeall"></i> -->
         </div>
         <div class="footerPhone">
-          <roomFooterPhone @exitRoom="exitRoom"></roomFooterPhone>
+          <roomFooterPhone @exitRoom="exitRoom" @micClickOn="micClickOn" @micClickOff="micClickOff"
+            @videoClickOn="videoClickOn" @videoClickOff="videoClickOff" @sharClickOn="sharClickOn"
+            @sharClickOff="sharClickOff" @mediationPop="mediationPop" :roomId="roomId" :micFlag="micFlag"
+            :videoFlag="videoFlag" :sharFlag="sharFlag"></roomFooterPhone>
         </div>
       </div>
       <!-- <div class="header">
@@ -63,7 +69,7 @@
       <el-button class="updataBtn" @click="updataClick" type="primary" :disabled="!updataFlag">确认修改内容</el-button>
     </el-drawer>
     <!-- 调解 -->
-    <el-drawer :visible.sync="drawerMediatio" direction="ltr" title="调解内容">
+    <el-drawer :visible.sync="drawerMediatio" direction="ltr" title="调解内容" :size="drawerSize">
       <div style="
           width: 100%;
           display: flex;
@@ -87,28 +93,28 @@
       </div>
       <div class="list">
         <div class="applicant" v-if="applicantFile.length > 0">
-          <div>申请人证据</div>
+          <div style="font-size: 20px;margin-bottom: 10PX;">申请人证据:</div>
           <div style="color: #104fad; cursor: pointer" v-for="(item, index) in applicantFile" :key="index"
             @click="preview(item, 0)">
             {{ item.annexName }}
           </div>
         </div>
         <div class="res" v-if="resFile.length > 0">
-          <div>被申请人证据</div>
+          <div style="font-size: 20px;margin-bottom: 10PX;">被申请人证据:</div>
           <div style="color: #104fad; cursor: pointer" v-for="(item, index) in resFile" :key="index"
             @click="preview(item, 0)">
             {{ item.annexName }}
           </div>
         </div>
         <div class="mediate" v-if="mediateFile.length > 0">
-          <div>调解书</div>
+          <div style="font-size: 20px;margin-bottom: 10PX;">调解书:</div>
           <div style="color: #104fad; cursor: pointer" v-for="(item, index) in mediateFile" :key="index"
             @click="preview(item, 1)">
             {{ item.annexName }}
           </div>
         </div>
       </div>
-      <div>
+      <div v-if="modileFlag && updataFlag">
         <el-form label-width="100px">
           <el-col :span="24">
             <el-form-item label="调解结果:">
@@ -121,7 +127,7 @@
               </el-radio-group>
             </el-form-item>
           </el-col>
-          <el-col :span="24">
+          <el-col :span="24" v-if="formData.mediaResult == 1"> 
             <el-form-item label="是否用印申请:">
               <el-radio-group v-model="formData.sealFlag">
                 <el-radio :label="1">是</el-radio>
@@ -131,7 +137,7 @@
           </el-col>
         </el-form>
       </div>
-      <div>
+      <div v-if="modileFlag && updataFlag">
         <el-button style="width:100%;" type="primary" @click="determineMeeting" :disabled="!updataFlag">确定</el-button>
       </div>
     </el-drawer>
@@ -167,7 +173,9 @@ export default {
   },
   data() {
     return {
-      rightType:true,
+      drawerSize: "30%",
+      rightType: false,
+      rightTypeall: false,
       sharingType: "sharing",
       bodyPhoneType: "bodyPhone",
       videoList: "videoList",
@@ -175,7 +183,7 @@ export default {
       resFlag: null,
       appFlag: null,
       userClassPhone: "userVideoPhone",
-      userList: [1, 2],
+      userList: [],
       userHeight: "100%",
       userPhoneHeight: "92%",
       userSign: "",
@@ -253,11 +261,12 @@ export default {
         this.sharingType = "sharing1";
         this.bodyPhoneType = "bodyPhone1";
         this.rightType = false;
+        // console.log(this.rightType,this.rightTypeall,"Pppppppppp");
       } else if (data == 2) {
-        console.log("UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUu");
         this.sharingType = "sharing1";
         this.bodyPhoneType = "bodyPhone2";
         this.rightType = true;
+        console.log(this.rightType, this.rightTypeall, "Pppppppppp");
       }
     },
     /**点击开启麦克风图标，关闭麦克风 */
@@ -382,28 +391,32 @@ export default {
       this.selectByIdFn(this.caseId);
     },
     preview(item, type) {
-      if (item.onlyOfficeFileId) {
-        debugger
-        // this.$router.push({
-        //   path: "/onlyoffice",
-        //   query: { id: item.onlyOfficeFileId, flag: flag },
-        // });
-        let flag = 1;
-        if (this.editFlag && type != 0) {
-          flag = 1;
+      if (this.modileFlag) {
+        if (item.onlyOfficeFileId) {
+          // this.$router.push({
+          //   path: "/onlyoffice",
+          //   query: { id: item.onlyOfficeFileId, flag: flag },
+          // });
+          let flag = 1;
+          if (this.editFlag && type != 0) {
+            flag = 1;
+          } else {
+            flag = 0;
+          }
+          let token = sessionStorage.getItem("token");
+          window.open(
+            `http://121.40.189.20:9002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
+            "_black"
+            // `http://localhost:81/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
+            // "_black"
+          );
         } else {
-          flag = 0;
+          window.open(window.location.origin + '/tjformal' + item.annexPath, "_black");
         }
-        let token = sessionStorage.getItem("token");
-        window.open(
-          `http://121.40.189.20:9002/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
-          "_black"
-          // `http://localhost:81/onlyoffice?id=${item.onlyOfficeFileId}&flag=${flag}&token=${token}`,
-          // "_black"
-        );
-      } else {
-        window.open(window.location.origin + '/tiaojie' + item.annexPath, "_black");
+      }else{
+        window.open(window.location.origin + '/tjformal' + item.annexPath, "_black");
       }
+
     },
     // 点击提交修改后的内容
     updataClick() {
@@ -455,6 +468,7 @@ export default {
     /** 获取证据列表 */
     selectByIdFn(id) {
       selectById(id).then((res) => {
+        this.formData.mediaResult = res.data.mediaResult || 1;
         this.caseFlowId = res.data.caseFlowId;
         this.applicantFile = [];
         this.resFile = [];
@@ -511,6 +525,11 @@ export default {
               .then(() => {
                 this.videoList = "videoList1";
                 this.videoClass = "videoItem2";
+                this.userClassPhone = "userVideoPhone2"
+                this.sharingType = "sharing1";
+                this.bodyPhoneType = "bodyPhone1";
+                this.rightType = false;
+                this.rightTypeall = true;
               });
           });
           this.screenShareFlag = true;
@@ -578,14 +597,20 @@ export default {
           });
         } else if (streamType == "sub") {
           this.sharFlag = true;
+          this.rightTypeall = false;
           this.videoList = "videoList";
           this.screenShareFlag = false;
-          if (this.userList.length > 1) {
+          this.bodyPhoneType = 'bodyPhone';
+          this.sharingType = "sharing"
+          if (this.userList.length == 1) {
+            this.videoClass = "videoItem3";
+            this.userClassPhone = "userVideoPhone1";
+          } else if (this.userList.length > 1) {
             this.videoClass = "videoItem1";
+            this.userClassPhone = "userVideoPhone2";
           } else if (this.userList.length < 1) {
             this.videoClass = "videoItem";
-          } else if (this.userList.length == 1) {
-            this.videoClass = "videoItem3";
+            this.userClassPhone = "userVideoPhone";
           }
         }
       });
@@ -655,14 +680,26 @@ export default {
   },
   watch: {
     userList(value) {
-      if (value.length == 1) {
+      if (this.userList.length == 1) {
         this.videoClass = "videoItem3";
-      } else if (value.length > 1) {
+        this.userClassPhone = "userVideoPhone1";
+      } else if (this.userList.length > 1) {
         this.videoClass = "videoItem1";
-      } else if (value.length < 1) {
+        this.userClassPhone = "userVideoPhone2";
+      } else if (this.userList.length < 1) {
         this.videoClass = "videoItem";
+        this.userClassPhone = "userVideoPhone";
       }
     },
+    drawerMediatio(val) {
+      if (val) {
+        if (this.modileFlag) {
+          this.drawerSize = "30%"
+        } else {
+          this.drawerSize = "75%"
+        }
+      }
+    }
   },
   async mounted() {
     if (this.userList.length == 1) {
@@ -939,8 +976,10 @@ export default {
   flex-wrap: wrap;
   align-items: center;
   overflow-y: scroll;
+  background: #353643ba;
 }
-.bodyPhone2{
+
+.bodyPhone2 {
   width: 0;
   height: 0;
   position: absolute;
@@ -952,6 +991,7 @@ export default {
   align-items: center;
   overflow-y: scroll;
 }
+
 /* 移动端样式 */
 
 .bodyVideo {
@@ -1028,7 +1068,8 @@ export default {
   height: 0;
 }
 
-.el-icon-d-arrow-right {
+.el-icon-d-arrow-right,
+.el-icon-d-arrow-left {
   position: absolute;
   left: 0;
   top: 45%;