chatGroupMsg.vue 4.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <style>
  2. /**基本聊天数据**/
  3. .msg{padding: 20rpx;}
  4. .msg .msg-in{width: calc(100% - 160rpx); margin-left: 30rpx;}
  5. .msg .loading-msg{width:20px;height:20px;animation:rotate 1.5s linear infinite;margin-left: 20rpx;}
  6. .msg .msg-err{width:20px;height:20px;margin-left: 20rpx;}
  7. .msg .avatar{width: 80rpx;height: 80rpx;border-radius: 50%;overflow: hidden;margin-top: 6px;}
  8. .msg .avatar image{width: 80rpx;height: 80rpx;border-radius: 50%;}
  9. .msg .content{position: relative;min-height: 20px;font-size: 16px;background-color: #fff;max-width: calc(100% - 140rpx);padding: 20rpx;border-radius: 8rpx;word-break:break-all;display:inline-block;}
  10. .msg .content .i{width: 0;height: 0;left: -10px;position: absolute;border-top: 10px solid transparent; border-right: 10px solid #fff; border-bottom: 10px solid transparent;}
  11. .msg .content .vimg{max-width: 200rpx;}
  12. .msg .msg-in .emojis{width: 180rpx;}
  13. .msg .nickname{font-size: 12px;margin-bottom:6px;}
  14. .me-msg{padding: 20rpx;}
  15. .msg-in{width: calc(100% - 140rpx); margin-right: 20rpx;}
  16. .me-msg .loading-msg{width:20px;height:20px;animation:rotate 1.5s linear infinite;margin-right: 20rpx;}
  17. .me-msg .msg-err{width:20px;height:20px;margin-right: 20rpx;}
  18. .me-msg .avatar{width: 80rpx;height: 80rpx;border-radius: 50%;overflow: hidden;}
  19. .me-msg .avatar image{width: 80rpx;height: 80rpx;border-radius: 50%;}
  20. .me-msg .content{position: relative;min-height: 20px;font-size: 16px;background-color: #cceaff;max-width: calc(100% - 140rpx);padding: 20rpx;border-radius: 8rpx;word-break:break-all;display:inline-block;}
  21. .me-msg .content .i{width: 0;height: 0;right: -10px;position: absolute;border-top: 10px solid transparent; border-left: 10px solid #cceaff; border-bottom: 10px solid transparent;}
  22. .me-msg .content .vimg{max-width: 200rpx;}
  23. .me-msg .msg-in .emojis{width: 180rpx;}
  24. .me-msg .content .up{position: absolute;width: calc(100% - 40rpx);height: calc(100% - 40rpx);top: 20rpx;left: 20rpx; background: rgba(0,0,0,0.4);color: #fff; font-size: 14px;}
  25. .me-msg .nickname{font-size: 12px;margin-bottom:6px;margin-right: 6px;}
  26. /**结束**/
  27. </style>
  28. <template>
  29. <view>
  30. <view class="msg fx-r" v-if="item.sendUser.uid != user.uid">
  31. <view class="avatar" @tap="tapUser(1)" hover-class="avatar-hover"><image :src="utils.getAvatar(item.sendUser.avatar,'chat')" mode="aspectFill" ></image></view>
  32. <view class="msg-in">
  33. <view class="nickname">{{item.sendUser.nickname}}</view>
  34. <view class="content" @longtap="tapLongItem">
  35. <view class="i"></view>
  36. <!-- #ifdef H5 -->
  37. <text style="color: red;">[群公告]</text><text v-html="utils.toH5ml(item.data)"></text>
  38. <!-- #endif -->
  39. <!-- #ifndef H5 -->
  40. <text style="color: red;">[群公告]</text><rich-text :nodes="utils.toH5ml(item.data)"></rich-text>
  41. <!-- #endif -->
  42. </view>
  43. </view>
  44. </view>
  45. <view class="me-msg fx-r fx-ae" v-else>
  46. <view class="msg-in fx-h fx-be fx-ae">
  47. <view class="nickname">{{user.nickname}}</view>
  48. <view class="msg-in fx-r fx-bc fx-ae">
  49. <u-loading-icon v-if="item.isSend == 0" style="margin-right: 10px;"></u-loading-icon>
  50. <image v-if="item.isSend == -1" @tap="tapRsend" class="msg-err" src="/static/chat/waring.png"></image>
  51. <view class="content" @longtap="tapLongItem">
  52. <view class="i"></view>
  53. <!-- #ifdef H5-->
  54. <text style="color: red;">[群公告]</text><text v-html="utils.toH5ml(item.data)"></text>
  55. <!-- #endif -->
  56. <!-- #ifndef H5 -->
  57. <text style="color: red;">[群公告]</text><rich-text :nodes="utils.toH5ml(item.data)"></rich-text>
  58. <!-- #endif -->
  59. </view>
  60. </view>
  61. </view>
  62. <view class="avatar" @tap="tapUser(0)" hover-class="avatar-hover"><image :src="utils.getAvatar(user.avatar,'chat')" mode="aspectFill" ></image></view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. import {mapState,mapMutations } from 'vuex';
  68. export default {
  69. computed: mapState(['user','sysData']),
  70. name: 'msg',
  71. props:{
  72. item : {
  73. type: Object,
  74. default: ()=>{return {data:{}} }
  75. }
  76. },
  77. data() {
  78. return{
  79. }
  80. },
  81. created() {
  82. //console.log(this.item);
  83. },
  84. mounted() {
  85. },
  86. methods: {
  87. tapRsend:function() {
  88. this.$emit('rsend',this.item);
  89. },
  90. tapLongItem:function(ev){
  91. this.$emit('longItem',{
  92. dom : ev,
  93. data : this.item
  94. });
  95. },
  96. tapUser:function(type){
  97. this.$emit('userItem',type == 0 ? this.user.uid : this.item.sendUid);
  98. }
  99. }
  100. }
  101. </script>