jy/src/web/staticres/js/pc-message-index.js

var temp = '<div class="list-msg" v-if="lists.length"><div class="l-msg"><div class="words" v-for="item in lists" :key="item.id"><i v-show="item.isRead == 0"></i><h3 :class="{isActive: item.isRead == 1}">@@item.msg_type@@</h3><span @click="titleGoto(item)">@@item.title@@</span><p>@@item.createtime@@</p></div></div><img @click="gotoUrl" class="r-msg" src="/images/pc/msg-arrow.png"></div>'

var vmMesg = new Vue({
  // el: '#vue-message-index-pc',
  delimiters: ['@@', '@@'],
  template: temp,
  data: function () {
    return {
      el: '#vue-message-index-pc',
      lists: [],
      timer: null
    }
  },
  mounted: function () {
    this.getList()
    // this.checkCounts()
  },
  methods: {
    getList() {
      const _this = this
      $.ajax({
        type: 'POST',
        url: '/jymessageCenter/latestNews',
        success:function (res) {
          if (res.data) {
            res.data.forEach(v => {
              v.msg_type = _this.msgType(v.msg_type)
              v.createtime = dateMatter(v.createtime)
            });
            _this.lists = res.data
            // _this.lists = []
            if (_this.lists.length == 0) {
              window.localStorage.setItem('noMesg', 0)
            } else {
              window.localStorage.setItem('noMesg', _this.lists.length)
            }
            // window.localStorage.setItem('noMesg', 0)
          } else {
            window.localStorage.setItem('noMesg', 0)
          }
        },
        error:function () {
          window.localStorage.setItem('noMesg', 0)
        }
      })
    },
    readed(ids, type, url) {
      const _this = this
      $.ajax({
        type: 'POST',
        url:'/jymessageCenter/markRead',
        data: {
          msgId: ids,
          msgType: type
        },
        success:function () {
          if (url) {
            location.href = url
          } else {
            _this.getList()
          }
        }
      })
    },
    titleGoto(item) {
      if (item.isRead == 0) {
        this.readed(item.id, item.msg_type, item.link)
      } else {
        if (item.link) {
          location.href = item.link
        }
      }
    },
    checkCounts() {
      const _this = this
      Notification.requestPermission(function(status) {
        console.info(status, '----------')
        if(status === 'granted'){
          clearInterval(_this.timer)
          _this.timer = setInterval(function () {
            $.ajax({
              type: 'POST',
              url: '/jymessageCenter/lastNewMessage?t=' + Date.now(),
              success: function (r) {
                var num = r.count
                var isMsg = window.localStorage.getItem('noMesg')
                if (num !== Number(isMsg)) {
                  var datas = r.data
                  var notify = new Notification(datas.title,{
                      icon: '../images/t3_new.jpg',
                      body: datas.content
                  })
                  // 点击时桌面消息时触发
                  notify.onclick = () => {
                    if (datas.link) {
                      location.href = datas.link
                    } else {
                      return
                    }
                  }
                  localStorage.setItem('noMesg', num)
                }
              },
              error: function () {
                clearInterval(_this.timer)
              }
            })
          }, 3000)
        } else {
            Notification.requestPermission()
        }
      })
    },
    gotoUrl() {
      location.href = '/swordfish/frontPage/messageCenter/sess/index'
    },
    msgType(val) {
      const obj = {
        '1': '活动优惠',
        '2': '服务通知',
        '3': '订阅消息',
        '4': '项目动态 ',
        '5': '企业动态',
        '6': '分析报告 ',
        '7': '系统通知',
      }
      return obj[val]
    }
  }
})

function initIndexMsgList () {
  try {
    var el = vmMesg._data.el
    var $el = $(el)
    if ($el.length > 0) {
      vmMesg.$mount(el)
    }
  } catch (error) {
    console.log(error)
  }
}