feat:首页未读消息滚动展示

src/web/staticres/css/pc/index.css

@@ -93,21 +93,35 @@
   background: url(/images/index/card-time-badge.png) no-repeat right center;
   background-size: contain;
 }
-
+[v-cloak] {
+    display: none;
+}
+.jy-index .list-msg .el-carousel__container{
+    height:24px !important;
+}
+.jy-index .list-msg .el-carousel, .jy-index .list-msg .el-carousel .el-carousel__item{
+    width:100%;
+}
 .jy-index .list-msg {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  width: 905px;
+  width: 1200px;
   height: 24px;
-  margin: 0px auto 40px;
+  margin: 0px auto 44px;
 }
 
 .jy-index .noActive {
   margin-top: 56px;
 }
-
+.jy-index .list-msg .l-msg{
+    display: flex;
+    /*justify-content: flex-start;*/
+    flex-direction: row;
+    align-items: center;
+}
 .jy-index .list-msg .l-msg .words {
+    width:50%;
   display: flex;
   flex-direction: initial;
   align-items: center;
@@ -119,9 +133,6 @@
   height: 24px;
 }
 
-.jy-index .list-msg .l-msg .words:nth-child(2) {
-  margin-top: 8px;
-}
 
 .jy-index .list-msg .r-msg {
   width: 20px;
@@ -165,6 +176,17 @@
 .jy-index .list-msg .l-msg .words .isActive {
   margin-left: 15px;
 }
+.jy-index .list-msg  .no-read-count{
+    background: linear-gradient(0deg, #FB483D, #FB483D);
+    color:#FFF;
+    text-align: center;
+    font-size: 12px;
+    line-height: 18px;
+    padding: 2px 8px;
+    border-radius: 10px 10px 0 10px;
+    min-width:72px;
+    margin-right:12px;
+}
 
 /* banner */
 .jy-index-banner {
@@ -452,7 +474,7 @@
 }
 
 .section-light {
-  padding-top: 40px;
+  padding-top: 48px;
   width: 100%;
   min-height: 811px;
   background-color: #F4F7FB;
@@ -1762,4 +1784,4 @@ text-align: center;
 /* 首页底部pc-bottom单独设置的样式 */
 .jy_classify{
   padding-top: 32px!important;
-}
+}

src/web/staticres/js/message.js

@@ -1,3 +1,4 @@
+/********pc-头部未读消息弹窗 P376版本不展示********/
 // 点击置顶消息为已读
 function topRead(ids, type, url) {
     $.ajax({
@@ -54,8 +55,9 @@ function Message() {
     this.init = function () {
         if (!loginflag) return
         this.checkOpened()
-        this.checkMessage()
-        this.bindEvents()
+        $('#noticed').show()
+        // this.checkMessage()
+        // this.bindEvents()
     }
     // 悬浮窗列表数据请求
     this.checkMessage = function () {

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

@@ -1,3 +1,4 @@
+/********pc-首页中间强推消息- P376版本不展示********/
 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"><img class="icon_voice" src="/images/pc/icon_voice.png" v-show="item.isRead == 0" /><h3 :class="{isActive: item.isRead == 1}">@@item.msg_type@@</h3><span @click="titleGoto(item)">@@item.title@@</span><p>@@item.createtime@@</p></div></div></div>'
 
 var vmMesg = new Vue({

src/web/staticres/js/pc-message-new.js

@@ -0,0 +1,122 @@
+/**首页中间滚动--未读消息--***/
+var vmMesg = new Vue({
+  el: '#vue-message-index-pc',
+  delimiters: ['${', '}'],
+  data: function () {
+    return {
+      imgArrs:  ['quanbu', 'huodong', 'fuwu', 'dingyue', 'xiangmu', 'qiye', 'fenxi', 'xitong'],
+      lists: [],
+      timer: null,
+      totalNum: 0
+    }
+  },
+  computed: {
+  },
+  mounted: function () {
+    this.getList()
+  },
+  methods: {
+    getList: function() {
+      var _this = this
+        // /messageCenter/unreadMessages
+      $.ajax({
+        type: 'POST',
+        url: '/jymessageCenter/messageList',
+        data: {
+          needFilter: 1,
+          msgType: '0',
+          isRead: '-1',
+          offset: 1,
+          pageSize: 20
+        },
+        success:function (res) {
+          if (res.data) {
+            var resList = res.data.list || []
+            _this.totalNum = res.data.total || 0
+            resList.forEach(function(v) {
+              v.msg_type_text = _this.msgType(v.msg_type)
+              v.createtime = dateMatter(v.createtime)
+            });
+            // 封装成二维数组（用于轮播两条为单位）
+            var arr = []
+            for(var i=0; i< Math.ceil(resList.length / 2); i++) {
+              var temp = resList.slice(i*2, (i*2+2))
+              arr.push(temp)
+            }
+            _this.lists = arr
+          }
+        },
+        error:function () {}
+      })
+    },
+    readed: function(ids, type, url) {
+      var _this = this
+      $.ajax({
+        type: 'POST',
+        url:'/jymessageCenter/markRead',
+        data: {
+          msgId: ids,
+          msgType: type
+        },
+        success:function () {
+          if (url) {
+            location.href = url
+          } else {
+            location.href = '/swordfish/frontPage/messageCenter/sess/index'
+          }
+        }
+      })
+    },
+    titleGoto: function(item) {
+      // 消息统计
+      this.clickMessage(item.msgLogid)
+      if (item.isRead == 0) {
+        this.readed(item.id, item.msg_type, item.link)
+      } else {
+        if(item.link) {
+          // 跳转链接
+          window.location.href = item.link
+        } else {
+          // 消息中心
+          location.href = '/swordfish/frontPage/messageCenter/sess/index'
+        }
+      }
+    },
+    msgType: function(val) {
+      var obj = {
+        '1': '活动优惠',
+        '2': '服务通知',
+        '3': '订阅消息',
+        '4': '项目动态 ',
+        '5': '企业动态',
+        '6': '分析报告 ',
+        '7': '系统通知',
+      }
+      return obj[val]
+    },
+    // 消息统计
+   clickMessage(msgLogid) {
+      $.ajax({
+        type:'POST',
+        url:'/jymessageCenter/clickMessage',
+        data: {
+          msgLogId: msgLogid,
+          platform: '1'
+        },
+        success:function () {}
+      })
+    }
+  }
+})
+
+function initIndexMsgList () {
+  try {
+    var el = vmMesg._data.el
+    var $el = $(el)
+    if ($el.length > 0) {
+      vmMesg.$mount(el)
+    }
+  } catch (error) {
+    console.log(error)
+  }
+}

src/web/templates/pc/index.html

@@ -73,7 +73,22 @@
       </div>
       <div class="section-light">
          <!-- 消息展示 -->
-        <div id="vue-message-index-pc"></div>
+        <div id="vue-message-index-pc" v-cloak>
+            <div class="list-msg" v-if="lists.length > 0">
+                <div class="no-read-count" v-if="totalNum > 0">${totalNum > 99 ? '99+' : totalNum }条未读</div>
+                <el-carousel :interval="1000" arrow="never" :autoplay="lists.length > 1" indicator-position="none">
+                    <el-carousel-item class="l-msg" v-for="(tempList, index) in lists" :key="'msg_' + index">
+                        <div class="words" v-for="item in tempList" :key="item.id">
+<!--                            <img class="icon_voice" src="/images/pc/icon_voice.png" v-show="item.isRead == 0" />-->
+                            <img class="icon_voice" :src="'/images/pc/'+imgArrs[item.msg_type]+'@2x.png'" alt="">
+                            <h3 :class="{isActive: item.isRead == 1}">${item.msg_type_text}</h3>
+                            <span @click="titleGoto(item)">${item.title}</span>
+                            <p>${item.createtime}</p>
+                        </div>
+                    </el-carousel-item>
+                </el-carousel>
+            </div>
+        </div>
         <!--  -->
         <div class="jy-index-hot CfadeInUp">
           <div class="w1200 hot-container">
@@ -581,9 +596,9 @@
   <script src="//cdn-common.jianyu360.com/cdn/lib/element-ui/2.15.7/lib/index.js"></script>
   <script src='{{Msg "seo" "cdn"}}/js/dateFunc.js?v={{Msg "seo" "version"}}'></script>
   <script src='{{Msg "seo" "cdn"}}/js/pc-collect-user-info.js?v={{Msg "seo" "version"}}'></script>
-  <script src='{{Msg "seo" "cdn"}}/js/pc-message-index.js?v={{Msg "seo" "version"}}'></script>
   <script src=//cdn-common.jianyu360.com/cdn/lib/svga-web/svga.min.js></script>
-  <script src='{{Msg "seo" "cdn"}}/js/pc-message-index.js?v={{Msg "seo" "version"}}'></script>
+<!--  <script src='{{Msg "seo" "cdn"}}/js/pc-message-index.js?v={{Msg "seo" "version"}}'></script>-->
+    <script src='{{Msg "seo" "cdn"}}/js/pc-message-new.js?v={{Msg "seo" "version"}}'></script>
   <script type="text/javascript" src='{{Msg "seo" "cdn"}}/js/index/index.js?v={{Msg "seo" "version"}}'></script>
   <script src='{{Msg "seo" "cdn"}}/common-module/chat/jy-chat-mini.umd.js?auto=false&v={{Msg "seo" "version"}}'></script>
   <script>