group-tip-element.vue 2.4 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283
  1. <template>
  2. <div class="group-tip-element-wrapper">{{text}}</div>
  3. </template>
  4. <script>
  5. import {mapState} from 'vuex'
  6. export default {
  7. name: 'GroupTipElement',
  8. data() {
  9. return {
  10. callTips:256
  11. }
  12. },
  13. props: {
  14. payload: {
  15. type: Object,
  16. required: true
  17. },
  18. message: {
  19. type: Object,
  20. required: false
  21. }
  22. },
  23. computed: {
  24. ...mapState({
  25. currentUserProfile: state => state.imuser.currentUserProfile,
  26. userID: state => state.user.userID
  27. }),
  28. text() {
  29. return this.getGroupTipContent(this.message)
  30. }
  31. },
  32. methods: {
  33. getGroupTipContent(message) {
  34. // 群通话tips
  35. let nick = message.nick || ((message.from === this.userID) && this.currentUserProfile.nick) || message.from
  36. const userName = message.nick || message.payload.userIDList.join(',')
  37. switch (message.payload.operationType) {
  38. case this.OpenIM.TYPES.GRP_TIP_MBR_JOIN:
  39. return `群成员:${userName} 加入群组`
  40. case this.OpenIM.TYPES.GRP_TIP_MBR_QUIT:
  41. return `群成员:${userName} 退出群组`
  42. case this.OpenIM.TYPES.GRP_TIP_MBR_KICKED_OUT:
  43. return `群成员:${userName} 被${message.payload.operatorID}踢出群组`
  44. case this.OpenIM.TYPES.GRP_TIP_MBR_SET_ADMIN:
  45. return `群成员:${userName} 成为管理员`
  46. case this.OpenIM.TYPES.GRP_TIP_MBR_CANCELED_ADMIN:
  47. return `群成员:${userName} 被撤销管理员`
  48. case this.OpenIM.TYPES.GRP_TIP_GRP_PROFILE_UPDATED:
  49. return '群资料修改'
  50. case this.callTips:
  51. if(message.payload.text.indexOf('结束群聊')> -1) {
  52. return `"${message.payload.text}"`
  53. }else {
  54. return `"${nick}" ${message.payload.text}`
  55. }
  56. case this.OpenIM.TYPES.GRP_TIP_MBR_PROFILE_UPDATED:
  57. for (let member of message.payload.memberList) {
  58. if (member.muteTime > 0) {
  59. return `群成员:${member.userID}被禁言${member.muteTime}秒`
  60. } else {
  61. return `群成员:${member.userID}被取消禁言`
  62. }
  63. }
  64. break
  65. default:
  66. return '[群提示消息]'
  67. }
  68. },
  69. }
  70. }
  71. </script>
  72. <style lang="stylus" scoped>
  73. .group-tip-element-wrapper
  74. background $white
  75. padding 4px 15px
  76. border-radius 3px
  77. color $secondary
  78. font-size 12px
  79. // text-shadow $secondary 0 0 0.05em
  80. </style>