//消息提示
<template>
<div>
<van-popup v-model="show" round position="bottom" class="allHome">
<div class="allHome_top">
<i class="icon-guanbi icon" @click="close"></i>
<div class="allHome_top_title">消息提醒</div>
<ul class="allHome_top_content">
<li v-for="(item, i) of dataList" :key="i" :class="hasTask(item)">
<div class="allHome_top_content_left">
{{ item.desc }}
<!-- 您有
<span>{{ item.num }}</span>
条待办未处理! -->
</div>
<div class="allHome_top_content_right" @click="lookTo(item)">
查看
<van-icon name="arrow" />
</div>
</li>
</ul>
</div>
</van-popup>
<van-popup
ref="mobileNewsRead"
v-model="showVisible"
get-container="body"
position="left"
style="width: 100vw; height: 100vh"
:close-on-click-overlay="false"
:overlay="true"
>
<div class="tipTitle"></div>
<van-sticky>
<van-nav-bar left-arrow @click-left="closeDialog">
<slot slot="title" name="title">
{{ tipTitle || '消息提醒' }}
</slot>
</van-nav-bar>
</van-sticky>
<div class="iframe">
<iframe frameborder="0" allowtransparency="0" :src="srcUrl"></iframe>
</div>
</van-popup>
</div>
</template>
<script>
import { getCurrentUserPopup } from '@/api/portal.js'
export default {
data() {
return {
show: false,
showVisible: false,
dataList: [],
tipTitle: '',
srcUrl: '', // 跳转链接
}
},
// created() {
// this.loadPopups()
// },
methods: {
loadPopups() {
getCurrentUserPopup().then((res) => {
if (res.state && res.value) {
this.dataList = res.value
if (this.dataList.length > 0) {
this.show = true
}
if (res.value.length && res.value[0].styleContent) {
this.styleContent = JSON.parse(res.value[0].styleContent)
}
}
})
},
//待办已办变红色
hasTask(val) {
if (val.url && val.url.indexOf('/matter/myTask') != -1) {
return 'hasTask'
}
},
lookTo(tipItem) {
this.tipTitle = ''
let token = this.$store.state.login.currentUser.token
let url =
tipItem.url.indexOf('?') > -1
? `${tipItem.url}&token=${token}`
: `${tipItem.url}?token=${token}`
let baseUrl =
url && url.trim().startsWith('http') ? '' : window.context.front
switch (tipItem.popupType) {
case 'tab':
this.routerChange(tipItem.url)
break
case 'new':
window.open(`${baseUrl}${url}`)
// this.srcUrl = `${baseUrl}${url}`
this.showVisible = true
break
case 'dialog':
this.tipTitle = tipItem.subject
this.srcUrl = `${baseUrl}${url}`
this.showVisible = true
break
default:
break
}
},
routerChange(url) {
if (url.trim().startsWith('http')) {
this.srcUrl = url
this.showVisible = true
} else {
this.$router.push({ path: url })
}
},
closeDialog() {
this.showVisible = false
},
close() {
this.show = false
},
},
}
</script>
<style lang="scss" scoped>
.allHome {
z-index: 99999;
position: fixed;
bottom: 0;
height: 359px;
background: transparent;
border-radius: 12px 12px 0px 0px;
padding: 0;
width: 100%;
&::before {
background: url('../assets/images/MessageBackground.png');
// background-position: center;
background-repeat: no-repeat;
background-size: cover;
content: ' ';
width: 100%;
height: 151px;
position: absolute;
top: 0;
z-index: 1;
border-radius: 12px 12px 0px 0px;
}
.icon {
background: #8c8c8c;
padding: 6px;
width: 12px;
height: 12px;
font-size: 8px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
right: 16px;
top: 13px;
z-index: 999;
color: rgb(208, 228, 251);
border-radius: 50%;
}
&_top {
background: #fff;
position: absolute;
bottom: 0;
width: calc(100% - 32px);
padding: 0 16px 4px;
height: 324px;
border-radius: 12px 12px 0px 0px;
&_title {
padding-top: 80px;
color: #262626;
font-weight: 800;
font-size: 17px;
height: 24px;
z-index: 44;
position: relative;
}
&_content {
margin-top: 16px;
z-index: 3;
height: 190px;
overflow-y: auto;
.allHome_top_content_left {
width: 265px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
li {
display: flex;
align-items: center;
justify-content: space-between;
position: relative;
margin-bottom: 12px;
padding: 0 12px;
border-radius: 8px 8px 8px 8px;
height: 48px;
background: linear-gradient(
270deg,
rgba(64, 158, 255, 0.02) 0%,
rgba(64, 158, 255, 0.1) 100%
);
z-index: 44;
}
li:last-child {
margin-bottom: 0;
}
.hasTask {
background: linear-gradient(
271deg,
rgba(229, 85, 85, 0.02) 0%,
rgba(229, 85, 85, 0.1) 100%
);
.allHome_top_content_left {
color: #e55555 !important;
}
}
&_right {
font-weight: 400;
color: #409eff;
height: 18px;
font-size: 13px;
line-height: 25px;
white-space: nowrap;
}
&_left {
font-size: 14px;
font-weight: 400;
height: 25px;
line-height: 25px;
color: #409eff;
span {
font-weight: bolder;
font-size: 16px;
}
}
}
}
}
.tipTitle {
text-align: center;
}
::v-deep .van-nav-bar__title {
font-weight: 800;
font-size: 17px;
}
.iframe {
width: 100%;
height: calc(100% - 46px);
overflow: hidden;
iframe {
width: 100%;
height: 100%;
overflow-y: auto;
}
}
</style>