index.vue 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146
  1. <template>
  2. <!-- 主区域 start -->
  3. <div id="PageRtcLive">
  4. <chat v-show="true" :chatList="chatList"></chat>
  5. <!-- 控制条 start -->
  6. <div class="controlBar" v-if="!showInput">
  7. <div class="saySomething" @click="onFocus">
  8. <!-- <i class="speakIcon"
  9. :class="{'dis':!user_info.IsWords}"></i> -->
  10. <span>说点什么~</span>
  11. <!-- <span>已被禁言</span> -->
  12. <div class="disSpeakBtn"></div>
  13. </div>
  14. <!-- <div style="text-align: right; width: 100%">连接中...</div> -->
  15. <div class="control_btn">
  16. <div class="brushesBack"></div>
  17. <div class="brushes"></div>
  18. <div class="invitation"></div>
  19. <div v-if="isNativeLeader" class="members" @click="openMember"></div>
  20. <template>
  21. <div class="mic_on"></div>
  22. <div class="mic_no"></div>
  23. leader
  24. </template>
  25. <!-- <div style="font-size: 0.65rem">
  26. <Icon type="scene" />
  27. </div> -->
  28. <div class="exit"></div>
  29. </div>
  30. </div>
  31. <!-- 控制条 start -->
  32. <!-- 主区域 end -->
  33. <!-- 输入框 start-->
  34. <div class="layer" v-if="showInput" @click.stop="closeText">
  35. <div class="inputBox" @click.stop>
  36. <div class="msgBox">
  37. <input
  38. id="input_msg"
  39. type="text"
  40. maxlength="50"
  41. v-model.trim="text"
  42. :placeholder="`说点什么~`"
  43. />
  44. <span
  45. class="iconsend_icon"
  46. :class="{ disable: text == '' }"
  47. @click.stop="sendText"
  48. >发送</span
  49. >
  50. </div>
  51. </div>
  52. </div>
  53. <!-- 输入框 end-->
  54. </div>
  55. </template>
  56. <script lang="ts" setup>
  57. import { computed, nextTick, onMounted, ref } from "vue";
  58. import { getApp } from "/@/hooks/userApp";
  59. import { initSocketEvent } from "./roomControl";
  60. import { createSocket } from "/@/hooks/userSocket";
  61. import browser from "/@/utils/browser";
  62. import { useRtcStore } from "/@/store/modules/rtc";
  63. import type { SocketParams, RoleType } from "/@/store/modules/rtc";
  64. import chat from "./chat.vue";
  65. import consola from "consola";
  66. const rtcStore = useRtcStore();
  67. const isNativeLeader = computed(() => rtcStore.role == "leader");
  68. const showInput = ref(false);
  69. const text = ref<string>("");
  70. const chatList = computed(() => rtcStore.chatList);
  71. const userInfo = computed(() => rtcStore.chatList);
  72. //设置socket 参数
  73. const initParams: SocketParams = {
  74. userId:
  75. browser.getURLParam("vruserId") ||
  76. `user_${browser.getURLParam("role")}${Math.floor(
  77. Math.random() * 100000000
  78. )}`,
  79. roomId:
  80. browser.getURLParam("roomId") ||
  81. `room_${Math.floor(Math.random() * 100000000)}`,
  82. role: (browser.getURLParam("role") as RoleType) || "leader",
  83. avatar: browser.getURLParam("avatar"),
  84. nickname: browser.getURLParam("name"),
  85. mode: browser.getURLParam("mode"),
  86. };
  87. consola.info({
  88. message: initParams,
  89. tag: "socket参数",
  90. });
  91. rtcStore.setSocketParams(initParams);
  92. const socket = createSocket();
  93. initSocketEvent(socket);
  94. onMounted(() => {
  95. const app = getApp();
  96. });
  97. /* method */
  98. function closeText(): void {
  99. showInput.value = false;
  100. text.value = "";
  101. }
  102. function sendText(): void {
  103. if (text.value == "") {
  104. return;
  105. }
  106. let data = {
  107. role: rtcStore.role,
  108. mode: rtcStore.mode,
  109. Nickname: rtcStore.nickname,
  110. UserId: rtcStore.userId,
  111. text: text.value,
  112. };
  113. consola.info({
  114. message: data,
  115. tag: "发送信息",
  116. });
  117. socket.emit("action", {
  118. type: "danmumsg",
  119. data,
  120. });
  121. rtcStore.addToChatList(data);
  122. document.getElementById("input_msg")?.blur();
  123. closeText();
  124. }
  125. function onFocus(): void {
  126. showInput.value = true;
  127. nextTick(() => {
  128. document.getElementById("input_msg")?.focus();
  129. });
  130. }
  131. function openMember(): void {}
  132. </script>
  133. <style scoped lang="scss">
  134. @import "./chatroom.scss";
  135. </style>