个人房源

src/components/biserialListItem/biserialListItem.vue

@@ -1,6 +1,8 @@
 <template>
-    <div class="list-item" ref="list" @click="watchInfo">
+    <div class="list-item" ref="list" @click="watchInfo" :class="{'s-w-100':detailShow}">
-        <div class="authentication-box dis-f al-item" v-if="data && data.data && data.data.verified == 1">
+        <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
-                        <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>
+                            && 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">
+        <div class="btm-box dis-f al-item" :class="{'jus-bet':detailShow}">
-            <img :src="data && data.data && data.data.avatar" class="user-img" alt="">
+            <div class="dis-f al-item">
-            <span class="user-name">{{ data && data.data && data.data.author }}</span>
+                <img :src="data && data.data && data.data.avatar" class="user-img" alt="">
-            <div class="btn" v-if="data && data.data && data.data.isintermediary !== 1 && !data.data.intermediary_text">{{
+                <span class="user-name">{{ data && data.data && data.data.author }}</span>
-                listData && listData.data && listData.data.intermediary[data && data.data && data.data.intermediary] }}
+                <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 &&
+            <img src="../../assets/img/detail/authenticationHousing.png" class="intermediary-tab-img"
-                data.data.intermediary_text
+                v-show="detailShow && data && data.data && data.data.verified == 1" alt="">
-            }}</div>
             <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 router = useRouter()
-let watchInfo = ()=>{
+let watchInfo = () => {
     router.push({
-        path:'/detail',
+        path: '/detail',
-        query:{
+        query: {
-            id:data.data.uniqid
+            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>
 
 
   

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">

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">
+                            <div class="img-box dis-f jus-x" style="width:600px" v-if="!item.thumbnail">
-                                <video :src="item&&item.url" class="img"></video>
+                                <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 }">
+                    <div class="img-box-s dis-f jus-x" :class="{ 'select-box': imageTab === i }">
-                        <img :src="item.thumbnail" alt="" class="img-s">
+                        <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;

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)
     }
     
 }

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" 
+                                <img src="../assets/img/detail/authenticationHousing.png" class="authentication-housing"
-                                v-if="housingInfo['data']&&housingInfo['data'].isintermediary" alt="">
+                                    v-if="housingInfo['data'] &&
-                                <div class="line" v-if="housingInfo['data']&&housingInfo['data'].isintermediary"></div>
+                                        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]
+    location && location[housingInfo['data'] && housingInfo['data']['info'].location]
-                                    }}</span>
+}}</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{
+    .authentication-housing {
-        width:88px;
+        width: 88px;
-        height:16px;
+        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;