index.vue 3.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. <template>
  2. <div class="messageBox" :class="panelIsShow?'show':''">
  3. <div class="flex-align-center flex-between title-panel">
  4. <p>消息提示</p>
  5. <p @click="panelIsShow = false">忽略</p>
  6. </div>
  7. <p class="message-item" v-for="item in list" :key="item.index">
  8. [{{item.type}}消息]&nbsp;{{item.title}}
  9. </p>
  10. <p class="unread-panel">共有{{total}}条未读消息</p>
  11. </div>
  12. </template>
  13. <script>
  14. export default {
  15. components:{
  16. },
  17. data () {
  18. return {
  19. id:'',
  20. // path:"ws://121.37.152.76:8080/yos/webSocket/",
  21. /*path:"wss://meida.cnyunl.com/yos/webSocket/",*/
  22. path:"ws://61.164.207.46:8100/yos/webSocket/",
  23. panelIsShow:false,
  24. list:[],
  25. total:0,
  26. }
  27. },
  28. created () {
  29. let token = JSON.parse(sessionStorage.getItem('active_account')).token
  30. this.path = this.path + token
  31. console.log(this.path)
  32. },
  33. mounted () {
  34. this.init()
  35. this.getMessageList()
  36. },
  37. methods:{
  38. async getMessageList () {
  39. let param = {
  40. "classname": "system.message.Message",
  41. "method": "queryMessage",
  42. "content": {
  43. "isread":0,
  44. "nocache": true,
  45. "pageNumber": 1,
  46. "pageSize": 5,
  47. "type": '',
  48. "where":{}
  49. }
  50. }
  51. let res = await this.$api.requested(param)
  52. this.total = res.total
  53. },
  54. onCloseThemeChat () {
  55. },
  56. onTypeChange (val) {
  57. },
  58. onThemeChat (bool) {
  59. },
  60. onChange (type) {
  61. },
  62. init: function () {
  63. if(typeof(WebSocket) === "undefined"){
  64. alert("您的浏览器不支持socket")
  65. }else{
  66. // 实例化socket
  67. this.socket = new WebSocket(this.path)
  68. // 监听socket连接
  69. this.socket.onopen = this.open
  70. // 监听socket错误信息
  71. this.socket.onerror = this.error
  72. // 监听socket消息
  73. this.socket.onmessage = this.getMessage
  74. this.contectIsLive()
  75. }
  76. },
  77. open: function (val) {
  78. // console.log("socket连接成功",val)
  79. },
  80. error: function () {
  81. console.log("连接错误")
  82. },
  83. getMessage: function (msg) {
  84. if(msg.data !== 'alive') {
  85. this.panelIsShow = true
  86. this.list = [JSON.parse(msg.data).message]
  87. this.getMessageList()
  88. if (this.list[0].type == 'pay'){
  89. this.payment.result()
  90. }
  91. }
  92. },
  93. send: function (type,val,timsubjectid) {
  94. },
  95. close: function () {
  96. console.log("socket已经关闭")
  97. },
  98. // 心跳链接
  99. contectIsLive () {
  100. this.realTimeClData = setInterval(() => {
  101. this.socket.send('isalive')
  102. }, 10000);
  103. }
  104. },
  105. destroyed () {
  106. // 销毁监听
  107. let that = this
  108. this.socket.onclose = that.close
  109. },
  110. beforeDestroy () {
  111. clearInterval(this.realTimeClData);
  112. }
  113. }
  114. </script>
  115. <style>
  116. </style>
  117. <style scoped>
  118. .messageBox{
  119. position: fixed;
  120. right:10px;
  121. bottom: -310px;
  122. width:250px;
  123. height: 300px;
  124. background: #fff;
  125. box-shadow: 0 0 10px #ccc;
  126. border-radius: 4px;
  127. z-index: 9999;
  128. transition: .5s linear;
  129. overflow: hidden;
  130. }
  131. .show{
  132. bottom:10px
  133. }
  134. .title-panel{
  135. padding: 10px;
  136. background: #3874F6;
  137. color: #fff;
  138. font-size: 14px;
  139. cursor: pointer;
  140. }
  141. .message-item{
  142. padding: 10px;
  143. font-size: 14px;
  144. width: 100%;
  145. overflow: hidden;
  146. white-space: nowrap;
  147. text-overflow: ellipsis
  148. }
  149. .unread-panel{
  150. position: absolute;
  151. bottom:0px;
  152. width: 100%;
  153. text-align: center;
  154. font-size: 14px;
  155. padding: 10px;
  156. color:#999999;
  157. border-top:1px solid #CCCCCC
  158. }
  159. </style>