chat.vue 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180
  1. <template>
  2. <view class="container">
  3. <!-- #ifdef MP-WEIXIN -->
  4. <!-- <tuicalling
  5. ref="TUICalling"
  6. id="TUICalling-component"
  7. :config="config">
  8. </tuicalling> -->
  9. <!-- #endif -->
  10. <view class="tui-chatroom-navigatorbar">
  11. <image class="tui-chatroom-navigatorbar-back" src="/static/static/assets/ic_back_white.svg" @tap="goBack" />
  12. <!-- 先查 remark;无 remark 查 (c2c)nick/(group)name;最后查 (c2c)userID/(group)groupID -->
  13. <view class="conversation-title">{{ conversationName }}</view>
  14. </view>
  15. <view class="group-profile"><TUI-group-profile v-if="isShow" id="groip-profile" :conversation="conversation" /></view>
  16. <view class="message-list" @tap="triggerClose"><TUI-message-list id="message-list" ref="messageList" :conversation="conversation" /></view>
  17. <view v-if="videoPlay" class="container-box" @tap.stop="stopVideoHander">
  18. <video
  19. v-if="videoPlay"
  20. class="video-message"
  21. :src="videoMessage.payload.videoUrl"
  22. :poster="videoMessage.payload.thumbUrl"
  23. object-fit="cover"
  24. error="videoError"
  25. autoplay="true"
  26. direction="0"
  27. />
  28. </view>
  29. <view v-if="showChat" class="message-input">
  30. <TUI-message-input id="message-input" ref="messageInput" :conversation="conversation" @sendMessage="sendMessage" />
  31. </view>
  32. </view>
  33. </template>
  34. <script>
  35. import logger from '../../utils/logger';
  36. import TUIMessageList from '../../components/tui-chat/message-list/index';
  37. import TUIMessageInput from '../../components/tui-chat/message-input/index';
  38. import TUIGroupProfile from '../../components/tui-group/group-profile/index';
  39. const app = getApp();
  40. export default {
  41. components: {
  42. TUIMessageList,
  43. TUIMessageInput,
  44. TUIGroupProfile
  45. },
  46. props: {},
  47. data() {
  48. return {
  49. conversationName: '',
  50. conversation: {},
  51. messageList: [],
  52. isShow: false,
  53. showChat: true,
  54. conversationID: '',
  55. videoPlay: false,
  56. videoMessage: {},
  57. config: {
  58. sdkAppID: '',
  59. userID: '',
  60. userSig: '',
  61. type: 1,
  62. tim: null
  63. }
  64. };
  65. },
  66. created() {
  67. uni.$on('videoPlayerHandler', value => {
  68. this.videoPlay = value.isPlay;
  69. this.videoMessage = value.message;
  70. });
  71. },
  72. /**
  73. * 生命周期函数--监听页面加载
  74. */
  75. onLoad(options) {
  76. // conversationID: C2C、 GROUP
  77. logger.log(` TUI-chat | onLoad | conversationID: ${options.conversationID}`);
  78. const { conversationID } = options;
  79. this.setData({
  80. conversationID
  81. });
  82. // #ifdef MP-WEIXIN
  83. // this.config = {
  84. // sdkAppID: app.globalData.SDKAppID,
  85. // userID: app.globalData.userInfo.userID,
  86. // userSig: app.globalData.userInfo.userSig
  87. // }
  88. // logger.log(`TUI-chat | TUICalling-config | config:${JSON.stringify(this.callingConfig)}`);
  89. // // 挂载在 uni 上
  90. // uni.$wxTUICalling = this.$refs.TUICalling;
  91. // this.$nextTick(() => {
  92. // uni.$wxTUICalling.init()
  93. // })
  94. // #endif
  95. uni.$TUIKit
  96. .setMessageRead({
  97. conversationID
  98. })
  99. .then(() => {
  100. logger.log('TUI-chat | setMessageRead | ok');
  101. });
  102. uni.$TUIKit.getConversationProfile(conversationID).then(res => {
  103. const { conversation } = res.data;
  104. this.conversation = conversation;
  105. this.setData({
  106. conversationName: this.getConversationName(conversation),
  107. isShow: conversation.type === 'GROUP'
  108. });
  109. });
  110. },
  111. mounted() {},
  112. onUnload() {
  113. // #ifdef MP-WEIXIN
  114. // this.$refs.TUICalling.destroyed();
  115. // // #endif
  116. },
  117. methods: {
  118. stopVideoHander() {
  119. this.videoPlay = false;
  120. },
  121. getConversationName(conversation) {
  122. if (conversation.type === '@TIM#SYSTEM') {
  123. this.setData({
  124. showChat: false
  125. });
  126. return '系统通知';
  127. }
  128. if (conversation.type === 'C2C') {
  129. return conversation.remark || conversation.userProfile.nick || conversation.userProfile.userID;
  130. }
  131. if (conversation.type === 'GROUP') {
  132. return conversation.groupProfile.name || conversation.groupProfile.groupID;
  133. }
  134. },
  135. sendMessage(event) {
  136. // 将自己发送的消息写进消息列表里面
  137. this.$refs.messageList.updateMessageList(event.detail.message);
  138. },
  139. triggerClose() {
  140. if (this.showChat) {
  141. this.$refs.messageInput.handleClose();
  142. }
  143. },
  144. goBack() {
  145. const pages = getCurrentPages(); // 当前页面栈
  146. if (
  147. pages[pages.length - 2].route === 'pages/TUI-Conversation/create-conversation/create' ||
  148. pages[pages.length - 2].route === 'pages/TUI-Group/create-group/create' ||
  149. pages[pages.length - 2].route === 'pages/TUI-Group/join-group/join'
  150. ) {
  151. uni.navigateBack({
  152. delta: 2
  153. });
  154. } else {
  155. uni.navigateBack({
  156. delta: 1
  157. });
  158. }
  159. uni.$TUIKit
  160. .setMessageRead({
  161. conversationID: this.conversationID
  162. })
  163. .then(() => {});
  164. }
  165. }
  166. };
  167. </script>
  168. <style>
  169. @import './chat.css';
  170. </style>