XiaoMo/gterFang
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

系统通知

Browse Source
This commit is contained in:
A1300399510
2023-07-14 17:21:53 +08:00
parent fbfae2d4fc
commit 89d8462f7b
21 changed files with 492 additions and 104 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
src/components/public/empty-duck.vue Normal file
View File

@@ -0,0 +1,32 @@
<template>
<div class="empty-box flexflex">
<img class="empty-icon" src="@/assets/img/publicImage/empty-duck.png">
<text class="empty-text">{{ hintText || '暂无内容' }}</text>
</div>
</template>
<script setup>
const props = defineProps({
hintText: String,
})
</script>
<style lang="less" scoped>
.empty-box {
flex-direction: column;
align-items: center;
.empty-icon {
width: 102px;
height: 120px;
margin-bottom: 16px;
}
.empty-text {
color: #7f7f7f;
line-height: 24px;
font-size: 14px;
}
}
</style>

1
src/components/public/head.vue
View File

@@ -73,6 +73,7 @@ const tabList = [{
position: relative;
height: 260px;
margin: 0 auto;
min-width: 1200px;
.header-bj-box {
position: absolute;

278
src/components/user/systematic-notification-pop.vue
View File

@@ -1,28 +1,164 @@
<template>
<div class="pop-mask flexcenter">
<div class="content">
<div class="header flexcenter">
<div class="content flexflex">
<div class="header flexflex">
<img class="header-icon" src="@/assets/img/user/inform-icon.png" />
<img class="header-text" src="@/assets/img/user/inform-text.png" />
<img class="circle" src="@/assets/img/user/big-circle.svg">
<img class="circle" src="@/assets/img/user/small-circle.svg">
<img class="white-cross" @click="emit('close')" src="@/assets/img/publicImage/white-cross.svg">
</div>
<div class="attention flexacenter">
<div class="attention-text">关注寄托服务号，第一时间收到消息通知</div>
<div class="attention-btn flexcenter">关注</div>
<el-popover placement="bottom" popper-class="have-questions flexcenter" :width="160" trigger="click"
popper-style="border-radius: 14px;padding: 20px;">
<template #reference>
<div class="attention-btn flexcenter">关注</div>
</template>
<img class="QR-code" :src="qrcode" alt="">
</el-popover>
</div>
<div class="list"></div>
<div class="flex1 list scrollbar" @scroll="handleScroll">
<div class="empty-box" v-if="false">
<empty-duck></empty-duck>
</div>
<template v-for="(item, index) in list" :key="index">
<!-- event: certapplication 群发 middlemanauth 中介 tenementcertified 个人 tenementreport 举报 -->
<div class="item flexflex" v-if="item['event'] == 'certapplication'">
<img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
<div class="time">{{ item['timestamp'] }}</div>
<div class="text">{{ item['message'] }}</div>
<el-popover placement="bottom" :width="360" trigger="click" :show-arrow="false"
popper-style="background: transparent;padding:0;box-shadow: none;border: none;">
<template #reference>
<div class="footer flexcenter" v-if="item['data'] && item['data']['url']">
去认证<img class="green-arrow" src="@/assets/img/publicImage/green-arrow.svg">
</div>
</template>
<img v-if="item['data']['url'].indexOf('middlemanAuth') != -1" style="width: 360px;"
src="@/assets/img/publicImage/mediation-authentication-code.svg">
<img v-else style="width: 360px;" src="@/assets/img/publicImage/housing-certification-code.svg">
</el-popover>
</div>
<div class="item flexflex" v-else-if="item['event'] == 'middlemanauth'">
<img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
<div class="time">{{ item['timestamp'] }}</div>
<div class="text">{{ item['message'] }}</div>
<el-popover placement="bottom" :width="360" trigger="click" :show-arrow="false"
popper-style="background: transparent;padding:0;box-shadow: none;border: none;">
<template #reference>
<div class="footer flexcenter"
v-if="item.data && item.data['middlemanauthstatus'] == 0 && item.data.url">
去认证<img class="green-arrow" src="@/assets/img/publicImage/green-arrow.svg">
</div>
</template>
<img style="width: 360px;" src="@/assets/img/publicImage/mediation-authentication-code.svg">
</el-popover>
</div>
<div class="item flexflex" v-else-if="item['event'] == 'tenementcertified'">
<img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
<div class="time">{{ item['timestamp'] }}</div>
<div class="text">{{ item['message'] }}</div>
<div class="info flexacenter" v-if="item['data']">
<img class="soldOut" v-if="item['data']['status'] != 1" src="@/assets/img/user/u75.png" alt="">
<img class="img-icon" v-if="item['data']['isimage'] == 1"
src="@/assets/img/publicImage/img-icon.png">
<div class="title flex1 ellipsis">{{ item['data']['subject'] }}</div>
<div class="id">房源ID：{{ item['data']['id'] }}</div>
</div>
<el-popover placement="bottom" :width="360" trigger="click" :show-arrow="false"
popper-style="background: transparent;padding:0;box-shadow: none;border: none;">
<template #reference>
<div class="footer flexcenter"
v-if="item.data && item.data['tenementcertifiedstatus'] == 0 && item.data.url">
去认证<img class="green-arrow" src="@/assets/img/publicImage/green-arrow.svg">
</div>
</template>
<img style="width: 360px;" src="@/assets/img/publicImage/housing-certification-code.svg">
</el-popover>
</div>
<div class="item flexflex" v-else>
<img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
<div class="time">{{ item['timestamp'] }}</div>
<div class="text">{{ item['message'] }}</div>
<div class="text" v-for="item in item['data']['reportnummessage']">- {{ item }}</div>
<div class="info flexacenter" v-if="item['data']">
<img class="soldOut" v-if="item['data']['status'] != 1" src="@/assets/img/user/u75.png" alt="">
<img class="img-icon" v-if="item['data']['isimage'] == 1"
src="@/assets/img/publicImage/img-icon.png">
<div class="title flex1 ellipsis"
@click="goDetail(item['data']['uniqid'], item['data']['status'])">{{
item['data']['subject'] }}</div>
<div class="id">房源ID：{{ item['data']['id'] }}</div>
</div>
</div>
</template>
</div>
</div>
</div>
</template>
<script>
<script setup>
import emptyDuck from '@/components/public/empty-duck.vue'
import { onMounted, getCurrentInstance, ref, onUnmounted, defineEmits } from 'vue'
import { useRouter } from 'vue-router';
const emit = defineEmits(['close'])
const router = useRouter();
const { proxy } = getCurrentInstance()
onMounted(() => {
init()
})
let qrcode = ref("") // 关注二维码
let issubscribe = ref(0) // 是否已经关注公众号
let list = ref([]) // 列表数据
let state = false // 请求状态
let page = 1 // 页数
const init = () => {
// proxy.$post("/tenement/message/lists").then((res) => {
if (page == 0 || state) return
state = true
proxy.$post("/tenement/pc/api/user/messageList", {
page
}).then((res) => {
if (res.code != 200) return
let data = res.data
qrcode.value = data['qrcode']
issubscribe.value = data['issubscribe']
list.value = list.value.concat(data['data'])
page = data['page'] * data['limit'] < data['count'] ? page + 1 : 0
}).catch((err) => {
}).finally(() => {
state = false
})
}
const handleScroll = (event) => {
if (page == 0 || state) return
const scrollContainer = event.target; // 获取滚动容器元素
const scrollHeight = scrollContainer.scrollHeight; // 元素内容的总高度
const scrollTop = scrollContainer.scrollTop; // 滚动条距离滚动容器顶部的距离
const clientHeight = scrollContainer.clientHeight; // 可见区域的高度
if (scrollHeight - scrollTop === clientHeight) init()
};
// 点击跳转详情页
const goDetail = (uniqid, status) => {
if (status != 1) return
router.push(`/detail?uniqid=${uniqid}`);
}
</script>
<style lang="less" scoped>
@@ -33,6 +169,7 @@
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.698039215686274);
z-index: 1;
}
.content {
@@ -43,6 +180,8 @@
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
flex-direction: column;
position: relative;
.header {
width: 100%;
@@ -51,21 +190,37 @@
background: -moz-linear-gradient(-67.5797491428887deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
background: linear-gradient(-67.5797491428887deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
border-radius: 16px 16px 0 0;
justify-content: center;
.circle {
position: absolute;
top: 0;
right: 0;
}
.white-cross {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
}
.header-icon {
width: 52px;
height: 57px;
margin-top: 43px;
margin-right: 21px;
}
.header-text {
width: 145px;
height: 47px;
margin-top: 48px;
}
}
.attention {
margin: -26px auto 0;
margin: -26px auto 10px;
width: 660px;
height: 50px;
background-color: rgba(255, 255, 255, 1);
@@ -91,5 +246,106 @@
cursor: pointer;
}
}
.list {
overflow: auto;
margin: 0 6px 30px;
/*滚动条样式*/
&::-webkit-scrollbar {
width: 6px;
}
.empty-box {
margin-top: 170px;
}
.item {
flex-direction: column;
width: 660px;
background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1);
border-radius: 16px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
margin: 0 auto 10px;
position: relative;
.new {
position: absolute;
top: 7px;
right: 17px;
width: 40px;
height: 40px;
}
.time {
color: #aaaaaa;
font-size: 13px;
padding: 18px 16px 14px;
}
.text {
color: #7F7F7F;
line-height: 24px;
font-size: 14px;
padding: 0 16px;
margin-bottom: 10px;
word-wrap: break-word;
}
.info {
width: 630px;
height: 56px;
background-color: rgba(246, 246, 246, 1);
border-radius: 10px;
font-size: 15px;
color: #333;
margin: 0 auto 16px;
padding: 0 16px;
position: relative;
.soldOut {
position: absolute;
top: 0;
right: 0;
width: 40px;
height: 40px;
}
.title {
padding-right: 60px;
cursor: pointer;
}
.img-icon {
width: 22px;
height: 16px;
margin-right: 10px;
}
.id {
color: #AAAAAA;
font-size: 13px;
}
}
.footer {
border-top: 1px solid #ebebeb;
font-size: 14px;
color: #50E3C2;
height: 45px;
cursor: pointer;
.green-arrow {
margin-left: 10px;
width: 14px;
height: 14px;
}
}
}
}
}
</style>