NotifyMessageRender.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211
  1. <template>
  2. <view :id="`auchor${source.clientMsgID}`" class="message_item">
  3. <my-avatar
  4. size="42"
  5. :desc="source.senderNickname"
  6. :src="source.senderFaceUrl"
  7. />
  8. <view class="message_container">
  9. <view class="message_sender">
  10. <text>
  11. {{ source.senderNickname }} {{ formattedMessageTime }}
  12. </text>
  13. </view>
  14. <view class="message_content_wrap">
  15. <view class="notify_message_container">
  16. <!-- <view class="notify_title">
  17. {{ notifyContent.notificationName }}
  18. </view> -->
  19. <view v-if="getMediaSource" class="media_container" @click="preview">
  20. <u--image
  21. radius="4"
  22. :showLoading="true"
  23. :src="getMediaSource"
  24. width="220"
  25. height="100%"
  26. mode="widthFix"
  27. ></u--image>
  28. <image
  29. v-if="isVideo"
  30. class="play_icon"
  31. src="https://bjyjb-1362704775.cos.ap-chongqing.myqcloud.com/shop/image/chating_message_video_play.png"
  32. alt=""
  33. srcset=""
  34. />
  35. <text v-if="isVideo" class="video_duration">{{ getDuration }}</text>
  36. </view>
  37. <view class="notify_text">
  38. {{ notifyContent.text }}
  39. </view>
  40. <view v-if="hasExternalUrl" class="href" @click="toWebView">
  41. 点击查看
  42. </view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. </template>
  48. <script>
  49. import { myPreview } from "../../../util/preview";
  50. import MyAvatar from "../../../components/MyAvatar/index.vue";
  51. import { formatMessageTime, secFormat } from "../../../util/imCommon";
  52. const NotificationMixTypes = {
  53. Text: 0,
  54. TextAndImage: 1,
  55. TextAndVideo: 2,
  56. TextAndFile: 3,
  57. };
  58. export default {
  59. name: "NotifyMessageRender",
  60. components: {
  61. MyAvatar,
  62. },
  63. props: {
  64. source: Object,
  65. },
  66. data() {
  67. return {};
  68. },
  69. computed: {
  70. notifyContent() {
  71. let notificationContent = {};
  72. try {
  73. notificationContent = JSON.parse(this.source.notificationElem.detail);
  74. } catch (e) {
  75. //TODO handle the exception
  76. }
  77. return notificationContent;
  78. },
  79. isVideo() {
  80. return this.notifyContent.mixType === NotificationMixTypes.TextAndVideo;
  81. },
  82. hasExternalUrl() {
  83. return this.notifyContent.externalUrl;
  84. },
  85. getDuration() {
  86. if (!this.isVideo) {
  87. return 0;
  88. }
  89. return secFormat(this.notifyContent.videoElem.duration);
  90. },
  91. formattedMessageTime() {
  92. return formatMessageTime(this.source.sendTime);
  93. },
  94. getMediaSource() {
  95. if (this.notifyContent.mixType === NotificationMixTypes.TextAndImage) {
  96. const picEl = this.notifyContent.pictureElem;
  97. return picEl.snapshotPicture?.url ?? picEl.sourcePicture?.url;
  98. }
  99. if (this.notifyContent.mixType === NotificationMixTypes.TextAndVideo) {
  100. const videoEl = this.notifyContent.videoElem;
  101. return videoEl.snapshotUrl;
  102. }
  103. return "";
  104. },
  105. },
  106. methods: {
  107. toWebView() {
  108. uni.navigateTo({
  109. url: `/pages/common/webviewWrapper/index?url=${this.notifyContent.externalUrl}`,
  110. });
  111. },
  112. preview() {
  113. if (this.notifyContent.mixType === NotificationMixTypes.TextAndVideo) {
  114. uni.navigateTo({
  115. url: `/pages/conversation/previewVideo/index?previewVideoUrl=${this.notifyContent.videoElem.videoUrl}&snapshotUrl=${this.notifyContent.videoElem.snapshotUrl}`,
  116. });
  117. return;
  118. }
  119. if (this.notifyContent.mixType === NotificationMixTypes.TextAndImage) {
  120. const picEl = this.notifyContent.pictureElem;
  121. const url = picEl.SourcePicture?.Url ?? picEl.sourcePicture?.url;
  122. if (url) {
  123. // uni.previewImage({
  124. // urls: [url],
  125. // });
  126. myPreview(0, [url]);
  127. }
  128. }
  129. },
  130. },
  131. };
  132. </script>
  133. <style lang="scss" scoped>
  134. .message_item {
  135. display: flex;
  136. flex-direction: row;
  137. margin: 0 44rpx;
  138. padding-bottom: 32rpx;
  139. .message_container {
  140. margin-left: 24rpx;
  141. text-align: start;
  142. max-width: 80%;
  143. position: relative;
  144. .message_sender {
  145. @include nomalEllipsis();
  146. max-width: 480rpx;
  147. font-size: 0.85rem;
  148. color: #666;
  149. margin-bottom: 6rpx;
  150. }
  151. .message_content_wrap {
  152. @include vCenterBox();
  153. text-align: start;
  154. font-size: 14px;
  155. color: $uni-text-color;
  156. width: fit-content;
  157. max-width: 100%;
  158. .notify_message_container {
  159. background-color: #fff;
  160. padding: 16rpx 16rpx;
  161. border-radius: 12rpx;
  162. }
  163. .notify_title {
  164. font-size: 32rpx;
  165. margin-bottom: 12rpx;
  166. }
  167. .notify_text {
  168. font-size: 28rpx;
  169. }
  170. .media_container {
  171. position: relative;
  172. margin-bottom: 10rpx;
  173. padding-bottom: 24rpx;
  174. border-bottom: 1px solid #ccc;
  175. }
  176. .play_icon {
  177. width: 48px;
  178. height: 48px;
  179. position: absolute;
  180. top: 50%;
  181. left: 50%;
  182. transform: translate(-50%, -50%);
  183. }
  184. .video_duration {
  185. position: absolute;
  186. bottom: 32rpx;
  187. right: 18rpx;
  188. color: #fff;
  189. }
  190. .href {
  191. margin-top: 4rpx;
  192. color: #0289fa;
  193. }
  194. }
  195. }
  196. }
  197. </style>