create.vue 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <view class="TUI-Create-conversation-container">
  3. <view class="tui-navigatorbar">
  4. <image class="tui-navigatorbar-back" @tap="goBack" src="/static/static/assets/ic_back_white.svg"></image>
  5. <view class="conversation-title">发起会话</view>
  6. </view>
  7. <view class="tui-search-area">
  8. <view class="tui-search-bar">
  9. <image class="tui-searchcion" src="/static/static/assets/serach-icon.svg"></image>
  10. <input class="tui-search-bar-input" :value="userID" placeholder="请输入用户ID" @input="userIDInput" @confirm="getuserProfile" @blur="getuserProfile" />
  11. </view>
  12. <view class="tui-showID">您的用户ID {{ userInfo.userID }}</view>
  13. </view>
  14. <view class="tui-person-to-invite" v-if="searchUser.userID">
  15. <image
  16. @click="handleChoose"
  17. class="tui-normal-choose"
  18. :src="isChoose ? '/static/static/assets/single-choice-hover.svg' : '/static/static/assets/single-choice-normal.svg'"
  19. ></image>
  20. <view class="tui-person-profile">
  21. <image
  22. class="tui-person-profile-avatar"
  23. :src="searchUser.avatar || 'https://sdk-web-1252463788.cos.ap-hongkong.myqcloud.com/component/TUIKit/assets/avatar_21.png'"
  24. ></image>
  25. <view>
  26. <view class="tui-person-profile-nick">{{ searchUser.nick }}</view>
  27. <view class="tui-person-profile-userID">用户ID:{{ searchUser.userID }}</view>
  28. </view>
  29. </view>
  30. </view>
  31. <view class="tui-confirm-btn" @tap="bindConfirmInvite">确认邀请</view>
  32. </view>
  33. </template>
  34. <script>
  35. const app = getApp();
  36. export default {
  37. data() {
  38. return {
  39. userID: '',
  40. searchUser: {},
  41. isChoose: false,
  42. userInfo: {}
  43. };
  44. },
  45. components: {},
  46. props: {},
  47. /**
  48. * 生命周期函数--监听页面加载
  49. */
  50. onLoad() {
  51. this.setData({
  52. userInfo: app.globalData.userInfo
  53. });
  54. },
  55. /**
  56. * 生命周期函数--监听页面初次渲染完成
  57. */
  58. onReady() {},
  59. /**
  60. * 生命周期函数--监听页面显示
  61. */
  62. onShow() {},
  63. methods: {
  64. goBack() {
  65. uni.navigateBack({
  66. delta: 1
  67. });
  68. },
  69. userIDInput(e) {
  70. this.setData({
  71. userID: e.detail.value,
  72. searchUser: {}
  73. });
  74. },
  75. getuserProfile() {
  76. uni.$TUIKit
  77. .getUserProfile({
  78. userIDList: [this.userID]
  79. })
  80. .then(imRes => {
  81. if (imRes.data.length > 0) {
  82. this.setData({
  83. searchUser: imRes.data[0]
  84. });
  85. console.log(imRes.data[0])
  86. } else {
  87. uni.showToast({
  88. title: '用户不存在',
  89. icon: 'error'
  90. });
  91. this.setData({
  92. userID: ''
  93. });
  94. }
  95. });
  96. },
  97. handleChoose() {
  98. this.isChoose = !this.isChoose;
  99. this.setData({
  100. searchUser: this.searchUser
  101. });
  102. },
  103. bindConfirmInvite() {
  104. if (this.isChoose) {
  105. uni.navigateTo({
  106. url: `../../TUI-Chat/chat?conversationID=C2C${this.searchUser.userID}`
  107. });
  108. } else {
  109. uni.showToast({
  110. title: '请选择相关用户',
  111. icon: 'none'
  112. });
  113. }
  114. }
  115. }
  116. };
  117. </script>
  118. <style>
  119. @import './create.css';
  120. </style>