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

上传公寓收藏和公寓附近房源

Browse Source
This commit is contained in:
A1300399510
2024-04-17 18:40:28 +08:00
parent 5a4e6e79cd
commit a1ec98685e
31 changed files with 526 additions and 309 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
dist/css/337.ff72fde0.css → dist/css/150.afbf5e4d.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/app.f5f600f1.css → dist/css/app.82cd2e20.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/detail.0281f933.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/detail.32cacc18.css vendored
View File

File diff suppressed because one or more lines are too long

1
dist/css/housing.64f99393.css vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/css/housing.f17495d3.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/css/user.9bcb1e48.css → dist/css/user.c91fa1db.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/index.html vendored
View File

@@ -1,4 +1,4 @@
<!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.6d96b969.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.4e2a7792.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.f5f600f1.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display: none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882"></script><script>var _hmt = _hmt || [] <!doctype html><html lang=""><head><meta charset="utf-8"/><meta http-equiv="X-UA-Compatible" content="IE=edge"/><meta name="viewport" content="width=device-width,initial-scale=1"/><link rel="icon" href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/favicon.ico"/><title>港校租房</title><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/chunk-vendors.6d96b969.js"></script><script defer="defer" src="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/js/app.c9f54a2c.js"></script><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/chunk-vendors.7885d77e.css" rel="stylesheet"><link href="https://ansnid.oss-cn-shenzhen.aliyuncs.com/fang/css/app.82cd2e20.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but zufang doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://app.gter.net/bottom?tpl=header&menukey=fang"></script><div id="app"></div><div style="display: none;"><script src="//v1.cnzz.com/z_stat.php?id=1281224882&amp;web_id=1281224882"></script><script>var _hmt = _hmt || []
;(function () { ;(function () {
var hm = document.createElement("script") var hm = document.createElement("script")
hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746" hm.src = "//hm.baidu.com/hm.js?4bd66cbe45a640b607fe46c48f658746"

1
dist/js/150.aa5ddd95.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/337.c1fe0114.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/449.f3333108.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/774.d78100a1.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.4e2a7792.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/app.c9f54a2c.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/detail.a958f83d.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/detail.daebef86.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/housing.5d31cfbe.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

1
dist/js/housing.eed6cc82.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/js/seachPage.aae373cd.js → dist/js/seachPage.5bede4c8.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/user.23f09b5b.js vendored
View File

File diff suppressed because one or more lines are too long

1
dist/js/user.2c1ca5c1.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

3
src/components/apartment/seachModule.vue
View File

@@ -288,7 +288,8 @@ let pitchValue = ref({
}) })
watchEffect(() => { watchEffect(() => {
nearSchoolList = store.state.apartment.school || [] // nearSchoolList = store.state.apartment.school || []
nearSchoolList = store.state.schoolList || []
roomTypeList = store.state.apartment.roomtype || [] roomTypeList = store.state.apartment.roomtype || []
roomTypeKey = store.state.roomTypeKey || {} roomTypeKey = store.state.roomTypeKey || {}
roomlistingsList = store.state.apartment.roomlistings || [] roomlistingsList = store.state.apartment.roomlistings || []

29
src/components/public/group-QRcode.vue
View File

@@ -1,33 +1,34 @@
<template> <template>
<div class="QRcode-box group-QRcode flexflex" v-if="true"> <div class="QRcode-box group-QRcode flexflex" :class="{ 'apartment-box': props['type'] == 'apartment' }">
<img class="group-title" src="@/assets/img/apartmentDetail/group-title.png"> <img class="group-title" src="@/assets/img/apartmentDetail/group-title.png" />
<div class="QRcode-case flexcenter"> <div class="QRcode-case flexcenter">
<img class="QRcode-img" :src="wechat['wechatqrcode']" alt=""> <img class="QRcode-img" :src="wechat['wechatqrcode']" alt="" />
</div> </div>
<div class="group-QRcode-hint flexacenter"> <div class="group-QRcode-hint flexacenter">
<img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png"> <img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png" />
入群请添加 入群请添加
<b>方同学的小助手</b> <b>方同学的小助手</b>
<!-- <b>{{ wechat['nickname'] }}</b> -->
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { toRefs } from 'vue'; import { toRefs, defineProps } from "vue"
import { useStore } from 'vuex'; import { useStore } from "vuex"
const store = useStore(); const props = defineProps({
type: String,
const { wechat } = toRefs(store.state); })
const store = useStore()
const { wechat } = toRefs(store.state)
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.QRcode-box { .QRcode-box {
width: 304px; width: 304px;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
// height: 304px; // height: 304px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1); border: 1px solid rgba(235, 235, 235, 1);
@@ -39,6 +40,10 @@ const { wechat } = toRefs(store.state);
align-items: center; align-items: center;
margin-bottom: 20px; margin-bottom: 20px;
&.apartment-box {
box-shadow: none;
}
.scan-icon { .scan-icon {
width: 14px; width: 14px;
height: 14px; height: 14px;
@@ -83,4 +88,4 @@ const { wechat } = toRefs(store.state);
} }
} }
} }
</style> </style>

18
src/components/public/phoneQRcode.vue
View File

@@ -1,18 +1,18 @@
<template> <template>
<div class="QRcode-box apartment-QRcode flexflex" v-if="true"> <div class="QRcode-box apartment-QRcode flexflex" :class="{ 'apartment-box': props['type'] == 'apartment' }">
<img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png"> <img class="mini-program-title" src="@/assets/img/apartmentDetail/mini-program-title.png" />
<div class="QRcode-case flexcenter"> <div class="QRcode-case flexcenter">
<img class="QRcode-img" :src="props['qrcode']" alt=""> <img class="QRcode-img" :src="props['qrcode']" alt="" />
</div> </div>
<div class="apartment-QRcode-hint flexacenter"> <div class="apartment-QRcode-hint flexacenter">
<img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png"> <img class="scan-icon" src="@/assets/img/apartmentDetail/scan-icon.png" />
手机查看该{{ props['type'] == 'apartment' ? '公寓' : '房源' }} 手机查看该{{ props["type"] == "apartment" ? "公寓" : "房源" }}
</div> </div>
</div> </div>
</template> </template>
<script setup> <script setup>
import { defineProps } from 'vue'; import { defineProps } from "vue"
const props = defineProps({ const props = defineProps({
qrcode: String, qrcode: String,
@@ -42,6 +42,10 @@ const props = defineProps({
&.apartment-QRcode { &.apartment-QRcode {
padding: 40px 0; padding: 40px 0;
&.apartment-box {
box-shadow: none;
}
.mini-program-title { .mini-program-title {
width: 168px; width: 168px;
height: 20px; height: 20px;
@@ -71,4 +75,4 @@ const props = defineProps({
} }
} }
} }
</style> </style>

3
src/components/seachModule/seachModule1.vue
View File

@@ -479,7 +479,6 @@ let setLocation = (type, data, isupdate = true) => {
//设置搜索数据 type: 类型 data: 数据 second: 二级数据 //设置搜索数据 type: 类型 data: 数据 second: 二级数据
let setSeachConditions = (type, data, second = null) => { let setSeachConditions = (type, data, second = null) => {
console.log("赋值前的数据：", seachAllType)
if (type === "rent") { if (type === "rent") {
seachAllType["rent_min"] = data.min seachAllType["rent_min"] = data.min
seachAllType["rent_max"] = data.max seachAllType["rent_max"] = data.max
@@ -500,8 +499,6 @@ let setSeachConditions = (type, data, second = null) => {
if (second) { if (second) {
seachAllType[second.type] = second.id seachAllType[second.type] = second.id
} }
console.log(type, data, second)
console.log("保存前的处理数据：", seachAllType)
getDataList(seachAllType) getDataList(seachAllType)
} }

8
src/components/selectTabBox/selectTabBox.vue
View File

@@ -21,7 +21,7 @@
<div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }" <div class="check-none dis-f al-item" :class="{ 'check-text': selectTabCheck.id === item.id }"
@click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i"> @click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
<div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item" <div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp;>&nbsp;
<div <div
:class="{ 'check-data': selectData.data && selectData.data.length > 0 && selectData.data.length !== selectTabCheck.data.length && selectData.data[0].id }"> :class="{ 'check-data': selectData.data && selectData.data.length > 0 && selectData.data.length !== selectTabCheck.data.length && selectData.data[0].id }">
{{ {{
@@ -82,7 +82,7 @@
:class="[{ 'btn-check': selectTabCheck.id === item.id }]" style="margin-right:10px;" :class="[{ 'btn-check': selectTabCheck.id === item.id }]" style="margin-right:10px;"
@click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i"> @click="setSelectData(item.id, item.data, item.name)" v-for="(item, i) in list" :key="i">
<div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item" <div class="dis-f al-item">{{ item.name }} <div class="dis-f al-item"
v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp>&nbsp v-show="selectTabCheck.id === item.id && selectTabCheck.id">&nbsp;>&nbsp;
<div <div
:class="{ 'select-num': selectData.data && selectData.data.length && selectData.data && selectData.data[0] && selectData.data[0].id }"> :class="{ 'select-num': selectData.data && selectData.data.length && selectData.data && selectData.data[0] && selectData.data[0].id }">
{{ {{
@@ -119,7 +119,7 @@
<el-dropdown trigger="click"> <el-dropdown trigger="click">
<span class="dropdown-btn jus-x dis-f al-item" <span class="dropdown-btn jus-x dis-f al-item"
:class="{ 'btn-check': hireTypeObj.hireId === item.title }" @click="setHireId(item)"> :class="{ 'btn-check': hireTypeObj.hireId === item.title }" @click="setHireId(item)">
{{ item.title }}<span v-show="hireTypeObj.hireId === item.title"> &nbsp> {{ {{ item.title }}<span v-show="hireTypeObj.hireId === item.title"> &nbsp;> {{
hireTypeObj.title || '不限' }}</span> hireTypeObj.title || '不限' }}</span>
<img :src="hireTypeObj.hireId === item.title ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')" <img :src="hireTypeObj.hireId === item.title ? require('../../assets/homeImage/dropDownIcon.svg') : require('../../assets/homeImage/selectInfoTabIcon.svg')"
class="img" :class="{ 'mg-l-30': hireTypeObj.hireId === item.title }" alt=""> class="img" :class="{ 'mg-l-30': hireTypeObj.hireId === item.title }" alt="">
@@ -498,14 +498,12 @@ let seachAreaId = (data) => {
//设置当前地区选项 //设置当前地区选项
let checkBoxGroupInfo = ref(null) let checkBoxGroupInfo = ref(null)
let setCheckBoxData = (data) => { let setCheckBoxData = (data) => {
console.log("data", data);
checkBoxGroupInfo.value && checkBoxGroupInfo.value.setCheckData(data) checkBoxGroupInfo.value && checkBoxGroupInfo.value.setCheckData(data)
} }
let loactionArr=shallowReactive({data:null}) let loactionArr=shallowReactive({data:null})
//确认按钮 //确认按钮
let selectSeach = (data = []) => { let selectSeach = (data = []) => {
console.log("data", data);
selectData.data = seachAreaId(data) selectData.data = seachAreaId(data)
showSelect.value = false showSelect.value = false
if (data.length === 0 && selectTabCheck.id) { if (data.length === 0 && selectTabCheck.id) {

2
src/utils/api.js
View File

@@ -44,7 +44,7 @@ export default{
return axios.get('/tenement/pc/api/details/distance',params) return axios.get('/tenement/pc/api/details/distance',params)
}, },
apartmentCollection:(params={})=>{// 公寓列表 - 收藏 apartmentCollection:(params={})=>{// 公寓列表 - 收藏
return axios.get('/tenement/pc/api/user/apartmentCollection',params) return axios.post('/tenement/pc/api/user/apartmentCollection',params)
} }
} }

45
src/views/apartmentDetail.vue
View File

@@ -90,6 +90,11 @@
<div class="nav-item flexcenter" :class="{ pitch: navTab == item.value }" :aria-label="`${item['name']}-按钮`" v-for="(item, index) in navList" :key="index" @click="handleClickNav(item.value)">{{ item["value"] == "roomEle" ? `${item["name"]} ${roomList.length}` : item["name"] }}</div> <div class="nav-item flexcenter" :class="{ pitch: navTab == item.value }" :aria-label="`${item['name']}-按钮`" v-for="(item, index) in navList" :key="index" @click="handleClickNav(item.value)">{{ item["value"] == "roomEle" ? `${item["name"]} ${roomList.length}` : item["name"] }}</div>
</div> </div>
<div class="btn-box flexacenter"> <div class="btn-box flexacenter">
<div class="btn-item transmit-btn flexcenter" @click="handleCollect">
<img v-if="info.iscollect == 1" alt="收藏图标" class="transmit-icon" src="@/assets/img/detail/collectT.png" />
<img v-else alt="收藏图标" class="transmit-icon" src="@/assets/img/detail/collect.png" />
收藏
</div>
<div class="btn-item transmit-btn flexcenter" @click="handleTransmit"> <div class="btn-item transmit-btn flexcenter" @click="handleTransmit">
<img alt="转发图标" class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" /> <img alt="转发图标" class="transmit-icon" src="@/assets/img/publicImage/transmit-icon.png" />
转发 转发
@@ -177,7 +182,7 @@
<div class="mileage">{{ specialSchoolDistance.distanceText }}</div> <div class="mileage">{{ specialSchoolDistance.distanceText }}</div>
<img v-if="specialSchoolDistance.toolText == '步行'" class="tool-icon" src="@/assets/img/detail/walk-icon.png" /> <img v-if="specialSchoolDistance.toolText == '步行'" class="tool-icon" src="@/assets/img/detail/walk-icon.png" />
<img v-else class="tool-icon" src="@/assets/img/detail/subway-icon.png" /> <img v-else class="tool-icon" src="@/assets/img/detail/subway-icon.png" />
<div class="tool-time">{{ specialSchoolDistance?.durationText2 }}</div> <div class="tool-time">{{ specialSchoolDistance?.durationText }}</div>
</div> </div>
<div class="flexcenter"> <div class="flexcenter">
<img src="@/assets/img/detail/markIcon.svg" class="marker-icon" alt="" /> <img src="@/assets/img/detail/markIcon.svg" class="marker-icon" alt="" />
@@ -335,7 +340,7 @@
</div> </div>
<div class="details-right flexacenter"> <div class="details-right flexacenter">
<phoneqrcode type="apartment" :qrcode="qrcode"></phoneqrcode> <phoneqrcode type="apartment" :qrcode="qrcode"></phoneqrcode>
<groupqrcode></groupqrcode> <groupqrcode type="apartment"></groupqrcode>
<!-- 同品牌公寓 --> <!-- 同品牌公寓 -->
<div class="same-brand-title flexcenter" v-if="dualBrandList.length != 0" ref="eleseEle"> <div class="same-brand-title flexcenter" v-if="dualBrandList.length != 0" ref="eleseEle">
<img class="same-brand-icon" src="@/assets/img/apartmentDetail/same-brand.png" /> <img class="same-brand-icon" src="@/assets/img/apartmentDetail/same-brand.png" />
@@ -459,7 +464,7 @@ watch(route, () => {
}) })
let { uniqid } = router.currentRoute.value.query let { uniqid } = router.currentRoute.value.query
let pitchSchool = router.currentRoute.value.school || 0 let pitchSchool = route.query.school || 0
import { copyToClipboard, metersToKilometers, secondsToHoursMinutes } from "@/utils/util.js" import { copyToClipboard, metersToKilometers, secondsToHoursMinutes } from "@/utils/util.js"
@@ -829,8 +834,6 @@ const distanceSchool = () => {
targetAcademyPitch.value = data[academyPitchIndexTarget] targetAcademyPitch.value = data[academyPitchIndexTarget]
specialSchoolDistance.value = specialSchoolDistanceTarget specialSchoolDistance.value = specialSchoolDistanceTarget
academyPitchIndex.value = academyPitchIndexTarget academyPitchIndex.value = academyPitchIndexTarget
console.log("annexSchoolOmit", annexSchoolOmit)
}) })
} }
@@ -862,6 +865,17 @@ const selectIndex = id => {
//显示详情 //显示详情
let showDistance = ref(false) let showDistance = ref(false)
// 点击收藏
const handleCollect = () => {
api.apartmentCollection({ token }).then(res => {
if (res.code != 200) return
const data = res.data
info.value.iscollect = data.status || 0
ElMessage.success(res.message)
})
}
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@@ -947,7 +961,7 @@ let showDistance = ref(false)
margin-top: -20px; margin-top: -20px;
border-radius: 16px 0 16px 16px; border-radius: 16px 0 16px 16px;
position: relative; position: relative;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.118); // box-shadow: 0 0 10px rgba(0, 0, 0, 0.118);
// .arc { // .arc {
// position: absolute; // position: absolute;
// width: 12px; // width: 12px;
@@ -1321,8 +1335,11 @@ let showDistance = ref(false)
font-size: 14px; font-size: 14px;
padding: 30px; padding: 30px;
// margin-bottom: 20px; // margin-bottom: 20px;
border-bottom: 1px solid #ebebeb;
position: relative; position: relative;
&:not(:last-of-type) {
border-bottom: 1px solid #ebebeb;
}
.type-icon { .type-icon {
position: absolute; position: absolute;
top: 0; top: 0;
@@ -1497,9 +1514,9 @@ let showDistance = ref(false)
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border: 1px solid rgba(235, 235, 235, 1); border: 1px solid rgba(235, 235, 235, 1);
border-radius: 16px; border-radius: 16px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529); // -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529); // -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529); // box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
font-size: 14px; font-size: 14px;
margin-bottom: 20px; margin-bottom: 20px;
@@ -1641,7 +1658,7 @@ let showDistance = ref(false)
height: 60px; height: 60px;
border: 5px solid #fff; border: 5px solid #fff;
position: relative; position: relative;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706); // box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
&::after { &::after {
content: ""; content: "";
@@ -1667,9 +1684,9 @@ let showDistance = ref(false)
width: 304px; width: 304px;
background-color: rgba(255, 255, 255, 1); background-color: rgba(255, 255, 255, 1);
border-radius: 17px; border-radius: 17px;
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039); // -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039); // -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039); // box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.156862745098039);
padding: 8px 0; padding: 8px 0;
margin-bottom: 20px; margin-bottom: 20px;
cursor: pointer; cursor: pointer;

98
src/views/detail.vue
View File

@@ -6,58 +6,54 @@
<breadcrumb :data="housingInfo['data']" :operation="setOperation"></breadcrumb> <breadcrumb :data="housingInfo['data']" :operation="setOperation"></breadcrumb>
<div class="dis-f jus-bet" style="margin-top: -15px;"> <div class="dis-f jus-bet" style="margin-top: -15px;">
<div class="info-box"> <div class="info-box">
<div style="position: absolute; top: 0; left: 0;"> <div class="top-bar-box dis-f jus-x">
<el-affix :offset="0" @change="changeTitleType" z-index="1002" style="width: 1200px;"> <div class="top-bar dis-f al-item jus-bet">
<div class="top-bar-box dis-f jus-x" v-if="titleType"> <div class="dis-f al-item">
<div class="top-bar dis-f al-item jus-bet"> <img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing" v-if="pageType == 1 && housingInfo['data'] && housingInfo['data'].info.verified" alt="" />
<div class="dis-f al-item"> <img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" style="margin-right: 10px;" v-if="pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1" alt="" />
<img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing" v-if="pageType == 1 && housingInfo['data'] && housingInfo['data'].info.verified" alt="" /> <div class="line" v-if="(housingInfo['data'] && housingInfo['data'].info.verified) || (pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1)"></div>
<img src="../assets/homeImage/intermediaryTabImg.png" class="intermediary-logo" style="margin-right: 10px;" v-if="pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1" alt="" /> <span class="need-houing-type" v-if="pageType == 3">预算</span>
<div class="line" v-if="(housingInfo['data'] && housingInfo['data'].info.verified) || (pageType == 2 && housingInfo['data'] && housingInfo['data'].isintermediary == 1)"></div> <span class="unit">HK$</span>
<span class="need-houing-type" v-if="pageType == 3">预算</span> <span class="rent" v-if="!Array.isArray(housingInfo['data'] && housingInfo['data'].info.rent)">{{ housingInfo["data"] && housingInfo["data"].info.rent }}</span>
<span class="unit">HK$</span> <span class="rent" v-if="Array.isArray(housingInfo['data'] && housingInfo['data'].info.rent)">
<span class="rent" v-if="!Array.isArray(housingInfo['data'] && housingInfo['data'].info.rent)">{{ housingInfo["data"] && housingInfo["data"].info.rent }}</span> {{ housingInfo["data"] && housingInfo["data"].info.rent[0] }}<span class="rent" v-if="housingInfo['data'] && housingInfo['data'].info.rent[1]" style="margin: 0;">~</span><span class="rent" style="margin: 0;" v-if="housingInfo['data'] && housingInfo['data'].info.rent[1]">{{ housingInfo["data"] && housingInfo["data"].info.rent[1] }}</span>
<span class="rent" v-if="Array.isArray(housingInfo['data'] && housingInfo['data'].info.rent)"> </span>
{{ housingInfo["data"] && housingInfo["data"].info.rent[0] }}<span class="rent" v-if="housingInfo['data'] && housingInfo['data'].info.rent[1]" style="margin: 0;">~</span><span class="rent" style="margin: 0;" v-if="housingInfo['data'] && housingInfo['data'].info.rent[1]">{{ housingInfo["data"] && housingInfo["data"].info.rent[1] }}</span> <span>/{{ housingInfo["data"] && housingInfo["data"].info.rentalperiod }}</span>
<div class="line"></div>
<div class="dis-f al-item">
{{ indexData["data"] && indexData["data"]["config"] && indexData["data"]["config"]["type"][housingInfo["data"] && housingInfo["data"].info.type.substring(0, 1)] }}
<img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="" />
{{ indexData["data"] && indexData["data"]["config"] && indexData["data"]["config"]["type"][housingInfo["data"] && housingInfo["data"].info.type] }}
</div>
</div>
<div class="dis-f al-item">
<div class="tool-btn dis-f al-item jus-x">
<div class="dis-f al-item fav-btn" @click="setOperation">
<div class="pos-r" style="width: 20px; height: 20px;">
<img src="../assets/img/detail/collect.png" v-show="housingInfo['data'] && !housingInfo['data'].isfav" class="fav-img fav-img-t" alt="" />
<img src="../assets/img/detail/collectT.png" v-show="housingInfo['data'] && !housingInfo['data'].isfav" class="fav-img fav-img-f" alt="" />
</div>
<img src="../assets/img/detail/collectT.png" v-show="housingInfo['data'] && housingInfo['data'].isfav" class="tool-icon" alt="" />
<span style="margin-left: 5px;">
{{ housingInfo["data"] && housingInfo["data"].isfav ? housingInfo["data"] && housingInfo["data"]["info"].count_fav : "收藏" }}
</span> </span>
<span>/{{ housingInfo["data"] && housingInfo["data"].info.rentalperiod }}</span>
<div class="line"></div>
<div class="dis-f al-item">
{{ indexData["data"] && indexData["data"]["config"] && indexData["data"]["config"]["type"][housingInfo["data"] && housingInfo["data"].info.type.substring(0, 1)] }}
<img src="../assets/img/detail/arrowIcon.svg" class="icon" alt="" />
{{ indexData["data"] && indexData["data"]["config"] && indexData["data"]["config"]["type"][housingInfo["data"] && housingInfo["data"].info.type] }}
</div>
</div> </div>
<div class="line" style="margin: 0 20px;"></div>
<div class="dis-f al-item"> <div class="dis-f al-item">
<div class="tool-btn dis-f al-item jus-x"> <img src="../assets/img/detail/forward.png" class="tool-icon" alt="" />
<div class="dis-f al-item fav-btn" @click="setOperation"> <span>
<div class="pos-r" style="width: 20px; height: 20px;"> 转发
<img src="../assets/img/detail/collect.png" v-show="housingInfo['data'] && !housingInfo['data'].isfav" class="fav-img fav-img-t" alt="" /> </span>
<img src="../assets/img/detail/collectT.png" v-show="housingInfo['data'] && !housingInfo['data'].isfav" class="fav-img fav-img-f" alt="" /> <transmit-btn v-if="housingInfo.data" :concatType="concatType" :qrcode="housingInfo.data['qrcode']" :title="housingInfo.data.info['subject']" type="housingTop"></transmit-btn>
</div> </div>
<img src="../assets/img/detail/collectT.png" v-show="housingInfo['data'] && housingInfo['data'].isfav" class="tool-icon" alt="" /> </div>
<span style="margin-left: 5px;"> <div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
{{ housingInfo["data"] && housingInfo["data"].isfav ? housingInfo["data"] && housingInfo["data"]["info"].count_fav : "收藏" }} <div class="contact-btn top-contact-btn" style="margin: 0 0 0 10px;" @click="getConcatData">
</span> 联系方式
</div>
<div class="line" style="margin: 0 20px;"></div>
<div class="dis-f al-item">
<img src="../assets/img/detail/forward.png" class="tool-icon" alt="" />
<span>
转发
</span>
<transmit-btn v-if="housingInfo.data" :concatType="concatType" :qrcode="housingInfo.data['qrcode']" :title="housingInfo.data.info['subject']" type="housingTop"></transmit-btn>
</div>
</div>
<div class="concat-btn-box" :class="{ 'concat-btn-show': concatType }">
<div class="contact-btn top-contact-btn" style="margin: 0 0 0 10px;" @click="getConcatData">
联系方式
</div>
</div>
</div> </div>
</div> </div>
</div> </div>
</el-affix> </div>
</div> </div>
<div class="detail-price-box dis-f" style="align-items: end;"> <div class="detail-price-box dis-f" style="align-items: end;">
<span class="need-houing-type" v-if="pageType == 3">预算</span> <span class="need-houing-type" v-if="pageType == 3">预算</span>
@@ -983,7 +979,7 @@ let setNavigation = () => {
path: pageType.value === 2 ? "/intermediaryHousing" : pageType.value === 3 ? "/needHousing" : "/personHousing", path: pageType.value === 2 ? "/intermediaryHousing" : pageType.value === 3 ? "/needHousing" : "/personHousing",
title: pageType.value === 2 ? "中介房源" : pageType.value === 3 ? "求房源" : "个人房源", title: pageType.value === 2 ? "中介房源" : pageType.value === 3 ? "求房源" : "个人房源",
} }
housingInfo["data"]["info"].location = housingInfo["data"]["info"].location + '' housingInfo["data"]["info"].location = housingInfo["data"]["info"].location + ""
store.state.routeList["thirdIndex"] = { store.state.routeList["thirdIndex"] = {
path: `${store.state.routeList["secondaryIndex"].path}`, path: `${store.state.routeList["secondaryIndex"].path}`,
query: { query: {
@@ -1251,7 +1247,7 @@ onBeforeUnmount(() => {
const distanceSchool = () => { const distanceSchool = () => {
api.detailsDistance({ api.detailsDistance({
uniqid: uniqid.value, uniqid: uniqid.value,
istype: 1 istype: 1,
}).then(res => { }).then(res => {
const data = res.data const data = res.data
if (res.code != 200) return if (res.code != 200) return
@@ -1330,7 +1326,6 @@ const selectIndex = id => {
// showDistance.value = true // showDistance.value = true
} }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
img { img {
@@ -1828,7 +1823,11 @@ img {
} }
.top-bar-box { .top-bar-box {
position: fixed;
width: 100%; width: 100%;
left: 0;
bottom: 0;
z-index: 1002;
.line { .line {
width: 1px; width: 1px;
@@ -2945,7 +2944,6 @@ img {
top: 20px; top: 20px;
right: 20px; right: 20px;
cursor: pointer; cursor: pointer;
} }
} }

4
src/views/housingView/apartment.vue
View File

@@ -107,7 +107,7 @@ const getData = () => {
requestLoading = true requestLoading = true
proxy proxy
.$get("/tenement/pc/api/apartment", { .$post("/tenement/pc/api/apartment", {
limit: 10, limit: 10,
page, page,
...pitchValue.value, ...pitchValue.value,
@@ -232,7 +232,7 @@ const handlecollect = uniqid => {
api.apartmentCollection({ token }).then(res => { api.apartmentCollection({ token }).then(res => {
if (res.code != 200) return if (res.code != 200) return
const data = res.data const data = res.data
console.log("data", data) // console.log("data", data)
list.value[targetIndex]["iscollect"] = data.status list.value[targetIndex]["iscollect"] = data.status
ElMessage.success(res.message) ElMessage.success(res.message)
}) })

599
src/views/user.vue
View File

@@ -4,102 +4,130 @@
<div class="info-box flexacenter"> <div class="info-box flexacenter">
<div class="info-left flexacenter flex1"> <div class="info-left flexacenter flex1">
<a href="https://bbs.gter.net/account.php?a=avatar" target="_blank"> <a href="https://bbs.gter.net/account.php?a=avatar" target="_blank">
<img class="info-user-icon" <img class="info-user-icon" :src="user['avatar'] || store.state.user['avatar'] || require('@/assets/img/publicImage/defaultAvatar.png')" />
:src="user['avatar'] || store.state.user['avatar'] || require('@/assets/img/publicImage/defaultAvatar.png')">
</a> </a>
<div class="info-user-box"> <div class="info-user-box">
<div class="info-user-top flexacenter"> <div class="info-user-top flexacenter">
<a href="https://bbs.gter.net/account.php?a=info" target="_blank" class="info-user-username">{{ <a href="https://bbs.gter.net/account.php?a=info" target="_blank" class="info-user-username">{{ user["nickname"] }}</a>
user['nickname'] }}</a>
<a href="https://bbs.gter.net/account.php?a=info" target="_blank"> <a href="https://bbs.gter.net/account.php?a=info" target="_blank">
<img class="info-user-edit" src="@/assets/img/publicImage/edit-pen.png"> <img class="info-user-edit" src="@/assets/img/publicImage/edit-pen.png" />
</a> </a>
<img class="info-user-certifying" v-if="user.intermediary == 1" <img class="info-user-certifying" v-if="user.intermediary == 1" src="@/assets/img/publicImage/certifying-agent.png" />
src="@/assets/img/publicImage/certifying-agent.png">
<div class="info-user-validity" v-if="validityidentity">（有效期至{{ validityidentity }}）</div> <div class="info-user-validity" v-if="validityidentity">（有效期至{{ validityidentity }}）</div>
</div> </div>
<div class="info-user-bottom flexacenter">UID：{{ user['uid'] }}</div> <div class="info-user-bottom flexacenter">UID：{{ user["uid"] }}</div>
</div> </div>
</div> </div>
<div class="info-right flexacenter"> <div class="info-right flexacenter">
<div class="operate-item message flexcenter" @click="systematicState = true; newmessagenum = 0"> <div class="operate-item message flexcenter" @click="handleOpenMessage">
<div class="operate-item-shell flexcenter"> <div class="operate-item-shell flexcenter">
<div class="newmessagenum flexcenter" v-if="newmessagenum > 0">{{ newmessagenum }}</div> <div class="newmessagenum flexcenter" v-if="newmessagenum > 0">{{ newmessagenum }}</div>
<img class="operate-icon" src="@/assets/img/publicImage/message-icon.svg"> <img class="operate-icon" src="@/assets/img/publicImage/message-icon.svg" />
</div> </div>
<div class="operate-text">消息提醒</div> <div class="operate-text">消息提醒</div>
</div> </div>
<img class="" src="@/assets/img/publicImage/cut-off-rule.svg"> <img class="" src="@/assets/img/publicImage/cut-off-rule.svg" />
<div class="operate-item flexcenter add"> <div class="operate-item flexcenter add">
<div class="operate-item-shell flexcenter"> <div class="operate-item-shell flexcenter">
<img class="operate-icon" src="@/assets/img/publicImage/add-icon.svg"> <img class="operate-icon" src="@/assets/img/publicImage/add-icon.svg" />
</div> </div>
<div class="operate-text">发布房源</div> <div class="operate-text">发布房源</div>
<choosing-identity></choosing-identity> <choosing-identity></choosing-identity>
</div> </div>
<template v-if="user['uid'] && user.identity != 0"> <template v-if="user['uid'] && user.identity != 0">
<img class="" src="@/assets/img/publicImage/cut-off-rule.svg"> <img class="" src="@/assets/img/publicImage/cut-off-rule.svg" />
<div class="operate-item flexcenter identity"> <div class="operate-item flexcenter identity">
<div class="operate-item-shell flexcenter" <div class="operate-item-shell flexcenter" :class="{ 'intermediary': user.identity == 1, 'personage': user.identity == -1 }">
:class="{ 'intermediary': user.identity == 1, 'personage': user.identity == -1 }"> <img class="operate-icon" src="@/assets/img/publicImage/intermediary-icon.png" />
<img class="operate-icon" src="@/assets/img/publicImage/intermediary-icon.png">
</div> </div>
<div class="operate-text">{{ identityObj[user.identity || -1] }}</div> <div class="operate-text">{{ identityObj[user.identity || -1] }}</div>
<div v-if="user.identity == 1" class="btn-qrcode"> <div v-if="user.identity == 1" class="btn-qrcode">
<authentication-info :type="2" style="height: 217px ;"></authentication-info> <authentication-info :type="2" style="height: 217px;"></authentication-info>
<!-- <img class="bj" src="@/assets/img/publicImage/mediation-authentication-bj.jpg">
<img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=middlemanAuth"> -->
</div> </div>
<div v-else class="btn-qrcode"> <div v-else class="btn-qrcode">
<authentication-info :type="1" style="height: 217px ;"></authentication-info> <authentication-info :type="1" style="height: 217px;"></authentication-info>
<!-- <img class="bj" src="@/assets/img/publicImage/housing-certification-bj.jpg">
<img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth"> -->
</div> </div>
</div> </div>
<!-- <el-popover placement="right-end" :width="360" trigger="hover" :show-arrow="false"
popper-style="background: transparent;padding:0;box-shadow: none;border: none;">
<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> </template>
</div> </div>
</div> </div>
<div class="tab-box flexacenter"> <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 == 'fav' }" @click="cutTab('fav')">我的收藏</div>
<div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'publish' }" @click="cutTab('publish')">我的发布 <div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'publish' }" @click="cutTab('publish')">我的发布</div>
</div>
</div> </div>
</div> </div>
<div class="quantity wid1200" v-if="tabState == 'fav'">共收藏 <b>{{ count['fav'] }}</b> 个房源</div> <div class="quantity wid1200" v-if="tabState == 'fav'">
<div class="quantity wid1200 flexacenter" v-else>共 <b>{{ count['publish'] }}</b> 条房源（上架 {{ stat['listing'] }} <div 共收藏 <b>{{ count["fav"] }}</b> 个房源
class="longString">|</div> 草稿 {{ stat['draft'] </div>
}} <div class="longString">|</div> 下架 {{ stat['offshelf'] }}）</div> <div class="quantity wid1200 flexacenter" v-else>
共 <b>{{ count["publish"] }}</b> 条房源（上架 {{ stat["listing"] }}
<div class="longString">|</div>
草稿 {{ stat["draft"] }}
<div class="longString">|</div>
下架 {{ stat["offshelf"] }}）
</div>
<div class="list wid1200 flexflex" v-show="tabState == 'fav'" ref="gridContainer"> <div class="list wid1200 flexflex" v-show="tabState == 'fav'" ref="gridContainer">
<div class="item" v-for="(item, index) in favData['list']" :key="item.id"> <div class="item" v-for="(item, index) in favData['list']" :key="item.id" @click="goApartmentDetail(item)">
<public-list-item :item="item" :index="index" @cancelCollection="cancelCollection"></public-list-item> <div v-if="item.collectiontype == 'apartment'" class="apartment-item">
<div class="apartment-header flexflex">
<img class="apartment-header-img" :src="item.image || item.imageurl" />
<div class="apartment-header-content flexflex flex1">
<div class="apartment-header-title">{{ item.title }}</div>
<div class="apartment-header-tips">{{ item.propaganda }}</div>
<div class="apartment-header-types flex">
<div v-for="(it, i) in item.othertags" :key="i" class="apartment-header-types-item flexcenter">{{ it }}</div>
</div>
</div>
</div>
<div class="apartment-type-box flexflex flex1">
<div class="apartment-type-list flexflex flex1">
<div class="apartment-type-list-item flexacenter" v-for="(it, index) in item.roomlist" :key="index">
<div class="apartment-type-list-item-name flex1">{{ it.name }}</div>
<div class="apartment-type-list-item-price flexacenter">
<div class="unit">HK$</div>
<div class="value">{{ it.price }}</div>
/月
</div>
</div>
</div>
<div class="apartment-type-total flexcenter">
共
<div class="apartment-type-total-value flexcenter">{{ item.roomnum }}</div>
个房型
<img class="apartment-type-arrow" src="@/assets/img/publicImage/black-arrow.svg" />
</div>
</div>
<div class="apartment-bottom flexacenter">
<div class="apartment-bottom-location flexacenter flex1">
<img class="apartment-bottom-icon" src="@/assets/img/publicImage/location-icon.png" />
{{ item.address }}
</div>
<div class="apartment-bottom-btn flexacenter" @click.stop="cancelCollection(item)">
<img class="apartment-bottom-btn-icon" src="@/assets/img/publicImage/black-circle-cross.svg" />
取消收藏
</div>
</div>
</div>
<public-list-item v-else :item="item" :index="index" @cancelCollection="cancelCollection"></public-list-item>
</div> </div>
</div> </div>
<div class="list wid1200 flexflex" v-show="tabState == 'publish'" ref="gridContainerpublish"> <div class="list wid1200 flexflex" v-show="tabState == 'publish'" ref="gridContainerpublish">
<div class="item" v-for="(item, index) in publishData['list']" :key="item.id"> <div class="item" v-for="(item, index) in publishData['list']" :key="item.id">
<public-list-item :item="item" :index="index" @cancelCollection="cancelCollection" :ispublish="true" <public-list-item :item="item" :index="index" @cancelCollection="cancelCollection" :ispublish="true" @goUp="goUp" @undercarriage="undercarriage" @handleDelete="handleDelete"></public-list-item>
@goUp="goUp" @undercarriage="undercarriage" @handleDelete="handleDelete"></public-list-item>
</div> </div>
</div> </div>
<div class="empty-box flexcenter wid1200" <div class="empty-box flexcenter wid1200" v-if="(tabState == 'fav' && favData['list'].length == 0) || (tabState == 'publish' && publishData['list'].length == 0)">
v-if="(tabState == 'fav' && favData['list'].length == 0) || (tabState == 'publish' && publishData['list'].length == 0)">
<empty-duck></empty-duck> <empty-duck></empty-duck>
</div> </div>
<div class="bottom-tps" <div class="bottom-tps" v-if="(tabState == 'fav' && favData['list'].length != 0 && favData['page'] == 0) || (tabState == 'publish' && publishData['list'].length != 0 && publishData['page'] == 0)">
v-if="(tabState == 'fav' && favData['list'].length != 0 && favData['page'] == 0) || (tabState == 'publish' && publishData['list'].length != 0 && publishData['page'] == 0)"> - 到底了 -
- 到底了 -</div> </div>
<!-- 有疑问 --> <!-- 有疑问 -->
<have-questions></have-questions> <have-questions></have-questions>
@@ -113,253 +141,276 @@
</template> </template>
<script setup> <script setup>
import pageTopBar from '../components/pageTopBar/pageTopBar.vue'; import pageTopBar from "../components/pageTopBar/pageTopBar.vue"
import systematicNotificationPop from '@/components/user/systematic-notification-pop.vue' import systematicNotificationPop from "@/components/user/systematic-notification-pop.vue"
import haveQuestions from '@/components/public/have-questions.vue' import haveQuestions from "@/components/public/have-questions.vue"
import pageFooter from '@/components/footer/footer.vue' import pageFooter from "@/components/footer/footer.vue"
import publicListItem from '@/components/public/public-list-item.vue' import publicListItem from "@/components/public/public-list-item.vue"
import emptyDuck from '@/components/public/empty-duck.vue' import emptyDuck from "@/components/public/empty-duck.vue"
import choosingIdentity from '@/components/edit/choosingIdentity.vue' import choosingIdentity from "@/components/edit/choosingIdentity.vue"
import backToTop from '@/components/public/backToTop.vue' import backToTop from "@/components/public/backToTop.vue"
import authenticationInfo from '@/components/seachModule/authenticationInfo.vue'; import authenticationInfo from "@/components/seachModule/authenticationInfo.vue"
import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, nextTick, pushScopeId } from 'vue' import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, nextTick, pushScopeId } from "vue"
import { useRoute, useRouter } from 'vue-router'; import { useRoute, useRouter } from "vue-router"
import { ElLoading, ElMessage } from 'element-plus' import { ElLoading, ElMessage } from "element-plus"
import Masonry from 'masonry-layout'; import Masonry from "masonry-layout"
import store from '@/store/index'; import store from "@/store/index"
const { proxy } = getCurrentInstance() const { proxy } = getCurrentInstance()
const route = useRoute(); const route = useRoute()
let router = useRouter()
const gridContainer = ref(null); const gridContainer = ref(null)
const gridContainerpublish = ref(null); const gridContainerpublish = ref(null)
let masonryInstance = null let masonryInstance = null
let masonryInstancepublish = null let masonryInstancepublish = null
onMounted(() => { onMounted(() => {
masonryInstance = new Masonry(gridContainer.value, { masonryInstance = new Masonry(gridContainer.value, {
itemSelector: '.item', itemSelector: ".item",
gutter: 20 gutter: 20,
}); })
masonryInstancepublish = new Masonry(gridContainerpublish.value, { masonryInstancepublish = new Masonry(gridContainerpublish.value, {
itemSelector: '.item', itemSelector: ".item",
gutter: 20 gutter: 20,
}); })
init() init()
window.addEventListener('scroll', handleScroll); window.addEventListener("scroll", handleScroll)
}) })
let systematicState = ref(false) // 系统通知 let systematicState = ref(false) // 系统通知
let user = ref({}) let user = ref({})
let count = ref({}) // 发布和收藏的数量 let count = ref({}) // 发布和收藏的数量
let newmessagenum = ref(0) let newmessagenum = ref(0)
let validityidentity = ref('') let validityidentity = ref("")
let tabState = ref('publish') // fav publish let tabState = ref("publish") // fav publish
const identityObj = { const identityObj = {
1: "中介认证", 1: "中介认证",
"-1": "房源认证" "-1": "房源认证",
}
// 打开消息提醒 并且 删除未读消息数
const handleOpenMessage = () => {
systematicState.value = true
newmessagenum.value = 0
} }
const init = () => { const init = () => {
proxy.$post("/tenement/pc/api/user").then(res => { proxy
if (res.code != 200) return .$post("/tenement/pc/api/user")
let data = res.data .then(res => {
if (res.code != 200) return
let data = res.data
if (!route.query['tab']) { if (!route.query["tab"]) {
if (data.count['publish'] > 0) tabState.value = 'publish' if (data.count["publish"] > 0) tabState.value = "publish"
else if (data.count['fav'] == 0) tabState.value = 'publish' else if (data.count["fav"] == 0) tabState.value = "publish"
else tabState.value = 'fav' else tabState.value = "fav"
} else tabState.value = route.query['tab'] } else tabState.value = route.query["tab"]
if (tabState.value == 'publish') getPublishData() // if (tabState.value == 'publish') getPublishData()
else getFavData() // else getFavData()
tabState.value = "fav"
getFavData()
user.value = data.user user.value = data.user
count.value = data.count count.value = data.count
newmessagenum.value = data.newmessagenum newmessagenum.value = data.newmessagenum
store.state.user['messagenum'] = data.newmessagenum store.state.user["messagenum"] = data.newmessagenum
validityidentity.value = data.validityidentity validityidentity.value = data.validityidentity
}).finally(() => { }) })
.finally(() => {})
} }
let loading = ElLoading.service({ let loading = ElLoading.service({
lock: true, lock: true,
text: 'Loading', text: "Loading",
background: 'rgba(0, 0, 0, 0.7)', background: "rgba(0, 0, 0, 0.7)",
visible: false visible: false,
}); })
let publishData = ref({ let publishData = ref({
page: 1, page: 1,
list: [] list: [],
}) })
let stat = ref({}) // 我的发布的详细数量 let stat = ref({}) // 我的发布的详细数量
// 获取发布数据 // 获取发布数据
const getPublishData = () => { const getPublishData = () => {
if (publishData.value['page'] == 0 || loading['visible'].value) return if (publishData.value["page"] == 0 || loading["visible"].value) return
loading = ElLoading.service({ loading = ElLoading.service({
lock: true, lock: true,
text: 'Loading', text: "Loading",
background: 'rgba(0, 0, 0, 0.7)', background: "rgba(0, 0, 0, 0.7)",
}) })
proxy.$post("/tenement/pc/api/user/publishList", { proxy
page: publishData.value['page'] .$post("/tenement/pc/api/user/publishList", {
}).then(res => { page: publishData.value["page"],
if (res.code != 200) return })
let data = res.data .then(res => {
// data.data[0]['verifiedstatus'] = 1 if (res.code != 200) return
stat.value = data['stat'] let data = res.data
publishData.value['page'] = data['page'] * data['limit'] >= data['count'] ? 0 : data['page'] + 1 // data.data[0]['verifiedstatus'] = 1
publishData.value['list'] = publishData.value['list'].concat(data['data'] || []) stat.value = data["stat"]
nextTick(() => { publishData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1
masonryInstancepublish.reloadItems(); publishData.value["list"] = publishData.value["list"].concat(data["data"] || [])
masonryInstancepublish.layout(); nextTick(() => {
masonryInstancepublish.reloadItems()
masonryInstancepublish.layout()
loading.close()
})
})
.finally(() => {
loading.close() loading.close()
}) })
}).finally(() => {
loading.close()
})
} }
let favData = ref({ let favData = ref({
page: 1, page: 1,
list: [] list: [],
}) })
// 获取收藏数据 // 获取收藏数据
const getFavData = () => { const getFavData = () => {
if (favData.value['page'] == 0 || loading['visible'].value) return if (favData.value["page"] == 0 || loading["visible"].value) return
loading = ElLoading.service({ loading = ElLoading.service({
lock: true, lock: true,
text: 'Loading', text: "Loading",
background: 'rgba(0, 0, 0, 0.7)', background: "rgba(0, 0, 0, 0.7)",
}) })
proxy.$post("/tenement/pc/api/user/favList", { proxy
page: favData.value['page'], // .$post("/tenement/pc/api/user/favList", {
}).then(res => { .$post("/tenement/pc/api/user/collectionList", {
if (res.code != 200) return page: favData.value["page"],
let data = res.data })
favData.value['page'] = data['page'] * data['limit'] >= data['count'] ? 0 : data['page'] + 1 .then(res => {
favData.value['list'] = favData.value['list'].concat(data['data'] || []) if (res.code != 200) return
favData.value['limit'] = data['limit'] let data = res.data
nextTick(() => { favData.value["page"] = data["page"] * data["limit"] >= data["count"] ? 0 : data["page"] + 1
masonryInstance.reloadItems(); favData.value["list"] = favData.value["list"].concat(data["data"] || [])
masonryInstance.layout(); favData.value["limit"] = data["limit"]
nextTick(() => {
masonryInstance.reloadItems()
masonryInstance.layout()
loading.close()
})
})
.finally(() => {
loading.close() loading.close()
}) })
}).finally(() => {
loading.close()
})
} }
// 切换 tab // 切换 tab
const cutTab = (value) => { const cutTab = value => {
tabState.value = value tabState.value = value
if (tabState.value == 'publish' && publishData.value['list'].length == 0) getPublishData() if (tabState.value == "publish" && publishData.value["list"].length == 0) getPublishData()
else if (tabState.value == 'fav' && favData.value['list'].length == 0) getFavData() else if (tabState.value == "fav" && favData.value["list"].length == 0) getFavData()
} }
// 取消收藏 // 取消收藏
let cancelCollection = data => { let cancelCollection = data => {
proxy.$post("/tenement/pc/api/user/operation", { let url = '/tenement/pc/api/user/operation'
token: data['token'] if (data['collectiontype'] == 'apartment') url = '/tenement/pc/api/user/apartmentCollection'
}).then(res => { proxy
if (res.code != 200) return .$post(url, {
favData.value.list.splice(data['index'], 1) token: data["token"],
count.value['fav']-- })
.then(res => {
if (favData.value.list.length == 0 && favData.value['page'] != 0) { if (res.code != 200) return
favData.value['page'] = 1 favData.value.list.splice(data["index"], 1)
getFavData() count.value["fav"]--
} else refillData(data['index'])
if (favData.value.list.length == 0 && favData.value["page"] != 0) {
nextTick(() => { favData.value["page"] = 1
masonryInstance.reloadItems(); getFavData()
masonryInstance.layout(); } else refillData(data["index"])
loading.close()
nextTick(() => {
masonryInstance.reloadItems()
masonryInstance.layout()
loading.close()
})
}) })
})
} }
// 取消输出后重新补充一条数据 // 取消输出后重新补充一条数据
const refillData = index => { const refillData = index => {
if (favData.value['page'] == 0 || loading['visible'].value) return if (favData.value["page"] == 0 || loading["visible"].value) return
const page = favData.value['page'] - 1 const page = favData.value["page"] - 1
proxy.$post("/tenement/pc/api/user/favList", { proxy
page, .$post("/tenement/pc/api/user/favList", {
limit: favData.value['limit'] page,
}).then(res => { limit: favData.value["limit"],
if (res.code != 200) return })
let data = res.data['data'] || [] .then(res => {
favData.value['list'].push(data[data.length - 1]) if (res.code != 200) return
nextTick(() => { let data = res.data["data"] || []
masonryInstance.reloadItems(); favData.value["list"].push(data[data.length - 1])
masonryInstance.layout(); nextTick(() => {
masonryInstance.reloadItems()
masonryInstance.layout()
})
}) })
})
} }
// 点击下架都修改状态 // 点击下架都修改状态
const undercarriage = (index, status) => { const undercarriage = (index, status) => {
stat.value['listing']-- stat.value["listing"]--
stat.value['offshelf']++ stat.value["offshelf"]++
publishData.value['list'][index].status = status publishData.value["list"][index].status = status
nextTick(() => { nextTick(() => {
masonryInstance.reloadItems(); masonryInstance.reloadItems()
masonryInstance.layout(); masonryInstance.layout()
}) })
} }
// 点击顶上去后改 数据 状态 // 点击顶上去后改 数据 状态
const goUp = index => publishData.value['list'][index].isding = 1 const goUp = index => (publishData.value["list"][index].isding = 1)
// 点击删除 // 点击删除
const handleDelete = (index, status) => { const handleDelete = (index, status) => {
if (status == 0) stat.value['draft']-- if (status == 0) stat.value["draft"]--
else if (status == 1) stat.value['listing']-- else if (status == 1) stat.value["listing"]--
else stat.value['offshelf']-- else stat.value["offshelf"]--
count.value['publish']-- count.value["publish"]--
publishData.value['list'].splice(index, 1) publishData.value["list"].splice(index, 1)
nextTick(() => { nextTick(() => {
masonryInstancepublish.reloadItems(); masonryInstancepublish.reloadItems()
masonryInstancepublish.layout(); masonryInstancepublish.layout()
loading.close() loading.close()
}) })
} }
// 监听滚动到底部 // 监听滚动到底部
const handleScroll = () => { const handleScroll = () => {
if (!user.value['uid']) return if (!user.value["uid"]) return
const scrollHeight = document.documentElement.scrollHeight; const scrollHeight = document.documentElement.scrollHeight
const clientHeight = document.documentElement.clientHeight; const clientHeight = document.documentElement.clientHeight
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; const scrollTop = document.documentElement.scrollTop || document.body.scrollTop
if (scrollTop + clientHeight >= scrollHeight - 350) { if (scrollTop + clientHeight >= scrollHeight - 350) {
if (tabState.value == 'publish') getPublishData() if (tabState.value == "publish") getPublishData()
else getFavData() else getFavData()
} }
}; }
// 跳转公寓详情页
const goApartmentDetail = item => router.push(`/apartmentDetail?uniqid=${item.uniqid}`)
onUnmounted(() => { onUnmounted(() => {
window.removeEventListener('scroll', handleScroll); window.removeEventListener("scroll", handleScroll)
}); })
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
* { * {
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif; font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
} }
.user-box { .user-box {
@@ -414,18 +465,16 @@ onUnmounted(() => {
color: #aaa; color: #aaa;
font-size: 13px; font-size: 13px;
} }
} }
.info-user-bottom { .info-user-bottom {
height: 24px; height: 24px;
color: #7F7F7F; color: #7f7f7f;
} }
} }
} }
.info-right { .info-right {
.operate-item:hover .btn-qrcode { .operate-item:hover .btn-qrcode {
display: block; display: block;
} }
@@ -444,7 +493,6 @@ onUnmounted(() => {
} }
&.message { &.message {
.operate-item-shell { .operate-item-shell {
position: relative; position: relative;
background-color: rgba(80, 227, 194, 1); background-color: rgba(80, 227, 194, 1);
@@ -467,7 +515,7 @@ onUnmounted(() => {
height: 16px; height: 16px;
font-size: 13px; font-size: 13px;
background: #f95d5d; background: #f95d5d;
color: #FFFFFF; color: #ffffff;
border-radius: 50%; border-radius: 50%;
} }
} }
@@ -516,7 +564,6 @@ onUnmounted(() => {
height: 24px; height: 24px;
} }
} }
} }
} }
@@ -541,11 +588,11 @@ onUnmounted(() => {
&.pitch { &.pitch {
background-color: rgba(98, 177, 255, 1); background-color: rgba(98, 177, 255, 1);
border-radius: 8px; border-radius: 8px;
font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif; font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
font-weight: 650; font-weight: 650;
font-style: normal; font-style: normal;
font-size: 18px; font-size: 18px;
color: #FFFFFF; color: #ffffff;
position: relative; position: relative;
&::after { &::after {
@@ -554,9 +601,8 @@ onUnmounted(() => {
bottom: -5px; bottom: -5px;
width: 14px; width: 14px;
height: 8px; height: 8px;
background-image: url('@/assets/img/publicImage/green-arrow-below.svg'); background-image: url("@/assets/img/publicImage/green-arrow-below.svg");
} }
} }
} }
} }
@@ -575,7 +621,7 @@ onUnmounted(() => {
.longString { .longString {
font-weight: 400; font-weight: 400;
color: #D7D7D7; color: #d7d7d7;
margin: 0 4px; margin: 0 4px;
} }
} }
@@ -591,7 +637,7 @@ onUnmounted(() => {
} }
.empty-box { .empty-box {
background-color: #FFFFFF; background-color: #ffffff;
height: 500px; height: 500px;
margin: 0 auto; margin: 0 auto;
justify-content: center; justify-content: center;
@@ -632,4 +678,155 @@ onUnmounted(() => {
transform: translateX(-50%); transform: translateX(-50%);
} }
} }
.apartment-item {
width: 590px;
height: 360px;
padding: 20px;
background-color: rgba(255, 255, 255, 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-bottom: 20px;
.apartment-header {
margin-bottom: 20px;
.apartment-header-img {
width: 209px;
height: 140px;
border-radius: 15px;
margin-right: 20px;
}
.apartment-header-content {
flex-direction: column;
.apartment-header-title {
font-weight: 650;
font-size: 20px;
color: #000000;
margin-bottom: 10px;
}
.apartment-header-tips {
color: #aaaaaa;
font-size: 14px;
margin-bottom: 20px;
}
.apartment-header-types {
height: 76px;
overflow: hidden;
.apartment-header-types-item {
display: inline-flex;
height: 28px;
padding: 0 12px;
background-color: rgba(224, 240, 255, 1);
border-radius: 5px;
color: #447eb3;
font-size: 13px;
margin-right: 10px;
margin-bottom: 10px;
}
}
}
}
.apartment-type-box {
width: 550px;
background-color: rgba(246, 246, 246, 1);
border-radius: 12px;
.apartment-type-list {
flex-direction: column;
border-right: 1px solid #ebebeb;
.apartment-type-list-item {
padding: 0 10px;
height: 54px;
&:not(:last-of-type) {
border-bottom: 1px solid #ebebeb;
}
.apartment-type-list-item-name {
font-size: 15px;
color: #000000;
}
.apartment-type-list-item-price {
.unit {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
color: #000000;
font-size: 14px;
margin-right: 5px;
}
.value {
font-family: "Arial-Black", "Arial Black", sans-serif;
font-weight: 900;
font-size: 20px;
color: #f95d5d;
margin-right: 5px;
}
font-size: 14px;
color: #555555;
}
}
}
.apartment-type-total {
font-size: 14px;
color: #555555;
width: 191px;
.apartment-type-total-value {
font-weight: 650;
font-size: 14px;
color: #000000;
line-height: 18px;
background-color: #fddf6d;
border-radius: 9px;
padding: 0 8px;
margin: 0 8px;
}
.apartment-type-arrow {
width: 7px;
height: 12px;
margin-left: 8px;
}
}
}
.apartment-bottom {
height: 58px;
.apartment-bottom-location {
font-size: 15px;
color: #555555;
.apartment-bottom-icon {
width: 18px;
height: 18px;
margin-right: 5px;
}
}
.apartment-bottom-btn {
color: #333333;
font-size: 14px;
height: 58px;
&:hover .apartment-bottom-btn-icon {
transform: rotate(360deg);
}
.apartment-bottom-btn-icon {
width: 16px;
height: 16px;
margin-right: 3px;
transition: all 1s;
}
}
}
}
</style> </style>