Merge branch 'master' of http://192.168.0.115:3000/chenzhiguang/cdfg_h5

src/components/Controls/Panel/Guide.vue

@@ -1,11 +1,8 @@
 <template>
   <div v-show="player.showWidgets" class="root-panel">
-    <div class="guide-panel" :style="{ '--urlbg': `url(${require('@/assets/images/icon/bg.png')})` }">
+    <div class="guide-panel" >
       <div class="g-con">
-        <div class="back" @click.stop="playTour">
-          <ui-icon type="back"></ui-icon>
-          <div>返回</div>
-        </div>
+        
         <div class="swiper-container" id="sw-guide">
           <ul class="swiper-wrapper"  v-if="tours.length > 1">
             <li
@@ -36,6 +33,10 @@
             </li>
           </ul>
         </div>
+        <div class="back" @click.stop="playTour">
+          <ui-icon type="back"></ui-icon>
+          <div>返回</div>
+        </div>
       </div>
     </div>
   </div>
@@ -137,56 +138,7 @@ const categorylist = ref([
   },
 ]);
 
-const brandlist = ref([
-  {
-    img: "show_3d_normal",
-    name: "GAP 蓋璞",
-  },
-  {
-    img: "show_3d_normal",
-    name: "MOOST·理MOOST·理MOOST·理MOOST·理MOOST·理",
-  },
-  {
-    img: "show_3d_normal",
-    name: "H&M",
-  },
-  {
-    img: "show_3d_normal",
-    name: "GAP 蓋璞",
-  },
-  {
-    img: "show_3d_normal",
-    name: "MOOST·理",
-  },
-  {
-    img: "show_3d_normal",
-    name: "H&M",
-  },
-  {
-    img: "show_3d_normal",
-    name: "GAP 蓋璞",
-  },
-  {
-    img: "show_3d_normal",
-    name: "MOOST·理",
-  },
-  {
-    img: "show_3d_normal",
-    name: "H&M",
-  },
-  {
-    img: "show_3d_normal",
-    name: "GAP 蓋璞",
-  },
-  {
-    img: "show_3d_normal",
-    name: "MOOST·理",
-  },
-  {
-    img: "show_3d_normal",
-    name: "H&M",
-  },
-]);
+const brandlist = ref([]);
 
 const brandScroll = () => {
   nextTick(() => {
@@ -195,7 +147,7 @@ const brandScroll = () => {
       new Swiper("#sw-guide", {
         freeMode: true,
         slidesPerView: "auto",
-        spaceBetween: 4,
+        spaceBetween: 6,
         on: {
           touchMove(swiper, e) {
             e.stopPropagation();
@@ -327,43 +279,42 @@ onMounted(() => {
 <style lang="scss" scoped>
 .root-panel {
   position: absolute;
-  bottom: 60px;
-  left: 0.2rem;
-  right: 0.2rem;
+  bottom: 46px;
+  left: 0;
+  right: 0;
   z-index: 99;
+  width: 100%;
+  background: rgba(0,0,0,0.3000);
+  border: 1px solid rgba(255,255,255,0.2000);
   .guide-panel {
     width: 100%;
-    height: 50px;
     position: relative;
-    &::before {
-      position: absolute;
-      bottom: -34px;
-      content: "";
-      background-image: var(--urlbg);
-      background-size: 100% auto;
-      display: inline-block;
-      width: 100%;
-      height: 30px;
-    }
     .g-con {
       background: rgba(0, 0, 0, 0.3);
       border-radius: 4px;
       border: 1px solid rgba(255, 255, 255, 0.2);
-      width: 90%;
+      width: 100%;
       height: 100%;
       margin: 0 auto;
       padding: 6px 10px;
       box-sizing: border-box;
       display: flex;
       align-items: center;
+      flex-direction: column;
       .back {
         text-align: center;
-        width: 40px;
+        width: 100%;
         font-size: 0;
         margin-right: 10px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-top: solid 1px rgba(255,255,255,0.2000);
+        height: 48px;
+
         > div {
-          font-size: 12px;
-          margin-top: 2px;
+          font-size: 14px;
+          margin-left: 10px;
         }
       }
       #sw-guide {
@@ -372,26 +323,14 @@ onMounted(() => {
         overflow: hidden;
         padding-right: 2px;
         position: relative;
-        &::after {
-          position: absolute;
-          right: -1px;
-          bottom: 0;
-          content: "";
-          display: inline-block;
-          height: 100%;
-          z-index: 99;
-          width: 17px;
-          background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
-          opacity: 0.4;
-          pointer-events: none;
-        }
+        padding-bottom: 6px;
         > ul {
           > li {
-            width: 70px;
-            height: 36px;
             border-radius: 2px;
             position: relative;
             font-size: 0;
+            width: 154px;
+            height: 82px;
             overflow: hidden;
             background-size: cover;
             > img {

src/components/Controls/Panel/Main.vue

@@ -1,103 +1,139 @@
 <template>
-  <Panel v-show="player.showWidgets" :isOpen="isOpen">
-    <div @click="toggleOpen" class="menu color">
-      <div class="logo">
-        <img :src="require('@/assets/images/icon/logo.png')" alt="" />
-        <p>cdf澳門上葡京店</p>
-      </div>
-      <div class="vline"></div>
-      <ul>
-        <li v-if="tours.length > 0">
-          <ui-icon type="preview" @click.stop="playTour"></ui-icon>
-          <div>導覽</div>
-        </li>
-        <li @click.stop="onClickMenu(item)" v-for="(item, i) in menulist" :key="i">
-          <ui-icon :type="item.icon"></ui-icon>
-          <div>{{ item.name }}</div>
-        </li>
-
-        <li v-if="showdaogou">
-          <ui-icon
-            type="guided_shopping"
-            @click.stop="
-              onClickMenu({
-                icon: 'guided_shopping',
-                id: 'guided_shopping',
-                name: '導購',
-              })
-            "
-          ></ui-icon>
-          <div>導購</div>
-        </li>
-
-        <li>
-          <ui-icon
-            type="shopping"
-            @click.stop="
-              onClickMenu({
-                icon: 'shopping',
-                id: 'shopping',
-                name: '購物',
-              })
-            "
-          ></ui-icon>
-          <div>購物</div>
-        </li>
-      </ul>
-    </div>
-
-    <div class="toolbar color">
-      <div class="navigation">
-        <div class="h3">專櫃導航</div>
-        <div class="swiper-container" id="sw-navigation">
-          <ul class="swiper-wrapper">
-            <li
-              class="swiper-slide"
-              :class="{ liactive: item.sceneUrl === currentM && item.inPosition.indexOf(currentPose) > -1 }"
-              @click.stop="onClickShop(item)"
-              v-for="(item, i) in brandlist"
-              :key="i"
-            >
-              <div v-if="item.shopLogo" class="img" :style="{ 'background-image': `url(${item.shopLogo})` }"></div>
-              <div class="name" v-if="item.shopName">
-                <span :class="{ active: item.shopName.length > 6 }">
-                  {{ item.shopName }}
-                </span>
-              </div>
-            </li>
-          </ul>
+  <div>
+    <Panel v-show="player.showWidgets" :isOpen="isOpen">
+      <div @click="toggleOpen" class="menu color">
+        <div class="logo">
+          <img :src="require('@/assets/images/icon/logo.png')" alt="" />
+          <p>cdf澳門上葡京店</p>
         </div>
-      </div>
+        <div class="vline"></div>
+        <ul>
+          <li v-if="tours.length > 0">
+            <ui-icon type="preview" @click.stop="playTour"></ui-icon>
+            <div>導覽</div>
+          </li>
+          <li @click.stop="onClickMenu(item)" v-for="(item, i) in menulist" :key="i">
+            <ui-icon :type="item.icon"></ui-icon>
+            <div>{{ item.name }}</div>
+          </li>
+
+          <li v-if="showdaogou">
+            <ui-icon
+              type="guided_shopping"
+              @click.stop="
+                onClickMenu({
+                  icon: 'guided_shopping',
+                  id: 'guided_shopping',
+                  name: '導購',
+                })
+              "
+            ></ui-icon>
+            <div>導購</div>
+          </li>
 
-      <div class="category">
-        <div class="swiper-container" id="sw-category">
-          <ul class="swiper-wrapper">
-            <li
-              class="swiper-slide"
-              :class="{ categoryactive: '' == currentCategory.id }"
+          <li>
+            <ui-icon
+              type="shopping"
               @click.stop="
-                onClickCategory({
-                  id: '',
-                  categoryName: '全部',
+                onClickMenu({
+                  icon: 'shopping',
+                  id: 'shopping',
+                  name: '購物',
                 })
               "
-            >
-              <div>全部</div>
-            </li>
-            <li
-              @click.stop="onClickCategory(item)"
-              :class="{ categoryactive: item.id == currentCategory.id }"
-              class="swiper-slide"
-              v-for="(item, i) in categorylist"
-              :key="i"
-            >
-              <div>{{ item.categoryName }}</div>
-            </li>
-          </ul>
+            ></ui-icon>
+            <div>購物</div>
+          </li>
+        </ul>
+      </div>
+
+      <div class="toolbar color">
+        <div class="navigation">
+          <div class="h3">
+            <span>專櫃導航</span>
+            <div @click="showShopList = true">
+              <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
+              搜索專櫃
+            </div>
+          </div>
+          <div class="swiper-container" id="sw-navigation">
+            <ul class="swiper-wrapper">
+              <li
+                class="swiper-slide"
+                :class="{ liactive: item.sceneUrl === currentM && item.inPosition.indexOf(currentPose) > -1 }"
+                @click.stop="onClickShop(item)"
+                v-for="(item, i) in brandlist"
+                :key="i"
+              >
+                <div v-if="item.shopLogo" class="img" :style="{ 'background-image': `url(${item.shopLogo})` }"></div>
+                <div class="name" v-if="item.shopName">
+                  <span :class="{ active: item.shopName.length > 6 }">
+                    {{ item.shopName }}
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
         </div>
+
+        <div class="category">
+          <div class="swiper-container" id="sw-category">
+            <ul class="swiper-wrapper">
+              <li
+                class="swiper-slide"
+                :class="{ categoryactive: '' == currentCategory.id }"
+                @click.stop="
+                  onClickCategory({
+                    id: '',
+                    categoryName: '全部',
+                  })
+                "
+              >
+                <div>全部</div>
+              </li>
+              <li
+                @click.stop="onClickCategory(item)"
+                :class="{ categoryactive: item.id == currentCategory.id }"
+                class="swiper-slide"
+                v-for="(item, i) in categorylist"
+                :key="i"
+              >
+                <div>{{ item.categoryName }}</div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </Panel>
+    <teleport :to="`#app`">
+      <div v-show="showShopList" class="shoplist">
+        <div class="l-title">
+          專櫃列表 ({{ searchList.length }})
+          <ui-icon type="close" @click="showShopList = false" />
+        </div>
+
+        <div class="search">
+          <img :src="require(`@/assets/images/icon/search.svg`)" alt="" />
+          <input v-model="searchKey" type="text" placeholder="專櫃搜索" />
+          <ui-icon class="close" v-if="searchKey.length > 0" @click.stop="searchKey = ''" type="state_f"></ui-icon>
+        </div>
+
+        <ul v-if="searchList.length > 0">
+          <li @click.stop="onClickShop(item)" v-for="(item, idx) in searchList" :key="idx">
+            <div class="img" :style="{ 'background-image': `url(${item.shopLogo})` }"></div>
+            <div class="name" v-if="item.shopName">
+              <span>
+                {{ item.shopName }}
+              </span>
+            </div>
+            <ui-icon class="right" type="right"></ui-icon>
+          </li>
+        </ul>
+
+        <div class="noresult" v-else>暫無結果</div>
       </div>
-    </div>
-  </Panel>
+    </teleport>
+  </div>
 </template>
 
 <script setup>
@@ -111,7 +147,9 @@ import browser from "@/utils/browser";
 const store = useStore();
 
 const isOpen = ref(false);
+const searchKey = ref("");
 
+const showShopList = ref(false);
 
 const toggleOpen = () => {
   isOpen.value = !isOpen.value;
@@ -182,6 +220,8 @@ const categorylist = ref([]);
 
 const brandlist = ref([]);
 
+const searchList = ref([]);
+
 const brandScroll = () => {
   nextTick(() => {
     let t = setTimeout(() => {
@@ -269,6 +309,14 @@ watch(
   }
 );
 
+watch(
+  () => searchKey.value,
+  (val, old) => {
+    console.log(searchKey.value);
+    getSearchList();
+  }
+);
+
 const getShoplist = async () => {
   let res = await apis.get_shop_list({
     categoryId: currentCategory.value.id,
@@ -277,6 +325,13 @@ const getShoplist = async () => {
   brandScroll();
 };
 
+const getSearchList = async () => {
+  let res = await apis.get_shop_list({
+    shopName: searchKey.value,
+  });
+  searchList.value = res.data;
+};
+
 onMounted(() => {
   useApp().then((app) => {
     getCategorylist();
@@ -347,6 +402,23 @@ onMounted(() => {
     .h3 {
       font-size: 14px;
       padding: 0 14px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      > div {
+        width: 96px;
+        height: 24px;
+        background: rgba(0, 0, 0, 0.5);
+        border-radius: 24px;
+        display: flex;
+        font-size: 12px;
+        justify-content: center;
+        align-items: center;
+      }
+      img {
+        width: 12px;
+        margin-right: 6px;
+      }
     }
     .swiper-container {
       width: 100%;
@@ -441,6 +513,110 @@ onMounted(() => {
   }
 }
 
+.shoplist {
+  position: fixed;
+  z-index: 999;
+  width: 100%;
+  height: 30px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 80vh;
+  background: rgba(0, 0, 0, 0.8);
+  border-radius: 10px 10px 0px 0px;
+  padding: 12px 15px;
+  .l-title {
+    font-size: 16px;
+    font-weight: bold;
+    color: #ffffff;
+    text-align: center;
+    position: relative;
+    width: 100%;
+
+    i {
+      position: absolute;
+      right: 0;
+      top: 2px;
+    }
+  }
+
+  .search {
+    width: 100%;
+    height: 34px;
+    background: rgba(46, 46, 46, 0.9);
+    border-radius: 20px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 8px;
+    margin-top: 20px;
+    > img {
+      width: 16px;
+      opacity: 0.8;
+    }
+    > input {
+      text-align: left;
+      font-size: 16px;
+      width: 100%;
+      color: #fff;
+      margin-left: 10px;
+    }
+    .close {
+      color: #7d7e80;
+    }
+  }
+
+  > ul {
+    width: 100%;
+    height: calc(100% - 80px);
+    overflow-y: auto;
+    > li {
+      width: 100%;
+      height: 60px;
+      position: relative;
+      font-size: 0;
+      overflow: hidden;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      margin: 18px 0;
+      .img {
+        width: 60px;
+        height: 60px;
+        background-size: contain;
+        flex-shrink: 0;
+        border-radius: 4px;
+        margin-right: 10px;
+      }
+      .name {
+        width: 100%;
+        font-size: 12px;
+        left: 0;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        text-align: left;
+        padding: 2px 4px;
+        box-sizing: border-box;
+        word-break: break-all;
+        > span {
+          display: inline-block;
+          white-space: nowrap;
+        }
+      }
+      .right {
+        font-size: 14px;
+      }
+    }
+  }
+}
+
+.noresult {
+  text-align: center;
+  margin-top: 20vh;
+}
+
 @keyframes wordsLoop {
   0% {
     transform: translateX(100%);

src/components/RTC/PageRtcLive.vue

@@ -22,8 +22,8 @@
         <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="mode == '2' && user_list.length < 5" class="invitation" @click="openDialog('dialogShare', shareLink)"></div>
-        <div v-if="mode == '2' && role == 'leader'" class="members" @click="openMember"></div>
+        <div v-if="user_list.length < 5" class="invitation" @click="openDialog('dialogShare', shareLink)"></div>
+        <div v-if="role == 'leader'" class="members" @click="openMember"></div>
         <div v-if="!disableMic" @click="handleMuteAduio" :class="{ mic_off: audioMuted }" class="mic_on"></div>
         <div v-if="disableMic" class="mic_no"></div>
         <div v-if="role == 'leader'" @click="handleMuteVideo" :class="[videoMuted ? 'video_no' : 'video_on', videoDeviceId ? '' : 'disabled']"></div>
@@ -228,7 +228,6 @@ const onAllMuted = (res) => {
   }
 
   user_list.value.forEach((item) => {
-    
     user_info.value.IsMuted = res.muted;
     item.IsMuted = res.muted;
     if (role.value == "customer") {
@@ -405,7 +404,7 @@ const userCanSpeak = (item) => {
 };
 
 const onGetOuT = (data) => {
-  console.log(data.id, 'data.id == user_info.value.UserId,', user_info.value.UserId);
+  console.log(data.id, "data.id == user_info.value.UserId,", user_info.value.UserId);
   if (data.id == user_info.value.UserId) {
     emit("closeSocket");
     Dialog.toast({ content: `您已被移除` });
@@ -432,15 +431,13 @@ const startFollow = (app) => {
     connectStatus.value = 1;
     if (role.value == "customer") {
       socket.value.emit("action", { type: "user-init" });
-      if(data.user.IsMuted){
-        disableMic.value = true
+      if (data.user.IsMuted) {
+        disableMic.value = true;
       }
     }
 
     isJoined.value = true;
 
-    
-
     user_info.value = data.user;
     user_list.value = data.members.reduce(function (tempArr, item) {
       if (tempArr.findIndex((ele) => ele.UserId === item.UserId) === -1) {

src/components/shared/Guide.vue

@@ -41,7 +41,7 @@ useApp().then((app) => {
   top: 0;
   width: 100%;
   height: 100%;
-  z-index: 109;
+  z-index: 10999999999;
   background-color: rgba(0, 0, 0, 0.7);
 }
 .user-guide {