123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146 |
- <template>
- <!-- 主区域 start -->
- <div id="PageRtcLive">
- <chat v-show="true" :chatList="chatList"></chat>
- <!-- 控制条 start -->
- <div class="controlBar" v-if="!showInput">
- <div class="saySomething" @click="onFocus">
- <!-- <i class="speakIcon"
- :class="{'dis':!user_info.IsWords}"></i> -->
- <span>说点什么~</span>
- <!-- <span>已被禁言</span> -->
- <div class="disSpeakBtn"></div>
- </div>
- <!-- <div style="text-align: right; width: 100%">连接中...</div> -->
- <div class="control_btn">
- <div class="brushesBack"></div>
- <div class="brushes"></div>
- <div class="invitation"></div>
- <div v-if="isNativeLeader" class="members" @click="openMember"></div>
- <template>
- <div class="mic_on"></div>
- <div class="mic_no"></div>
- leader
- </template>
- <!-- <div style="font-size: 0.65rem">
- <Icon type="scene" />
- </div> -->
- <div class="exit"></div>
- </div>
- </div>
- <!-- 控制条 start -->
- <!-- 主区域 end -->
- <!-- 输入框 start-->
- <div class="layer" v-if="showInput" @click.stop="closeText">
- <div class="inputBox" @click.stop>
- <div class="msgBox">
- <input
- id="input_msg"
- type="text"
- maxlength="50"
- v-model.trim="text"
- :placeholder="`说点什么~`"
- />
- <span
- class="iconsend_icon"
- :class="{ disable: text == '' }"
- @click.stop="sendText"
- >发送</span
- >
- </div>
- </div>
- </div>
- <!-- 输入框 end-->
- </div>
- </template>
- <script lang="ts" setup>
- import { computed, nextTick, onMounted, ref } from "vue";
- import { getApp } from "/@/hooks/userApp";
- import { initSocketEvent } from "./roomControl";
- import { createSocket } from "/@/hooks/userSocket";
- import browser from "/@/utils/browser";
- import { useRtcStore } from "/@/store/modules/rtc";
- import type { SocketParams, RoleType } from "/@/store/modules/rtc";
- import chat from "./chat.vue";
- import consola from "consola";
- const rtcStore = useRtcStore();
- const isNativeLeader = computed(() => rtcStore.role == "leader");
- const showInput = ref(false);
- const text = ref<string>("");
- const chatList = computed(() => rtcStore.chatList);
- const userInfo = computed(() => rtcStore.chatList);
- //设置socket 参数
- const initParams: SocketParams = {
- userId:
- browser.getURLParam("vruserId") ||
- `user_${browser.getURLParam("role")}${Math.floor(
- Math.random() * 100000000
- )}`,
- roomId:
- browser.getURLParam("roomId") ||
- `room_${Math.floor(Math.random() * 100000000)}`,
- role: (browser.getURLParam("role") as RoleType) || "leader",
- avatar: browser.getURLParam("avatar"),
- nickname: browser.getURLParam("name"),
- mode: browser.getURLParam("mode"),
- };
- consola.info({
- message: initParams,
- tag: "socket参数",
- });
- rtcStore.setSocketParams(initParams);
- const socket = createSocket();
- initSocketEvent(socket);
- onMounted(() => {
- const app = getApp();
- });
- /* method */
- function closeText(): void {
- showInput.value = false;
- text.value = "";
- }
- function sendText(): void {
- if (text.value == "") {
- return;
- }
- let data = {
- role: rtcStore.role,
- mode: rtcStore.mode,
- Nickname: rtcStore.nickname,
- UserId: rtcStore.userId,
- text: text.value,
- };
- consola.info({
- message: data,
- tag: "发送信息",
- });
- socket.emit("action", {
- type: "danmumsg",
- data,
- });
- rtcStore.addToChatList(data);
- document.getElementById("input_msg")?.blur();
- closeText();
- }
- function onFocus(): void {
- showInput.value = true;
- nextTick(() => {
- document.getElementById("input_msg")?.focus();
- });
- }
- function openMember(): void {}
- </script>
- <style scoped lang="scss">
- @import "./chatroom.scss";
- </style>
|