uni-app 标准版（Vue3/Vue2）

<template>
  <view class="container">
    <view class="login-section">
      <text class="title">用户登录</text>
      <input class="input-box" v-model="userID" placeholder="请输入用户ID" placeholder-style="color:#BBBBBB;" />
      <button class="login-btn" @click="handleLogin">登录</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useLoginState } from '../../TUIKit'

const userID = ref('')

const handleLogin = async () => {
  // 必填信息
  // 测试TUIKit时可以从腾讯云IM控制台获取userSig
  // 生产环境部署请从您的服务器获取
  // 查看文档：https://cloud.tencent.com/document/product/269/32688
  await useLoginState().login({
    userId: userID.value,
    userSig: '',
    sdkAppId: 0,  // 这里替换您的 sdkAppId
  })
  wx.$globalCallPagePath = 'TUIKit/components/CallView/CallView'; // 配置全局监听页面路径
  uni.switchTab({ url: '/pages/conversation/conversation' })
}
</script>

<style scoped>
.container { padding: 40px; height: 100vh; }
.login-section { display: flex; flex-direction: column; align-items: center; margin-top: 100px; }
.title { font-size: 24px; font-weight: bold; margin-bottom: 40px; }
.input-box { width: 80%; height: 50px; border: 1px solid #DDD; border-radius: 8px; padding: 0 15px; margin-bottom: 20px; }
.login-btn { width: 80%; height: 50px; background: #006EFF; color: white; border-radius: 8px; }
</style>

<template><view class="create-conversation-page"><UserPicker :maxCount="maxCount" @confirm="handleConfirm" /><CreateGroup v-if="showGroupForm" @close="handleCloseGroupForm" @submit="handleGroupSubmit" /></view></template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { useConversationListState } from '../../TUIKit/index';
import UserPicker from '../../TUIKit/components/UserPicker/UserPicker.vue';
import CreateGroup from '../../TUIKit/components/Group/CreateGroup.vue';

const { setActiveConversation, createGroupConversation } = useConversationListState();
const maxCount = ref(Number.POSITIVE_INFINITY);
const isGroupMode = ref(false);
const showGroupForm = ref(false);
const selectedUserIDs = ref<string[]>([]);
const isLoading = ref(false);

onLoad((options) => {
  const { mode } = options;
  isGroupMode.value = mode === 'createGroupConversation';
  if (!isGroupMode.value) maxCount.value = 1;
  const title = isGroupMode.value ? '选择群成员' : '选择用户';
  uni.setNavigationBarTitle({ title });
});

const handleConfirm = async (userIDs: string[]) => {
  if (userIDs.length === 0) return;
  selectedUserIDs.value = userIDs;
  if (isGroupMode.value) {
    showGroupForm.value = true;
  } else {
    await handleCreateC2CConversation(userIDs[0]);
  }
};

const handleGroupSubmit = async (groupInfo: any) => {
  isLoading.value = true;
  try {
    uni.showLoading({ title: '创建群聊中...', mask: true });
    const conversation = await createGroupConversation({
      ...groupInfo,
      type: 'Public',
      inviteOption: 'FreeAccess',
      memberList: selectedUserIDs.value.map(userID => ({ userID }))
    });
    uni.hideLoading();
    uni.showToast({ title: '群聊创建成功', icon: 'success', duration: 1500 });
    await setActiveConversation(conversation.conversationID);
    uni.redirectTo({ url: '/pages/chat/chat' });
  } catch (error) {
    uni.hideLoading();
    console.error('创建群聊失败:', error);
    uni.showToast({ title: '创建群聊失败', icon: 'none', duration: 2000 });
  } finally {
    isLoading.value = false;
  }
};

const handleCreateC2CConversation = async (userID: string) => {
  try {
    await setActiveConversation(`C2C${userID}`);
    uni.redirectTo({ url: '/pages/chat/chat' });
  } catch (error) {
    console.error('打开会话失败:', error);
    uni.showToast({ title: '打开会话失败', icon: 'none' });
  }
};

const handleCloseGroupForm = () => { showGroupForm.value = false; }
</script>

<style lang="scss" scoped>.create-conversation-page{height:100vh;background-color:#f8f9fa;}</style>

<template>
  <view>
    <view class="action-buttons">
      <view class="action-button" @click="handleCreateConversation"><text class="button-icon">+</text><text class="button-text">发起会话</text></view>
      <view class="action-button" @click="handleCreateGroupConversation"><text class="button-icon">+</text><text class="button-text">发起群聊</text></view>
    </view>
    <Conversation :onConversationSelect="handleConversationSelect"></Conversation>
    <view v-if="!conversationList?.length" class="empty-guide">
      <text class="guide-text">暂无会话，点击上方按钮开始聊天</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { onShow } from '@dcloudio/uni-app'
import { watch } from 'vue';
import Conversation from '../../TUIKit/components/ConversationList/ConversationList.vue'
import { useConversationListState } from '../../TUIKit';

const { conversationList, setActiveConversation, totalUnRead } = useConversationListState();

const updateTabBarBadge = () => {
  const tabBarList = ['pages/profile/profile', 'pages/conversation/conversation']
  const pages = getCurrentPages()
  const currentPage = pages[pages.length - 1]?.route
  const isTabBarPage = currentPage && tabBarList.includes(currentPage)
  if (!isTabBarPage) return
  if (totalUnRead.value > 0) {
    uni.setTabBarBadge({ index: 0, text: totalUnRead.value > 99 ? '99+' : totalUnRead.value.toString() });
  }
};

watch(totalUnRead, updateTabBarBadge, { immediate: true });

const handleConversationSelect = (conversation) => {
  const { conversationID } = conversation
  setActiveConversation(conversationID);
  uni.navigateTo({ url: '/pages/chat/chat' });
}

onShow(() => {
  if (totalUnRead.value > 0) {
    uni.setTabBarBadge({ index: 0, text: totalUnRead.value > 99 ? '99+' : totalUnRead.value.toString() });
  } else {
    uni.removeTabBarBadge({ index: 0 });
  }
});

const handleCreateConversation = () => {
  uni.navigateTo({ url: '/pages/createConversation/createConversation?mode=createC2CConversation' })
};

const handleCreateGroupConversation = () => {
  uni.navigateTo({ url: '/pages/createConversation/createConversation?mode=createGroupConversation' })
};
</script>

<style scoped>
.action-buttons { display: flex; justify-content: space-between; padding: 6px; background-color: #fff; border-bottom: 1px solid #f0f0f0; }
.action-button { display: flex; align-items: center; justify-content: center; width: 48%; height: 42px; background: linear-gradient(135deg, #4086FF 0%, #2E5CFF 100%); border-radius: 8px; box-shadow: 0 6px 20px rgba(64, 134, 255, 0.25), 0 2px 6px rgba(64, 134, 255, 0.15); transition: all 0.3s ease; cursor: pointer; gap: 6px; position: relative; overflow: hidden; }
.action-button:active { transform: translateY(1px); box-shadow: 0 4px 15px rgba(64, 134, 255, 0.2), 0 1px 4px rgba(64, 134, 255, 0.1); }
.action-button::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 50%; background: linear-gradient(180deg, rgba(255, 255, 255, 0.15) 0%, transparent 100%); border-radius: 8px 8px 0 0; }
.button-icon { font-size: 20px; font-weight: bold; color: #fff; }
.button-text { font-size: 14px; font-weight: 500; color: #fff; text-align: center; }
.empty-guide { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; }
.guide-text { font-size: 16px; color: red; margin-bottom: 20px; }
.input-container { width: 80%; display: flex; flex-direction: column; align-items: center; }
.userid-input { width: 100%; height: 40px; padding: 0 10px; margin-bottom: 15px; border: 1px solid #eee; border-radius: 6px; font-size: 14px; }
.placeholder-style { color: #ccc; }
.guide-btn { width: 50%; line-height: 40px; height: 40px; background-color: #07c160; color: white; border-radius: 6px; font-size: 16px; }
</style>

<template><div class="TUIChat"><div v-if="isInGroup" class="more-float" @click="goToGroupSetting"><div class="more-text">更多</div></div><MessageList /><MessageInput /></div></template>

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

const { isInGroup } = useGroupSettingState()

const goToGroupSetting = () => {
  uni.navigateTo({
    url: '/TUIKit/components/Group/GroupSettings'
  });
};
</script>

<style lang="scss" scoped>.TUIChat{display:flex;flex-direction:column;width:100vw;height:100vh;overflow:hidden;position:relative;}.more-float{position:absolute;top:20px;right:8px;z-index:20;background:linear-gradient(135deg,#4086FF 0%,#2E5CFF 100%);backdrop-filter:blur(10px);border-radius:12rpx;padding:6rpx 12rpx;display:flex;align-items:center;justify-content:center;gap:4rpx;box-shadow:0 2rpx 8rpx rgba(64,134,255,0.3),0 4rpx 16rpx rgba(64,134,255,0.2),0 8rpx 24rpx rgba(64,134,255,0.15);cursor:pointer;transition:all 0.2s ease;border:1rpx solid rgba(255,255,255,0.2);min-width:80rpx;height:36rpx;}.more-float:active{transform:scale(0.95);box-shadow:0 1rpx 4rpx rgba(64,134,255,0.4),0 2rpx 8rpx rgba(64,134,255,0.3),0 4rpx 12rpx rgba(64,134,255,0.2);}.more-icon{color:white;font-size:20px;font-weight:bold;line-height:1;}.more-text{color:white;font-size:12px;font-weight:500;letter-spacing:0.5rpx;text-shadow:0 1rpx 2rpx rgba(0,0,0,0.1);}</style>