@ndscnj/roomkit-web-vue3 25.12.2417 → 25.12.2419

package/src/TUIRoom/components/RoomFooter/VoteControl/MoreControlH5.vue

@@ -1,40 +1,122 @@
 <template>
-  <div v-if="moreControlConfig.visible" class="more-control-container">
-    <icon-button
-      :is-active="sidebarName === 'vote'"
-      :title="t('Vote')"
-      @click-icon="toggleMoreSidebar"
-    >
-      <img class="ndsc-img-box" src="../../../assets/imgs/vote-icon.png" alt=""/>
-    </icon-button>
+  <div>
+    <div v-if="moreControlConfig.visible" class="more-control-container">
+      <icon-button
+        v-tap="showMore"
+        :is-active="sidebarName === 'more'"
+        :title="t('More')"
+      >
+        <IconExtension size="24" />
+      </icon-button>
+    </div>
+    <div v-if="showMoreContent" ref="moreContentRef" class="show-more-content">
+      <div class="control-compent">
+        <chat-control
+          v-if="roomStore.isSpeakAfterTakingSeatMode"
+          @click="handleControlClick('chatControl')"
+        />
+        <contact-control @click="handleControlClick('contactControl')" />
+        <invite-control
+          @show-overlay="handleShowOverlay"
+          @click="handleControlClick('inviteControl')"
+        />
+      </div>
+      <div v-tap="handleCancelControl" class="close">{{ t('Cancel') }}</div>
+    </div>
   </div>
 </template>
 <script setup lang="ts">
-import { IconMore } from '@tencentcloud/uikit-base-component-vue3';
+import { ref, onMounted, onUnmounted, defineEmits } from 'vue';
+import { IconExtension } from '@tencentcloud/uikit-base-component-vue3';
 import IconButton from '../../common/base/IconButton.vue';
 import userMoreControl from './useMoreControlHooks';
+import ChatControl from '../ChatControl.vue';
+import InviteControl from '../InviteControl.vue';
+import ContactControl from '../ContactControl.vue';
+import { useRoomStore } from '../../../stores/room';
+import bus from '../../../hooks/useMitt';
+import vTap from '../../../directives/vTap';
 import { roomService } from '../../../services';
-import { defineEmits} from 'vue';
+
 const moreControlConfig = roomService.getComponentConfig('MoreControl');
-const { t, basicStore, sidebarName } = userMoreControl();
-const emit = defineEmits(['on-vote']);
-function toggleMoreSidebar() {
-  if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === 'vote') {
-    basicStore.setSidebarOpenStatus(false);
-    basicStore.setSidebarName('');
-    return;
+const showMoreContent = ref(false);
+const moreContentRef = ref();
+
+const { t, sidebarName } = userMoreControl();
+const roomStore = useRoomStore();
+const emit = defineEmits(['show-overlay']);
+function showMore() {
+  showMoreContent.value = true;
+}
+
+function handleCancelControl() {
+  showMoreContent.value = false;
+}
+function handleControlClick(name: string) {
+  bus.emit('experience-communication', name);
+}
+
+function handleShowOverlay(data: { name: string; visible: boolean }) {
+  showMoreContent.value = false;
+  emit('show-overlay', data);
+}
+
+function handleDocumentClick(event: MouseEvent) {
+  if (showMoreContent.value && !moreContentRef.value.contains(event.target)) {
+    showMoreContent.value = false;
   }
-  basicStore.setSidebarOpenStatus(true);
-  basicStore.setSidebarName('vote');
-  emit('on-vote', {
-    name: 'onVote',
-    visible:basicStore.isSidebarOpen,
-  });
 }
+
+onMounted(() => {
+  document?.addEventListener('click', handleDocumentClick, true);
+});
+
+onUnmounted(() => {
+  document?.removeEventListener('click', handleDocumentClick, true);
+});
 </script>
 <style lang="scss" scoped>
-.ndsc-img-box{
-  width: 24px;
-  height: 24px
+.show-more-content {
+  position: absolute;
+  bottom: 15px;
+  left: 5%;
+  width: 90%;
+  height: 17vh;
+  padding: 10px;
+  border-radius: 13px;
+  animation-name: popup;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
+}
+
+@keyframes popup {
+  from {
+    bottom: 0;
+  }
+
+  to {
+    bottom: 15px;
+  }
+}
+
+.control-compent {
+  display: flex;
+}
+
+.close {
+  position: relative;
+  top: 10%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  padding: 10px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+  border-radius: 8px;
+  color: var(--text-color-primary);
+  background-color: var(--button-color-secondary-default);
 }
 </style>

package/src/TUIRoom/components/RoomFooter/VoteControl/MoreControlPC.vue

@@ -14,10 +14,10 @@ import { IconMore } from '@tencentcloud/uikit-base-component-vue3';
 import IconButton from '../../common/base/IconButton.vue';
 import userMoreControl from './useMoreControlHooks';
 import { roomService } from '../../../services';
-import { defineEmits} from 'vue';
+
 const moreControlConfig = roomService.getComponentConfig('MoreControl');
 const { t, basicStore, sidebarName } = userMoreControl();
-const emit = defineEmits(['on-vote']);
+
 function toggleMoreSidebar() {
   if (basicStore.setSidebarOpenStatus && basicStore.sidebarName === 'vote') {
     basicStore.setSidebarOpenStatus(false);
@@ -26,15 +26,11 @@ function toggleMoreSidebar() {
   }
   basicStore.setSidebarOpenStatus(true);
   basicStore.setSidebarName('vote');
-  emit('on-vote', {
-    name: 'onVote',
-    visible:basicStore.isSidebarOpen,
-  });
 }
 </script>
 <style lang="scss" scoped>
-.ndsc-img-box{
-  width: 24px;
-  height: 24px
-}
+  .ndsc-img-box{
+    width:24px;
+    height: 24px
+  }
 </style>

package/src/TUIRoom/components/RoomFooter/index/indexH5.vue

@@ -10,15 +10,6 @@
       :display-mode="MediaSettingDisplayMode.Icon"
       v-tap="() => handleControlClick('videoControl')"
     />
-    <voteControl
-      class="center-container-item"
-      @click="handleControlClick('voteControl')"
-      @on-vote="onVote"
-    >
-    <template #content>
-      <slot name="content"></slot>
-    </template>
-    </voteControl>
     <chat-control
       v-if="!roomStore.isSpeakAfterTakingSeatMode"
       v-tap="() => handleControlClick('chatControl')"
@@ -56,7 +47,6 @@ import MasterApplyControl from '../ManageStageControl.vue';
 import MemberApplyControl from '../ApplyControl/MemberApplyControl.vue';
 import MoreControl from '../MoreControl/index';
 import AIControl from '../AIControl.vue';
-import voteControl from '../VoteControl';
 import bus from '../../../hooks/useMitt';
 import vTap from '../../../directives/vTap';
 
@@ -64,11 +54,8 @@ import useRoomFooter from './useRoomFooterHooks';
 
 const { roomStore, isMaster, isAdmin, isAudience } = useRoomFooter();
 
-const emit = defineEmits(['show-overlay','on-vote']);
-const onVote = (data: { name: string; visible: boolean }) => {
-  console.log(data,"data111")
-  emit('on-vote', { code: data.visible, message: 'vote' });
-};
+const emit = defineEmits(['show-overlay']);
+
 function handleControlClick(name: string) {
   bus.emit('experience-communication', name);
 }

package/src/TUIRoom/components/RoomSidebar/indexH5.vue

@@ -5,11 +5,6 @@
         <chat v-if="sidebarName === 'chat'" />
         <manage-member v-if="sidebarName === 'manage-member'" />
         <master-apply v-if="sidebarName === 'apply'" />
-        <room-vote v-if="sidebarName == 'vote'" >
-          <template #content>
-            <slot name="content"></slot>
-          </template>
-        </room-vote>
       </div>
     </template>
     <template #sidebarFooter>

package/src/TUIRoom/components/RoomVote/indexH5.vue

@@ -1,84 +1,141 @@
 <template>
-  <div class="more-container">
-    <slot name="content"></slot>
+  <div class="contact-container-main">
+    <div class="contact-title-main">
+      <div>{{ t('Contact us') }}</div>
+      <span v-tap="handleCloseContact" class="cancel">{{ t('Cancel') }}</span>
+    </div>
+    <div
+      v-for="item in contactContentList"
+      :key="item.id"
+      class="contact-content-main"
+    >
+      <span class="contact-title">{{ t(item.title) }}</span>
+      <span class="contact-content">{{ item.content }}</span>
+      <IconCopy v-tap="() => onCopy(item.copyLink)" class="copy" />
+    </div>
+    <span class="contact-bottom">
+      {{
+        t(
+          'If you have any questions, please feel free to join our QQ group or send an email'
+        )
+      }}
+    </span>
   </div>
 </template>
 
 <script setup lang="ts">
+import useRoomMoreControl from './useRoomMoreHooks';
+import { IconCopy } from '@tencentcloud/uikit-base-component-vue3';
+import vTap from '../../directives/vTap';
+
+const { t, onCopy, contactContentList } = useRoomMoreControl();
+
+const emit = defineEmits(['on-close-contact']);
+
+function handleCloseContact() {
+  emit('on-close-contact');
+}
 </script>
 
 <style lang="scss" scoped>
-.more-container {
-  padding: 20px;
+span {
+  padding-right: 5px;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 17px;
+}
 
-  .more-title {
-    display: flex;
-    align-items: center;
+.contact-container-main {
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  padding-bottom: 4vh;
+  border-radius: 15px 15px 0 0;
+  animation-name: popup;
+  animation-duration: 200ms;
+  background-color: var(--bg-color-operate);
 
-    .email-icon {
-      color: var(--uikit-color-gray-7);
+  @keyframes popup {
+    from {
+      transform: scaleY(0);
+      transform-origin: bottom;
     }
 
-    .more-notice {
-      width: 100%;
-      height: 22px;
-      padding-left: 8px;
-      font-size: 14px;
-      font-weight: 400;
-      line-height: 22px;
-      color: var(--text-color-primary);
+    to {
+      transform: scaleY(1);
+      transform-origin: bottom;
     }
   }
 
-  .more-item {
-    position: relative;
+  .contact-title-main {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
+    align-items: center;
+    padding: 30px 0 20px 25px;
+    font-family: 'PingFang SC';
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 24px;
+    color: var(--text-color-primary);
+  }
 
-    &:not(:first-child) {
-      margin-top: 20px;
+  .contact-content-main {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    width: 90%;
+    height: 15%;
+    padding: 0 0 0 25px;
+    margin-bottom: 10px;
+  }
 
-      .item-title {
-        width: 100%;
-        padding-bottom: 8px;
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 22px;
-        color: var(--text-color-primary);
-      }
+  .contact-title,
+  .contact-content {
+    width: 28%;
+    font-family: 'PingFang SC';
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    white-space: nowrap;
+    color: var(--text-color-primary);
+  }
 
-      .more-content {
-        position: relative;
-        box-sizing: border-box;
-        display: inline-block;
-        flex: 1;
-        height: 42px;
-        padding: 10px 30px 10px 16px;
-        overflow: hidden;
-        font-size: 14px;
-        font-weight: 500;
-        line-height: 22px;
-        text-overflow: ellipsis;
-        white-space: nowrap;
-        border-radius: 8px;
-        outline: none;
-        transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
-        color: var(--text-color-primary);
-        background-color: var(--bg-color-input);
-        border: 1px solid var(--stroke-color-module);
-      }
+  .contact-content {
+    width: 62%;
+    overflow: hidden;
+    font-size: 14px;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: var(--text-color-secondary);
+  }
 
-      .copy-icon {
-        position: absolute;
-        top: 45px;
-        right: 10px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        cursor: pointer;
-        color: var(--text-color-link);
-      }
-    }
+  .contact-bottom {
+    width: 90%;
+    padding-left: 40px;
+    font-family: 'PingFang SC';
+    font-size: 12px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 17px;
+    text-align: center;
+    color: var(--text-color-secondary);
   }
+
+  .copy {
+    margin-left: 30px;
+    color: var(--text-color-link);
+  }
+}
+
+.cancel {
+  flex: 1;
+  padding-right: 30px;
+  font-size: 16px;
+  font-weight: 400;
+  text-align: end;
 }
 </style>

package/src/TUIRoom/components/RoomVote/indexPC.vue

@@ -9,7 +9,6 @@
 
 <style lang="scss" scoped>
 .more-container {
-  padding: 20px;
 
   .more-title {
     display: flex;

package/src/TUIRoom/conference.vue

@@ -18,6 +18,9 @@
       @show-overlay="handleShowOverlay"
       @on-vote="onVote"
     >
+    <template #content>
+      <slot name="content"></slot>
+    </template>
     </room-footer>
     <room-sidebar @on-vote="onVote">
       <template #content>