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-11 19:04:02 +08:00
parent ff631f5816
commit 5da24fa685
22 changed files with 6934 additions and 18734 deletions
Download Patch File Download Diff File Expand all files Collapse all files

309
src/views/user.vue
View File

@@ -2,48 +2,129 @@
<header-nav></header-nav>
<div class="user-box">
<div class="info-box flexacenter">
<div class="info-left flexacenter">
<img class="info-user-icon"
src="https://oss.gter.net/avatar/97KwEWIDY-QTHTXcpEbnWQxaRv6Xz0ll1wRhYWNh/middle?random=1687145465">
<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">
<div class="info-user-username">Ada.W</div>
<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">UID：56789</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>
<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()
export default {
name: 'GterFangUser',
console.log("proxy", proxy);
data() {
return {
onMounted(() => {
init()
})
};
},
let user = ref({})
let count = ref({})
let newmessagenum = ref(0)
let validityidentity = ref('')
mounted() {
const identityObj = {
1: "中介认证",
"-1": "房源认证"
}
},
components: {
headerNav,
},
methods: {
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" scoped>
<style lang="less">
.user-box {
width: 1200px;
height: 238px;
@@ -56,10 +137,9 @@ export default {
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
.info-box {
height: 135px;
height: 160px;
border-bottom: 2px solid #ddeeff;
.info-left {
padding-left: 40px;
@@ -73,13 +153,31 @@ export default {
margin-left: 20px;
.info-user-top {
height: 26px;
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 {
@@ -88,6 +186,163 @@ export default {
}
}
}
.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;
}
}
}
}
</style>
.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>