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>
            <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>
  </div>
</template>

<script lang="ts">
import {
  computed,
  defineComponent,
  // getCurrentInstance,
  reactive,
  toRefs,
} from "vue";
// import { useI18nLocale } from '../../TUIKit/TUIPlugin/TUIi18n';
import { TUICore } from "./TUIKit";
import { useStore } from "vuex";

export default defineComponent({
  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
    });

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

    const handleCurrentConversation = (value: string) => {
      data.currentModel = "message";
      data.currentConversationID = value;
    };
    return {
      ...toRefs(data),
      // dragRef,
      // taskList,
      handleCurrentConversation,
      isMsgNeedReadReceipt,
      displayOnlineStatus,
      onClose,
    };
  },
});
</script>

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