个人房源

2023-07-25 19:32:50 +08:00 · 2023-07-25 19:32:50 +08:00 · 7e95fd62f8
commit 7e95fd62f8
parent fff3c786a8
6 changed files with 151 additions and 52 deletions
--- a/src/assets/img/detail/presonNumIcon.png
+++ b/src/assets/img/detail/presonNumIcon.png
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/src/components/biserialListItem/biserialListItem.vue
@ -1,6 +1,8 @@
 <template>
-    <div class="list-item" ref="list" @click="watchInfo">
-        <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1">
+    <div class="list-item" ref="list" @click="watchInfo" :class="{'s-w-100':detailShow}">
+        <img src="../../assets/homeImage/corner.svg" class="detail-tab" v-if="detailShow&&pageType===1" alt="">
+        <img src="../../assets/homeImage/intermediaryCorner.svg" class="detail-tab" v-if="detailShow&&pageType===2" alt="">
+        <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1 && !detailShow">
            <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
            <img src="../../assets/homeImage/topAuthenticationBg.svg" class="bg" alt="">
            <img src="../../assets/homeImage/authenticationText.png" class="text-img" alt="">
@ -19,17 +21,19 @@
                            v-if="listData && listData.data && listData.data.type[data && data.data && data.data.type]">
                            {{ listData && listData.data && listData.data.type[data && data.data && data.data.type] || '' }}
                        </div>
-                        <div class="tab-item mg-l-8" v-if="data && data.data && data.data.elevator !== -1&&data.data.elevator">
+                        <div class="tab-item mg-l-8"
+                            v-if="data && data.data && data.data.elevator !== -1 && data.data.elevator">
                            {{ listData && listData.data && listData.data.elevator[data && data.data && data.data.elevator]
                                ||
                                '' }}
                        </div>
-                        <div class="tab-item mg-l-8" v-if="data && data.data && data.data.sunshinearea !== -1&&data.data.sunshinearea !== 0&&data.data.sunshinearea">
+                        <div class="tab-item mg-l-8"
+                            v-if="data && data.data && data.data.sunshinearea !== -1 && data.data.sunshinearea !== 0 && data.data.sunshinearea">
                            {{ listData && listData.data && listData.data.sunshinearea[data && data.data &&
                                data.data.sunshinearea] || '' }}
                        </div>
                        <div class="tab-item mg-l-8"
-                            v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender]&&data.data.gender">
+                            v-if="listData && listData.data && listData.data.gender[data && data.data && data.data.gender] && data.data.gender">
                            {{ listData && listData.data && listData.data.gender[data && data.data && data.data.gender] ||
                                ''
                            }}
@ -45,9 +49,9 @@
                        }}</span>
                        <span v-if="Array.isArray(data.data.location)">{{
                            location && location.data && location.data[data && data.data &&
-                            data.data.location && data.data.location[0].substring(0, 1)]
+                                data.data.location && data.data.location[0].substring(0, 1)]
                        }}>
-                            <span v-for="(item,i) in data.data.location">
+                            <span v-for="(item, i) in data.data.location">
                                {{ location &&
                                    location.data[item] }}
                            </span>
@ -55,8 +59,10 @@
                    </div>
                    <div class="price-text dis-f" style="align-items: end;">
                        <span class="unit">HK$</span>
-                        <span class="price" v-if="!Array.isArray(data && data.data &&data.data.rent)">{{ data && data.data && data.data.rent }}</span>
-                        <span class="price" v-if="Array.isArray(data && data.data &&data.data.rent)">{{ data && data.data && data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</span>
+                        <span class="price" v-if="!Array.isArray(data && data.data && data.data.rent)">{{ data && data.data
+                            && data.data.rent }}</span>
+                        <span class="price" v-if="Array.isArray(data && data.data && data.data.rent)">{{ data && data.data &&
+                            data.data.rent[0] }}~{{ data && data.data && data.data.rent[1] }}</span>
                        <span>/月</span>
                        <span class="time" v-show="data && data.data && data.data.rentalduration != 0">[ 租期{{ data &&
                            data.data && data.data.rentalduration }}{{
@ -79,15 +85,21 @@
            <img src="../../assets/homeImage/needHousingCorner.svg" v-if="routePath === '/needHousing'" class="tab-img"
                alt="">
        </div>
-        <div class="btm-box dis-f al-item">
-            <img :src="data && data.data && data.data.avatar" class="user-img" alt="">
-            <span class="user-name">{{ data && data.data && data.data.author }}</span>
-            <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">{{
-                listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
+        <div class="btm-box dis-f al-item" :class="{'jus-bet':detailShow}">
+            <div class="dis-f al-item">
+                <img :src="data && data.data && data.data.avatar" class="user-img" alt="">
+                <span class="user-name">{{ data && data.data && data.data.author }}</span>
+                <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">
+                    {{
+                        listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
+                </div>
+                <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{
+                    data &&
+                    data.data.intermediary_text
+                }}</div>
            </div>
-            <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && data.intermediary_text">{{ data &&
-                data.data.intermediary_text
-            }}</div>
+            <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
+                v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
            <img src="../../assets/homeImage/intermediaryTabImg.png"
                v-if="data && data.data && data.data.isintermediary == 1" class="intermediary-tab-img" alt="">
        </div>
@ -103,13 +115,23 @@ let props = defineProps({
        type: Object
    },
    imgLoad: {
-        type: Function
+        type: Function,
+        default: function () {
+            return () => { }
+        }
    },
    listId: {
-        type: [String, Number]
+        type: [String, Number],
+        default: ''
+    },
+    detailShow: {
+        type: Boolean,
+        default: false
    }
 })
 let data = reactive({ data: {} })
+//显示样式
+let detailShow = props.detailShow
 watchEffect(() => {
    data.data = props.item
 })
@ -118,7 +140,7 @@ watchEffect(() => {
 let listId = props.listId
 let imgRef = null
 let loadFinish = () => {
-    let height = imgRef.ctx.$refs&&imgRef.ctx.$refs.list&&imgRef.ctx.$refs.list.offsetHeight
+    let height = imgRef.ctx.$refs && imgRef.ctx.$refs.list && imgRef.ctx.$refs.list.offsetHeight
    // console.log(data.id, listId, height)
    props.imgLoad(data.id, listId, height)
 }
@ -136,19 +158,29 @@ location.data = store.state.indexData && store.state.indexData.config && store.s
 let listData = reactive({ data: {} })
 listData.data = store.state.indexData && store.state.indexData.config

+let pageType=ref('')
+
 //跳转
-let router=useRouter()
-let watchInfo = ()=>{
+let router = useRouter()
+let watchInfo = () => {
    router.push({
-        path:'/detail',
-        query:{
-            id:data.data.uniqid
+        path: '/detail',
+        query: {
+            id: data.data.uniqid,
+            type:pageType.value
        }
    })
 }

 onMounted(() => {
    imgRef = getCurrentInstance()
+    let {type}=router.currentRoute.value.query
+    console.log('type',type)
+    if(type){
+        pageType.value=type
+    }else{
+       pageType.value=routePath.value==='/personHousing'?1:routePath.value==='/intermediaryHousing'?2:routePath.value==='/needHousing'?3:'' 
+    } 
 })

 </script>
@ -187,7 +219,7 @@ img {
 }

 .s-w-100 {
-    width: 100%;
+    width: 100% !important;
 }

 .authentication-box {
@ -226,6 +258,15 @@ img {
    margin-bottom: 20px;
    cursor: pointer;

+    .detail-tab{
+        width:32px;
+        height:32px;
+        position: absolute;
+        top:0;
+        right:0;
+        z-index:66;
+    }
+
    .mg-t-10 {
        margin-top: 10px;
    }
@ -394,8 +435,7 @@ img {
            text-align: center;
        }
    }
-}
-</style>
+}</style>


  
--- a/src/components/detail/breadcrumb.vue
+++ b/src/components/detail/breadcrumb.vue
@ -1,6 +1,6 @@
 <template>
    <div class="pos-r">
-        <div class="authentication-top" v-if="data['data']&&data['data'].isintermediary===1">
+        <div class="authentication-top" v-if="data['data']&&data['data'].info&&data['data'].info.verified===1">
            <div class="dis-f al-item jus-bet">
                <div>
                    <img src="../../assets/img/detail/authenticationLogon.png" class="logo" alt="">
@ -8,16 +8,22 @@
                </div>
                <div class="dis-f al-item">
                    <div class="dis-f al-item">
-                       <img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt=""><span>房产证明</span> 
+                       <img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
+                       <span>
+                        {{data['data']&&data['data'].info&&data['data'].info.intermediary!=1?'房产证明':'真实牌照'}}
+                    </span> 
                    </div>
                    <div class="dis-f al-item" style="margin-left:20px;">
-                        <img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt=""><span>房东身份证</span>
+                        <img src="../../assets/img/detail/authenticationType.svg" class="type-icon" alt="">
+                        <span>
+                            {{ data['data']&&data['data'].info&&data['data'].info.intermediary!=1?'房东身份证':'身份证明' }}
+                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="title-top-box pos-r" style="z-index:666;">
-            <div class="top-round" v-if="data['data']&&data['data'].isintermediary===1">
+            <div class="top-round" v-if="data['data']&&data['data'].info&&data['data'].info.verified===1">
                <div class="top-round-s"></div>
            </div>
            <div class="breadcrumb-box">
--- a/src/components/detail/imageWatch.vue
+++ b/src/components/detail/imageWatch.vue
@ -5,11 +5,11 @@
                <el-carousel arrow="never" height="600px" :autoplay="false" indicator-position="none" ref="carousel">
                    <el-carousel-item v-for="(item, i) in list" :key="i">
                        <div class="dis-f jus-x al-item" v-if="item">
-                            <div class="img-box dis-f jus-x" v-if="!item.thumbnail">
+                            <div class="img-box dis-f jus-x" v-if="item.thumbnail">
                                <img :src="item&&item.url" class="img" alt="">
                            </div>
-                            <div class="img-box dis-f jus-x" v-if="item.thumbnail">
-                                <video :src="item&&item.url" class="img"></video>
+                            <div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail">
+                                <source :src="item&&item.url" class="img" style="width:600px" type="video/mp4">
                            </div>
                        </div>
                    </el-carousel-item>
@ -23,14 +23,14 @@
        </div>
        <div class="dis-f jus-x al-item">
            <div class="list-img-box dis-f al-item jus-x">
-                <div v-for="(item, i) in list" :key="i" @click="watchSet(i)">
+                <div v-for="(item, i) in list" :key="i" @click="watchSet(i)" class="pos-r">
                    <div class="voide" :class="{ 'select-box': imageTab === i }" v-if="!item.thumbnail">
                        <div class="icon-box dis-f jus-x al-item">
-                            <img :src="item.image" class="icon" alt="">
+                            <img src="../../assets/img/detail/videoStop.svg" class="icon" alt="">
                        </div>
                    </div>
-                    <div class="img-box-s dis-f jus-x"  v-if="item.thumbnail" :class="{ 'select-box': imageTab === i }">
-                        <img :src="item.thumbnail" alt="" class="img-s">
+                    <div class="img-box-s dis-f jus-x" :class="{ 'select-box': imageTab === i }">
+                        <img :src="item.thumbnail||item.image" alt="" class="img-s">
                    </div>
                </div>
            </div>
@ -82,6 +82,7 @@ let next = () => {

 //点击预览图
 let watchSet=(num)=>{
+    imageTab.value=num
    carousel.value.setActiveItem(num)
 }

@ -203,6 +204,9 @@ img {
            margin-left: 5px;
            border-radius: 8px;
            cursor: pointer;
+            position: absolute;
+            top:0;
+            left:0;

            .icon-box {
                width: 60px;
--- a/src/utils/api.js
+++ b/src/utils/api.js
@ -33,6 +33,9 @@ export default{
    },
    contactData:(params={})=>{//获取联系方式
        return axios.post('/tenement/pc/api/details/contactData',params)
+    },
+    publisherList:(params={})=>{//发布者其他房源
+        return axios.post('/tenement/pc/api/lists/publisherList',params)
    }
    
 }
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@ -8,9 +8,10 @@
                    <div class="top-bar-box dis-f jus-x" v-show="titleType">
                        <div class="top-bar dis-f al-item jus-bet">
                            <div class="dis-f al-item">
-                                <img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing" 
-                                v-if="housingInfo['data']&&housingInfo['data'].isintermediary" alt="">
-                                <div class="line" v-if="housingInfo['data']&&housingInfo['data'].isintermediary"></div>
+                                <img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing"
+                                    v-if="housingInfo['data'] &&
+                                        housingInfo['data'].info.verified" alt="">
+                                <div class="line" v-if="housingInfo['data'] && housingInfo['data'].info.verified"></div>
                                <span class="unit">HK$</span>
                                <span class="rent">{{ housingInfo['data'] && housingInfo['data'].info.rent }}</span>
                                <span>/月</span>
@ -238,8 +239,8 @@
                                    housingInfo['data']['info'].location.substring(0,
                                        1)]
                                }} > {{
-                                    location && location[housingInfo['data'] && housingInfo['data']['info'].location]
-                                    }}</span>
+    location && location[housingInfo['data'] && housingInfo['data']['info'].location]
+}}</span>
                            </div>
                            <div class="dis-f jus-x" style="margin-top:15px;">
                                <div v-if="housingInfo['data']">
@ -413,6 +414,10 @@
                                    {{ checkUpdateTime(housingInfo['data'] && housingInfo['data'].info.updatetime)
                                    }} </span>
                            </div>
+                            <div class="dis-f al-item jus-x time-box" v-if="housingInfo['data']&&housingInfo['data'].verifiedlistingcount">
+                                <img src="../assets/img/detail/presonNumIcon.png" class="icon" alt="">
+                                <span>认证房源 x{{ housingInfo['data']&&housingInfo['data'].verifiedlistingcount }}</span>
+                            </div>
                            <div class="dis-f jus-x">
                                <div class="contact-btn" @click="getConcatData">
                                    联系方式
@ -465,13 +470,19 @@
            </div>
        </div>
        <div class="dis-f  jus-x al-item" style="position: relative;z-index:-1;">
-            <div class="body-maxWidth">
+            <div class="body-maxWidth" v-show="recommendListData.length > 0">
                <div ref="gridContainer"
                    style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
                    <indexWaterfallBox v-for="(items, i) in recommendListData" :data="items" :key="items.id">
                    </indexWaterfallBox>
                </div>
            </div>
+            <div class="body-maxWidth" v-if="publisherList.length > 0">
+                <div style="margin-top:15px;display: flex;flex-wrap: wrap;margin-bottom: 50px;width:876px">
+                    <biserialItem v-for="(item, i) in publisherList" :detailShow="true" :key="i" :item="item">
+                    </biserialItem>
+                </div>
+            </div>
        </div>
        <div class="dis-f jus-x bottom-tps">
            - {{ loadText }} -
@ -710,6 +721,7 @@ import { useRouter } from 'vue-router'
 import indexWaterfallBox from "../components/indexWaterfallBox/indexWaterfallBox.vue";
 import Masonry from 'masonry-layout';
 import transmitBtn from '@/components/public/transmitBtn.vue'
+import biserialItem from '../components/biserialListItem/biserialListItem.vue'

 import store from '@/store';

@ -867,7 +879,12 @@ let getHousingInfo = () => {
                name: housingInfo['data']['info'].address,
            })
            concatInfo['data'] = store.state.indexData.wechat
-            recommendList()
+            if (housingInfo['data'].info.verified) {
+                getPublisherList()
+            } else {
+                recommendList()
+            }
+
        } else {
            ElMessage({
                message: res.message
@ -946,7 +963,11 @@ const onPageSrcoll = (e) => {
        if (loadMore.value) {
            loadMore.value = false
            pages.value += 1
-            recommendList()
+            if (housingInfo['data'].info.verified) {
+                getPublisherList()
+            } else {
+                recommendList()
+            }
        }
    }
 }
@ -997,6 +1018,32 @@ let recommendList = () => {
    })
 }

+//发布者其他房源
+let publisherList = ref([])
+//获取发布者其他房源
+let getPublisherList = () => {
+    api.publisherList({
+        page: pages.value,
+        limit: 30,
+        token: housingInfo['data'].token
+    }).then(res => {
+        console.log(res)
+        if (res.code === 200) {
+            publisherList.value = publisherList.value.concat(res.data)
+            if (res.data.length >= 30) {
+                loadMore.value = true
+            } else {
+                loadMore.value = false
+                loadText.value = '到底了'
+            }
+        } else {
+            ElMessage({
+                message: res.message,
+            })
+        }
+    })
+}
+
 //瀑布流模块
 const gridContainer = ref(null);
 let masonryInstance = null
@ -1445,9 +1492,9 @@ img {
        background: #ebebeb;
    }

-    .authentication-housing{
-        width:88px;
-        height:16px;
+    .authentication-housing {
+        width: 88px;
+        height: 16px;
    }


@ -1527,7 +1574,6 @@ img {

 .right-tool-box {
    width: 304px;
-    height: 347px;
    background: inherit;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
@ -1650,7 +1696,7 @@ img {
        font-style: normal;
        font-size: 14px;
        color: #555555;
-        margin-top: 30px;
+        margin-top: 25px;

        .icon {
            width: 16px;