uni-app

npm init -y

npm i @tencentcloud/chat-uikit-uniapp unplugin-vue2-script-setup

<template>
  <view class="login-container">
    <view class="login-form">
      <view class="title-section">
        <text class="title">登录</text>
      </view>
      
      <view class="input-section">
        <view class="input-group">
          <text class="input-label">用户ID</text>
          <input 
            class="input-field"
            type="text"
            v-model="userID"
            placeholder="请输入用户ID"
          />
        </view>
      </view>
      
      <view class="button-section">
        <button 
          class="login-btn"
          :disabled="!canLogin || isLoading"
          @tap="handleLogin"
        >
          {{ isLoading ? '登录中...' : '登录' }}
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { TUILogin } from '@tencentcloud/tui-core-lite';
import { genTestUserSig } from '../../TUIKit/debug';

let vueVersion = 2;
// #ifdef VUE3
vueVersion = 3;
// #endif

const SDKAppID = 0; // Your SDKAppID
const secretKey = ''; // Your secretKey

export default {
  data() {
    return {
      userID: '',
      isLoading: false,
    }
  },
  computed: {
    canLogin() {
      return this.userID.trim().length > 0
    }
  },
  methods: {
    async handleLogin() {
      if (!this.canLogin || this.isLoading) return;
      this.isLoading = true;
      try {
        const { userSig } = genTestUserSig({
          SDKAppID: SDKAppID, 
          userID: this.userID,
          secretKey: secretKey,
        });
        TUILogin.login({
          SDKAppID: SDKAppID,
          userID: this.userID, 
          userSig: userSig, 
          framework: `vue${vueVersion}` // framework used vue2 / vue3
        })
        .then(() => {
          uni?.switchTab({
            url: '/TUIKit/components/TUIConversation/index',
          });
        })
        .catch((error) => {
          console.error(error);
        });
      } catch (error) {
        uni.showToast({
          title: '登录失败',
          icon: 'error'
        })
      } finally {
        this.isLoading = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.login-container{display:flex;align-items:center;justify-content:center;}.login-form{width:100%;padding:80rpx 60rpx;}.title-section{text-align:center;margin-bottom:80rpx;}.title{font-size:48rpx;font-weight:bold;color:#333333;}.input-section{margin-bottom:60rpx;}.input-group{margin-bottom:40rpx;}.input-label{display:block;font-size:28rpx;color:#666666;margin-bottom:16rpx;}.input-field{width:100%;height:88rpx;border:2rpx solid #e0e0e0;border-radius:8rpx;padding:0 24rpx;font-size:32rpx;color:#333333;box-sizing:border-box;&:focus{border-color:#007aff;}}.button-section{margin-top:40rpx;}.login-btn{width:100%;height:88rpx;background-color:#007aff;color:#ffffff;border:none;border-radius:8rpx;font-size:32rpx;font-weight:600;}
</style>

<template>
  <div class="profile">
    <div class="profile-basic">
      <img
        class="profile-basic-avatar"
        :src="
          userProfile.avatar ||
            'https://web.sdk.qcloud.com/component/TUIKit/assets/avatar_21.png'
        "
      >
      <div class="profile-basic-info">
        <div class="profile-basic-info-nick"
        >
          {{ userProfile.nick || "-" }}
        </div>
        <div class="profile-basic-info-id">
          <label class="profile-basic-info-id-label"
          >{{ "用户ID" }}:</label>
          <div class="profile-basic-info-id-value">
            {{ userProfile.userID }}
          </div>
        </div>
      </div>
    </div>
	  <div class="profile-footer">
      <button class="logout-btn" @click="logout">
        退出登录
      </button>
    </div>
  </div>
</template>
<script>
import { TUIUserService } from '@tencentcloud/chat-uikit-engine-lite';
import { TUILogin } from '@tencentcloud/tui-core-lite';

export default {
  data() {
    return {
      userProfile: {}
    }
  },
  methods: {
    logout() {
      TUILogin.logout().then(() => {
        uni.reLaunch({
          url: '/pages/index/index',
        })
      });
    }
  },
  mounted() {
    TUIUserService.getUserProfile().then((res) => {
      this.userProfile = res.data;
    });
  }
}
</script>

<style lang="scss" scoped>
.profile{height:100%;flex:1;display:flex;flex-direction:column;&-basic{display:flex;gap:10px;box-sizing:border-box;padding:14px 18px;flex-direction:row;align-items:flex-start;border-bottom:10px solid #f5f5f5;&-avatar{flex:0 0 auto;width:78px;height:78px;border-radius:8px;}&-info{padding:10px 0;box-sizing:border-box;height:100%;flex:1;display:flex;flex-direction:column;justify-content:space-between;min-width:0;&-nick{font-size:14px;word-break:keep-all;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:PingFangSC-Medium;font-weight:500;color:#000;letter-spacing:0;}&-id{display:flex;align-items:center;font-family:PingFangSC-Regular;color:#999;letter-spacing:0;font-size:14px;word-break:keep-all;&-value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}}}}&-footer{flex:1;display:flex;align-items:center;padding:20px 18px;margin-top:auto;.logout-btn{width:100%;padding:10px 20px;background-color:#ff4757;color:#ffffff;border:none;border-radius:8px;font-size:16px;font-weight:500;text-align:center;}}}
</style>