<div class="msg-wrapper"
ref="scrollDiv">
<ul v-if="msgList.length" class="msg-list">
<li
:class="msgInfo.mp ? 'msg-item-right' : 'msg-item-left'"
v-for="(msgInfo, i) in msgList"
:key="i">
<div class="avatar-name">
<div class="avatar">
<img :src="msgInfo.avatar" alt="">
</div>
<div class="name">{{msgInfo.nickName}}</div>
</div>
<div class="msg-box">
<div class="msg-info">
<!-- 文本消息 -->
<div class="msg-text"
v-if="msgInfo.msgType === 'text'">
<div class="msg-cont"
v-html="handleTextCont(msgInfo)"></div>
</div>
<!-- 链接消息 -->
<div class="msg-text"
v-if="msgInfo.msgType === 'link'">
<div class="msg-cont">{{`【${msgInfo.msgTypeInfo}】${msgInfo.url}`}}</div>
</div>
<!-- 图片 -->
<div class="msg-other"
v-if="msgInfo.msgType === 'image'">
<div class="msg-cont">
<div class="bg"
@click="handlePreviewImg(msgInfo)"
:style="{backgroundImage: `url(${getWxImg(msgInfo.picUrl)})`}"></div>
</div>
</div>
<!-- 视频、小视频-->
<div class="msg-other"
v-if="msgInfo.msgType === 'video' || msgInfo.msgType === 'small_video'">
<div class="msg-cont">
<div class="bg"
@click="handlePreviewVideo(msgInfo)"
:style="{backgroundImage: `url(${getWxImg(msgInfo.picUrl)})`}">
<div class="mask"></div>
</div>
</div>
</div>
<!-- 图文 -->
<div class="msg-other"
v-if="msgInfo.msgType === 'news'">
<div class="msg-cont">
<div class="bg"
:style="{backgroundImage: `url(${getWxImg(msgInfo.picUrl)})`}">
</div>
<div class="title">{{msgInfo.title}}</div>
</div>
</div>
<!-- 音频 -->
<div class="msg-other"
v-if="msgInfo.msgType === 'voice'">
<div class="msg-cont">
<voicePlayer :voiceUrl="msgInfo.url"></voicePlayer>
<!-- <div class="cont-audio"></div> -->
</div>
</div>
<!-- 关注、取消关注、通过二维码关注 -->
<div class="msg-text"
v-if="msgInfo.msgType === 'subscribe' || msgInfo.msgType === 'unsubscribe' || msgInfo.msgType === 'subscribe_by_qrcode'">
<div class="msg-cont">{{`【${msgInfo.msgTypeInfo}】`}}</div>
</div>
<!-- 扫描二维码 -->
<div class="msg-text"
v-if="msgInfo.msgType === 'scan'">
<div class="msg-cont">{{`【${msgInfo.msgTypeInfo}】`}}</div>
</div>
<!-- 点击自定义菜单、点击菜单跳转 -->
<div class="msg-text"
v-if="msgInfo.msgType === 'click' || msgInfo.msgType === 'view'">
<div class="msg-cont"
v-html="handleMenuCont(msgInfo)"></div>
</div>
<!-- 定位 -->
<div class="msg-other"
v-if="msgInfo.msgType === 'location'">
<div class="msg-cont">
<div class="icon-location"></div>
<div class="address">
<p class="area">{{msgInfo.title}}</p>
<p class="detail">上海市徐汇区肇嘉浜路807号</p>
</div>
</div>
</div>
</div>
<div class="creat-time">{{msgInfo.createTime}}</div>
</div>
</li>
</ul>
<div v-else class="default-page">暂无数据</div>
</div>
export default {
name: 'msgBrowse',
components: {
backHeader,
voicePlayer,
previewImg,
previewVideo
},
data () {
return {
loadingList: false, // 列表加载时的loading
date: '',
timeValue: [],
pickerOptions: {
disabledDate (time) {
// 今天及以前
return time.getTime() > Date.now()
}
},
page: 1,
pageSize: 10,
count: 0,
msgList: []
}
},
methods: {
// 时间筛选
handleSearch () {
this.page = 1
this.fetchMsgList()
},
// 获取消息列表
fetchMsgList () {
if (this.loadingList) {
return
}
this.loadingList = true
let startT = this.timeValue.length ? this.timeValue[0] : null
let endT = this.timeValue.length ? this.timeValue[1] : null
let startTime = startT ? this.formatDate(new Date(startT), 'yyyyMMddhhmmss') : null
let endTime = endT ? this.formatDate(new Date(endT), 'yyyyMMddhhmmss') : null
let appid = sessionStorage.getItem('appid')
let url = `${this.SERVICE_WECHAT}/msg/${appid}/msg/browse/list`
this.get(url, {
startTime: startTime,
endTime: endTime,
currentPage: this.page,
pageSize: this.pageSize
}).then(res => {
this.loadingList = false
if (res.data.code === 200) {
let data = res.data.data
if (data && data.msgList) {
this.count = +data.msgList.total
if (data.msgList.list && data.msgList.list.length) {
this.msgList = this.msgList.concat(data.msgList.list)
}
}
}
}).catch(e => {
this.loadingList = false
this.handleError(e)
})
},
dateChange () {
this.timeValue = this.timeRange
},
// --------------无限加载----------------
handleScroll (e) {
const scrollTop = e.target.scrollTop
// const windowHeight = e.target.clientHeight
const scrollHeight = e.target.scrollHeight
const offsetHeight = e.target.offsetHeight
if ((offsetHeight + scrollTop) - scrollHeight >= -1 && this.count > this.msgList.length && !this.loadingList) {
this.page += 1
this.fetchMsgList()
}
}
},
created () {
this.date = this.dateDefault
this.timeValue = this.timeRange
this.fetchMsgList()
},
mounted () {
this.$refs.scrollDiv.addEventListener('scroll', this.handleScroll, true)
},
beforeDestroy () {
this.$refs.scrollDiv.removeEventListener('scroll', this.handleScroll)
}
}
网友评论