123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <template>
- <div class="messageBox" :class="panelIsShow?'show':''">
- <div class="flex-align-center flex-between title-panel">
- <p>消息提示</p>
- <p @click="panelIsShow = false">忽略</p>
- </div>
- <p class="message-item" v-for="item in list" :key="item.index">
- [{{item.type}}消息] {{item.title}}
- </p>
- <p class="unread-panel">共有{{total}}条未读消息</p>
- </div>
- </template>
- <script>
- export default {
- components:{
- },
- data () {
- return {
- id:'',
- // path:"ws://121.37.152.76:8080/yos/webSocket/",
- /*path:"wss://meida.cnyunl.com/yos/webSocket/",*/
- path:"ws://61.164.207.46:8100/yos/webSocket/",
- panelIsShow:false,
- list:[],
- total:0,
- }
- },
- created () {
- let token = JSON.parse(sessionStorage.getItem('active_account')).token
- this.path = this.path + token
- console.log(this.path)
- },
- mounted () {
- this.init()
- this.getMessageList()
- },
- methods:{
- async getMessageList () {
- let param = {
- "classname": "system.message.Message",
- "method": "queryMessage",
- "content": {
- "isread":0,
- "nocache": true,
- "pageNumber": 1,
- "pageSize": 5,
- "type": '',
- "where":{}
- }
- }
- let res = await this.$api.requested(param)
- this.total = res.total
- },
- onCloseThemeChat () {
- },
- onTypeChange (val) {
- },
- onThemeChat (bool) {
- },
- onChange (type) {
- },
- init: function () {
- if(typeof(WebSocket) === "undefined"){
- alert("您的浏览器不支持socket")
- }else{
- // 实例化socket
- this.socket = new WebSocket(this.path)
- // 监听socket连接
- this.socket.onopen = this.open
- // 监听socket错误信息
- this.socket.onerror = this.error
- // 监听socket消息
- this.socket.onmessage = this.getMessage
- this.contectIsLive()
- }
- },
- open: function (val) {
- // console.log("socket连接成功",val)
- },
- error: function () {
- console.log("连接错误")
- },
- getMessage: function (msg) {
- if(msg.data !== 'alive') {
- this.panelIsShow = true
- this.list = [JSON.parse(msg.data).message]
- this.getMessageList()
- if (this.list[0].type == 'pay'){
- this.payment.result()
- }
- }
- },
- send: function (type,val,timsubjectid) {
- },
- close: function () {
- console.log("socket已经关闭")
- },
- // 心跳链接
- contectIsLive () {
- this.realTimeClData = setInterval(() => {
- this.socket.send('isalive')
- }, 10000);
- }
- },
- destroyed () {
- // 销毁监听
- let that = this
- this.socket.onclose = that.close
- },
- beforeDestroy () {
- clearInterval(this.realTimeClData);
- }
- }
- </script>
- <style>
- </style>
- <style scoped>
- .messageBox{
- position: fixed;
- right:10px;
- bottom: -310px;
- width:250px;
- height: 300px;
- background: #fff;
- box-shadow: 0 0 10px #ccc;
- border-radius: 4px;
- z-index: 9999;
- transition: .5s linear;
- overflow: hidden;
- }
- .show{
- bottom:10px
- }
- .title-panel{
- padding: 10px;
- background: #3874F6;
- color: #fff;
- font-size: 14px;
- cursor: pointer;
- }
- .message-item{
- padding: 10px;
- font-size: 14px;
- width: 100%;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis
- }
- .unread-panel{
- position: absolute;
- bottom:0px;
- width: 100%;
- text-align: center;
- font-size: 14px;
- padding: 10px;
- color:#999999;
- border-top:1px solid #CCCCCC
- }
- </style>
|