feat: 热点

src/app.vue

@@ -310,7 +310,7 @@ const toggleMap = () => {
 
 const onClickTagInfo = (el) => {
   el.stopPropagation();
-  let item = tags.value.find((item) => item.sid == el.target.dataset.id);
+  let item = tags.value.find((item) => item.sid == el.data.sid);
   guideclicktag(item);
   store.commit("tag/setTagClickType", {
     type: "goodlist",
@@ -348,9 +348,15 @@ onMounted(async () => {
           return `<span class="tag-icon animate" style="background-image:url({{icon}})"></span>
                       <div class="tag-body">
                         <div data-id="${data.sid}" class="tag-commodity">
-                          <div  style="background-image:url(${ app.resource.getUserResourceURL(data.media["image"][0].src)+'&x-oss-process=image/resize,m_fill,w_80,h_80'})" class='tag-avatar'></div>
+                          <div  style="background-image:url(${
+                            app.resource.getUserResourceURL(
+                              data.media["image"][0].src
+                            ) + "&x-oss-process=image/resize,m_fill,w_80,h_80"
+                          })" class='tag-avatar'></div>
                           <p class="tag-title">${data.title}</p>
-                          <p class="tag-info">查看</p>
+                          <div class="tag-info">
+                            <div>${(data.content || "").substring(0, 30)}</div>
+                          </div>
                         </div>
                       </div>
                   `;
@@ -359,35 +365,50 @@ onMounted(async () => {
                       <div class="tag-body">
                         <div data-id="${data.sid}" class="tag-commodity">
                           <p class="tag-title">${data.title}</p>
-                          <p class="tag-info">查看</p>
+                          <div class="tag-info">${(
+                            data.content || ""
+                          ).substring(0, 20)}</div>
                         </div>
                       </div>
                   `;
       },
     })
     .then((view) => {
-      view.on("click", (e) => {
-        var tag = e.data;
-        // 聚焦當前點擊的熱點
-        view.focus(tag.sid).then(() => {});
-      });
-
-      view.on("focus", (e) => {
-        document.querySelectorAll("[xui_tags_view] >div").forEach((el) => {
-          el.querySelector(".tag-body").classList.remove("show");
-          el.style.zIndex = "auto";
+      view.on("rendered", (e) => {
+        view.on("click", (e) => {
+          var tag = e.data;
+          // 聚焦當前點擊的熱點
+          view.focus(tag.sid).then(() => {
+               onClickTagInfo(e)
+          });
+          if (role.value == "leader") {
+            socket.value &&
+              socket.value.emit("action", {
+                type: "tag-click",
+                data: {
+                  sid: tag.sid,
+                },
+              });
+          }
+          
         });
-        e.target.style.zIndex = "999";
-        e.target.querySelector(".tag-body").classList.add("show");
-        e.target
-          .querySelector(".tag-commodity")
-          .removeEventListener("click", onClickTagInfo);
-        e.target
-          .querySelector(".tag-commodity")
-          .addEventListener("click", onClickTagInfo);
-      });
 
-      view.on("rendered", (e) => {}); //dom渲染完成
+        view.on("focus", (e) => {
+          document.querySelectorAll("[xui_tags_view] >div").forEach((el) => {
+            el.querySelector(".tag-body").classList.remove("show");
+            el.style.zIndex = "auto";
+          });
+          e.target.style.zIndex = "999";
+          e.target.querySelector(".tag-body").classList.add("show");
+       
+          // e.target
+          //   .querySelector(".tag-commodity")
+          //   .removeEventListener("click", onClickTagInfo);
+          // e.target
+          //   .querySelector(".tag-commodity")
+          //   .addEventListener("click", onClickTagInfo);
+        });
+      }); //dom渲染完成
     });
 
   app.use("TourPlayer");
@@ -622,18 +643,26 @@ onMounted(async () => {
         pointer-events: none;
       }
       .tag-title {
+        font-weight: bold;
+        color: #131d34;
         padding: 10px 10px 10px 76px;
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
         width: 240px;
+        font-size: 14px;
       }
       .tag-info {
+        color: #444444;
         padding: 0 20px 0 76px;
         font-size: 12px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        white-space: nowrap;
+        width: 240px;
+        > div {
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          max-width: 240px;
+        }
       }
     }
     &.show {

src/components/RTC/PageRtcLive.vue

@@ -1,5 +1,9 @@
 <template>
-  <div v-if="leaderAvatar && showAvatar" class="avatar-box" :style="`background-image:url(${leaderAvatar});`"></div>
+  <div
+    v-if="leaderAvatar && showAvatar"
+    class="avatar-box"
+    :style="`background-image:url(${leaderAvatar});`"
+  ></div>
 
   <div id="PageRtcLive">
     <div class="member_number">
@@ -8,27 +12,65 @@
     </div>
     <chat v-show="chatShow" :chatList="chatList" :user_info="user_info"></chat>
 
-    <Trtccom :audioMuted="audioMuted" :videoMuted="videoMuted" v-if="isRunRTC" />
+    <Trtccom
+      :audioMuted="audioMuted"
+      :videoMuted="videoMuted"
+      v-if="isRunRTC"
+    />
 
     <div class="contorlBar" v-if="!showInput">
-      <div v-if="connectStatus == 1" :class="{ disabled: !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>
 
-        <div class="disSpeakBtn" @click.stop="chatShow = !chatShow" :class="{ dis: !chatShow }"></div>
+        <div
+          class="disSpeakBtn"
+          @click.stop="chatShow = !chatShow"
+          :class="{ dis: !chatShow }"
+        ></div>
+      </div>
+      <div style="text-align: right; width: 100%" v-if="connectStatus == 0">
+        连接中...
       </div>
-      <div style="text-align: right; width: 100%" v-if="connectStatus == 0">连接中...</div>
       <div v-if="connectStatus == 1" class="contorl_btn">
-        <div v-if="isBrushes && user_info.Role == 'leader'" @click="onDrawUndo" class="brushesBack" :class="{ disabled: !canUndo }"></div>
-        <div v-if="user_info.Role == 'leader'" @click="onDraw(!isBrushes)" :class="{ brushesed: isBrushes }" class="brushes"></div>
-
-        <div v-if="user_list.length < 50" class="invitation" @click="onClickShare"></div>
+        <div
+          v-if="isBrushes && user_info.Role == 'leader'"
+          @click="onDrawUndo"
+          class="brushesBack"
+          :class="{ disabled: !canUndo }"
+        ></div>
+        <div
+          v-if="user_info.Role == 'leader'"
+          @click="onDraw(!isBrushes)"
+          :class="{ brushesed: isBrushes }"
+          class="brushes"
+        ></div>
+
+        <div
+          v-if="user_list.length < 50"
+          class="invitation"
+          @click="onClickShare"
+        ></div>
         <div v-if="role == 'leader'" class="members" @click="openMember"></div>
         <template v-if="role == 'leader'">
-          <div v-if="!disableMic" @click="handleMuteAduio" :class="{ mic_off: audioMuted, disabled: !audioDeviceId }" class="mic_on"></div>
-          <div v-if="disableMic" class="mic_no" :class="{ disabled: !audioDeviceId }"></div>
+          <div
+            v-if="!disableMic"
+            @click="handleMuteAduio"
+            :class="{ mic_off: audioMuted, disabled: !audioDeviceId }"
+            class="mic_on"
+          ></div>
+          <div
+            v-if="disableMic"
+            class="mic_no"
+            :class="{ disabled: !audioDeviceId }"
+          ></div>
         </template>
         <!-- <div
           v-if="role == 'leader'"
@@ -44,15 +86,29 @@
     <div class="layer" v-if="showInput" @click="closeInput">
       <div class="inputBox" @click.stop>
         <div class="msgBox">
-          <input id="input_msg" type="text" maxlength="200" v-model.trim="text" :placeholder="`说点什么~`" />
-          <span class="iconsend_icon" :class="{ disable: text == '' }" @click.stop="sendText">发送</span>
+          <input
+            id="input_msg"
+            type="text"
+            maxlength="200"
+            v-model.trim="text"
+            :placeholder="`说点什么~`"
+          />
+          <span
+            class="iconsend_icon"
+            :class="{ disable: text == '' }"
+            @click.stop="sendText"
+            >发送</span
+          >
         </div>
       </div>
     </div>
 
     <!-- 成員 -->
     <div class="layer" v-if="showMember" @click.self="closeMember">
-      <div class="memberContent animated" :class="animateActive ? 'fadeInUpBig' : 'fadeOutDownBig'">
+      <div
+        class="memberContent animated"
+        :class="animateActive ? 'fadeInUpBig' : 'fadeOutDownBig'"
+      >
         <div class="blurBox"></div>
         <div class="content">
           <div class="memberHeader">
@@ -63,9 +119,16 @@
             <div class="memberItem">
               <div class="userMsg">
                 <div class="avatar">
-                  <img :src="require('@/assets/images/rtcLive/avatar_small@2x.png')" alt="" />
+                  <img
+                    :src="
+                      require('@/assets/images/rtcLive/avatar_small@2x.png')
+                    "
+                    alt=""
+                  />
+                </div>
+                <div class="name" v-if="user_info.Role == 'leader'">
+                  {{ user_info.Nickname }} (主持人,我)
                 </div>
-                <div class="name" v-if="user_info.Role == 'leader'">{{ user_info.Nickname }} (主持人,我)</div>
                 <div class="name" v-else>{{ user_info.Nickname }} (我)</div>
               </div>
 
@@ -78,15 +141,30 @@
               </div> -->
             </div>
 
-            <div v-show="user_info.UserId != i.UserId && i.Role != 'leader'" class="memberItem" v-for="(i, idx) in user_list" :key="idx">
+            <div
+              v-show="user_info.UserId != i.UserId && i.Role != 'leader'"
+              class="memberItem"
+              v-for="(i, idx) in user_list"
+              :key="idx"
+            >
               <div class="userMsg">
                 <div class="avatar">
-                  <img :src="require('@/assets/images/rtcLive/avatar_small@2x.png')" alt="" />
+                  <img
+                    :src="
+                      require('@/assets/images/rtcLive/avatar_small@2x.png')
+                    "
+                    alt=""
+                  />
                 </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'" :wo="i.IsWords" @click="userCanSpeak(i)"></div>
+                <div
+                  class="micBtn"
+                  :class="i.IsWords ? 'ban_speak_on' : 'ban_speak_off'"
+                  :wo="i.IsWords"
+                  @click="userCanSpeak(i)"
+                ></div>
                 <!-- <div
                   class="micBtn"
                   :class="i.IsMuted ? 'mute_one_mic_off' : 'mute_one_mic_on'"
@@ -102,74 +180,99 @@
 
   <teleport :to="`#app`">
     <div v-if="showShare" @click="showShare = false" class="sharetip">
-      <img @click.stop :style="`right:${isMP ? '16%' : '6%'}`" :src="require('@/assets/images/icon/img_scene_share.png')" alt="" />
+      <img
+        @click.stop
+        :style="`right:${isMP ? '16%' : '6%'}`"
+        :src="require('@/assets/images/icon/img_scene_share.png')"
+        alt=""
+      />
     </div>
   </teleport>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, watch, defineEmits, ref, reactive, computed, nextTick } from 'vue';
-import { useApp, getApp } from '@/app';
-import { useStore } from 'vuex';
-import { Dialog } from '@/global_components/';
-import common from '@/utils/common';
-
-import { mapGetters } from 'vuex';
-import chat from './chat/chat.vue';
-import Trtccom from './Trtccom.vue';
-import browser from '@/utils/browser';
-import wxShare from '@/utils/wxshare';
-import defaultAvatar from '@/assets/images/avatar_default.png';
-const emit = defineEmits(['openDialog', 'closeSocket']);
+import {
+  onMounted,
+  onUnmounted,
+  watch,
+  defineEmits,
+  ref,
+  reactive,
+  computed,
+  nextTick,
+} from "vue";
+import { useApp, getApp } from "@/app";
+import { useStore } from "vuex";
+import { Dialog } from "@/global_components/";
+import common from "@/utils/common";
+
+import { mapGetters } from "vuex";
+import chat from "./chat/chat.vue";
+import Trtccom from "./Trtccom.vue";
+import browser from "@/utils/browser";
+import wxShare from "@/utils/wxshare";
+import defaultAvatar from "@/assets/images/avatar_default.png";
+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;
+  return store.getters["rtc/avatar"]
+    ? store.getters["rtc/avatar"]
+    : localStorage.getItem("leaderAvatar")
+    ? localStorage.getItem("leaderAvatar")
+    : defaultAvatar;
 });
 
 let jumpNewScene = (sceneFirstView) => {
   let url = window.location.href;
 
-  if (!browser.hasURLParam('pose')) {
+  if (!browser.hasURLParam("pose")) {
     url += `&${sceneFirstView.sceneview}`;
   } else {
-    url = browser.replaceQueryString(url, 'pose', sceneFirstView.sceneview.replace('pose=', ''));
+    url = browser.replaceQueryString(
+      url,
+      "pose",
+      sceneFirstView.sceneview.replace("pose=", "")
+    );
   }
 
-  url = browser.replaceQueryString(url, 'm', sceneFirstView.num);
+  url = browser.replaceQueryString(url, "m", sceneFirstView.num);
   return url;
 };
 
 let chatAutoScroll = () => {
-  let el = document.getElementById('chat');
-  let client_h = document.getElementById('chat').clientHeight;
-  let all = document.getElementById('contents').clientHeight;
+  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(process.env.VUE_APP_SOCKET_URL, {
-    path: '/ws-sync',
-    transports: ['websocket'],
+    path: "/ws-sync",
+    transports: ["websocket"],
   });
   return socket;
 };
 
-store.commit('rtc/setSocket', createSocket());
+store.commit("rtc/setSocket", createSocket());
 
 let getUrl = (href, queryArr) => {
   queryArr.forEach((item) => {
     if (!browser.hasURLParam(item.key)) {
-      let ttt = href.split('index.html?');
+      let ttt = href.split("index.html?");
       href = `${ttt[0]}index.html?${item.key}=${item.val}&${ttt[1]}`;
-      console.log(href, '------index.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.html----------');
+      console.log(
+        href,
+        "------index.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.htmlindex.html----------"
+      );
     } else {
       href = browser.replaceQueryString(href, item.key, item.val);
     }
   });
 
-  if (href.indexOf('customer') != -1) {
-    return href.replace('&sync=1', '');
+  if (href.indexOf("customer") != -1) {
+    return href.replace("&sync=1", "");
   }
 
   return href;
@@ -192,17 +295,17 @@ const isMP = ref(false);
 const audioMuted = ref(false);
 const videoMuted = ref(false);
 
-const socket = computed(() => store.getters['rtc/socket']);
+const socket = computed(() => store.getters["rtc/socket"]);
 
 const myVideoShow = ref(false);
 const userVideoShow = ref(false);
 const user_info = ref({});
 const user_list = ref([]);
-const mode = ref(browser.getURLParam('mode'));
-const role = ref(browser.getURLParam('role'));
+const mode = ref(browser.getURLParam("mode"));
+const role = ref(browser.getURLParam("role"));
 
-const userId = computed(() => store.getters['rtc/userId']);
-const roomId = computed(() => store.getters['rtc/roomId']);
+const userId = computed(() => store.getters["rtc/userId"]);
+const roomId = computed(() => store.getters["rtc/roomId"]);
 
 const isJoined = ref(false);
 
@@ -211,9 +314,9 @@ const isRunRTC = ref(false);
 const paint = reactive({});
 
 const chatList = ref([]);
-const text = ref('');
+const text = ref("");
 
-const shareLink = ref('');
+const shareLink = ref("");
 const canUndo = ref(false);
 const audioDevices = ref([1]);
 const videoDevices = ref([1]);
@@ -222,17 +325,17 @@ const chatShow = ref(true);
 const all_mute_mic = ref(false);
 
 const tags = computed(() => {
-  return store.getters['tag/tags'] || [];
+  return store.getters["tag/tags"] || [];
 });
 
 const onClickShare = () => {
-  openDialog('dialogShare', shareLink.value);
+  openDialog("dialogShare", shareLink.value);
 };
 
 const userGetOut = (item, i) => {
   socket.value &&
-    socket.value.emit('action', {
-      type: 'getout',
+    socket.value.emit("action", {
+      type: "getout",
       data: {
         id: item.UserId,
       },
@@ -245,7 +348,9 @@ const setUserWords = (res) => {
   if (res.userId == user_info.value.UserId) {
     user_info.value.IsWords = res.words;
     Dialog.toast({
-      content: !user_info.value.IsWords ? `主持人设置了禁言` : `主持人已解除禁言`,
+      content: !user_info.value.IsWords
+        ? `主持人设置了禁言`
+        : `主持人已解除禁言`,
     });
   }
 };
@@ -256,9 +361,9 @@ const handleMuteVideo = () => {
 
 const handleMuteAduio = () => {
   audioMuted.value = !audioMuted.value;
-  if (role.value == 'leader') {
-    socket.value.emit('action', {
-      type: 'users-muted',
+  if (role.value == "leader") {
+    socket.value.emit("action", {
+      type: "users-muted",
       muted: audioMuted.value,
       userId: user_info.value.UserId,
     });
@@ -267,10 +372,12 @@ const handleMuteAduio = () => {
 
 const setUserMuted = (res) => {
   if (res.userId) {
-    if (res.userId == user_info.value.UserId && role.value == 'customer') {
+    if (res.userId == user_info.value.UserId && role.value == "customer") {
       user_info.value.IsMuted = res.muted;
       Dialog.toast({
-        content: !user_info.value.IsMuted ? `主持人设置了开麦` : `主持人设置了静音`,
+        content: !user_info.value.IsMuted
+          ? `主持人设置了开麦`
+          : `主持人设置了静音`,
       });
       disableMic.value = res.muted;
       audioMuted.value = res.muted;
@@ -281,8 +388,8 @@ const setUserMuted = (res) => {
 };
 
 const setAllMuted = (data) => {
-  console.log(data, 'IsMuted');
-  socket.value.emit('action', { type: 'users-muted', muted: data });
+  console.log(data, "IsMuted");
+  socket.value.emit("action", { type: "users-muted", muted: data });
 };
 
 const onAllMuted = (res) => {
@@ -293,16 +400,18 @@ const onAllMuted = (res) => {
     return tempArr;
   }, []);
 
-  if (role.value == 'leader') {
+  if (role.value == "leader") {
     all_mute_mic.value = res.muted;
   }
 
   user_list.value.forEach((item) => {
     user_info.value.IsMuted = res.muted;
     item.IsMuted = res.muted;
-    if (role.value == 'customer') {
+    if (role.value == "customer") {
       Dialog.toast({
-        content: !user_info.value.IsMuted ? `主持人设置了开麦` : `主持人设置了静音`,
+        content: !user_info.value.IsMuted
+          ? `主持人设置了开麦`
+          : `主持人设置了静音`,
       });
       disableMic.value = res.muted;
       audioMuted.value = res.muted;
@@ -312,7 +421,7 @@ const onAllMuted = (res) => {
 
 //用戶加入
 const setUserJoin = async (res) => {
-  console.log('有人进来了', 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) {
@@ -322,18 +431,18 @@ const setUserJoin = async (res) => {
   }, []);
   // self.chekcLeaderInfo();
   let name = res.user.Nickname;
-  if (res.user.Role == 'leader') {
-    name = '主持人';
+  if (res.user.Role == "leader") {
+    name = "主持人";
     Dialog.toast({ content: `主持人进入房间` });
-    socket.value.emit('action', { type: 'user-init' });
-    store.commit('rtc/setAvatar',res.user.Avatar)
+    socket.value.emit("action", { type: "user-init" });
+    store.commit("rtc/setAvatar", res.user.Avatar);
   }
   let data = {
     role: res.user.Role,
     mode: mode.value,
     Nickname: name,
     UserId: res.user.UserId,
-    text: '进入房间',
+    text: "进入房间",
   };
   if (role.value == "leader") {
     chatList.value.push(data);
@@ -350,7 +459,7 @@ const onDrawUndo = async () => {
   app.Connect.paint.undo();
   canUndo.value = app.Connect.paint.records.length > 0;
 
-  console.log(app.Connect.paint.records, 'app.Connect.paint.records');
+  console.log(app.Connect.paint.records, "app.Connect.paint.records");
 };
 
 // 畫筆開啟
@@ -359,15 +468,15 @@ const onDraw = async (status) => {
   if (isBrushes.value) {
     await getApp().Connect.paint.show({
       role: role.value,
-      paint: role.value == 'leader' ? true : false,
+      paint: role.value == "leader" ? true : false,
     });
-    if (role.value == 'leader') {
-      socket.value.emit('action', { type: 'user-paint', open: true });
+    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 });
+    if (role.value == "leader") {
+      socket.value.emit("action", { type: "user-paint", open: false });
     }
   }
 };
@@ -376,14 +485,14 @@ const onDraw = async (status) => {
 const onFocus = () => {
   showInput.value = true;
   nextTick(() => {
-    let input_msg = document.getElementById('input_msg');
+    let input_msg = document.getElementById("input_msg");
     input_msg.focus();
   });
 };
 
 //發彈幕
 const sendText = async () => {
-  if (text.value == '') {
+  if (text.value == "") {
     return;
   }
   let data = {
@@ -394,8 +503,8 @@ const sendText = async () => {
     text: text.value,
   };
   socket.value &&
-    socket.value.emit('action', {
-      type: 'danmumsg',
+    socket.value.emit("action", {
+      type: "danmumsg",
       data,
     });
 
@@ -403,7 +512,7 @@ const sendText = async () => {
   await nextTick();
   try {
     chatAutoScroll();
-    let input_msg = document.getElementById('input_msg');
+    let input_msg = document.getElementById("input_msg");
     input_msg.blur();
   } catch (error) {}
   closeInput();
@@ -412,8 +521,8 @@ const sendText = async () => {
 //接收消息
 const setReceiveMsg = async (res) => {
   console.log(res);
-  if (res.role == 'leader') {
-    res.Nickname = '主持人';
+  if (res.role == "leader") {
+    res.Nickname = "主持人";
   }
   chatList.value.push(res);
   await nextTick();
@@ -425,7 +534,7 @@ const setReceiveMsg = async (res) => {
 // 關閉輸入框
 const closeInput = () => {
   showInput.value = false;
-  text.value = '';
+  text.value = "";
 };
 
 // 開啟成員
@@ -443,20 +552,20 @@ const closeMember = () => {
 };
 
 const openDialog = (str, link) => {
-  emit('openDialog', str, link);
+  emit("openDialog", str, link);
 };
 
 const onMemberMuted = (item) => {
   item.IsMuted = !item.IsMuted;
-  socket.value.emit('action', {
-    type: 'users-muted',
+  socket.value.emit("action", {
+    type: "users-muted",
     muted: item.IsMuted,
     userId: item.UserId,
   });
 };
 
 const onMemberLeave = async (res) => {
-  console.log('有人离开了', res);
+  console.log("有人离开了", res);
   user_list.value = res.members.reduce(function (tempArr, item) {
     if (tempArr.findIndex((ele) => ele.UserId === item.UserId) === -1) {
       tempArr.push(item);
@@ -464,8 +573,8 @@ const onMemberLeave = async (res) => {
     return tempArr;
   }, []);
   let name = res.user.Nickname;
-  if (res.user.Role == 'leader') {
-    name = '主持人';
+  if (res.user.Role == "leader") {
+    name = "主持人";
     Dialog.toast({ content: `主持人离开了房间` });
   }
   let data = {
@@ -473,7 +582,7 @@ const onMemberLeave = async (res) => {
     mode: mode.value,
     Nickname: name,
     UserId: res.user.UserId,
-    text: '离开房间',
+    text: "离开房间",
   };
   if (role.value == "leader") {
     chatList.value.push(data);
@@ -487,8 +596,8 @@ const onMemberLeave = async (res) => {
 
 const userCanSpeak = (item) => {
   item.IsWords = !item.IsWords;
-  socket.value.emit('action', {
-    type: 'users-words',
+  socket.value.emit("action", {
+    type: "users-words",
     words: item.IsWords,
     userId: item.UserId,
   });
@@ -496,7 +605,7 @@ const userCanSpeak = (item) => {
 
 const onGetOuT = (data) => {
   if (data.id == user_info.value.UserId) {
-    emit('closeSocket');
+    emit("closeSocket");
     Dialog.toast({ content: `您已被移除` });
   }
 };
@@ -504,8 +613,10 @@ const onGetOuT = (data) => {
 watch(
   user_list,
   () => {
-    if (role.value == 'leader') {
-      all_mute_mic.value = !user_list.value.some((item) => !item.IsMuted && item.Role == 'customer');
+    if (role.value == "leader") {
+      all_mute_mic.value = !user_list.value.some(
+        (item) => !item.IsMuted && item.Role == "customer"
+      );
     }
   },
   {
@@ -515,36 +626,44 @@ watch(
 const showAvatar = ref(false);
 
 const startFollow = (app) => {
-  app.Connect.follow.start({ follow: role.value == 'customer' });
-
-  store.commit('rtc/setUserId', browser.getURLParam('vruserId') || `user_${role.value}${Math.floor(Math.random() * 100000000)}`);
-  store.commit('rtc/setRoomId', browser.getURLParam('roomId') || `room_${Math.floor(Math.random() * 100000000)}`);
-
-  socket.value.on('connect', (e) => {
+  app.Connect.follow.start({ follow: role.value == "customer" });
+
+  store.commit(
+    "rtc/setUserId",
+    browser.getURLParam("vruserId") ||
+      `user_${role.value}${Math.floor(Math.random() * 100000000)}`
+  );
+  store.commit(
+    "rtc/setRoomId",
+    browser.getURLParam("roomId") ||
+      `room_${Math.floor(Math.random() * 100000000)}`
+  );
+
+  socket.value.on("connect", (e) => {
     let params = {
       userId: userId.value,
       roomId: roomId.value,
-      role: role.value || 'leader',
-      nickname: browser.getURLParam('name'),
+      role: role.value || "leader",
+      nickname: browser.getURLParam("name"),
       // avatar: leaderAvatar.value,
     };
-    if (role.value == 'leader') {
+    if (role.value == "leader") {
       params.avatar = leaderAvatar.value;
     }
-    socket.value.emit('join', params);
+    socket.value.emit("join", params);
   });
 
   const leaderInfo = ref({});
   // 加入房間成功
-  socket.value.on('join', (data) => {
+  socket.value.on("join", (data) => {
     // leaderInfo.value = data.members.filter((item) => item.Role == 'leader');
 
-    if (role.value == 'customer') {
+    if (role.value == "customer") {
       data.members.forEach((item) => {
-        if (item.Role == 'leader') {
+        if (item.Role == "leader") {
           leaderInfo.value = item;
           showAvatar.value = true;
-          store.commit('rtc/setAvatar', leaderInfo.value.Avatar);
+          store.commit("rtc/setAvatar", leaderInfo.value.Avatar);
         }
       });
     } else {
@@ -559,17 +678,17 @@ const startFollow = (app) => {
       return tempArr;
     }, []);
 
-    if (meblist.length > 50 && role.value == 'customer') {
+    if (meblist.length > 50 && role.value == "customer") {
       Dialog.toast({ content: `房间已满员` });
-      emit('closeSocket');
+      emit("closeSocket");
       return;
     }
 
     connectStatus.value = 1;
-    if (role.value == 'customer') {
-      socket.value.emit('action', { type: 'ask-currentscene' });
+    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) {
@@ -594,63 +713,63 @@ const startFollow = (app) => {
     //更新分享鏈接
     shareLink.value = getUrl(window.location.href, [
       {
-        key: 'mode',
+        key: "mode",
         val: mode.value,
       },
       {
-        key: 'name',
-        val: '',
+        key: "name",
+        val: "",
       },
       {
-        key: 'vruserId',
-        val: '',
+        key: "vruserId",
+        val: "",
       },
       {
-        key: 'role',
-        val: 'customer',
+        key: "role",
+        val: "customer",
       },
       {
-        key: 'roomId',
+        key: "roomId",
         val: user_info.value.RoomId,
       },
     ]);
 
-    let tmp = '';
+    let tmp = "";
 
-    if (user_info.value.Role == 'leader') {
+    if (user_info.value.Role == "leader") {
       tmp = getUrl(window.location.href, [
         {
-          key: 'roomId',
+          key: "roomId",
           val: user_info.value.RoomId,
         },
         {
-          key: 'vruserId',
+          key: "vruserId",
           val: user_info.value.UserId,
         },
       ]);
     } else {
       tmp = getUrl(window.location.href, [
         {
-          key: 'vruserId',
+          key: "vruserId",
           val: user_info.value.UserId,
         },
       ]);
     }
 
-    store.commit('rtc/setRole', user_info.value.Role);
+    store.commit("rtc/setRole", user_info.value.Role);
     history.replaceState(null, null, tmp);
   });
 
-  socket.value.on('action', (data) => {
-    console.log(data, '=============');
-    if (data.type == 'error') {
-      Dialog.toast({ content: `房间未找到`, type: 'error' });
-      emit('closeSocket');
-    } else if (data.type == 'danmumsg') {
+  socket.value.on("action", (data) => {
+    console.log(data, "=============");
+    if (data.type == "error") {
+      Dialog.toast({ content: `房间未找到`, type: "error" });
+      emit("closeSocket");
+    } else if (data.type == "danmumsg") {
       setReceiveMsg(data.data);
-    } else if (data.type == 'getout') {
+    } else if (data.type == "getout") {
       onGetOuT(data.data);
-    } else if (data.type == 'user-init') {
+    } else if (data.type == "user-init") {
       app.Connect.follow.sync();
       if (role.value == "leader") {
         setTimeout(() => {
@@ -676,42 +795,45 @@ const startFollow = (app) => {
       }
     } else if (data.type == "user-paint") {
       onDraw(data.open);
-      if (role.value == 'customer') {
+      if (role.value == "customer") {
         if (data.open) {
           Dialog.toast({ content: `主持人开启画笔` });
         } else {
           Dialog.toast({ content: `主持人关闭画笔` });
         }
       }
-    } else if (data.type == 'user-join') {
+    } else if (data.type == "user-join") {
       setUserJoin(data);
-    } else if (data.type == 'users-muted') {
+    } else if (data.type == "users-muted") {
       setUserMuted(data);
       //閉麥
-    } else if (data.type == 'users-words') {
+    } else if (data.type == "users-words") {
       setUserWords(data);
       //禁言
-    } else if (data.type == 'user-leave') {
+    } else if (data.type == "user-leave") {
       // 房間解散
       onMemberLeave(data);
-    } else if (data.type == 'leader-dismiss') {
-      emit('closeSocket');
+    } else if (data.type == "leader-dismiss") {
+      emit("closeSocket");
       Dialog.toast({ content: `主持人已解散房间` });
-    } else if (data.type == 'tagclick') {
-      if (role.value == 'customer') {
+    } else if (data.type == "tagclick") {
+      if (role.value == "customer") {
         let item = tags.value.find((item) => item.sid == data.data.sid);
         store.commit("tag/setTagClickType", {
           type: "goodlist",
           data: item,
         });
       }
-    } else if (data.type == 'tagclose') {
-      if (role.value == 'customer') {
-        store.commit('tag/setTagClickType', {
-          type: '',
+    } else if (data.type == "tagclose") {
+      if (role.value == "customer") {
+        store.commit("tag/setTagClickType", {
+          type: "",
           data: {},
         });
       }
+    } else if (data.type == "tag-click") {
+      if (role.value == "customer") {
+      }
     } else if (data.type == "tag-image-index") {
       if (role.value == "customer") {
         store.commit("tag/setTagImageIndex", data.data.index);
@@ -721,16 +843,20 @@ const startFollow = (app) => {
         socket.value.emit("action", {
           type: "answer-currentscene",
           data: {
-            scene: browser.getURLParam('m'),
-            pose: browser.getURLParam('pose'),
+            scene: browser.getURLParam("m"),
+            pose: browser.getURLParam("pose"),
           },
         });
       }
-    } else if (data.type == 'answer-currentscene') {
-      if (role.value == 'customer') {
-        if (data.data.scene != browser.getURLParam('m')) {
-          let url1 = browser.replaceQueryString(window.location.href, 'm', data.data.scene);
-          let url = browser.replaceQueryString(url1, 'pose', data.data.pose);
+    } else if (data.type == "answer-currentscene") {
+      if (role.value == "customer") {
+        if (data.data.scene != browser.getURLParam("m")) {
+          let url1 = browser.replaceQueryString(
+            window.location.href,
+            "m",
+            data.data.scene
+          );
+          let url = browser.replaceQueryString(url1, "pose", data.data.pose);
           location.replace(url);
         }
       }
@@ -738,41 +864,41 @@ const startFollow = (app) => {
   });
 
   // 同屏帶看
-  socket.value.on('sync', (data) => {
-    if (role.value == 'customer') {
+  socket.value.on("sync", (data) => {
+    if (role.value == "customer") {
       app.Connect.follow.receive(data);
     }
   });
 
   // 畫筆
-  socket.value.on('paint', (data) => {
-    if (role.value == 'customer') {
+  socket.value.on("paint", (data) => {
+    if (role.value == "customer") {
       app.Connect.paint.receive(data);
     }
   });
 };
 let onfollowData = (data) => {
   if (isJoined.value) {
-    socket.value.emit('sync', data);
+    socket.value.emit("sync", data);
   }
 };
 
 let onfollowPaint = async (data) => {
   canUndo.value = (await getApp().Connect.paint.records.length) > 0;
-  socket.value.emit('paint', data);
+  socket.value.emit("paint", data);
 };
 
 onMounted(async () => {
   let app = await getApp();
   startFollow(app);
-  app.Connect.follow.on('data', onfollowData);
-  app.Connect.paint.on('data', onfollowPaint);
+  app.Connect.follow.on("data", onfollowData);
+  app.Connect.paint.on("data", onfollowPaint);
 });
 
 onUnmounted(async () => {
   let app = await getApp();
-  app.Connect.follow.off('data', onfollowData);
-  app.Connect.follow.off('data', onfollowData);
+  app.Connect.follow.off("data", onfollowData);
+  app.Connect.follow.off("data", onfollowData);
 });
 </script>
 
@@ -789,7 +915,7 @@ onUnmounted(async () => {
   position: fixed;
   top: 0.2667rem;
   left: 0.2667rem;
-  z-index: 1000;
+  z-index: 100;
 }
 #PageRtcLive {
   position: absolute;
@@ -862,11 +988,13 @@ onUnmounted(async () => {
       .disSpeakBtn {
         width: 0.533333rem;
         height: 0.533333rem;
-        background: url(~@/assets/images/rtcLive/pop-up_screen_on@2x.png) no-repeat;
+        background: url(~@/assets/images/rtcLive/pop-up_screen_on@2x.png)
+          no-repeat;
         background-size: 100% 100%;
         cursor: pointer;
         &.dis {
-          background: url(~@/assets/images/rtcLive/pop-up_screen_off@2x.png) no-repeat;
+          background: url(~@/assets/images/rtcLive/pop-up_screen_off@2x.png)
+            no-repeat;
           background-size: 100% 100%;
         }
       }

src/components/cropper/cropper.vue

@@ -22,7 +22,7 @@ import { computed, defineProps, ref, nextTick, defineEmits } from 'vue';
 // import { useI18n } from '@/i18n'
 // const { t } = useI18n({ useScope: 'global' })
 const sizeType = ref(1);
-const layerWidth = 500;
+const layerWidth = 256;
 const emit = defineEmits(['close', 'ok']);
 const props = defineProps({
   fixedNumber: {

src/views/viewimg.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="imgcon">
+  <div class="imgcon" @mousedown.stop @mousemove.stop @mouseup.stop>
     <div class="swiper-container" :class="keyid">
       <ul class="swiper-wrapper imgul">
         <li