'消息中心'

src/pages/messageCenter/message-list.vue

@@ -4,7 +4,7 @@
       <div slot="center" class="top-word">消息通知</div>
     </h-header>
     <h-content class="content">
-       <div v-for="(item,index) in list" :key="index" class="card-info">
+      <!-- <div v-for="(item,index) in list" :key="index" class="card-info">
         <div class="card-position">
           <div class="card-top">
             <img src="@/assets/messageCenter/messageIcon.png" class="icon" >
@@ -14,20 +14,33 @@
           <img src="@/assets/messageCenter/messageIcon.png" class="arrow">
           <div class="message">{{ item.notice_body }}</div>
         </div>
-      </div>
+      </div>-->
       <!--下面代码不要删****************************************************************-->
-   <!--   <section v-for="(item,index) in list" :key="index" class="msg-wrap">
+      <section v-for="(item,index) in list" :key="index" class="msg-wrap">
         <list-item>
           <item>
             <img slot="left-icon" src="@/assets/messageCenter/messageIcon.png" class="left-icon">
             <div slot="name">{{ item.msg_title }}</div>
             <div slot="content">{{ item.msg_time }}</div>
           </item>
-          <div class="msg-content" :class="{ 'nowrap': isFold}">
-            {{ item.msg_content }}<span>展开</span>
+          <!--  <div class="msg-content" :class="{ 'nowrap': isFold}">
+              {{ item.msg_content }}<span>展开</span>
+            </div>-->
+          <div class="msg-content">
+            <div class="text">
+              <div
+                ref="textContainer" :class="{'retract': item.status}"
+                :style="{'max-height':item.status ? textHeight: ''}">
+                {{ item.msg_content }}
+              </div>
+              <div class="btn">
+                <p v-if="item.status" @click="item.status = false">展开</p>
+                <p v-if="item.status == false" @click="item.status = true">收起</p>
+              </div>
+            </div>
           </div>
         </list-item>
-      </section>-->
+      </section>
     </h-content>
   </h-view>
 </template>
@@ -35,12 +48,13 @@
 export default {
   data () {
     return {
+      textHeight: null,
       isFold: true,
-      list:[],
-     /* list: [
+      // list:[],
+      list: [
         {
           msg_title: '视频面签',
-          msg_content: '**************************************************进件号：2001于2019-08-29进行视频面签，届时请注意接收视频消息！',
+          msg_content: '您有一条保证缴纳确认信息待您确认，请确认进件号：2001于2019-08-29进行视频面签，届时请注意接收视频消息！',
           msg_time: '2019-10-20',
         },
         {
@@ -60,15 +74,47 @@ export default {
           msg_content: '您好，您的合同CON20190802001已逾期1期，请及时还款，谢谢！',
           msg_time: '2019-10-20',
         },
-      ],*/
+      ],
     }
   },
   beforeRouteEnter (to, from, next) {
     next(vm => {
-       vm.getInfo()
+      //vm.getInfo()
     })
   },
+  mounted () {
+    this.list.forEach((item, index) => {
+      this.$set(this.list, index, Object.assign({}, item, {status: null}))
+    })
+    // DOM 加载完执行
+    this.$nextTick(() => {
+      this.calculateText()
+    })
+    window.onresize = () => {
+      this.list.forEach((item, index) => {
+        this.$set(this.list, index, Object.assign({}, item, {status: null}))
+      })
+      setTimeout(() => {
+        this.calculateText()
+      }, 0)
+    }
+  },
   methods: {
+    // 计算文字 显示展开 收起
+    calculateText () {
+      // 获取一行文字的height 计算当前文字比较列表文字
+      let twoHeight = 40
+      this.textHeight = `${twoHeight}px`
+      let txtDom = this.$refs.textContainer
+      for (let i = 0; i < txtDom.length; i++) {
+        let curHeight = txtDom[i].offsetHeight
+        if (curHeight > twoHeight) {
+          this.$set(this.list, i, Object.assign({}, this.list[i], {status: true}))
+        } else {
+          this.$set(this.list, i, Object.assign({}, this.list[i], {status: null}))
+        }
+      }
+    },
     getInfo () {
       let vm = this
       let url = process.env.basePath + 'hls_app_notice_query'
@@ -90,73 +136,127 @@ export default {
 </script>
 <style lang="less" scoped>
   @import "../../styles/mixin";
-#message-center {
-  .card-info {
-    width: 100%;
-    height: 78px;
-    background-color: #fff;
-    .card-position {
-      width: 90%;
-      margin: 0 auto;
-      .card-top {
-        padding-top: 16px;
-        display: flex;
-        align-items: center;
-        .time {
-          font-family: PingFangSC-Regular;
-          font-size: 12px;
-          color: rgba(56, 63, 69, 0.6);
-          flex:6;
+
+  #message-center {
+    /*  .card-info {
+        width: 100%;
+        height: 78px;
+        background-color: #fff;
+        .card-position {
+          width: 90%;
+          margin: 0 auto;
+          .card-top {
+            padding-top: 16px;
+            display: flex;
+            align-items: center;
+            .time {
+              font-family: PingFangSC-Regular;
+              font-size: 12px;
+              color: rgba(56, 63, 69, 0.6);
+              flex:6;
+            }
+          }
+          .arrow{
+              width:10px;
+              height:12px;
+              float: right;
+          }
+          .title {
+            font-family: PingFangSC-Semibold;
+            font-size: 14px;
+            color: #00469c;
+            font-weight: bold;
+            margin-left: 11px;
+            flex:15;
+          }
+          .icon {
+            width: 13px;
+            height: 15px;
+            flex:1;
+          }
+          .message {
+            font-family: PingFangSC-Regular;
+            font-size: 13px;
+            color: #656464;
+            margin-top:10px;
+            margin-left:24px;
+            line-height:16px;
+          }
         }
       }
-      .arrow{
-          width:10px;
-          height:12px;
-          float: right;
-      }
-      .title {
-        font-family: PingFangSC-Semibold;
+      .card-info:not(:first-child) {
+          margin-top:8px;
+      }*/
+
+    .content {
+      padding-top: 10px;
+    }
+
+    .msg-wrap {
+      margin: 0 2%;
+
+      .msg-content {
+        margin-left: 11%;
+        margin-right: 4%;
+        line-height: 20px;
+        font-family: PingFangSC-Regular;
         font-size: 14px;
-        color: #00469c;
-        font-weight: bold;
-        margin-left: 11px;
-        flex:15;
+        color: #4B4A4B;
       }
-      .icon {
-        width: 13px;
-        height: 15px;
-        flex:1;
-      }
-      .message {
-        font-family: PingFangSC-Regular;
-        font-size: 13px;
-        color: #656464;
-        margin-top:10px;
-        margin-left:24px;
-        line-height:16px;
+
+      .nowrap {
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical
       }
     }
-  }
-  .card-info:not(:first-child) {
-      margin-top:8px;
-  }
 
-/*  .msg-content{
-    margin-left: 11%;
-    //padding-bottom: 10px;
-    line-height: 20px;
-    font-family: PingFangSC-Regular;
-    font-size: 14px;
-   // .border-bottom;
-    color: #4B4A4B;
-  }
-  .nowrap{
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical
-  }*/
+    .text {
+      position: relative;
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 2px;
+      color: #666666;
+    }
 
-}
+    .retract {
+      position: relative;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical
+    }
+
+    .retract:after {
+      content: '...';
+      position: absolute;
+      bottom: 0;
+      right: 2px;
+      width: 84px;
+      padding-left: 30px;
+      background: linear-gradient(to right, transparent, #fff 45%);
+    }
+
+    .btn {
+      position: absolute;
+      right: 0;
+      bottom: 1px;
+      font-size: 14px;
+      line-height: 19px;
+      letter-spacing: 2px;
+      color: @headerColor;
+      cursor: pointer;
+    }
+
+    .more {
+      font-size: 14px;
+      line-height: 20px;
+      letter-spacing: 2px;
+      color: #666666;
+      visibility: hidden;
+    }
+  }
 </style>