master 1452

public/index.html

@@ -28,8 +28,8 @@
 
         <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/jweixin-1.6.0.js"></script>
         
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk-deps.js?v=4.0.0-alpha.51"></script>
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.0.0-alpha.51"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk-deps.js?v=4.3.0-alpha.51"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.3.0-alpha.51"></script>
 
         <!-- <script src="https://4dkk.4dage.com/v4/www/sdk/kankan-sdk-deps.js?v=4.0.0-alpha.44"></script>
         <script src="https://4dkk.4dage.com/v4/www/sdk/kankan-sdk.js?v=4.0.0-alpha.44"></script> -->

src/apis/index.js

@@ -38,6 +38,6 @@ export const burying_point = (data) => {
     isMiniApp: browser.getURLParam("isMiniApp")||'h5',
     whereUrl: url,
     type: data.type,
-    type: data.productId,
+    productId: data.productId,
   });
 };

src/components/RTC/PageRtcLive.vue

@@ -4,7 +4,7 @@
       <div class="members"></div>
       <span>{{ user_list.length }}观看</span>
     </div>
-    <!-- <chat ref="chat" v-show="chatShow" :chatList="chatList" :user_info="user_info"></chat> -->
+    <chat ref="chat$" v-show="chatShow" :chatList="chatList" :user_info="user_info"></chat>
     <div class="videoBox userVideo" id="userVideo" v-show="!hideVideoTop">
       <img v-if="!userVideoShow" :src="require('@/assets/images/rtcLive/avatar_small@2x.png')" alt="" />
       <img v-if="!userVideoShow" class="loadingTip" :src="require('@/assets/images/rtcLive/loading@2x.png')" alt="" />
@@ -24,11 +24,11 @@
     <!-- </div> -->
     <!-- <input type="text" autocomplete="off"> -->
     <div class="contorlBar" v-if="!showInput">
-      <div v-if="connectStatus == 1" :class="{ disable: !user_info.isWords }" class="saySomething" @click="onFocus">
+      <div v-if="connectStatus == 1" :class="{ disabled: user_info.isWords }" class="saySomething" @click="onFocus">
         <!-- <i class="speakIcon"
            :class="{'dis':!user_info.isWords}"></i> -->
-        <span v-if="user_info.isWords"> 说点什么 </span>
-        <span v-if="!user_info.isWords">已被禁言</span>
+        <span v-if="!user_info.isWords"> 说点什么 </span>
+        <span v-if="user_info.isWords">已被禁言</span>
 
         <div class="disSpeakBtn" @click.stop="chatShow = !chatShow" :class="{ dis: !chatShow }"></div>
       </div>
@@ -91,12 +91,12 @@
               </div>
             </div>
 
-            <div v-show="user_info.UserId != i.UserId && i.role != 'leader'" class="memberItem" v-for="i in user_list" :key="i.UserId">
+            <div v-show="user_info.UserId != i.UserId && i.Role != 'leader'" class="memberItem" v-for="i in user_list" :key="i.UserId">
               <div class="userMsg">
                 <div class="avatar">
                   <img :src="require('@/assets/images/rtcLive/avatar_small@2x.png')" alt="" />
                 </div>
-                <div class="name">{{ i.userName }}</div>
+                <div class="name">{{ i.Nickname }}</div>
               </div>
               <div class="button" v-if="user_info.Role == 'leader'">
                 <div class="micBtn" :class="i.isWords ? 'ban_speak_on' : 'ban_speak_off'" @click="userCanSpeak(i)"></div>
@@ -109,8 +109,6 @@
         </div>
       </div>
     </div>
-
-    <Draw ref="draw" @sendCanUndo="sendCanUndo" :show-paint="showPaint" />
   </div>
 </template>
 
@@ -121,15 +119,21 @@ import { useStore } from "vuex";
 import { Scrollbar, Dialog } from "@/global_components/";
 import common from "@/utils/common";
 
-// import Draw from './paint/Draw';
 import { mapGetters } from "vuex";
-// import chat from './chat/chat.vue';
+import chat from "./chat/chat.vue";
 import browser from "@/utils/browser";
 
 const emit = defineEmits(["openDialog"]);
 
 const store = useStore();
 
+let chatAutoScroll = () => {
+  let el = document.getElementById("chat");
+  let client_h = document.getElementById("chat").clientHeight;
+  let all = document.getElementById("contents").clientHeight;
+  el.scrollTo(0, client_h + all);
+};
+
 let createSocket = (config) => {
   var socket = io("https://vr-admin.cdfmembers.com/", {
     path: "/ws-sync",
@@ -168,6 +172,7 @@ const user_info = ref({});
 const user_list = ref([]);
 const mode = ref(browser.getURLParam("mode"));
 const role = ref(browser.getURLParam("role"));
+const isJoined = ref(false);
 
 const chatList = ref([]);
 const text = ref("");
@@ -180,8 +185,25 @@ const disableMic = ref(false);
 const chatShow = ref(true);
 const all_mute_mic = ref(true);
 
+const chat$ = ref(null);
+
 const onDrawUndo = () => {};
+const onDraw = async () => {
+  isBrushes.value = !isBrushes.value;
+  if (isBrushes.value) {
+    await getApp().Connect.paint.show({ role:role.value, paint: role.value == "leader" ? true : false });
+    if (role.value == "leader") {
+      socket.value.emit("action", { type: "user-paint", open: true });
+    }
+  } else {
+    await getApp().Connect.paint.hide()
+    if (role.value == "leader") {
+      socket.value.emit("action", { type: "user-paint", open: false });
+    }
+  }
+};
 
+//打开输入框
 const onFocus = () => {
   showInput.value = true;
   nextTick(() => {
@@ -190,6 +212,47 @@ const onFocus = () => {
   });
 };
 
+//发弹幕
+const sendText = async () => {
+  if (text.value == "") {
+    return;
+  }
+  let data = {
+    role: role.value,
+    mode: mode.value,
+    Nickname: user_info.value.Nickname,
+    userId: user_info.value.userId,
+    text: text.value,
+  };
+  socket.value &&
+    socket.value.emit("action", {
+      type: "danmumsg",
+      data,
+    });
+
+  chatList.value.push(data);
+  await nextTick();
+  try {
+    chatAutoScroll();
+    let input_msg = document.getElementById("input_msg");
+    input_msg.blur();
+  } catch (error) {}
+  closeInput();
+};
+
+//接收消息
+const setReceiveMsg = async (res) => {
+  console.log(res);
+  if (res.role == "leader") {
+    res.Nickname = "主持人";
+  }
+  chatList.value.push(res);
+  await nextTick();
+  try {
+    chatAutoScroll();
+  } catch (error) {}
+};
+
 // 关闭输入框
 const closeInput = () => {
   showInput.value = false;
@@ -211,7 +274,6 @@ const closeMember = () => {
 };
 
 const openDialog = (str, link) => {
-  // getApp().Connect.follow.start();
   emit("openDialog", str, link);
 };
 
@@ -228,25 +290,26 @@ const userCanSpeak = (item) => {
 };
 
 const startFollow = (app) => {
-  var isJoined = false;
+  app.Connect.follow.start({ follow: role.value == "customer" });
 
   socket.value.on("connect", () => {
     socket.value.emit("join", {
       userId: browser.getURLParam("userId") || common.uuid(12),
       roomId: browser.getURLParam("roomId") || common.uuid(12),
-      role: role.val || "leader",
+      role: role.value || "leader",
+      nickname: browser.getURLParam("name") || common.uuid(12),
     });
   });
 
   // 加入房间成功
   socket.value.on("join", (data) => {
     connectStatus.value = 1;
-    console.log(data,'join');
+
+    socket.value.emit("action", { type: "user-init" });
+
     user_info.value = data.user;
     user_list.value = data.members;
 
-    console.log(user_info.value, "user_info");
-
     //更新分享链接
     shareLink.value = getUrl(window.location.href, [
       {
@@ -258,6 +321,10 @@ const startFollow = (app) => {
         val: "",
       },
       {
+        key: "userId",
+        val: "",
+      },
+      {
         key: "role",
         val: "customer",
       },
@@ -291,24 +358,47 @@ const startFollow = (app) => {
 
     history.replaceState(null, null, tmp);
 
-    isJoined = true;
+    isJoined.value = true;
   });
 
   socket.value.on("action", (data) => {
     if (data.type == "error") {
       Dialog.toast({ content: `房间未找到`, type: "error" });
-    } else if (data.type == "user-join") {
+    } else if (data.type == "danmumsg") {
+      setReceiveMsg(data.data);
+    } else if (data.type == "user-init") {
+      app.Connect.follow.sync();
+    } else if (data.type == "user-paint") {
+      // canUndo.value = data.open
     }
   });
 
+  // 同屏带看
   socket.value.on("sync", (data) => {
     app.Connect.sync.receive(data);
   });
+
+  // 画笔
+  socket.value.on("paint", (data) => {
+    console.log(data,'paint');
+    app.Connect.sync.receive(data);
+  });
 };
 
 onMounted(() => {
   useApp().then((app) => {
     startFollow(app);
+    app.Connect.follow.on("data", (data) => {
+      if (isJoined.value) {
+        socket.value.emit("sync", data);
+      }
+    });
+    console.log(app.Connect.paint);
+    app.Connect.paint.on("data", (data) => {
+      if (isJoined.value) {
+        socket.value.emit("paint", data);
+      }
+    });
   });
 });
 </script>

src/components/RTC/chat/chat.vue

@@ -1,42 +1,29 @@
 <template>
   <div id="chat">
     <div id="contents">
-      <div class="chat-item" v-for="i,index in chatList" :key="index">
+      <div class="chat-item" v-for="(i, index) in chatList" :key="index">
         <div class="chat-msg">
-          <span :class="{my:i.userId==user_info.userId}" class="chat-name"> {{i.userName}} &nbsp;</span>
-          <span class="chat-content"> {{i.text}}</span>
+          <span :class="{ my: i.UserId == user_info.UserId }" class="chat-name"> {{ i.Nickname }} &nbsp;</span>
+          <span class="chat-content"> {{ i.text }}</span>
         </div>
       </div>
     </div>
-
   </div>
 </template>
 
-<script>
-export default {
-  data() {
-    return {};
-  },
-  props: {
-    user_info: {
-      type: Object,
-      default: {},
-    },
-    chatList: {
-      type: Array,
-      default: [],
-    },
+<script setup>
+import { onMounted, watch, defineProps, defineEmits, ref, nextTick } from "vue";
+
+const props = defineProps({
+  user_info: {
+    type: Object,
+    default: {},
   },
-  components: {},
-  methods: {
-    autoScroll() {
-      let el = document.getElementById("chat");
-      let client_h = document.getElementById("chat").clientHeight;
-      let all = document.getElementById("contents").clientHeight;
-      el.scrollTo(0, client_h + all);
-    },
+  chatList: {
+    type: Array,
+    default: [],
   },
-};
+});
 </script>
 
 <style scoped lang="scss">
@@ -46,7 +33,7 @@ export default {
   max-height: 4.58rem;
   overflow: auto;
   position: fixed;
-  left: .44rem;
+  left: 0.44rem;
   bottom: 2.83rem;
   .chat-item {
   }
@@ -70,7 +57,7 @@ export default {
     .chat-content {
       color: #fff;
       font-size: 0.28rem;
-       word-break:break-all;
+      word-break: break-all;
     }
   }
   &::-webkit-scrollbar {

src/components/RTC/dialog/createdRoom.vue

@@ -34,8 +34,8 @@ import browser from "@/utils/browser";
 export default {
   data() {
     return {
-      role: browser.urlHashValue("role") || "leader",
-      mode: browser.urlHashValue("mode") || 2,
+      role: browser.getURLParam("role") || "leader",
+      mode: browser.getURLParam("mode") || 2,
       modeList: [
         {
           mode: 1,
@@ -47,7 +47,7 @@ export default {
         },
       ],
       userName: "",
-      roomId: browser.urlHashValue("roomId"),
+      roomId: browser.getURLParam("roomId"),
     };
   },