feat(组件): 保存组件

src/components/chatRoom/index.vue

@@ -6,6 +6,12 @@
       :chatList="chatList"
       :currentUser="currentUser"
     ></chat>
+    <!-- 当前人数 start -->
+    <div class="member_number" >
+      <div class="members"></div>
+      <span>{{ members.length }}观看</span>
+    </div>
+    <!-- 当前人数 end -->
     <!-- 控制条 start -->
     <div class="controlBar" v-if="!showInput">
       <div class="saySomething" @click="onFocus">
@@ -43,7 +49,7 @@
           <div class="mic_no" v-if="!unref(disableMic)"></div>
         </template>
 
-        <div style="font-size: 0.65rem" v-if="isNativeLeader" >
+        <div style="font-size: 0.65rem" v-if="isNativeLeader">
           <ImageIcon type="scene" @click="showScenes = !showScenes" />
         </div>
         <div class="exit"></div>
@@ -82,7 +88,7 @@
     <!-- 用户列表 end -->
 
     <!-- 场景列表 start -->
-    <SceneList v-if="showScenes" @close="" @changeScene=""/>
+    <SceneList v-if="showScenes" @close="" @changeScene="" />
     <!-- 场景列表 end -->
   </div>
 </template>

src/components/chatRoom/memberList.vue

@@ -11,9 +11,8 @@
           <i class="iconfont"></i>
         </div>
         <div class="memberList">
-
           <div class="memberItem">
-            <div class="userMsg">
+            <!-- <div class="userMsg">
               <div class="avatar">
                 <img :src="currentListUser?.Avatar || avatarSmall" alt="" />
               </div>
@@ -23,7 +22,7 @@
               <div class="name" v-else>
                 {{ currentListUser?.Nickname }} (我)
               </div>
-            </div>
+            </div> -->
 
             <!-- <div class="button" v-if="user_info.Role == 'leader'">
                 <div
@@ -59,6 +58,9 @@
                 :wo="i.IsWords"
                 @click="userCanSpeak(i)"
               ></div>
+              <div
+                  class="micBtn mute_one_mic_on"
+                ></div>
               <!-- <div
                   class="micBtn"
                   :class="i.IsMuted ? 'mute_one_mic_off' : 'mute_one_mic_on'"
@@ -100,7 +102,9 @@ const emit = defineEmits(["openMember", "closeMember"]);
 function closeMember(): void {
   emit("closeMember");
 }
-function userCanSpeak() {}
+function userCanSpeak(member) {
+
+}
 </script>
 
 <style lang="scss">

src/components/custom/main-shop.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="panel" :class="{show}">
+    <span class="icon" @click="playing ? pause() : play()" v-if="existsGuide">
+      <Icon type="play" />
+    </span>
+    <span class="icon" @click="showScenes = !showScenes">
+      <Icon type="scene" />
+    </span>
+    <span class="ctrl" :class="{ show }" @click="show = !show">
+      <Icon type="arrows@2x" />
+    </span>
+  </div>
+  <SceneList 
+    v-if="showScenes" 
+    @close="showScenes = false" 
+    @changeScene="changeScene"
+  />
+</template>
+
+<script setup>
+import SceneList from './scene-list.vue'
+//import { useMusicPlayer } from "@/utils/sound";
+import { changeScene } from '@/store/room'
+import Icon from '@/components/icon/index.vue'
+import { ref, onUnmounted } from 'vue'
+import { getApp } from '@/app'
+
+const show = ref(false)
+const app = getApp()
+const playing = ref(false)
+const existsGuide = ref(false)
+const showScenes = ref(false)
+
+app.use('TourPlayer').then(player => {
+  console.log('===>', player)
+  player.on('play', ({ partId, frameId }) => (playing.value = true))
+  player.on('pause', ({ partId, frameId }) => (playing.value = false))
+  player.on('end', () => {
+    playing.value = false
+  })
+})
+
+// 需要双向绑定时，重新设置数据
+app.TourManager.on('loaded', tours => {
+  existsGuide.value = !!tours.length
+})
+
+const play = async () => {
+  const player = await app.TourManager.player
+  player.play()
+}
+
+const pause = async () => {
+  const player = await app.TourManager.player
+  player.pause()
+}
+
+// const timeout = setTimeout(() => {
+//   const a = useMusicPlayer()
+
+// }, 2000)
+
+// onUnmounted(() => clearTimeout(timeout))
+
+
+</script>
+
+<style lang="scss" scoped>
+.panel {
+  position: fixed;
+  top: calc(100% - 90px);
+  left: 0;
+  z-index: 22;
+  height: 44px;
+  background: rgba(0, 0, 0, 0.5);
+  border-radius: 0px 24px 24px 0px;
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  padding-right: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+  // width: 110px;
+  transform: translateX(calc(-100% + 30px));
+
+
+  &.show {
+    transform: translateX(0);
+  }
+
+  > .icon {
+    margin: 0 10px;
+  }
+}
+
+.icon {
+  font-size: 24px;
+  height: 1em;
+  color: #fff;
+
+  &.active {
+    color: #ED5D18;
+  }
+}
+
+.ctrl {
+  position: absolute;
+  right: 10px;
+  top: 50%;
+  transform: translateY(-50%) rotateZ(180deg);
+  font-size: 12px;
+
+  &.show {
+    transform: translateY(-50%);
+  }
+}
+</style>