update

src/app.vue

@@ -301,7 +301,7 @@ onMounted(async () => {
           if (tag.type == "coupon") {
             try {
               document.querySelector(`[data-tag-id="${tag.sid}"] .tag-icon`).style.display = "none";
-              let hotcontent = JSON.parse(tag.hotContent);
+              let hotcontent = (typeof tag.hotContent =='string') ? JSON.parse(tag.hotContent) : tag.hotContent;
               browser.openLink(
                 "/subPackage/pages/activity/activity?pageId=" + hotcontent.couponLink,
                 `https://m.cdfmembers.com/shop/600667208/showactivity?pageId=${hotcontent.couponLink}`,
@@ -316,7 +316,7 @@ onMounted(async () => {
             });
           } else if (tag.type == "applet_link") {
             try {
-              let hotcontent = JSON.parse(tag.hotContent);
+              let hotcontent = (typeof tag.hotContent =='string') ? JSON.parse(tag.hotContent) : tag.hotContent;
               browser.openLink(
                 "/subPackage/pages/home/home?pageType=2&pageId=" + hotcontent.liveLink,
                 `https://m.cdfmembers.com/shop/600667208/showactivity?pageId=${hotcontent.liveLink}`,

src/components/RTC/PageHome.vue

@@ -1,334 +0,0 @@
-<template>
-  <div class="navigation" v-if="orgin != 'fashilong' && !hideToolBar" :style="{ zIndex: showEnvTips ? 99999 : 99,left: !showMore?-iconListWidth+'px':''}">
-
-    <!-- 带看导航栏 -->
-    <div class="tabBar" v-if="tabBarShow">
-      <div class="iconList" id="iconList">
-        <!-- <div class="iconfont " :class="i.icon" v-for="i,index in tabbarList" :key="index" @click="tabBarClick(i.type)">
-          <div v-if="tabBarType==3 && showTabbarTip &&i.type==3" class="iconTip">热点</div>
-        </div> -->
-
-        <div v-if="plays.length>0" class="iconfont " :class="[this.status.isPlaying ? 'iconscene_stop' : 'iconguided']" :style="status.isPlaying ? 'color:#ED5D18;' : ''" @click="tabBarClick(1)">
-          <div v-if="tabBarType==1 && showTabbarTip && status.isPlaying  " class="iconTip">{{$t('rtcLive.openGuided')}}</div>
-          <div v-if="tabBarType==1 && showTabbarTip &&!status.isPlaying  " class="iconTip">{{$t('rtcLive.closeGuided')}}</div>
-        </div>
-        <div class="iconfont iconshow" @click="tabBarClick(2)">
-          <!-- <div v-if="tabBarType==2 && showTabbarTip  " class="iconTip">{{$t('rtcLive.create_VR')}}</div> -->
-        </div>
-        <div class="iconfont iconhot_spot" :style="hotSpot ? 'color:#ED5D18;' : ''" @click="tabBarClick(3)">
-          <div v-if="tabBarType==3 && showTabbarTip && hotSpot " class="iconTip">{{$t('rtcLive.openHotSpot')}}</div>
-          <div v-if="tabBarType==3 && showTabbarTip &&!hotSpot " class="iconTip">{{$t('rtcLive.closeHotSpot')}}</div>
-          <!-- <div class="iconTip">热点</div> -->
-        </div>
-        <div class="iconfont iconvr" @click="tabBarClick(4)">
-        </div>
-
-      </div>
-      <div @click="onShowMore" :class="{'hide':!showMore}" class="tabBtn iconfont iconarrows"></div>
-    </div>
-  </div>
-</template>
-<script>
-import config from "@/config";
-import XWindow from "../shared/XWindow";
-import { mapGetters } from "vuex";
-import { play } from "@/core";
-import {
-  backgroundMusicPlayer,
-  guideSoundPlayer,
-  checkReadyToPlay,
-} from "@/utils/sounds";
-import { sendToApp, userId } from "../../socket";
-import browser from "@/utils/browser";
-import { objects } from "@/core/base";
-
-export default {
-  components: {
-    XWindow,
-  },
-  data() {
-    return {
-      tabBarShow: true,
-      orgin: browser.urlQueryValue("origin").toLowerCase(),
-      showMore: true,
-      hideToolBar: browser.urlHasValue("hideToolBar"),
-      showCoupon: false,
-      showEnvTips: false,
-      iconListWidth: 0,
-      hotSpot: false,
-      tabbarList: [
-        {
-          title: "导览",
-          icon: "iconguided",
-          type: 1,
-        },
-        {
-          title: "一起逛",
-          icon: "iconshowing",
-          type: 2,
-        },
-        {
-          title: "热点",
-          icon: "iconhot_spot",
-          type: 3,
-        },
-        {
-          title: "VR模式",
-          icon: "iconvr",
-          type: 4,
-        },
-      ],
-      tabBarType: 0,
-      showTabbarTip: false,
-      timer: null,
-    };
-  },
-  watch: {
-    plays: {
-      handler: function (newVal, oldVal) {
-        sendToApp("guide", { length: this.plays.length });
-      },
-      immediate: true,
-    },
-    "status.isPlaying": function () {
-      sendToApp("guide", { playing: this.status.isPlaying });
-    },
-  },
-  computed: {
-    ...mapGetters({
-      plays: "guide/plays",
-      status: "guide/status",
-      medias: "guide/medias",
-    }),
-  },
-  created() {
-    this.$once("hook:beforeDestroy", () => {
-      this.$bus.off("vrhouse/back", this.vrBack);
-    });
-    this.$bus.on("vrhouse/back", this.vrBack);
-    play.on("guide/play/start", (index) => {
-      this.$store.commit("guide/SetStatus", {
-        isPlaying: true,
-      });
-    });
-
-    play.on("guide/play/pause", (index) => {
-      this.$store.commit("guide/SetStatus", {
-        isPlaying: false,
-      });
-    });
-
-    play.on("guide/play/stop", () => {
-      this.$store.commit("guide/SetStatus", {
-        isPlaying: false,
-      });
-    });
-
-    play.on("guide/play/playing", (index) => {
-      this.$store.commit("guide/SetIndex", index);
-    });
-
-    play.on("guide/play/flyToStart", (index) => {
-      this.$store.commit("guide/SetIndex", index);
-    });
-
-    // this.$bus.on("shop/app/action", (data) => {
-    //   if (data.type == "showCoupon") {
-    //     this.showCoupon = data.data;
-    //   } else if (data.type == "guide") {
-    //     if (this.status.isPlaying) {
-    //       play.pause();
-    //     } else {
-    //       play.start();
-    //     }
-    //   }
-    // });
-  },
-  mounted() {
-    this.$bus.on("ready", () => {
-      if (this.plays.length) {
-        let type =
-          this.status.audio === "soundsync" ? "sync" : this.status.audio;
-
-        if (this.medias.links[type]) {
-          guideSoundPlayer.setSRC(
-            this.$config.getPublishResource(this.medias.links[type])
-          );
-        }
-      }
-    });
-    this.$nextTick(() => {
-      $("#player").on("touchstart", () => {
-        if (this.status.isPlaying) {
-          play.pause();
-        }
-      });
-    });
-    // if (this.$config.appenv != "discover") {
-    //   sendToApp("cart", true);
-    // }
-    // sendToApp("ready", this.$config.projectNum);
-  },
-  methods: {
-    vrBack() {
-      this.tabBarShow = true;
-      this.$store.commit("SetVR", false);
-      this.$nextTick(() => {
-        if (this.hotSpot) {
-          objects.tagManager.showAllTags();
-        } else {
-          objects.tagManager.hideAllTags();
-        }
-      });
-    },
-    tabBarClick(type) {
-      this.tabBarType = type;
-      switch (type) {
-        case 1:
-          this.onPlayGuide();
-          break;
-        case 2:
-          //发起带看
-          play.pause();
-          this.$parent.showCreated = true;
-          this.$config.isTyping = true;
-          break;
-
-        case 3:
-          //热点
-          // play.pause();
-
-          this.hotSpot = !this.hotSpot;
-          if (this.hotSpot) {
-            objects.tagManager.showAllTags();
-          } else {
-            objects.tagManager.hideAllTags();
-          }
-          break;
-
-        case 4:
-          //VR模式
-          play.pause();
-          this.tabBarShow = false;
-          this.$bus.emit("vrhouse/enterVR");
-          this.$store.commit("SetVR", true);
-          this.$bus.emit("shop/header/showHeader", false);
-          break;
-
-        default:
-          break;
-      }
-      this.showTabbarTip = true;
-      this.timer = setTimeout(() => {
-        this.showTabbarTip = false;
-        clearTimeout(this.timer);
-        this.timer = null;
-      }, 3000);
-    },
-    onShowMore() {
-      this.iconListWidth = document.getElementById("iconList").clientWidth;
-      this.showMore = !this.showMore;
-    },
-    onPlayGuide() {
-      if (this.status.isPlaying) {
-        play.pause();
-      } else {
-        play.start();
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.navigation {
-  pointer-events: none;
-  position: absolute;
-  //   left: 0.5rem;
-  //   right: 0.5rem;
-  //   bottom: 0.8rem;
-  left: 0;
-  bottom: 1.2rem;
-  height: 1.3rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  z-index: 100;
-  > div {
-    pointer-events: all;
-    height: 100%;
-  }
-  transition: all 0.3s;
-
-  &.hide {
-    left: -50%;
-  }
-}
-.tabBar {
-  //   min-width: 5.53rem;
-  height: 1.22rem;
-  background: rgba(0, 0, 0, 0.5);
-  border-radius: 0px 0.67rem 0.67rem 0px;
-  padding: 0 0.69rem 0 0.28rem;
-  .iconList {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    .iconfont {
-      //   width: 0.56rem;
-      //   height: 0.56rem;
-      // font-size: 0.56rem;
-      font-size: 0.65rem;
-      //   background: #fc6970;
-      margin: 0 0.35rem;
-      position: relative;
-      .iconTip {
-        height: 0.83rem;
-        background: rgba(0, 0, 0, 0.7);
-        padding: 0 0.17rem;
-        font-size: 0.28rem;
-        position: absolute;
-        top: -1.6rem;
-        left: 50%;
-        transform: translateX(-50%);
-        white-space: nowrap;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        color: #fff;
-        border-radius: 2px 2px 0 0;
-        &::after {
-          position: absolute;
-          content: "";
-          width: 0;
-          height: 0;
-          border-right: 0.28rem solid transparent;
-          border-left: 0.28rem solid transparent;
-          border-top: 0.28rem solid rgba(0, 0, 0, 0.7);
-          bottom: -0.28rem;
-          left: 50%;
-          transform: translateX(-50%);
-        }
-      }
-    }
-  }
-  .tabBtn {
-    // width: 0.42rem;
-    // height: 0.42rem;
-    font-size: 0.31rem;
-    position: absolute;
-    right: 0.4rem;
-    top: 50%;
-    transform: translateY(-50%);
-    transition: all 0.3s;
-    &.hide {
-      position: absolute;
-      right: 0.27rem;
-      top: 50%;
-      transform: translateY(-50%) rotate(180deg);
-    }
-  }
-}
-</style>

src/components/RTC/PageRtcLive.vue

@@ -2,7 +2,7 @@
   <div id="PageRtcLive">
     <div class="member_number">
       <div class="members"></div>
-      <span>{{ user_list.length }}观看</span>
+      <span>{{ user_list.length }}觀看</span>
     </div>
     <chat v-show="chatShow" :chatList="chatList" :user_info="user_info"></chat>
 
@@ -12,12 +12,12 @@
       <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>
 
         <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>
@@ -37,19 +37,19 @@
     <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="blurBox"></div>
         <div class="content">
           <div class="memberHeader">
-            <span> 成员管理（{{ user_list.length }}）</span>
+            <span> 成員管理（{{ user_list.length }}）</span>
             <i class="iconfont"></i>
           </div>
           <div class="memberList">
@@ -241,7 +241,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) {
@@ -253,14 +253,14 @@ const setUserJoin = async (res) => {
   let name = res.user.Nickname;
   if (res.user.Role == "leader") {
     name = "主持人";
-    Dialog.toast({ content: `主持人进入房间` });
+    Dialog.toast({ content: `主持人進入房間` });
   }
   let data = {
     role: res.user.Role,
     mode: mode.value,
     Nickname: name,
     UserId: res.user.UserId,
-    text: "进入房间",
+    text: "進入房間",
   };
   chatList.value.push(data);
   await nextTick();
@@ -277,7 +277,7 @@ const onDrawUndo = async () => {
   console.log(app.Connect.paint.records, "app.Connect.paint.records");
 };
 
-// 画笔开启
+// 畫筆開啟
 const onDraw = async (status) => {
   isBrushes.value = status;
   if (isBrushes.value) {
@@ -293,7 +293,7 @@ const onDraw = async (status) => {
   }
 };
 
-//打开输入框
+//打開輸入框
 const onFocus = () => {
   showInput.value = true;
   nextTick(() => {
@@ -302,7 +302,7 @@ const onFocus = () => {
   });
 };
 
-//发弹幕
+//發彈幕
 const sendText = async () => {
   if (text.value == "") {
     return;
@@ -343,18 +343,18 @@ const setReceiveMsg = async (res) => {
   } catch (error) {}
 };
 
-// 关闭输入框
+// 關閉輸入框
 const closeInput = () => {
   showInput.value = false;
   text.value = "";
 };
 
-// 开启成员
+// 開啟成員
 const openMember = () => {
   showMember.value = true;
   animateActive.value = true;
 };
-// 关闭成员
+// 關閉成員
 const closeMember = () => {
   animateActive.value = false;
   let t = setTimeout(() => {
@@ -375,7 +375,7 @@ const onMemberMuted = (item) => {
 
 
 const onMemberLeave = (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);
@@ -383,7 +383,7 @@ const onMemberLeave = (res) => {
     return tempArr;
   }, []);
   if (res.user.Role == "leader") {
-    Dialog.toast({ content: `主持人离开了房间` });
+    Dialog.toast({ content: `主持人離開了房間` });
     // emit("closeSocket");
   }
 };
@@ -415,7 +415,7 @@ const startFollow = (app) => {
     });
   });
 
-  // 加入房间成功
+  // 加入房間成功
   socket.value.on("join", (data) => {
     connectStatus.value = 1;
     if (role.value == "customer") {
@@ -432,7 +432,7 @@ const startFollow = (app) => {
       return tempArr;
     }, []);
 
-    //更新分享链接
+    //更新分享鏈接
     shareLink.value = getUrl(window.location.href, [
       {
         key: "mode",
@@ -483,7 +483,7 @@ const startFollow = (app) => {
 
   socket.value.on("action", (data) => {
     if (data.type == "error") {
-      Dialog.toast({ content: `房间未找到`, type: "error" });
+      Dialog.toast({ content: `房間未找到`, type: "error" });
       emit("closeSocket");
     } else if (data.type == "danmumsg") {
       setReceiveMsg(data.data);
@@ -495,9 +495,9 @@ const startFollow = (app) => {
       onDraw(data.open);
       if (role.value == "customer") {
         if (data.open) {
-          Dialog.toast({ content: `主持人开启画笔` });
+          Dialog.toast({ content: `主持人開啟畫筆` });
         } else {
-          Dialog.toast({ content: `主持人关闭画笔` });
+          Dialog.toast({ content: `主持人關閉畫筆` });
         }
       }
     } else if (data.type == "user-join") {
@@ -509,19 +509,19 @@ const startFollow = (app) => {
       setUserWords(data);
       //禁言
     } else if (data.type == "user-leave") {
-      // 房间解散
+      // 房間解散
       onMemberLeave(data);
     }
   });
 
-  // 同屏带看
+  // 同屏帶看
   socket.value.on("sync", (data) => {
     if (role.value == "customer") {
       app.Connect.follow.receive(data);
     }
   });
 
-  // 画笔
+  // 畫筆
   socket.value.on("paint", (data) => {
     if (role.value == "customer") {
       app.Connect.paint.receive(data);

src/components/RTC/PageShopping.vue

@@ -1,640 +0,0 @@
-<template>
-    <!-- <div class="navigation" v-if="orgin!='fashilong'"> -->
-    <div class="navigation">
-        <div class="wrapper sync" v-show="users.length">
-            <div>
-                <ul>
-                    <li
-                        v-for="(user, key) in users"
-                        :key="key"
-                        @click="user.userId == userId && onSetMic()"
-                        :class="[user.role]"
-                    >
-                        <img
-                            :src="
-                                user.avatar ||
-                                    require('images/vrhouse/avatar_default.jpg')
-                            "
-                            alt
-                        />
-                        <span class="voice" v-show="user.onlineStatus && user.voiceStatus != 1">
-                            <i
-                                class="iconfont"
-                                :class="[
-                                    user.voiceStatus == 2
-                                        ? 'iconscene_mic_open'
-                                        : 'iconscene_mic_off',
-                                ]"
-                            ></i>
-                        </span>
-                        <span class="status" v-show="!user.onlineStatus">
-                            <span> 已离开 </span>
-                        </span>
-                        <template v-if="user.onlineStatus">
-                            <div v-if="user.userId == userId">我</div>
-                            <div v-else-if="user.role == 'leader'">发起人</div>
-                        </template>
-                    </li>
-                    <li v-if="users.length < 5" class="add" @click="onInvite">
-                        <i class="iconfont icon_plus"></i>
-                    </li>
-                </ul>
-            </div>
-            <button @click="showExit = true">退出</button>
-        </div>
-        <div class="chat" ref="chat">
-            <transition-group appear tag="ul">
-                <li v-for="item in message" :key="item.id">
-                    <div>
-                        <div class="message">
-                            <img
-                                :src="
-                                    item.avatar ||
-                                        $config.getStaticResource(
-                                            'img/apps/vrhouse/avatar_default.jpg'
-                                        )
-                                "
-                                alt
-                            />
-                            <span v-if="item.nickname" v-html="`「${item.nickname}」`"></span>
-                            <span>{{ item.content }}</span>
-                        </div>
-                    </div>
-                </li>
-            </transition-group>
-        </div>
-        <x-window :show="showExit" :show-close="false">
-            <div class="exit-tips">
-                <h4>温馨提示</h4>
-                <div>确定要结束“一起逛”吗？</div>
-                <button type="button" @click="onExit(false)">继续逛</button>
-                <button type="submit" @click="onExit(true, true)">结束</button>
-            </div>
-        </x-window>
-        <x-window :show="showDissolve" :show-close="false">
-            <div class="exit-tips">
-                <h4>结束提醒</h4>
-                <div>
-                    发起人已结束一起逛模式，房间即
-                    <br />将关闭
-                </div>
-                <button type="button" @click="onExit(true, true)">确定</button>
-            </div>
-        </x-window>
-        <x-window :show="showFull" :show-close="false">
-            <div class="exit-tips">
-                <h4>温馨提示</h4>
-                <div>一起逛房间已满人，是否继续逛</div>
-                <button type="button" @click="onExit(true, true)">
-                    继续逛
-                </button>
-                <button type="submit" @click="onBack()">取消</button>
-            </div>
-        </x-window>
-        <x-window :show="showOver" :show-close="false">
-            <div class="exit-tips">
-                <h4>温馨提示</h4>
-                <div>一起逛已结束了，是否继续逛</div>
-                <button type="button" @click="onExit(true, true)">
-                    继续逛
-                </button>
-                <button type="submit" @click="onBack()">取消</button>
-            </div>
-        </x-window>
-        <Paint :show-paint="showPaint" />
-    </div>
-</template>
-<script>
-import { mapGetters } from "vuex"
-import XWindow from "../shared/XWindow"
-import browser from "@/utils/browser"
-import Paint from "./paint"
-import { startCall, stopCall, sendToApp, sendToH5, getRole, getUserId, close } from "../../socket"
-export default {
-    components: {
-        Paint,
-        XWindow,
-    },
-    data() {
-        return {
-            role: null,
-            userId: null,
-            users: [],
-            showExit: false,
-            showDissolve: false,
-            showOver: false,
-            showFull: false,
-            showCart: false,
-            showPaint: false,
-            goods: null,
-            chats: [],
-            orgin:browser.urlQueryValue('origin').toLowerCase(),
-        }
-    },
-    watch: {
-        users() {
-            if (!this.showCart) {
-                this.showCart = true
-                sendToApp("cart", true)
-            }
-        },
-        message() {
-            this.$nextTick(() => {
-                setTimeout(() => {
-                    // this.chats.shift()
-                }, 3000)
-            })
-            // this.$nextTick(() => {
-            //     this.message.length &&
-            //         this.$refs.chat
-            //             .querySelector("li:last-child")
-            //             .scrollIntoView({
-            //                 behavior: "smooth",
-            //                 block: "end",
-            //                 inline: "end",
-            //             });
-            // });
-        },
-    },
-    computed: {
-        ...mapGetters({
-            player: "player",
-        }),
-        message() {
-            return this.chats
-        },
-    },
-    created() {
-        if(browser.urlQueryValue('origin').toLowerCase() == '4dplaza'){
-            this.showPaint = true
-        }
-
-        this.role = getRole()
-        this.userId = getUserId()
-
-        const self = this
-        function syncAction(data) {
-            if (data.type == "full") {
-                self.isNoTips() && (self.showFull = true)
-                return
-            }
-            // 更新用户列表
-            if (data.type == "users") {
-                let leader
-                for (let i = 0; i < data.data.length; i++) {
-                    if (data.data[i].role == "leader") {
-                        leader = data.data.splice(i, 1)
-                        break
-                    }
-                }
-                if (leader) {
-                    data.data = leader.concat(data.data)
-                }
-                if (!data.data.some(item => item.role == "leader")) {
-                    // 房间已解散
-                    self.isNoTips() && (self.showOver = true)
-                    return
-                }
-                self.users = data.data
-            } else if (data.type == "userChange") {
-                let leader
-                for (let i = 0; i < data.data.length; i++) {
-                    if (data.data[i].role == "leader") {
-                        leader = data.data.splice(i, 1)
-                        break
-                    }
-                }
-                if (leader) {
-                    data.data = leader.concat(data.data)
-                }
-                self.users = data.data
-                if (self.role == "leader" && data.user.role != "leader") {
-                    self.showMessage(`${data.isOnline ? "进入" : "离开"}房间`, data.user)
-                } else if (self.role != "leader" && data.user.role == "leader") {
-                    data.user.nickname = "发起人"
-                    self.showMessage(`${data.isOnline ? "进入" : "离开"}房间`, data.user)
-                }
-            } else if (data.type == "online") {
-                if (self.role == "leader" && data.user.role != "leader") {
-                    self.showMessage(`${data.isOnline ? "进入" : "退出"}房间`, data.user)
-                }
-            }
-            // 解散房间
-            else if (data.type == "dissolve") {
-                self.isNoTips() && (self.showDissolve = true)
-            } else if (data.type == "close") {
-                self.isNoTips() && (self.showOver = true)
-            } else if (data.type == "tagShow") {
-                self.$bus.emit("shop/tag/show", data.data)
-            } else if (data.type == "tagSwitch") {
-                self.$bus.emit("shop/tag/switch", data.data)
-            } else if (data.type == "tagBigimg") {
-                self.$bus.emit("shop/tag/bigimg", data.data)
-            }
-        }
-
-        // function userTagShow(show) {
-        //     self.showPaint = !show
-        //     sendToH5({
-        //         type: "tagShow",
-        //         data: show,
-        //     })
-        // }
-
-        // function userTagSwitch(index) {
-        //     sendToH5({
-        //         type: "tagSwitch",
-        //         data: index,
-        //     })
-        // }
-
-        this.$once("hook:beforeDestroy", () => {
-            this.$bus.off("shop/sync/action", syncAction)
-            if (this.role == "leader") {
-                // this.$bus.off("shop/tag/onshow", userTagShow)
-                // this.$bus.off("shop/tag/onswitch", userTagSwitch)
-            }
-        })
-        this.$bus.on("shop/sync/action", syncAction)
-
-        if (this.role == "leader" && this.orgin!='fashilong') {
-            sendToApp("invite")
-            // this.$bus.on("shop/tag/onshow", userTagShow)
-            // this.$bus.on("shop/tag/onswitch", userTagSwitch)
-        }
-        
-        if (browser.urlHasValue("shopping") && this.player.progres != -1) {
-            this.$bus.on("loaded", () => {
-                startCall()
-                sendToApp('ready',this.$config.projectNum)
-            })
-        } else {
-            startCall()
-            sendToApp('ready',this.$config.projectNum)
-        }
-
-        window.CHECKEXIT = function() {
-            self.showExit = true
-        }
-    },
-    destroyed() {
-        window.CHECKEXIT = null
-    },
-    methods: {
-        onInvite() {
-            sendToApp("invite")
-        },
-        onSetMic() {
-            sendToApp("mic")
-        },
-        onExit(isExit, isNewRoom) {
-            this.showExit = false
-            this.showDissolve = false
-            this.showFull = false
-            this.showOver = false
-            if (isExit) {
-                if (this.goods) {
-                    if (this.goods.realShopUrl) {
-                        // 外部链接时隐藏购物车
-                        sendToApp("cart", false)
-                        window.location.href = this.goods.realShopUrl
-                    } else {
-                        window.parent.wx.miniProgram.navigateTo({
-                            url: "/pages/goods/goods?id=" + this.goods.id,
-                        })
-                    }
-                } else {
-                    if (isNewRoom) {
-                        sendToApp("newRoom")
-                        setTimeout(() => {
-                            this.$parent.setPage("Home")
-                        }, 300)
-                    } else {
-                        stopCall()
-                        sendToApp("exit")
-                    }
-                }
-            }
-            this.goods = null
-        },
-        onBack() {
-            this.showExit = false
-            this.showDissolve = false
-            this.showFull = false
-            this.showOver = false
-            stopCall()
-            sendToApp("back")
-        },
-        isNoTips() {
-            return !this.showExit && !this.showFull && !this.showDissolve && !this.showOver
-        },
-        exitToDetail(goods) {
-            this.goods = goods
-            this.showExit = true
-        },
-        showMessage(content, user) {
-            this.chats.push({
-                id: `${Date.now()}${this.chats.length}`,
-                avatar: user.avatar,
-                nickname: user.nickname,
-                content: content,
-            })
-
-            setTimeout(() => {
-                this.chats.shift()
-            }, 1500)
-        },
-    },
-}
-</script>
-<style lang="scss" scoped>
-ul,
-li {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-}
-.navigation {
-    position: absolute;
-    left: 0.5rem;
-    right: 0.5rem;
-    bottom: 0.8rem;
-    height: 1.5rem;
-    z-index: 999;
-    .wrapper {
-        padding: 0.2rem;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 100%;
-        height: 100%;
-        border-radius: 0.15rem;
-        background-color: rgba(0, 0, 0, 0.3);
-        &.sync {
-            &::before,
-            &::after {
-                content: "";
-                top: 0;
-                left: 0;
-                position: absolute;
-                width: 100%;
-                height: 100%;
-                border: 2px solid @color;
-                border-radius: 50%;
-                opacity: 0;
-                z-index: -1;
-            }
-            &::before {
-                background: rgba(5, 200, 174, 0.6) !important;
-                animation: shadow1 1.5s ease-out;
-                animation-iteration-count: infinite;
-                box-shadow: 1px 1px 30px @color;
-            }
-            &::after {
-                background: rgba(5, 200, 174, 0.6) !important;
-                animation: shadow2 1.5s ease-out;
-                animation-iteration-count: infinite;
-                box-shadow: 1px 1px 30px @color;
-            }
-        }
-        > div {
-            flex: 1;
-            width: 100%;
-            height: 100%;
-            ul {
-                width: 100%;
-                height: 100%;
-                display: flex;
-                align-items: center;
-            }
-            li {
-                position: relative;
-                width: 1.1rem;
-                height: 100%;
-                margin-right: 0.3rem;
-                border-radius: 0.15rem;
-                overflow: hidden;
-                &.add {
-                    background: rgba(255, 255, 255, 0.7);
-                    border: 1px solid rgba(255, 255, 255, 0.2);
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    i {
-                        font-size: 1rem;
-                        margin-top: 2px;
-                    }
-                }
-                img {
-                    width: 100%;
-                    height: 100%;
-                    overflow: hidden;
-                    border-radius: 0.15rem;
-                }
-                span.voice {
-                    padding: 0.01rem 0.04rem;
-                    position: absolute;
-                    right: 0.1rem;
-                    top: 0.1rem;
-                    border-radius: 0.1rem;
-                    background-color: rgba(0, 0, 0, 0.5);
-                    i {
-                        font-size: 0.3rem;
-                        &.iconscene_mic_off {
-                            color: #f56c6c;
-                        }
-                        &.speak {
-                            animation: speak 1s ease-out;
-                            animation-iteration-count: infinite;
-                        }
-                    }
-                }
-                span.status {
-                    position: absolute;
-                    width: 100%;
-                    height: 100%;
-                    background-color: rgba(0, 0, 0, 0.5);
-                    color: #fff;
-                    left: 0;
-                    top: 0;
-                    font-size: 0.2rem;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    span {
-                        white-space: nowrap;
-                    }
-                }
-                div {
-                    padding: 0.025rem;
-                    position: absolute;
-                    left: 0;
-                    bottom: -0.01rem;
-                    font-size: 0.2rem;
-                    border-bottom-left-radius: 0.15rem;
-                    white-space: nowrap;
-                    padding-left: 0.05rem;
-                    padding-right: 0.1rem;
-                }
-                &.leader {
-                    div {
-                        background: linear-gradient(
-                            to right,
-                            #ed5d18 0%,
-                            rgba(255, 255, 255, 0.5) 100%
-                        );
-                    }
-                }
-                &.customer {
-                    div {
-                        background: linear-gradient(
-                            to right,
-                            #ffcd3c 0%,
-                            rgba(255, 255, 255, 0.5) 100%
-                        );
-                    }
-                }
-            }
-        }
-        > button {
-            color: #fff;
-            width: 1.4rem;
-            height: 0.8rem;
-            border: none;
-            border-radius: 0.1rem;
-            background-color: #f56c6c;
-            font-size: 0.3rem;
-        }
-    }
-}
-.exit-tips {
-    padding: 0.8rem;
-    padding-bottom: 0;
-    h4 {
-        margin: 0;
-        font-size: 0.5rem;
-    }
-    div {
-        margin: 0.7rem 0;
-        font-size: 0.37rem;
-    }
-
-    button {
-        width: 100%;
-        margin-bottom: 0.5rem;
-        background-color: #fff;
-        font-size: 0.4rem;
-        color: #444;
-        height: 1.1rem;
-        border: none;
-        border-radius: 0.15rem;
-        &[type="submit"] {
-            color: #fff;
-            background-color: transparent;
-            border: solid 1px rgba(255, 255, 255, 0.85);
-        }
-    }
-}
-.chat {
-    pointer-events: none;
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 1.7rem;
-    z-index: 0;
-    li {
-        margin-top: 0.2rem;
-        > div {
-            display: inline-block;
-        }
-        div.message {
-            display: flex;
-            align-items: center;
-            justify-content: flex-start;
-            height: 0.7rem;
-            border-radius: 0.7rem;
-            background: rgba(0, 0, 0, 0.1);
-            padding-right: 0.2rem;
-            img {
-                width: 20px;
-                height: 20px;
-                overflow: hidden;
-                border-radius: 50%;
-                margin-left: 0.1rem;
-            }
-            span {
-                font-size: 14px;
-            }
-        }
-    }
-}
-
-.v-enter {
-    opacity: 0;
-    transform: translateY(20px);
-}
-.v-leave-to {
-    opacity: 0;
-    transform: translateY(-50px);
-
-    //transform: translateY(-200px);
-}
-
-.v-enter-active,
-.v-leave-active {
-    transition: all 0.6s ease;
-}
-
-.v-move {
-    transition: all 0.6s ease;
-}
-.v-leave-active {
-    position: absolute;
-}
-
-/deep/.share-x-window {
-    left: 1.2rem;
-    right: 1.2rem;
-    border-radius: 0.15rem;
-    @media (orientation: landscape) {
-        left: 50% !important;
-        right: auto !important;
-    }
-}
-@keyframes shadow1 {
-    0% {
-        transform: scale(0);
-        opacity: 1;
-    }
-
-    100% {
-        transform: scale(1);
-        opacity: 0;
-    }
-}
-@keyframes shadow2 {
-    0% {
-        transform: scale(0);
-        opacity: 1;
-    }
-
-    100% {
-        transform: scale(0.6);
-        opacity: 0;
-    }
-}
-@keyframes speak {
-    0% {
-        color: #fff;
-    }
-    30% {
-        color: #f4cba6;
-    }
-    50% {
-        color: #fbb77a;
-    }
-    100% {
-        color: #e75f04;
-    }
-}
-</style>

src/components/RTC/Trtccom.vue

@@ -1,10 +1,27 @@
 <template>
   <div class="trtccom" v-if="show">
     <Device @switchDevice="switchDevice" @canUseDevice="canUseDevice" />
-    <div class="local" :class="{disabledlocal:role=='customer'}" id="local" v-if="isJoined"></div>
+    <div class="local" :class="{ disabledlocal: role == 'customer' }" id="local" v-if="isJoined">
+      <div class="micBox">
+        <img v-if="muteAudioLeader" :src="require('@/assets/images/rtcLive/mic_off@2x.png')" alt="" />
+        <i v-else class="speak_mic"></i>
+      </div>
+    </div>
 
     <template v-if="isJoined && invitedRemoteStreams.length > 0">
-      <div class="local" :data-role="item.userId_" :class="{disabledlocal:item.userId_.indexOf('customer')>-1}" v-for="(item, i) in invitedRemoteStreams" :id="item.getId()" :key="i"></div>
+      <div
+        class="local"
+        :data-role="item.userId_"
+        :class="{ disabledlocal: item.userId_.indexOf('customer') > -1 }"
+        v-for="(item, i) in invitedRemoteStreams"
+        :id="item.getId()"
+        :key="i"
+      >
+        <div class="micBox">
+          <img v-if="muteAudioLeader" :src="require('@/assets/images/rtcLive/mic_off@2x.png')" alt="" />
+          <i v-else class="speak_mic"></i>
+        </div>
+      </div>
     </template>
 
     <div class="videoBox userVideo" v-show="props.videoMuted">
@@ -31,6 +48,9 @@ const invitedRemoteStreams = ref([]);
 
 const role = ref(browser.getURLParam("role"));
 
+const muteAudioLeader = ref(false);
+const muteVideoLeader = ref(false);
+
 const isJoined = computed(() => store.getters["rtc/isJoined"]);
 const isPublished = computed(() => store.getters["rtc/isPublished"]);
 const userSig = computed(() => store.getters["rtc/userSig"]);
@@ -60,6 +80,9 @@ watch(
     } else {
       localStream.unmuteAudio();
     }
+    if (role.value == "leader") {
+      muteAudioLeader.value = props.audioMuted;
+    }
   }
 );
 
@@ -92,19 +115,21 @@ TRTC.checkSystemRequirements().then((checkResult) => {
 });
 
 async function createLocalStream() {
-  let isLeader = role.value == 'leader'
+  let isLeader = role.value == "leader";
   try {
     localStream = TRTC.createStream({
       userId: store.getters["rtc/userId"],
       audio: true,
       video: isLeader,
-      cameraId: isLeader ? store.getters["rtc/videoDeviceId"] : '',
+      cameraId: isLeader ? store.getters["rtc/videoDeviceId"] : "",
       microphoneId: store.getters["rtc/audioDeviceId"],
     });
     isLeader && localStream.setVideoProfile("480p");
 
     await localStream.initialize();
-  } catch (error) {}
+  } catch (error) {
+    console.log(error, "createStream");
+  }
 }
 
 async function handleJoin() {
@@ -121,7 +146,6 @@ async function handleJoin() {
     });
     installEventHandlers();
 
-
     await localClient.join({ roomId: parseInt(store.getters["rtc/roomId"], 10) });
     store.commit("rtc/setIsJoined", true);
     // inviteLink.value = store.commit("rtc/createShareLink");
@@ -237,18 +261,30 @@ function uninstallEventHandlers() {
 
 function handleMuteVideo(event) {
   console.log(`[${event.userId}] mute video`);
+  if (event.userId.indexOf("leader") > -1) {
+    muteVideoLeader.value = true;
+  }
 }
 
 function handleMuteAudio(event) {
-  console.log(`[${event.userId}] mute audio`);
+  if (event.userId.indexOf("leader") > -1) {
+    muteAudioLeader.value = true;
+  }
+  console.log(event, `[] mute audio`);
 }
 
 function handleUnmuteVideo(event) {
   console.log(`[${event.userId}] unmute video`);
+  if (event.userId.indexOf("leader") > -1) {
+    muteVideoLeader.value = false;
+  }
 }
 
 function handleUnmuteAudio(event) {
   console.log(`[${event.userId}] unmute audio`);
+  if (event.userId.indexOf("leader") > -1) {
+    muteAudioLeader.value = false;
+  }
 }
 
 function handleError(error) {
@@ -297,10 +333,10 @@ async function handleStreamSubscribed(event) {
   const remoteStream = event.stream;
 
   if (remoteStream.userId_ == store.getters["rtc/userId"]) {
-    return
+    return;
   }
 
-  if (!invitedRemoteStreams.value.some(item=>item.userId_==remoteStream.userId_)) {
+  if (!invitedRemoteStreams.value.some((item) => item.userId_ == remoteStream.userId_)) {
     invitedRemoteStreams.value.push(remoteStream);
   }
 
@@ -361,8 +397,8 @@ let canUseDevice = () => {
     height: 70px;
     position: fixed;
     z-index: 9999;
-    top: 0.69rem;
-    left: 0.53rem;
+    top: 20px;
+    left: 20px;
     border-radius: 50%;
     overflow: hidden;
     background: url(~@/assets/images/rtcLive/avatar_small@2x.png) center center no-repeat;
@@ -370,8 +406,8 @@ let canUseDevice = () => {
   .videoBox {
     width: 72px;
     height: 72px;
-    top: 0.67rem;
-    left: 0.52rem;
+    top: 18px;
+    left: 18px;
     position: fixed;
     z-index: 99999;
     .loadingTip {
@@ -392,8 +428,33 @@ let canUseDevice = () => {
       }
     }
     > img {
-      width: 1.94rem;
-      height: 1.94rem;
+      width: 100%;
+      height: 100%;
+    }
+  }
+  .micBox {
+    width: 100%;
+    height: 16px;
+    background: rgba(0, 0, 0, 0.3);
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 100;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .speak_mic {
+      display: block;
+      background-size: 720px auto;
+      width: 12px;
+      height: 12px;
+      background-image: url(~@/assets/images/rtcLive/speed.png);
+      // width: 0.69rem;
+      // height: 0.69rem;
+      animation: myAnimation 3s steps(59) infinite;
+    }
+    > img {
+      width: 12px;
     }
   }
   .disabledlocal {
@@ -401,4 +462,14 @@ let canUseDevice = () => {
     visibility: hidden !important;
   }
 }
+
+@keyframes myAnimation {
+  0% {
+    background-position: 0px 0px;
+  }
+
+  100% {
+    background-position: -708px 0px;
+  }
+}
 </style>

src/components/RTC/dialog/checkBrowser.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="checkBrowser">
     <i class="iconfont iconshow_cancel" @click="closeCheckBrowser"></i>
-    <p class="title">建议使用以下最新版本的浏览器用于通话</p>
+    <p class="title">建議使用以下最新版本的瀏覽器用於通話</p>
     <div class="browser_list">
       <div class="item" v-for="i,index in browserList" :key="index">
         <div class="browser_icon">

src/components/RTC/dialog/createdRoom.vue

@@ -3,15 +3,15 @@
     <div class="created_dialog">
       <div class="blurBox"></div>
       <div class="content">
-        <div class="dialog_title" v-if="role == 'leader'">创建带看场景</div>
-        <div class="dialog_title" v-else>进入带看场景</div>
+        <div class="dialog_title" v-if="role == 'leader'">創建帶看場景</div>
+        <div class="dialog_title" v-else>進入帶看場景</div>
         <div class="user_name">
           <input
             class="input_name"
             maxlength="20"
             v-model.trim="userName"
             type="text"
-            :placeholder="role == 'leader' ? ' 请输入带看主持人名称' : '请输入您的昵称'"
+            :placeholder="role == 'leader' ? ' 請輸入帶看主持人名稱' : '請輸入您的昵稱'"
           />
           <span class="limitNum">{{ userName.length }}/20</span>
         </div>
@@ -20,7 +20,7 @@
         </div> -->
         <div class="created_btn">
           <div class="created_cancel" @click="closeCreated">取消</div>
-          <div class="created_confirm" @click="createdConfirm">确认</div>
+          <div class="created_confirm" @click="createdConfirm">確認</div>
         </div>
       </div>
     </div>
@@ -78,7 +78,7 @@ export default {
     },
     createdConfirm() {
       if (this.userName == "") {
-        Dialog.toast({ content: '请输入您的昵称', type: 'error' })
+        Dialog.toast({ content: '請輸入您的昵稱', type: 'error' })
         return;
       }
       let name = encodeURIComponent(this.userName);

src/components/RTC/dialog/index.vue

@@ -7,7 +7,7 @@
         <p class="dialog_desc">{{ props.desc }}</p>
         <div class="created_btn">
           <div class="end_cancel" @click="endLiveCancel">取消</div>
-          <div class="end_confirm" @click="endLiveConfirm">确认</div>
+          <div class="end_confirm" @click="endLiveConfirm">確認</div>
         </div>
       </div>
     </div>
@@ -29,11 +29,11 @@ const socket = computed(() => store.getters["rtc/socket"]);
 const props = defineProps({
   title: {
     type: String,
-    default: "温馨提示",
+    default: "溫馨提示",
   },
   desc: {
     type: String,
-    default: "是否结束带看",
+    default: "是否結束帶看",
   },
 });
 

src/components/RTC/dialog/share.vue

@@ -12,7 +12,7 @@
 
         <div class="created_btn">
           <div class="created_cancel" @click="closeCreated">取消</div>
-          <div class="created_confirm"  ref="copylink$" :data-clipboard-text="shareLink" @click="createdConfirm">复制分享</div>
+          <div class="created_confirm"  ref="copylink$" :data-clipboard-text="shareLink" @click="createdConfirm">復製分享</div>
         </div>
       </div>
     </div>
@@ -29,7 +29,7 @@ const emit = defineEmits(["closeDialog"]);
 const props = defineProps({
   title: {
     type: String,
-    default: "邀请好友",
+    default: "邀請好友",
   },
   shareLink: {
     type: String,

src/components/RTC/trtc/Device.vue

@@ -34,11 +34,19 @@ const updateDevice = async () => {
   });
 
   if (!videoDeviceId.value) {
-    store.commit("rtc/setVideoDeviceId", cameraItems[0].deviceId);
+    if (cameraItems[0]) {
+      store.commit("rtc/setVideoDeviceId", cameraItems[0].deviceId);
+    } else {
+      Dialog.toast({ content: `無法獲取您的攝像頭權限`, type: "error" });
+    }
   }
 
   if (!audioDeviceId.value) {
-    store.commit("rtc/setAudioDeviceId", microphoneItems[0].deviceId);
+    if (microphoneItems[0]) {
+      store.commit("rtc/setAudioDeviceId", microphoneItems[0].deviceId);
+    } else {
+      Dialog.toast({ content: `無法獲取您的麥克風權限`, type: "error" });
+    }
   }
 };
 
@@ -59,7 +67,7 @@ navigator.mediaDevices
   })
   .catch((error) => {
     console.log(error, "error");
-    Dialog.toast({ content: `请授权您的麦克风${role.value == "leader" ? "和摄像头" : ""}权限`, type: "error" });
+    Dialog.toast({ content: `請授權您的麥克風${role.value == "leader" ? "和攝像頭" : ""}權限`, type: "error" });
   });
 
 navigator.mediaDevices.ondevicechange = updateDevice;