uniapp-小程序（精简版 Vue3）

<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 class="TUIChat">
      <MessageList />
      <MessageInput />
    </div>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import MessageInput from '../../TUIKit/components/MessageInput/MessageInput.vue';
import MessageList from '../../TUIKit/components/MessageList/MessageList.vue';
import { useLoginState, useConversationListState } from '../../TUIKit';

const userID = ref('');
const isLoggedIn = ref(false);
const showChat = ref(false)
const { login } = useLoginState();
const { setActiveConversation } = useConversationListState();

const handleLogin = async () => {
  // 必填信息
  // 测试TUIKit时可以从腾讯云IM控制台获取userSig
  // 生产环境部署请从您的服务器获取
  // 查看文档：https://cloud.tencent.com/document/product/269/32688
  await login({
    userId: userID.value,
    userSig: '',
    sdkAppId: 0,
  });
  wx.$globalCallPagePath = 'TUIKit/components/CallView/CallView';
  isLoggedIn.value = true;
  userID.value = ''
};

const startChat = () => {
  if (!userID.value) return;
  const conversationID = `C2C${userID.value}`;
  setActiveConversation(conversationID);
  showChat.value = true
};
</script>

<style scoped>
.TUIChat {
  display: flex;
  flex-direction: column;
  width: 100vw;
  height: 100vh;
}
</style>

	{
	    "path": "TUIKit/components/CallView/CallView",
		"style": {
			"navigationBarTitleText": "uni-app"
		}
	}