提交

src/app.vue

@@ -429,14 +429,7 @@ onMounted(async () => {
     });
   });
   app.store.on("floorcad", (floor) => store.commit("scene/loadFloorData", floor));
-
-  app.Connect.follow.on('data', data => {
-    console.log(data,'syncdata');
-      // if (isJoined) {
-      //     socket.emit('sync', data)
-      // }
-  })
-
+ 
   app.render();
   document.removeEventListener("visibilitychange", visibilitychangeFn);
   document.addEventListener("visibilitychange", visibilitychangeFn);

src/components/Controls/Panel/Main.vue

@@ -96,7 +96,6 @@ const currentCategory = ref({
 const currentM = computed(() => browser.getURLParam("m"));
 const currentPose = computed(() => browser.getURLParam("pose"));
 
-
 const isPlay = computed(() => {
   let status = store.getters["tour/isPlay"];
   let map = document.querySelector(".kankan-app div[xui_min_map]");
@@ -253,15 +252,16 @@ const onClickMenu = (item) => {
       "https://webpage.qidian.qq.com/2/chat/h5/index.html?linkType=1&env=ol&kfuin=3009110132&fid=3655&key=9b4334768c39150ead3f23e11e5dc2e4&cate=7&source=0&isLBS=0&isCustomEntry=0&type=10&ftype=1&_type=wpa&qidian=true&_pid=kvrmvu.74cg11.l43qvbcu&translateSwitch=0&isSsc=0&roleValue=4&roleData=922223821";
     window.open(mglink, "_blank");
   } else if (item.id == "shopping") {
-    browser.openLink("/subPackage/pages/shoppingcart/shoppingcart", 
-    "https://m.cdfmembers.com/shop/600667208/shoppingcart", 
-    "/subPackage/pages/shoppingcart/shoppingcart");
+    browser.openLink(
+      "/subPackage/pages/shoppingcart/shoppingcart",
+      "https://m.cdfmembers.com/shop/600667208/shoppingcart",
+      "/subPackage/pages/shoppingcart/shoppingcart"
+    );
   } else if (item.id == "help") {
     store.commit("showUserGuide", true);
   } else if (item.id == "guided_shopping") {
     store.commit("showShoppingguide", true);
-  } 
-  
+  }
 };
 
 const getCategorylist = async () => {
@@ -307,13 +307,15 @@ const getShoplist = async () => {
 };
 
 onMounted(() => {
-  useApp().then(async (sdk) => {
+  useApp().then(async (app) => {
     getCategorylist();
     getShoplist();
 
-    if (browser.getURLParam("roomId")) {
-      store.commit("showShoppingguide", true);
-    }
+    app.Scene.on("loaded", () => {
+      if (browser.getURLParam("roomId")) {
+        store.commit("showShoppingguide", true);
+      }
+    });
   });
 });
 </script>

src/components/RTC/PageRtcLive.vue

@@ -35,7 +35,7 @@
       <div style="text-align: right; width: 100%" v-if="connectStatus == 0">连接中...</div>
       <div v-if="connectStatus == 1" class="contorl_btn">
         <div v-if="isBrushes" @click="onDrawUndo" class="brushesBack" :class="{ disable: !canUndo }"></div>
-        <div v-if="user_info.Role == 'leader'" @click="onDraw" :class="{ brushesed: isBrushes }" class="brushes"></div>
+        <div v-if="user_info.Role == 'leader'" @click="onDraw(!isBrushes)" :class="{ brushesed: isBrushes }" class="brushes"></div>
 
         <div
           v-if="(user_list.length < 2 && mode == '1') || (mode == '2' && user_list.length < 30)"
@@ -113,7 +113,7 @@
 </template>
 
 <script setup>
-import { onMounted, watch, defineEmits, ref, nextTick } from "vue";
+import { onMounted, watch, defineEmits, ref, reactive, computed, nextTick } from "vue";
 import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 import { Scrollbar, Dialog } from "@/global_components/";
@@ -142,6 +142,8 @@ let createSocket = (config) => {
   return socket;
 };
 
+store.commit("rtc/setSocket", createSocket());
+
 let getUrl = (href, queryArr) => {
   queryArr.forEach((item) => {
     if (!browser.hasURLParam(item.key)) {
@@ -165,7 +167,9 @@ const hideMicTop = ref(false);
 const showInput = ref(false);
 const showMember = ref(false);
 const animateActive = ref(false);
-const socket = ref(createSocket());
+
+const socket = computed(() => store.getters["rtc/socket"]);
+
 const myVideoShow = ref(false);
 const userVideoShow = ref(false);
 const user_info = ref({});
@@ -174,6 +178,8 @@ const mode = ref(browser.getURLParam("mode"));
 const role = ref(browser.getURLParam("role"));
 const isJoined = ref(false);
 
+const paint = reactive({});
+
 const chatList = ref([]);
 const text = ref("");
 
@@ -187,16 +193,49 @@ const all_mute_mic = ref(true);
 
 const chat$ = ref(null);
 
-const onDrawUndo = () => {};
-const onDraw = async () => {
-  isBrushes.value = !isBrushes.value;
+const setUserJoin = async (res) => {
+  console.log("有人进来了", res);
+  // self.user_info = res.user;
+  user_list.value = res.members.reduce(function (tempArr, item) {
+    if (tempArr.findIndex((ele) => ele.UserId === item.UserId) === -1) {
+      tempArr.push(item);
+    }
+    return tempArr;
+  }, []);
+  // self.chekcLeaderInfo();
+  let name = res.user.Nickname;
+  if (res.user.Role == "leader") {
+    name = "主持人";
+    Dialog.toast({ content: `主持人进入房间` });
+  }
+  let data = {
+    role: res.user.Role,
+    mode: mode.value,
+    Nickname: name,
+    UserId: res.user.UserId,
+    text: "进入房间",
+  };
+  chatList.value.push(data);
+  await nextTick();
+  try {
+    chatAutoScroll();
+  } catch (error) {}
+};
+
+const onDrawUndo = async () => {
+  await getApp().Connect.paint.undo();
+};
+
+// 画笔开启
+const onDraw = async (status) => {
+  isBrushes.value = status;
   if (isBrushes.value) {
-    await getApp().Connect.paint.show({ role:role.value, paint: role.value == "leader" ? true : false });
+    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()
+    await getApp().Connect.paint.hide();
     if (role.value == "leader") {
       socket.value.emit("action", { type: "user-paint", open: false });
     }
@@ -221,7 +260,7 @@ const sendText = async () => {
     role: role.value,
     mode: mode.value,
     Nickname: user_info.value.Nickname,
-    userId: user_info.value.userId,
+    UserId: user_info.value.UserId,
     text: text.value,
   };
   socket.value &&
@@ -291,6 +330,9 @@ const userCanSpeak = (item) => {
 
 const startFollow = (app) => {
   app.Connect.follow.start({ follow: role.value == "customer" });
+  if (role.value == "customer") {
+    socket.value.emit("action", { type: "user-init" });
+  }
 
   socket.value.on("connect", () => {
     socket.value.emit("join", {
@@ -304,11 +346,15 @@ const startFollow = (app) => {
   // 加入房间成功
   socket.value.on("join", (data) => {
     connectStatus.value = 1;
-
-    socket.value.emit("action", { type: "user-init" });
+    isJoined.value = true;
 
     user_info.value = data.user;
-    user_list.value = data.members;
+    user_list.value = data.members.reduce(function (tempArr, item) {
+      if (tempArr.findIndex((ele) => ele.UserId === item.UserId) === -1) {
+        tempArr.push(item);
+      }
+      return tempArr;
+    }, []);
 
     //更新分享链接
     shareLink.value = getUrl(window.location.href, [
@@ -357,8 +403,6 @@ const startFollow = (app) => {
     }
 
     history.replaceState(null, null, tmp);
-
-    isJoined.value = true;
   });
 
   socket.value.on("action", (data) => {
@@ -369,7 +413,9 @@ const startFollow = (app) => {
     } else if (data.type == "user-init") {
       app.Connect.follow.sync();
     } else if (data.type == "user-paint") {
-      // canUndo.value = data.open
+      onDraw(data.open);
+    } else if (data.type == "user-join") {
+      setUserJoin(data);
     }
   });
 
@@ -380,24 +426,24 @@ const startFollow = (app) => {
 
   // 画笔
   socket.value.on("paint", (data) => {
-    console.log(data,'paint');
-    app.Connect.sync.receive(data);
+    app.Connect.paint.receive(data);
   });
 };
 
 onMounted(() => {
   useApp().then((app) => {
+    paint.value = app.Connect.paint;
+    console.log(paint.value, "paint");
+
     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);
-      }
+      socket.value.emit("paint", data);
     });
   });
 });

src/components/RTC/dialog/index.vue

@@ -16,11 +16,15 @@
 
 <script setup>
 import browser from "@/utils/browser";
-import { onMounted, watch, defineProps, defineEmits, ref, nextTick } from "vue";
+import { onMounted, watch, defineProps, defineEmits, ref, computed } from "vue";
+import { useStore } from "vuex";
+const store = useStore();
 
 const emit = defineEmits(["closeDialog","confirmDialog"]);
 
 const role = ref(browser.urlHashValue("role"));
+const socket = computed(() => store.getters["rtc/socket"]);
+
 
 const props = defineProps({
   title: {
@@ -38,6 +42,7 @@ const endLiveCancel = () => {
 };
 
 const endLiveConfirm = () => {
+  socket.value && socket.value.send("end")
   emit("confirmDialog");
 };
 </script>

src/store/modules/index.js

@@ -1,8 +1,10 @@
 import scene from './scene'
 import tag from './tag'
 import tour from './tour'
+import rtc from './rtc'
 export default {
     scene,
     tag,
     tour,
+    rtc
 }

src/store/modules/rtc.js

@@ -0,0 +1,24 @@
+
+
+
+export default {
+    namespaced: true,
+    state() {
+        return {
+            socket: {}
+        }
+    },
+    getters: {
+        socket: state => {
+            return state.socket
+        },
+    },
+    mutations: {
+        setSocket(state, payload) {
+            state.socket = payload
+        },
+    },
+    actions: {
+
+    },
+}