imChat/src/App.vue

<template>
  <div :class="['home']" :id="'preloadedImages'">
    <main class="home-main">
      <div class="home-main-box">
        <div class="home-TUIKit">
          <div class="home-TUIKit-main">
            <div class="conversation">
              <n-tabs
                style="padding-left: 22px; --n-tab-padding: 6px 0; --n-tab-gap: 34px; --n-tab-text-color: #000; --n-tab-text-color-hover: #0f0f0f; --n-tab-text-color-active: #000; --n-tab-font-weight-active: 600; padding-top: 6px; --n-bar-color: #198cfe"
                :bar-width="20"
                :value="currentModel"
                @update:value="
                  (val: any) => {
                    currentModel = val;
                  }
                "
              >
                <n-tab-pane name="message" tab="聊天"></n-tab-pane>
                <n-tab-pane name="group" tab="群聊" v-if="platform != 'orchestra'"></n-tab-pane>
                <n-tab-pane name="contact" tab="联系人" v-if="platform != 'orchestra'"></n-tab-pane>
              </n-tabs>

              <TUIConversation v-show="currentModel === 'message'" @current="handleCurrentConversation" :displayOnlineStatus="displayOnlineStatus" />
              <TUIGroup v-if="platform != 'orchestra' && currentModel === 'group'" @current="handleCurrentConversation" :displayOnlineStatus="displayOnlineStatus" />
              <TUIPerson v-if="platform != 'orchestra' && currentModel === 'contact'" @current="handleCurrentConversation" :displayOnlineStatus="displayOnlineStatus" />

              <div class="imDisconnent" v-if="disconnectStatus">
                <p>
                  <img src="./assets/icon-tips.png" class="iconTips" />
                  {{ disconnentContent }}
                </p>
                <span class="btnConnent" @click="dialogShow = true">{{ disconnectBtnText }}</span>
              </div>
            </div>
            <div class="chat">
              <TUIChat :isMsgNeedReadReceipt="isMsgNeedReadReceipt" :isNeedTyping="true" :isNeedEmojiReact="true">
                <div class="chat-default"></div>
              </TUIChat>
            </div>
          </div>
        </div>
      </div>
    </main>
    <i class="closeModal" @click="onClose"></i>

    <DialogTUI :show="dialogShow" :isHeaderShow="true" title="提示" :is-footer-show="true" @submit="handleManage()" @update:show="(e) => (dialogShow = e)">
      <p>聊天功能已断开，是否重新连接?</p>
    </DialogTUI>
  </div>
</template>

<script lang="ts">
import { computed, defineComponent, getCurrentInstance, onMounted, onUnmounted, reactive, toRefs } from "vue";
// import { useI18nLocale } from '../../TUIKit/TUIPlugin/TUIi18n';
import { genTestUserSig } from "./TUIKit";
import { useStore } from "vuex";
// import DialogTUI from "../../components/dialogTUi/index.vue";
import DialogTUI from "./TUIKit/TUIComponents/components/dialogTUi/index.vue";
import { SDKAppID, secretKey, userID } from "./main.ts";
import { eventGlobal } from "./helpers";

export default defineComponent({
  components: {
    DialogTUI,
  },
  setup(props, context) {
    const instance = getCurrentInstance();
    // const locale = useI18nLocale();
    const TUIKit: any = instance?.appContext.config.globalProperties.$TUIKit;
    const store = useStore && useStore();
    // const taskList = computed(() => store.state.taskList);
    // const dragRef = ref();
    const isMsgNeedReadReceipt = computed(() => JSON.parse(store.state.isMsgNeedReadReceipt));
    const displayOnlineStatus = computed(() => JSON.parse(store.state.displayOnlineStatus));
    const data = reactive({
      currentConversationID: "",
      currentModel: "message",
      platform: sessionStorage.getItem("platform"), // 平台
      // env: TUIKit.TUIEnv
      disconnectStatus: false, // 是否断开链接
      disconnentContent: "聊天功能已断开，是否重新连接？",
      disconnectBtnText: "连接",
      dialogShow: false,
    });

    const onClose = () => {
      if (window.parent) {
        window.parent.postMessage(
          {
            api: "onImClose",
          },
          "*"
        );
      }
    };

    const handleCurrentConversation = (value: string) => {
      data.currentModel = "message";
      data.currentConversationID = value;
    };

    /** 账号被挤下线 */
    const onKiicedOut = (e?: any) => {
      data.dialogShow = true;
      data.disconnectStatus = true;
      store?.commit("setImConnent", false);
    };

    const handleManage = () => {
      console.log("manage", userID);
      TUIKit.login({
        userID: userID,
        userSig: genTestUserSig({
          SDKAppID,
          secretKey,
          userID,
        }).userSig, // The password with which the user logs in to IM. It is the ciphertext generated by encrypting information such as userID.For the detailed generation method, see Generating UserSig
      })
        .then(() => {
          data.disconnectStatus = false;
          store?.commit("setImConnent", true);
        })
        .catch(() => {
          data.disconnentContent = "连接失败，请重试";
          data.disconnectBtnText = "重新连接";
          store?.commit("setImConnent", false);
        });
    };

    onMounted(() => {
      /** 账号被挤下线 */
      TUIKit.tim.on(TUIKit.TIM.EVENT.KICKED_OUT, (e: any) => onKiicedOut(e));

      eventGlobal.on("reConnectIm", (state: boolean) => {
        if (state) {
          data.dialogShow = true;
          data.disconnectStatus = true;
          store?.commit("setImConnent", false);
        }
      });
    });

    onUnmounted(() => {
      TUIKit.tim.off(TUIKit.TIM.EVENT.KICKED_OUT, onKiicedOut);
    });

    return {
      ...toRefs(data),
      // dragRef,
      // taskList,
      handleCurrentConversation,
      isMsgNeedReadReceipt,
      displayOnlineStatus,
      onClose,
      handleManage,
    };
  },
});
</script>

<style scoped lang="scss" src="./index.scss"></style>