351 lines
14 KiB
Vue
351 lines
14 KiB
Vue
<template>
|
||
<div class="pop-mask 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>
|
||
<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="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 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>
|
||
.pop-mask {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: rgba(0, 0, 0, 0.698039215686274);
|
||
z-index: 1;
|
||
}
|
||
|
||
.content {
|
||
width: 700px;
|
||
height: 750px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border-radius: 16px;
|
||
-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%;
|
||
height: 160px;
|
||
background: -webkit-linear-gradient(157.579749142889deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
|
||
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 10px;
|
||
width: 660px;
|
||
height: 50px;
|
||
background-color: rgba(255, 255, 255, 1);
|
||
border-radius: 230px;
|
||
-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);
|
||
font-size: 14px;
|
||
color: #7F7F7F;
|
||
justify-content: space-between;
|
||
padding-left: 16px;
|
||
padding-right: 8px;
|
||
|
||
.attention-btn {
|
||
width: 80px;
|
||
height: 36px;
|
||
background-color: rgba(253, 218, 85, 1);
|
||
border-radius: 54px;
|
||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #000000;
|
||
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> |