uni-app 精简版（Vue3/Vue2）

npm i tuikit-atomicx-uniapp-wx@vue2

xcopy node_modules\\tuikit-atomicx-uniapp-wx .\\TUIKit /i /e
xcopy node_modules\\@trtc\\call-engine-lite-wx\\RTCCallEngine.wasm.br .\\static

<template>
  <view class="container">
    <div v-if="!showChat" class="simple-view">
      <input style="width: 90%; height: 60px; font-size: 18px; padding: 0 15px;" v-model="userID"
        :placeholder="isLoggedIn ? '输入对方ID' : '输入你的ID'" />
      <button :style="{ backgroundColor: isLoggedIn ? '#07C160' : '#006EFF' }"
        @click="isLoggedIn ? startChat() : handleLogin()">
        {{ isLoggedIn ? '开始聊天' : '登录' }}
      </button>
    </div>

    <div v-else class="TUIChat">
      <MessageList class="message-list" />
      <MessageInput />
    </div>
  </view>
</template>

<script lang='ts'>
// @ts-nocheck
import MessageInput from '../../TUIKit/components/MessageInput/MessageInput.vue';
import MessageList from '../../TUIKit/components/MessageList/MessageList.vue';
import { useLoginState, useConversationListState } from '../../TUIKit';

export default {
  name: 'ChatContainer',
  
  components: {
    MessageInput,
    MessageList
  },
  
  data() {
    return {
      userID: '',
      isLoggedIn: false,
      showChat: false
    }
  },
  
  methods: {
    async handleLogin() {
      const { login } = useLoginState();
      
      try {
        // 必填信息
        // 测试TUIKit时可以从腾讯云IM控制台获取userSig
        // 生产环境部署请从您的服务器获取
        // 查看文档：https://cloud.tencent.com/document/product/269/32688
        await login({
          userId: this.userID,
          userSig: '',
          sdkAppId: 0,
        });
        
        // 设置全局通话页面路径
        wx.$globalCallPagePath = 'TUIKit/components/CallView/CallView';
        
        this.isLoggedIn = true;
        this.userID = '';
      } catch (error) {
        console.error('登录失败:', error);
      }
    },
    
    startChat() {
      if (!this.userID) return;
      
      const { setActiveConversation } = useConversationListState();
      const conversationID = `C2C${this.userID}`;
      
      setActiveConversation(conversationID);
      this.showChat = true;
    }
  }
}
</script>

<style lang="scss" scoped>
.TUIChat {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;

  .message-list {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
    height: 100%;
  }
}
</style>