ZhongMianShowMacao/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 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 (role.value == "leader") {
      socket.value.emit("action", { type: "leader-dismiss" });
    }

    socket.value.close();
    store.commit("rtc/setSocket", null);
    window.parent.postMessage(
      {
        source: "cdf",
        event: "exit",
        params: {
          role:role.value
        },
      },
      "*"
    );
  }

  let tempUrl = window.location.href;
  ["mode", "name", "role", "roomId", "userId"].forEach((item) => {
    tempUrl = browser.replaceQueryString(tempUrl, item, "");
  });
  history.replaceState(null, null, tempUrl);
  window.parent.postMessage(
    {
      source: "cdf",
      event: "urlReplace",
      params: {
        tempUrl,
      },
    },
    "*"
  );

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

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

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

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

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