432 lines
14 KiB
Vue
432 lines
14 KiB
Vue
<template>
|
||
<header-nav></header-nav>
|
||
|
||
<div class="user-box">
|
||
<div class="info-box flexacenter">
|
||
<div class="info-left flexacenter flex1">
|
||
<a href="https://bbs.gter.net/account.php?a=avatar" target="_blank">
|
||
<img class="info-user-icon" :src="user['avatar']">
|
||
</a>
|
||
|
||
<div class="info-user-box">
|
||
<div class="info-user-top flexacenter">
|
||
<a href="https://bbs.gter.net/account.php?a=info" target="_blank" class="info-user-username">{{
|
||
user['nickname'] }}</a>
|
||
<a href="https://bbs.gter.net/account.php?a=info" target="_blank">
|
||
<img class="info-user-edit" src="@/assets/img/publicImage/edit-pen.png">
|
||
</a>
|
||
<img class="info-user-certifying" v-if="user.intermediary == 1"
|
||
src="@/assets/img/publicImage/certifying-agent.png">
|
||
<div class="info-user-validity" v-if="validityidentity">（有效期至{{ validityidentity }}）</div>
|
||
</div>
|
||
<div class="info-user-bottom flexacenter">UID：{{ user['uid'] }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="info-right flexacenter">
|
||
<div class="operate-item message flexcenter" @click="systematicState = true">
|
||
<div class="operate-item-shell flexcenter">
|
||
<div class="newmessagenum flexcenter" v-if="newmessagenum > 0">{{ newmessagenum }}</div>
|
||
<img class="operate-icon" src="@/assets/img/publicImage/message-icon.svg">
|
||
</div>
|
||
<div class="operate-text">消息提醒</div>
|
||
</div>
|
||
<img class="" src="@/assets/img/publicImage/cut-off-rule.svg">
|
||
<div class="operate-item flexcenter add">
|
||
<div class="operate-item-shell flexcenter">
|
||
<img class="operate-icon" src="@/assets/img/publicImage/add-icon.svg">
|
||
</div>
|
||
<div class="operate-text">发布房源</div>
|
||
</div>
|
||
<template v-if="user.identity != 0">
|
||
<img class="" src="@/assets/img/publicImage/cut-off-rule.svg">
|
||
<el-popover placement="bottom" :width="360" trigger="hover" :show-arrow="false"
|
||
popper-style="background: transparent;padding:0;box-shadow: none;border: none;">
|
||
<template #reference>
|
||
<div class="operate-item flexcenter identity">
|
||
<div class="operate-item-shell flexcenter"
|
||
:class="{ 'intermediary': user.identity == 1, 'personage': user.identity == -1 }">
|
||
<img class="operate-icon" src="@/assets/img/publicImage/intermediary-icon.png">
|
||
</div>
|
||
<div class="operate-text">{{ identityObj[user.identity || -1] }}</div>
|
||
</div>
|
||
</template>
|
||
<img v-if="user.identity == 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>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="tab-box flexacenter">
|
||
<div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'fav' }" @click="cutTab('fav')">我的收藏</div>
|
||
<div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'publish' }" @click="cutTab('publish')">我的发布
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="quantity wid1200" v-if="tabState == 'fav'">共收藏 <b>{{ count['fav'] }}</b> 个房源</div>
|
||
<div class="quantity wid1200" v-else>共 <b>{{ count['publish'] }}</b> 条房源（上架 {{ stat['listing'] }} | 草稿 {{ stat['draft']
|
||
}} | 下架 {{ stat['offshelf'] }}）</div>
|
||
|
||
<div class="list wid1200 flexflex">
|
||
<div class="item" v-for="item in 10">
|
||
<biserial-list-item></biserial-list-item>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 有疑问 -->
|
||
<have-questions></have-questions>
|
||
|
||
<!-- 页底 -->
|
||
<page-footer></page-footer>
|
||
|
||
<!-- 系统通知弹窗 -->
|
||
<systematic-notification-pop v-if="systematicState" @close="systematicState = false"></systematic-notification-pop>
|
||
</template>
|
||
|
||
<script setup>
|
||
import headerNav from '@/components/public/head.vue'
|
||
import systematicNotificationPop from '@/components/user/systematic-notification-pop.vue'
|
||
import haveQuestions from '@/components/public/have-questions.vue'
|
||
import pageFooter from '@/components/footer/footer.vue'
|
||
import biserialListItem from '@/components/biserialListItem/biserialListItem.vue'
|
||
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
|
||
onMounted(() => {
|
||
init()
|
||
})
|
||
|
||
let systematicState = ref(false) // 系统通知
|
||
let user = ref({})
|
||
let count = ref({}) // 发布和收藏的数量
|
||
let newmessagenum = ref(0)
|
||
let validityidentity = ref('')
|
||
let tabState = ref('publish') // fav publish
|
||
|
||
const identityObj = {
|
||
1: "中介认证",
|
||
"-1": "房源认证"
|
||
}
|
||
|
||
async function init() {
|
||
proxy.$post("/tenement/v2/api/user").then(res => {
|
||
if (res.code != 200) return
|
||
let data = res.data
|
||
|
||
if (data.count['publish'] > 0) {
|
||
tabState.value = 'publish'
|
||
getPublishData()
|
||
} else {
|
||
tabState.value = 'fav'
|
||
getFavData()
|
||
}
|
||
|
||
user.value = data.user
|
||
count.value = data.count
|
||
newmessagenum.value = data.newmessagenum
|
||
validityidentity.value = data.validityidentity
|
||
});
|
||
}
|
||
|
||
let publishData = ref({
|
||
page: 1,
|
||
list: []
|
||
})
|
||
|
||
let stat = ref({}) // 我的发布的详细数量
|
||
// 获取发布数据
|
||
const getPublishData = () => {
|
||
proxy.$post("/tenement/pc/api/user/publishList", {
|
||
page: publishData['page']
|
||
}).then(res => {
|
||
if (res.code != 200) return
|
||
let data = res.data
|
||
stat.value = data['stat']
|
||
publishData.value['page'] = data['page'] * data['limit'] >= data['count'] ? 0 : data['page'] + 1
|
||
publishData.value['list'] = publishData.value['list'].concat(data['data'])
|
||
})
|
||
}
|
||
|
||
let favData = ref({
|
||
page: 1,
|
||
list: []
|
||
})
|
||
|
||
// 获取收藏数据
|
||
const getFavData = () => {
|
||
proxy.$post("/tenement/pc/api/user/favList", {
|
||
page: favData['page']
|
||
}).then(res => {
|
||
if (res.code != 200) return
|
||
let data = res.data
|
||
favData.value['page'] = data['page'] * data['limit'] >= data['count'] ? 0 : data['page'] + 1
|
||
favData.value['list'] = favData.value['list'].concat(data['data'])
|
||
})
|
||
}
|
||
|
||
// 切换 tab
|
||
const cutTab = (value) => {
|
||
tabState.value = value
|
||
if (tabState.value == 'publish' && publishData.value['list'].length == 0) getPublishData()
|
||
else if (tabState.value == 'fav' && favData.value['list'].length == 0) getFavData()
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.user-box {
|
||
width: 1200px;
|
||
height: 238px;
|
||
margin: 30px auto 26px;
|
||
font-size: 14px;
|
||
background: linear-gradient(0deg, rgba(214, 236, 255, 1) -4%, rgba(232, 244, 255, 1) 34%, rgba(176, 216, 255, 1) 131%);
|
||
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);
|
||
|
||
.info-box {
|
||
height: 160px;
|
||
border-bottom: 2px solid #ddeeff;
|
||
|
||
.info-left {
|
||
padding-left: 40px;
|
||
|
||
.info-user-icon {
|
||
width: 80px;
|
||
height: 80px;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.info-user-box {
|
||
margin-left: 20px;
|
||
|
||
.info-user-top {
|
||
height: 28px;
|
||
|
||
.info-user-username {
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.info-user-edit {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-left: 5px;
|
||
cursor: pointer;
|
||
margin-right: 29px;
|
||
}
|
||
|
||
.info-user-certifying {
|
||
width: 85px;
|
||
height: 20px;
|
||
}
|
||
|
||
.info-user-validity {
|
||
color: #aaa;
|
||
font-size: 13px;
|
||
}
|
||
|
||
}
|
||
|
||
.info-user-bottom {
|
||
height: 24px;
|
||
color: #7F7F7F;
|
||
}
|
||
}
|
||
}
|
||
|
||
.info-right {
|
||
|
||
.operate-item {
|
||
flex-direction: column;
|
||
margin: 0 52px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
|
||
.operate-item-shell {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 20px;
|
||
margin-bottom: 7px;
|
||
}
|
||
|
||
&.message {
|
||
|
||
.operate-item-shell {
|
||
position: relative;
|
||
background-color: rgba(80, 227, 194, 1);
|
||
border-radius: 8px;
|
||
-moz-box-shadow: 0px 0px 5px rgba(80, 227, 194, 1);
|
||
-webkit-box-shadow: 0px 0px 5px rgba(80, 227, 194, 1);
|
||
box-shadow: 0px 0px 5px rgba(80, 227, 194, 1);
|
||
|
||
.operate-icon {
|
||
width: 32px;
|
||
height: 28px;
|
||
}
|
||
|
||
.newmessagenum {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
transform: translate(50%, -50%);
|
||
width: 16px;
|
||
height: 16px;
|
||
font-size: 13px;
|
||
background: #f95d5d;
|
||
color: #FFFFFF;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.add {
|
||
.operate-item-shell {
|
||
background-color: rgba(253, 223, 109, 1);
|
||
-moz-box-shadow: 0px 0px 5px rgba(253, 223, 109, 1);
|
||
-webkit-box-shadow: 0px 0px 5px rgba(253, 223, 109, 1);
|
||
box-shadow: 0px 0px 5px rgba(253, 223, 109, 1);
|
||
|
||
.operate-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&.identity {
|
||
.operate-item-shell {
|
||
&.intermediary {
|
||
background-color: rgba(46, 207, 226, 1);
|
||
-moz-box-shadow: 0px 0px 5px rgba(46, 207, 226, 1);
|
||
-webkit-box-shadow: 0px 0px 5px rgba(46, 207, 226, 1);
|
||
box-shadow: 0px 0px 5px rgba(46, 207, 226, 1);
|
||
}
|
||
|
||
&.personage {
|
||
background-color: rgba(171, 169, 255, 1);
|
||
-moz-box-shadow: 0px 0px 5px rgba(123, 121, 255, 1);
|
||
-webkit-box-shadow: 0px 0px 5px rgba(123, 121, 255, 1);
|
||
box-shadow: 0px 0px 5px rgba(123, 121, 255, 1);
|
||
}
|
||
}
|
||
|
||
.operate-icon {
|
||
width: 22px;
|
||
height: 22px;
|
||
}
|
||
}
|
||
|
||
.operate-text {
|
||
color: #555;
|
||
font-size: 14px;
|
||
height: 24px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.tab-box {
|
||
height: 78px;
|
||
padding-left: 20px;
|
||
|
||
.tab-item {
|
||
width: 160px;
|
||
height: 48px;
|
||
background-color: rgba(205, 227, 247, 1);
|
||
border-radius: 8px;
|
||
font-size: 18px;
|
||
color: #555555;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
|
||
&.pitch {
|
||
background-color: rgba(98, 177, 255, 1);
|
||
border-radius: 8px;
|
||
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
|
||
font-weight: 650;
|
||
font-style: normal;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
position: relative;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: -5px;
|
||
width: 14px;
|
||
height: 8px;
|
||
background-image: url('@/assets/img/publicImage/green-arrow-below.svg');
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.quantity {
|
||
margin: 0 auto;
|
||
font-size: 14px;
|
||
color: #555;
|
||
margin-bottom: 24px;
|
||
|
||
b {
|
||
color: #000;
|
||
}
|
||
}
|
||
|
||
.list {
|
||
margin: 0 auto;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
|
||
.item {
|
||
margin-bottom: 20px;
|
||
}
|
||
}
|
||
|
||
|
||
.have-questions {
|
||
display: inline-flex;
|
||
flex-direction: column;
|
||
|
||
.QR-code {
|
||
width: 100%;
|
||
}
|
||
|
||
.have-questions-text {
|
||
color: #7F7F7F;
|
||
font-size: 14px;
|
||
margin-bottom: 14px;
|
||
|
||
.smiling {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin: 0 5px;
|
||
}
|
||
}
|
||
|
||
.have-questions-btn {
|
||
width: 166px;
|
||
height: 40px;
|
||
border-radius: 40px;
|
||
font-size: 18px;
|
||
font-weight: 650;
|
||
color: #333;
|
||
border: 1px solid #7f7f7f;
|
||
cursor: pointer;
|
||
|
||
.have-questions-icon {
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 10px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|