cdfg_h5/src/components/RTC/index.vue

<template>
  <transition mode="out-in">
    <div>
      <dialogIndex @closeDialog="closeDialog" @confirmDialog="confirmDialog" v-if="dialog == 'dialogIndex'"></dialogIndex>
      <dialogShare :shareLink="shareLink" @closeDialog="closeDialog" v-if="dialog == 'dialogShare'"></dialogShare>
      <createdRoom v-if="showCreated" @closeCreated="closeCreated" @createdConfirm="createdConfirm()"></createdRoom>
      <PageRtcLive @closeSocket="confirmDialog" @openDialog="openDialog" v-if="show"></PageRtcLive>
    </div>
  </transition>
</template>

<script setup>
import PageRtcLive from "./PageRtcLive";
// import Draw from "./paint/Draw";
import createdRoom from "./dialog/createdRoom";
import dialogIndex from "./dialog/index.vue";
import dialogShare from "./dialog/share.vue";
import { Dialog } from "@/global_components/";
import browser from "@/utils/browser";
import { onMounted, watch, computed, ref, nextTick } from "vue";
import { useStore } from "vuex";
import { useApp, getApp } from "@/app";

const store = useStore();

const shareLink = ref("");
const dialog = ref("");
const show = ref(false);
const showPaint = ref(true);
const showCreated = ref(false);
const roomId = ref(browser.getURLParam("roomId"));
const role = ref(browser.getURLParam("role"));
const userName = ref(browser.getURLParam("name"));
const socket = computed(() => store.getters["rtc/socket"]);

const openDialog = (str, link) => {
  shareLink.value = link;
  dialog.value = str;
};
const closeDialog = (str, link) => {
  dialog.value = "";
  dialog.value = str;
};

const confirmDialog = async () => {
  await getApp().Connect.follow.exit();
  store.commit("rtc/setIsJoined", false);
  if (socket.value) {

    if (browser.getURLParam("role") == "leader") {
      socket.value.emit("action", { type: "leader-dismiss" });
    }

    socket.value.close();
    store.commit("rtc/setSocket", null);
  }

  let tempUrl = window.location.href;
  ["mode", "name", "role", "roomId", "vruserId"].forEach((item) => {
    tempUrl = browser.replaceQueryString(tempUrl, item, "");
  });
  history.replaceState(null, null, tempUrl);
  store.commit("rtc/setRole", "");

  store.commit("showShoppingguide", false);
  dialog.value = "";
};

const closeCreated = (str, link) => {
  store.commit("showShoppingguide", false);
  showCreated.value = false;
  showguide();
};

const createdConfirm = (str, link) => {
  showCreated.value = false;
  show.value = true;
  showguide();
};

const showguide = () => {
  if (!localStorage.getItem("user_guide")) {
    Dialog.confirm({
      showCloseIcon: false,
      okText: "我知道了",
      content:
        "<span style='font-size: 16px; line-height: 1.5;'>開發者已遵守收集、使用最終用戶個人信息有關的所有可適用法律、政策和法規，保護用戶個人信息安全。<span/>",
      title: "隱私條款：",
      single: true,
      func: (state) => {
        if (state == "ok") {
          localStorage.setItem("user_guide", Date.now());
        }
      },
    });
  }
};

onMounted(() => {
  useApp().then(async (sdk) => {
    await nextTick();
    if (userName.value) {
      createdConfirm();
    } else {
      showCreated.value = true;
      // showguide()
    }
  });
  // showCreated.value = true;
});
</script>

<style lang="scss" scoped></style>