<template> <h-view id="message-center"> <h-header class="bar-custom"> <div slot="center" class="top-word">消息通知</div> </h-header> <!-- <h-content class="content"> --> <div v-if="list.length===0"> <div class="display"> <img src="@/assets/messageCenter/noMsg.png" alt=""> </div> </div> <scroll v-if="list.length !== 0" ref="scroll" :updateData="[list]" :pullUp="true" class="has-footer" @pullingUp="getInfo"> <section v-for="(item,parentIndex) in list" :key="parentIndex" class="msg-wrap"> <item-option ref="itemOption"> <list-item> <item :hasBorder="false" :proportion="[2,2]"> <div v-if="item.notice_type==3" slot="left-icon" class="left-icon left-icon-box"> <img src="@/assets/messageCenter/messageIcon.png" > </div> <div v-if="item.notice_type==2" slot="left-icon" class="left-icon over-icon-box"> <img src="@/assets/messageCenter/overIcon.png" > </div> <div v-if="item.notice_type==1" slot="left-icon" class="left-icon red-icon-box"> <img src="@/assets/messageCenter/message.png" > </div> <div slot="name" :class="{'font-color':true,'over-color':item.notice_type==2,'red':item.notice_type==1}" >{{ item.notice_title }}</div> <div slot="content" class="time-color">{{ item.notice_time }}</div> </item> <div class="msg-content"> <div class="text"> <div ref="textContainer" :class="{'retract': item.status}" :style="{'max-height':item.status ? textHeight: ''}" >{{ item.notice_body }}</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 v-if="item.notice_type==2" class="detail-wrap" @click="goDetail(item.notice_id)"> <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)" /> </div> </item-option> </section> <!-- </h-content> --> </scroll> </h-view> </template> <script> export default { data () { return { textHeight: null, isFold: true, pagenum: 1, list: [], } }, beforeRouteEnter (to, from, next) { next(vm => { vm.list = [] vm.pagenum = 1 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 }) ) } } }, goDetail (e) { this.$router.push({ name: 'RejectDetail', params: { notice_id: e, }, }) }, getInfo () { let vm = this let url = process.env.basePath + 'hls_app_notice_query' let param = { phone: window.localStorage.getItem('user_phone'), pagesize: '10', pagenum: vm.pagenum, } hlsPopup.showLoading('请稍候') vm.$post(url, param).then(function (res) { vm.hlsPopup.hideLoading() if (res.result === 'S') { let returnData = [] returnData = res.lists if (returnData.length === 0) { vm.$refs.scroll.update(true) } else if (returnData.length > 0 && returnData.length < 10) { vum.forEach(returnData, function (data, index, array) { vm.list.push(array[index]) }) vm.$refs.scroll.update(true) } else if (returnData.length === 10) { vum.forEach(returnData, function (data, index, array) { vm.list.push(array[index]) }) vm.pagenum++ vm.$refs.scroll.update(false) } } else { hlsPopup.showLongCenter(res.message) } }) }, deleteFun (Index) { let vm = this hlsPopup.showConfirm({ title: '提示', content: '确认删除', onConfirm: function (index) { if (index === 1) { vm.list.remove(Index) vm.list.sort() vm.$refs.itemOption[0].reset() } }, }) }, }, } </script> <style lang="less"> @import "../../styles/mixin"; #message-center { // .content { // padding-top: 10px; // } .display { position: fixed; top: 0; img { width: 100%; height: 100%; // margin-top: -70px; } } .swipeout-list { height: auto; padding: 0; .function { right: -22% !important; } } .msg-wrap { margin: 0 2% 10px 2%; // padding-top: 10px; // background-color:rgb(239,239,239) .msg-content { margin-left: 14%; margin-right: 4%; line-height: 20px; font-family: PingFangSC-Regular; font-size: 14px; color: #4b4a4b; padding-bottom: 10px; } .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%);*/ content: "..."; position: absolute; bottom: -0.02rem; right: 0.04rem; width: 62px; padding-left: 3px; background: #fff; } .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; } } .red-icon-box { position: relative; width: 26px; height: 26px; background: #fdd1d5; 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 { color: #fdb62f; } .red { color: #d81e06; } } .add-content { .time-color { font-family: PingFangSC-Regular; font-size: 13px; color: rgba(56, 63, 69, 0.6); } } img { width: 14px; height: 14px; } } .detail-wrap { margin-top: 10px; width: 100%; height: 35px; padding: 0 4% 0 14%; display: flex; justify-content: center; align-items: center; .detail-wrap-content { width: 100%; height: 100%; display: flex; border-top: 1px solid #F3F3F7; justify-content: space-between; align-items: center; span { font-family: PingFangSC-Semibold; font-size: 14px; color: #4b4a4b; } img { width: 14px; } } } .content { position: absolute; top: 0; } .scrollContent { padding-top: 1rem; padding-bottom: 20px; } } .platform-ios { #message-center { .scrollContent { padding-top: 1.4rem; } } } @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) { .platform-ios { #message-center { .scrollContent { padding-top: 2rem; } .display{ top:1.68rem; } } } } // iPhoneXR适配 @media (device-width: 414px) and (device-height: 896px) { .platform-ios { #message-center { .scrollContent { padding-top: 2rem; } .display{ top:1.68rem; } } } } </style>