''

src/pages/messageCenter/message-list.vue___jb_tmp___

+<template>
+  <h-view id="message-center">
+    <h-header class="bar-custom">
+      <div slot="center" class="top-word">消息通知</div>
+    </h-header>
+    <h-content class="content">
+      <section v-for="(item,parentIndex) in list" :key="parentIndex" class="msg-wrap">
+        <item-option>
+          <list-item>
+            <item :hasBorder="false" :proportion="[2,2]">
+              <div slot="left-icon" class="left-icon left-icon-box"><img src="@/assets/messageCenter/messageIcon.png"></div>
+              <div slot="name" class="font-color">{{ item.msg_title }}</div>
+              <div slot="content" class="time-color">{{ item.msg_time }}</div>
+            </item>
+            <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>
+            <div class="detail-wrap">
+              <div class="detail-wrap-content">
+                <span>查看详情</span>
+                <img src="@/assets/messageCenter/right-gray.png">
+              </div>
+            </div>
+          </list-item>
+          <div slot="buttons">
+            <option-button type="warn" text="删除" @click.native="deleteFun(parentIndex)"></option-button>
+          </div>
+        </item-option>
+      </section>
+      <!--逾期消息-->
+      <section v-for="(item,Index) in overList" class="msg-wrap">
+        <list-item>
+          <item :hasBorder="false" :proportion="[2,2]">
+            <div slot="left-icon" class="left-icon over-icon-box"><img src="@/assets/messageCenter/overIcon.png"></div>
+            <div slot="name" class="over-color">{{ item.msg_title }}</div>
+            <div slot="content" class="time-color">{{ item.msg_time }}</div>
+          </item>
+          <div class="msg-content">
+            <div class="text" style="padding-bottom: 10px;">
+              <div>{{ item.msg_content }}</div>
+            </div>
+          </div>
+        </list-item>
+      </section>
+    </h-content>
+  </h-view>
+</template>
+<script>
+export default {
+  data () {
+    return {
+      textHeight: null,
+      isFold: true,
+      // list:[],
+      list: [
+        {
+          msg_title: '视频面签',
+          msg_content: '您有一条保证缴纳确认信息待您确认，请确认：2001于2019-08-29进行视频面签，届时请注意接收视频消息！',
+          msg_time: '2019-10-20',
+        },
+        {
+          msg_title: '保证金确认',
+          msg_content: '您有一条保证缴纳确认信息待您确认，请确认！',
+          msg_time: '2019-10-20',
+        },
+        {
+          msg_title: '进件确认',
+          msg_content: '进件号：201903022201待您确认，请确认！',
+          msg_time: '2019-10-20',
+        },
+      ],
+      overList: [
+        {
+          msg_title: '逾期提醒',
+          msg_content: '您好，您的合同CON20190802001已逾期1期，请及时还款，谢谢！',
+          msg_time: '2019-10-20',
+        },
+      ],
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      // 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'
+      let param = {
+        phone: window.localStorage.getItem('user_phone'),
+      }
+      hlsPopup.showLoading('请稍候')
+      vm.$post(url, param).then(function (res) {
+        vm.hlsPopup.hideLoading()
+        if (res.result === 'S') {
+          vm.list = res.lists
+        } else {
+          hlsPopup.showLongCenter(res.message)
+        }
+      })
+    },
+    deleteFun(Index){
+      let vm = this
+      hlsPopup.showConfirm({
+        x === 1) {
+22112123123123123231312312312312213213123            vm.list.sort()
+          }
+        },
+
+
+
+gfdsaaswqwqweweqweqweqe    },
+  },
+}
+</script>
+<style lang="less">
+  @import "../../styles/mixin";
+
+  #message-center {
+    .content {
+      padding-top: 10px;
+    }
+.swipeout-list{
+  height: auto;
+  padding: 0;
+  .function{
+    right: -22% !important;
+  }
+}
+    .msg-wrap {
+      margin: 0 2% 10px 2%;
+
+      .msg-content {
+        margin-left: 14%;
+        margin-right: 4%;
+        line-height: 20px;
+        font-family: PingFangSC-Regular;
+        font-size: 14px;
+        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;
+    }
+    .left-icon-box{
+      position: relative;
+      width: 26px;
+      height: 26px;
+      background: #efefef;
+      border-radius: 8px;
+      img{
+        position: absolute;
+        left: 6px;
+        z-index: 100;
+        top: 6px;
+      }
+    }
+    .over-icon-box{
+      position: relative;
+      width: 26px;
+      height: 26px;
+      background: #FFFFE0;
+      border-radius: 8px;
+      img{
+        position: absolute;
+        left: 6px;
+        z-index: 100;
+        top: 6px;
+      }
+    }
+    .contents{
+      .add-name{
+        .font-color{
+          font-family: PingFangSC-Semibold;
+          font-size: 15px;
+          color: #4B4A4B;
+        }
+        .over-color{
+          font-family: PingFangSC-Semibold;
+          font-size: 15px;
+          color: #FDB62F;
+        }
+      }
+      .add-content{
+        .time-color{
+          font-family: PingFangSC-Regular;
+          font-size: 13px;
+          color: rgba(56,63,69,0.60);
+        }
+      }
+      img{
+        width: 14px;
+        height: 14px;
+      }
+    }
+    .detail-wrap{
+      margin-top: 10px;
+      width: 100%;
+      height: 40px;
+      padding: 0 4% 0 14%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .detail-wrap-content{
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        .border-top;
+        span{
+          font-family: PingFangSC-Semibold;
+          font-size: 0.3rem;
+          color: #4B4A4B;
+        }
+        img{
+          width: 14px;
+        }
+      }
+    }
+  }
+</style>