<template>
<van-row class="message-receiver__container">
<van-col :span="24" class="message-receiver__header">消息</van-col>
<van-col :span="24" class="message-receiver__search">
<van-search
v-model="searchValue"
placeholder="请输入标题或内容..."
@change="onSearchChange"
@input="onSearch"
@search="onSearch"
@cancel="onCancel"
>
<template #left-icon>
<i class="icon icon-sousuo1"></i>
</template>
</van-search>
</van-col>
<van-col :span="24" class="message-receiver__body">
<van-pull-refresh
v-model="isDownLoading"
@refresh="onRefresh()"
:head-height="0"
>
<van-list
ref="vanList"
v-model="loading"
:finished="finished"
finished-text=""
:immediate-check="false"
:offset="20"
@load="onLoad"
>
<van-cell-group
v-for="item in itemList"
:key="item.id"
class="message-list__group"
@click="showItem(item)"
>
<van-cell class="message-list__cell">
<template #title>
<div class="message-item__title">
<i class="icon icon-yiduxiaoxi" v-if="item.receiveTime"></i>
<i class="icon icon-weiduxiaoxi" v-else></i>
<!-- <van-icon
v-if="!item.receiveTime"
name="envelop-o"
size="24"
dot
/>
<van-icon v-else name="certificate" size="24" color="#999" /> -->
<span
class="van-ellipsis"
v-html="brightenKeyword(item.subject, searchValue)"
></span>
</div>
<div class="message-item__foot">
<span
v-html="brightenKeyword(item.owner, searchValue)"
></span>
<span>{{ item.createTime }}</span>
</div>
</template>
</van-cell>
<van-cell class="message-list__tail" title="立即处理" is-link />
</van-cell-group>
</van-list>
</van-pull-refresh>
<van-empty
v-if="itemList.length == 0"
class="custom-image"
description="暂无内容"
/>
<tabBar ref="tabBar" :active-index="1"></tabBar>
<PlacedTop></PlacedTop>
</van-col>
</van-row>
</template>
<script>
import { getMessageList } from '@/api/portal.js'
import { Dialog } from 'vant'
const tabBar = () => import('@/components/TabBar.vue')
const PlacedTop = () => import('@/components/PlacedTop.vue')
export default {
name: 'MessageReceiverList',
components: {
tabBar,
PlacedTop,
},
data() {
return {
searchValue: '',
loading: false,
finished: false,
isLoading: false,
isDownLoading: false,
page: 1,
itemList: [],
}
},
created() {
this.onRefresh()
},
methods: {
brightenKeyword(val, keyword) {
if (typeof val == 'number') {
val = val.toString()
}
const Reg = new RegExp(keyword, 'ig')
if (val) {
const res = val.replace(
Reg,
`<span class='changColor'>${keyword}</span>`
)
return res
}
},
onSearchChange(event) {
this.onRefresh()
},
onSearch(event) {
this.onRefresh()
},
onCancel() {
this.searchValue = ''
this.onRefresh()
},
//上拉加载
//异步请求数据 ,我们的项目时封装好的方法,此处只是调用
onLoad() {
let params = {
pageBean: {
page: this.page,
pageSize: this.pageSize,
showTotal: true,
},
querys: [
// {
// group: 'filterTime',
// operation: 'EQUAL',
// property: 'receiveTime',
// relation: 'AND',
// value: 1,
// },
],
sorter: [
{ direction: 'DESC', property: 'receiver_name_' },
{ direction: 'DESC', property: 'CREATE_TIME_' },
],
}
if (this.searchValue) {
params.querys.push({
property: 'subject',
value: '%' + this.searchValue + '%',
operation: 'LIKE',
relation: 'OR',
group: 'quickSearch',
})
params.querys.push({
property: 'content',
value: '%' + this.searchValue + '%',
operation: 'LIKE',
relation: 'OR',
group: 'quickSearch',
})
}
let _self = this
getMessageList(params)
.then((response) => {
let rows = response.rows
_self.loading = false //数据请成功后
_self.isDownLoading = false //数据请成功后
_self.page++ //页码要增加1
if (rows == null || rows.length === 0) {
// 加载结束
_self.finished = true
return
}
// 将新数据与老数据进行合并
_self.itemList = _self.itemList.concat(rows)
//如果列表数据条数>=总条数,不再触发滚动加载
if (_self.itemList.length >= response.total) {
_self.finished = true
}
})
.catch((error) => {})
.finally(() => {
_self.isDownLoading = false
_self.isUpLoading = false
})
},
onRefresh() {
//下拉刷新
this.finished = false
this.page = 1
this.itemList = []
this.loading = true
this.onLoad() //正常的请求数据的方法,数组重新赋值
},
showItem(item) {
let _this = this
this.$http
.get(
`${window.context.portal}/innermsg/messageReceiver/v1/get?id=` +
item.id
)
.then(
(response) => {
Dialog.alert({
title: item.subject,
message: response.content,
className: 'approval-reminder',
getContainer: '.message-receiver__container',
}).then(() => {
if (!item.receiveTime) {
_this.$refs.tabBar.refreshMsgbadge()
_this.onRefresh()
}
})
},
(error) => {}
)
},
},
}
</script>
<style lang="scss" scoped>
.message-receiver__container {
background: #f5f5f5;
height: calc(100% - 44px);
.message-receiver__header {
background: #fff;
line-height: 44px;
height: 44px;
text-align: center;
position: fixed;
z-index: 10;
font-size: 17px;
font-weight: 800;
color: #222222;
}
.message-receiver__search {
margin: 60px 16px 10px;
width: calc(100% - 32px);
border-radius: 8px;
::v-deep {
.van-field__left-icon {
// line-height: 20px;
height: 20px;
}
.icon {
font-size: 18px;
}
.van-search {
padding: 1px;
height: 32px;
border-radius: 8px;
background: #f5f5f5;
.van-search__content {
background: #fff;
border-radius: 8px;
}
}
}
}
.message-receiver__body {
height: calc(100% - 113px);
overflow-y: auto;
padding: 0px 16px;
::v-deep {
.van-search__content {
border-radius: 8px;
padding-left: 8px;
}
.van-field__control {
height: 20px;
line-height: 20px;
font-size: 14px;
color: #bfbfbf;
}
.van-cell__value {
line-height: 20px;
height: 20px;
}
}
}
.message-list__group {
margin-bottom: 10px;
border-radius: 12px;
.message-list__cell {
width: 100%;
border-radius: 12px;
padding: 16px 12px;
height: 82px;
.van-cell__title {
width: 100%;
}
.icon {
font-size: 16px;
width: 24px;
height: 24px;
background: rgba(64, 158, 255, 0.1);
border-radius: 18px 18px 18px 18px;
display: flex;
justify-content: center;
align-items: center;
position: relative;
color: #409eff;
}
.icon-yiduxiaoxi {
color: rgba(#409eff, 0.64);
}
.icon-weiduxiaoxi::after {
position: absolute;
top: -3px;
right: -3px;
width: 8px;
height: 8px;
background: #e55555;
border-radius: 18px 18px 18px 18px;
content: ' ';
}
}
.message-list__tail {
line-height: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 12px;
padding: 17px 12px 16px;
.van-cell__title {
height: 17px;
line-height: 17px;
}
span {
font-size: 12px;
color: #333333;
}
.van-icon {
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
}
}
.message-item__title {
display: flex;
align-items: center;
justify-content: flex-start;
.van-icon {
color: $--color-primary;
}
span {
margin-left: 8px;
color: #262626;
font-size: 16px;
font-weight: bold;
}
}
.message-item__foot {
display: flex;
align-items: center;
justify-content: space-between;
margin: 8px 0 0 0;
padding: 0 0 0 32px;
span {
color: #8c8c8c;
font-size: 12px;
font-weight: 400;
}
}
}
}
::v-deep .approval-reminder {
border-radius: 12px 12px 12px 12px;
color: #262626;
.van-dialog__header {
padding-top: 24px;
color: #262626;
font-weight: 800;
font-size: 17px;
}
.van-dialog__message--has-title {
padding: 8px 16px 10px;
}
.van-button {
font-size: 15px;
font-weight: 400;
color: #409eff;
}
}
::v-deep .changColor {
color: #409eff;
}
</style>