349 lines
12 KiB
Vue
349 lines
12 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">
|
||
<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="click" :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 pitch">我的收藏</div>
|
||
<div class="tab-item flexcenter">我的发布</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 有疑问 -->
|
||
<div class="flexcenter" style="padding: 78px 0;">
|
||
<el-popover placement="bottom" popper-class="have-questions flexcenter" :width="160" trigger="hover"
|
||
popper-style="border-radius: 14px;padding: 20px;">
|
||
<template #reference>
|
||
<div class="have-questions flexcenter">
|
||
<div class="have-questions-text flexacenter">有疑问？来找<img class="smiling"
|
||
src="@/assets/img/publicImage/smiling.png">寄托方同学！</div>
|
||
<div class="have-questions-btn flexcenter">
|
||
<img class="have-questions-icon" src="@/assets/img/publicImage/QR-code.svg" />扫码加微信
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<img class="QR-code"
|
||
src="https://oss.gter.net/Zvt57TuJSUvkyhw-xG7Y2l-S_J8rcn3qqsgFptxhXa6RWi26P-BuTQQWELrL49kb8MVYZjQ0Mjk~"
|
||
alt="">
|
||
</el-popover>
|
||
</div>
|
||
|
||
<!-- 系统通知弹窗 -->
|
||
<systematic-notification-pop></systematic-notification-pop>
|
||
</template>
|
||
|
||
<script setup>
|
||
import headerNav from '@/components/public/head.vue'
|
||
import systematicNotificationPop from '@/components/user/systematic-notification-pop.vue'
|
||
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
|
||
const { proxy } = getCurrentInstance()
|
||
|
||
console.log("proxy", proxy);
|
||
|
||
onMounted(() => {
|
||
init()
|
||
})
|
||
|
||
let user = ref({})
|
||
let count = ref({})
|
||
let newmessagenum = ref(0)
|
||
let validityidentity = ref('')
|
||
|
||
const identityObj = {
|
||
1: "中介认证",
|
||
"-1": "房源认证"
|
||
}
|
||
|
||
async function init() {
|
||
proxy.$post("/tenement/v2/api/user").then(res => {
|
||
if (res.code != 200) return
|
||
let data = res.data
|
||
data.user['identity'] = -1
|
||
user.value = data.user
|
||
count.value = data.count
|
||
newmessagenum.value = data.newmessagenum
|
||
validityidentity.value = data.validityidentity
|
||
|
||
});
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="less">
|
||
.user-box {
|
||
width: 1200px;
|
||
height: 238px;
|
||
margin: 30px auto 0;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
|
||
.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>
|