feat: 完成带看

public/index.html

@@ -26,8 +26,8 @@
         <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/socket.io.min.js"></script>
         <script src="<%= BASE_URL %><%= VUE_APP_STATIC_DIR %>/static/lib/zmjm.min.js"></script>
         <script src="<%= VUE_APP_STATIC_DIR %>/static/lib/jweixin-1.6.0.js"></script>
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk-deps.js?v=4.37.3-alpha.75"></script>
-        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.37.3-alpha.75"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk-deps.js?v=4.37.3-alpha.78"></script>
+        <script src="<%= VUE_APP_SDK_DIR %>/kankan-sdk.js?v=4.37.3-alpha.78"></script>
         <script>
             if ((query = window.location.href.indexOf('vlog') != -1)) {
                 var vConsole = new window.VConsole()

src/components/RTC/PageRtcLive.vue

@@ -1,10 +1,20 @@
 <template>
   <div
-    v-if="leaderAvatar && showAvatar"
+    v-if="showAvatar"
     class="avatar-box"
-    :style="`background-image:url(${leaderAvatar});`"
-  ></div>
-
+    :style="`background-image:url(${
+      leaderAvatar ? leaderAvatar : defaultAvatar
+    });`"
+  >
+    <input type="file" @change="changeFile($event)" accept=".jpg,.png" />
+    <div class="tips" v-if="role === 'leader'">更换</div>
+  </div>
+  <Cropper
+    v-bind="option"
+    v-if="showCrop"
+    @close="closeCrop"
+    @ok="confirmCrop"
+  />
   <div id="PageRtcLive">
     <div class="member_number">
       <div class="members"></div>
@@ -205,7 +215,7 @@ import { useApp, getApp } from "@/app";
 import { useStore } from "vuex";
 import { Dialog } from "@/global_components/";
 import common from "@/utils/common";
-
+import Cropper from "@/components/cropper/cropper.vue";
 import { mapGetters } from "vuex";
 import chat from "./chat/chat.vue";
 import Trtccom from "./Trtccom.vue";
@@ -216,11 +226,8 @@ const emit = defineEmits(["openDialog", "closeSocket"]);
 
 const store = useStore();
 const leaderAvatar = computed(() => {
-  return store.getters["rtc/avatar"]
-    ? store.getters["rtc/avatar"]
-    : localStorage.getItem("leaderAvatar")
-    ? localStorage.getItem("leaderAvatar")
-    : defaultAvatar;
+  console.log(typeof store.getters["rtc/avatar"]);
+  return store.getters["rtc/avatar"];
 });
 
 let jumpNewScene = (sceneFirstView) => {
@@ -323,7 +330,10 @@ const videoDevices = ref([1]);
 const disableMic = ref(false);
 const chatShow = ref(true);
 const all_mute_mic = ref(false);
-
+const showCrop = ref(false);
+const option = reactive({
+  img: "",
+});
 const tags = computed(() => {
   return store.getters["tag/tags"] || [];
 });
@@ -435,7 +445,6 @@ const setUserJoin = async (res) => {
     name = "主持人";
     Dialog.toast({ content: `主持人进入房间` });
     socket.value.emit("action", { type: "user-init" });
-    store.commit("rtc/setAvatar", res.user.Avatar);
   }
   let data = {
     role: res.user.Role,
@@ -453,7 +462,27 @@ const setUserJoin = async (res) => {
     chatAutoScroll();
   } catch (error) {}
 };
+const changeFile = (e) => {
+  let file = e.target.files[0];
 
+  let blob = window.URL.createObjectURL(file);
+  option.img = blob;
+  openCrop();
+  e.target.value = "";
+};
+const confirmCrop = (base64) => {
+  store.commit("rtc/setAvatar", base64);
+  socket.value.emit("action", {
+    type: "leader-avatar",
+    data: { avatar: leaderAvatar.value },
+  });
+};
+const openCrop = () => {
+  showCrop.value = true;
+};
+const closeCrop = () => {
+  showCrop.value = false;
+};
 const onDrawUndo = async () => {
   let app = await getApp();
   app.Connect.paint.undo();
@@ -645,31 +674,14 @@ const startFollow = (app) => {
       roomId: roomId.value,
       role: role.value || "leader",
       nickname: browser.getURLParam("name"),
-      // avatar: leaderAvatar.value,
     };
-    if (role.value == "leader") {
-      params.avatar = leaderAvatar.value;
-    }
     socket.value.emit("join", params);
   });
 
   const leaderInfo = ref({});
   // 加入房間成功
   socket.value.on("join", (data) => {
-    // leaderInfo.value = data.members.filter((item) => item.Role == 'leader');
-
-    if (role.value == "customer") {
-      data.members.forEach((item) => {
-        if (item.Role == "leader") {
-          leaderInfo.value = item;
-          showAvatar.value = true;
-          store.commit("rtc/setAvatar", leaderInfo.value.Avatar);
-        }
-      });
-    } else {
-      showAvatar.value = true;
-      console.error(showAvatar.value);
-    }
+    showAvatar.value = true;
 
     let meblist = data.members.reduce(function (tempArr, item) {
       if (tempArr.findIndex((ele) => ele.UserId === item.UserId) === -1) {
@@ -686,9 +698,10 @@ const startFollow = (app) => {
 
     connectStatus.value = 1;
     if (role.value == "customer") {
-      socket.value.emit("action", { type: "ask-currentscene" });
       setTimeout(() => {
-        socket.value.emit("action", { type: "user-init" });
+        socket.value.emit("action", {
+          type: "user-init",
+        });
       }, 1500);
 
       if (data.user.IsMuted) {
@@ -770,9 +783,13 @@ const startFollow = (app) => {
     } else if (data.type == "getout") {
       onGetOuT(data.data);
     } else if (data.type == "user-init") {
-      app.Connect.follow.sync();
       if (role.value == "leader") {
+        app.Connect.follow.sync();
         setTimeout(() => {
+          socket.value.emit("action", {
+            type: "leader-avatar",
+            data: { avatar: leaderAvatar.value },
+          });
           if (tagclick.value && tagclick.value.type == "goodlist") {
             socket.value.emit("action", {
               type: "tagclick",
@@ -793,6 +810,10 @@ const startFollow = (app) => {
           }
         }, 200);
       }
+    } else if (data.type == "leader-avatar") {
+      if (role.value == "customer") {
+        store.commit("rtc/setAvatar", data.data.avatar);
+      }
     } else if (data.type == "user-paint") {
       onDraw(data.open);
       if (role.value == "customer") {
@@ -823,6 +844,13 @@ const startFollow = (app) => {
           type: "goodlist",
           data: item,
         });
+        getApp().TagManager.view.then((view) => {
+          var player = getApp().core.get("Player");
+          player.locked = false;
+          view.focus(data.data.sid).then(() => {
+            player.locked = true;
+          });
+        });
       }
     } else if (data.type == "tagclose") {
       if (role.value == "customer") {
@@ -913,6 +941,27 @@ onUnmounted(async () => {
   top: 0.2667rem;
   left: 0.2667rem;
   z-index: 100;
+  overflow: hidden;
+  .tips {
+    width: 100%;
+    height: 0.5rem;
+    position: absolute;
+    background: rgba(0, 0, 0, 0.5);
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    line-height: 0.5rem;
+    font-size: 0.22rem;
+    color: #ed5d18;
+  }
+  input {
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    position: relative;
+    z-index: 10;
+    cursor: pointer;
+  }
 }
 #PageRtcLive {
   position: absolute;
@@ -1429,4 +1478,7 @@ onUnmounted(async () => {
     max-width: 70vw;
   }
 }
+.cropper-box {
+  z-index: 1000;
+}
 </style>

src/components/RTC/dialog/createdRoom.vue

@@ -5,7 +5,7 @@
       <div class="content">
         <div class="dialog_title" v-if="role == 'leader'">创建一起逛</div>
         <div class="dialog_title" v-else>进入一起逛</div>
-        <div class="avatar-box" v-if="role == 'leader'" :style="`background-image:url(${avatar});`">
+        <div class="avatar-box" v-if="role == 'leader'" :style="`background-image:url(${avatar || defaultAvatar});`">
           <input type="file" @change="changeFile($event)" accept=".jpg,.png" />
           <div class="tips">更换</div>
         </div>
@@ -31,7 +31,6 @@ import { Dialog } from '@/global_components/';
 import browser from '@/utils/browser';
 import { useStore } from 'vuex';
 import Cropper from '@/components/cropper/cropper.vue';
-// import defaultAvatar from '@/assets/images/avatar_default.jpg';
 export default {
   data() {
     return {
@@ -62,11 +61,11 @@ export default {
   },
 
   mounted() {
-    // this.avatar = this.base64 || this.defaultAvatar;
+   
   },
   computed: {
     avatar: function () {
-      return this.$store.getters['rtc/avatar'] ? this.$store.getters['rtc/avatar'] : localStorage.getItem('leaderAvatar') ? localStorage.getItem('leaderAvatar') : this.defaultAvatar;
+      return this.$store.getters['rtc/avatar']
     },
   },
   components: { Cropper },
@@ -84,7 +83,6 @@ export default {
     },
     confirmCrop(base64) {
       this.$store.commit('rtc/setAvatar', base64);
-      localStorage.setItem('leaderAvatar', base64);
     },
     openCrop() {
       this.showCrop = true;

src/store/modules/rtc.js

@@ -29,7 +29,11 @@ export default {
     },
     getters: {
         avatar: state => {
+            if(state.role == 'leader' || window.location.search.indexOf('sync=1')!=-1){
+                return state.avatar || localStorage.getItem('leaderAvatar') || ''
+            }
             return state.avatar
+            
         },
         socket: state => {
             return state.socket
@@ -64,6 +68,7 @@ export default {
     mutations: {
         setAvatar(state, payload) {
             state.avatar = payload
+            localStorage.setItem('leaderAvatar',payload || '')
         },
         setSocket(state, payload) {
             state.socket = payload

vue.config.js

@@ -11,7 +11,7 @@ module.exports = defineConfig({
   },
   devServer: {
     // port: 443,
-    https: true,
+    //https: true,
     // disableHostCheck: true,
     headers: {
       "Cache-Control": "no-store",