首页接口

2023-07-13 10:07:16 +08:00
parent 5dcf49533d
commit 6ad28c4f0a
8 changed files with 306 additions and 245 deletions
--- a/src/components/apartmentList/apartmentList.vue
+++ b/src/components/apartmentList/apartmentList.vue
@@ -1,18 +1,18 @@
 <template>
    <div class="list-item">
        <div class="item-title">
-            安怡居 | 旺角毓成楼
+            {{ moduleData.data.title }}
        </div>
        <div class="item-text">
-            大学认可校外宿舍 ，24小时保安洋楼
+            {{ moduleData.data.propaganda }}
        </div>
        <div class="item-img-box">
-            <div class="img-box">
+            <!-- <div class="img-box">
                <img src="../../assets/homeImage/mapImg.png" class="item-img" alt="">
                <img src="../../assets/homeImage/voide.svg" class="img" alt="">
-            </div>
-            <div class="img-box">
-                <img src="../../assets/homeImage/mapImg.png" class="item-img" alt="">
+            </div> -->
+            <div class="img-box" v-for="(item,i) in moduleData.data.images" :key="i">
+                <img :src="item" class="item-img" alt="">
                <img src="../../assets/homeImage/voide.svg" class="img" alt="">
            </div>
        </div>
@@ -20,19 +20,17 @@
 </template>
  
 <script setup>
-
-</script>
-<script>
-export default {
-    props: {
-        List: {
-            type: Array,
-            default: function () {
-                return []
-            }
+import { defineProps, reactive } from 'vue'
+const props = defineProps({
+    data: {
+        type: Object,
+        default: function () {
+            return {}
        }
    }
-}
+})
+let moduleData = reactive({ data: {} })
+moduleData.data = props.data
 </script>
 <style scoped>
 .list-item {
@@ -67,6 +65,10 @@ export default {
        color: #7F7F7F;
        text-align: left;
        margin-top: 12px;
+        overflow: hidden;
+        display: -webkit-box;
+        -webkit-line-clamp: 1;
+        -webkit-box-orient: vertical;
    }

    .item-img-box {
@@ -87,6 +89,7 @@ export default {
                width: 120px;
                height: 80px;
                border-radius: 10px;
+                object-fit: cover;
            }

            .img {
--- a/src/components/indexSeachInfo/indexSeachInfo.vue
+++ b/src/components/indexSeachInfo/indexSeachInfo.vue
@@ -7,16 +7,16 @@
        <div style="padding:0 0 0 18px;">
            <div class="info-box-bg">
                <div class="box"
-                    :class="[{ 'jus-sp': seachType === '1' || seachType === '3' }, { 'pad-15': seachType === '3' }]">
-                    <div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn" :key="i" :class="[
+                    :class="[{ 'pad-15': seachType === '3' }]">
+                    <div @click="setSelectType(i + 1,item.data)" v-for="(item, i) in btn.data" :key="i" :class="[
                        { 'btn': seachType === '1' },
-                        { 'mg-l-15': seachType === '1' && i % 4 !== 0 },
+                        { 'mg-l-17': seachType === '1' && i % 4 !== 0 },
                        { 'seach-long-btn btn': seachType === '2' },
-                        { 'mg-l-15': seachType === '2' && i % 3 !== 0 },
+                        { 'mg-l-17': seachType === '2' && i % 3 !== 0 },
                        { 'select-btn': seachType === '3' },
-                        { 'mg-l-15': seachType === '3' && i + 1 !== 1 }, { 'select-btn-click': seachType === '3' && i + 1 === selectType }
+                        { 'mg-l-17': seachType === '3' && i + 1 !== 1 }, { 'select-btn-click': seachType === '3' && i + 1 === selectType }
                    ]">
-                        {{ item.text }}
+                        {{ item.name }}
                        <img v-if="seachType === '3'"
                            :src="selectType === i + 1 ? require('../../assets/homeImage/seachSelectBtn.svg') : require('../../assets/homeImage/selectImg.svg')"
                            class="img" alt="">
@@ -32,7 +32,7 @@
 </template>
  
 <script setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, watchEffect } from 'vue';
 import checkBoxGroup from "../checkGroup/checkBoxGroup.vue";

 const props = defineProps({
@@ -54,9 +54,13 @@ const props = defineProps({

 let seachType = props.seachType
 let title = props.title
-let btn = JSON.parse(JSON.stringify(props.btn))
-//
+let btn = reactive({data:[]})
+//数据更新监听
+watchEffect(()=>{
+    btn.data= JSON.parse(JSON.stringify(props.btn))
+})

+//
 let selectType = ref('')
 let selectData = reactive({data:[]})
 //点击选项
@@ -215,8 +219,8 @@ let selectSeach = (data) => {
        cursor: pointer;
    }

-    .mg-l-15 {
-        margin-left: 15px;
+    .mg-l-17 {
+        margin-left: 17px;
    }

 }
--- a/src/components/indexWaterfallBox/indexWaterfallBox.vue
+++ b/src/components/indexWaterfallBox/indexWaterfallBox.vue
@@ -1,33 +1,36 @@
 <template>
    <div>
-        <div class="waterfall-box">
+        <div class="waterfall-box" >
            <div class="flexflex pos-r">
-                <div class="box-tab-type">
-                    招室友
+                <div class="box-tab-type" v-if="itemData.intermediarytext">
+                    {{ itemData.intermediarytext }}
                </div>
-                <div class="intermediary-type">
+                <div class="intermediary-type" v-if="itemData.isintermediary">
                    认证中介
                </div>
                <img class="apartment-img" src="../../assets/homeImage/shopImg.svg" />
-                <div class="authentication-box">
+                <div class="authentication-box" v-if="(itemData.type==='housing'&&itemData.verified)||(itemData.type==='apartment'&&itemData.isintermediary)">
                    <img src="../../assets/homeImage/authenticationLogo.png" class="logo" alt="">
                    <img src="../../assets/homeImage/authenticationBg.svg" class="authentication-bg" alt="">
                    <img src="../../assets/homeImage/authenticationText.png" class="authentication-text" alt="">
                </div>
            </div>
            <div class="long-title">
-                <span class="type">123</span>1111111111111111111111111111111111111111111111111111111111111111
+                <span class="type"  v-if="itemData.type === 'housing'">{{ itemData.gptype }}</span>{{ itemData.title }}
            </div>
            <div class="type-tab">
-                独卫套房 · 电梯 · 阳台 · 男女皆可
+                <span v-if="itemData.type === 'housing'">
+                    {{ itemData.housingtype }} {{ itemData.elevator===-1||!itemData.elevator?'': `· ${itemData.elevator}` }}{{ itemData.sunshinearea===-1||!itemData.sunshinearea?'': `· ${itemData.sunshinearea}`}}{{`· ${itemData.gender}`}}
+                </span>
+                <span v-if="itemData.type === 'apartment'">{{ itemData.propaganda }}</span>
            </div>
            <div style="padding: 0 10px;margin-top:15px;" class="dis-f al-item">
-                <img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="">
-                <span class="address-text">九龙 > 尖沙咀/佐敦</span>
+                <img src="../../assets/homeImage/addMarker.png" class="add-marker" alt="" v-if="itemData.type === 'apartment'">
+                <span class="address-text" v-if="itemData.type === 'apartment'">九龙 > 尖沙咀/佐敦</span>
            </div>
-            <div style="padding:0 10px;margin-top:12px;">
-                <span class="unit">HK$</span>
-                <span class="price">7200</span>
+            <div style="padding:0 10px;margin-top:12px;"  v-if="itemData.type === 'housing'">
+                <span class="unit">{{ itemData.currency }}</span>
+                <span class="price">{{itemData.rent}}</span>
                <span class="date">/月</span>
            </div>
            <!-- <div class="title">
@@ -36,58 +39,59 @@
            <!-- <div class="info-text">
                年轻有活力且超有玩趣的公寓
            </div> -->
-            <div class="corner-box">
-                <img src="../../assets/homeImage/corner.svg" class="corner-img" alt="">
-            </div>
-            <!-- <div class="suite-box">
+
+            <!-- <img src="../assets/homeImage/liveImg.svg" class="live-img" alt=""> -->
+
+            <div class="suite-box" v-if="itemData.type === 'apartment'">
                <div class="dis-f al-item jus-bet">
                    <div class="suite-type">
-                        单人套间
+                        {{ itemData.specifications && itemData.specifications[0].title }}
                    </div>
                    <div>
                        <span class="unit">HK$</span>
-                        <span class="price">7200</span>
+                        <span class="price">{{ itemData.specifications && itemData.specifications[0].value }}</span>
                        <span class="date">/月</span>
                    </div>
                </div>
                <div class="line"></div>
                <div class="dis-f al-item jus-bet">
                    <div class="suite-type">
-                        单人间
+                        {{ itemData.specifications && itemData.specifications[1].title }}
                    </div>
                    <div>
                        <span class="unit">HK$</span>
-                        <span class="price">5700</span>
+                        <span class="price">{{ itemData.specifications && itemData.specifications[1].value }}</span>
                        <span class="date">/月</span>
                    </div>
                </div>
-            </div> -->
+            </div>
+            <div class="corner-box" v-if="itemData.type === 'housing'">
+                <img src="../../assets/homeImage/corner.svg" class="corner-img" alt="">
+            </div>
            <!-- <div class="apartment-price-more flexcenter">更多</div> -->

            <!-- <div class="color-scheme" style="background: #b3c7f4;"></div> -->
-            <!-- <div class="apartment-top flexcenter">
+            <div class="apartment-top flexcenter"  v-if="itemData.type === 'apartment'">
                <img class="apartment-bottom-icon" src="../../assets/homeImage/apartment-bottom.png" />
                <img class="apartment-icon" src="../../assets/homeImage/apartment-icon.png" />
                <img class="apartment-text" src="../../assets/homeImage/apartment-text.png" />
-            </div> -->
+            </div>
        </div>
    </div>
 </template>
  
 <script setup>
-
-</script>
-<script>
-export default {
-    props: {
-        data: {
-            type: Object,
-            default: function () {
-                return {}
-            }
+import { defineProps, reactive } from 'vue'
+const props = defineProps({
+    data: {
+        type: Object,
+        default: function () {
+            return {}
        }
    }
-}
+})
+let itemData = props.data
+
 </script>
 <style scoped>
 .pos-r {
@@ -130,6 +134,9 @@ export default {
    margin-left: 3px;
 }

+.pd-b-10{
+    padding-bottom:10px;
+}
 .waterfall-box {
    width: 285px;
    background: inherit;
@@ -140,6 +147,7 @@ export default {
    -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;
+    cursor: pointer;

    .authentication-box {
        width: 275px;
@@ -269,10 +277,10 @@ export default {
        font-style: normal;
        font-size: 14px;
        color: #FFFFFF;
-        background:#6081d5;
-        line-height:24px;
-        text-align:center;
-        border-radius:5px;
+        background: #6081d5;
+        line-height: 24px;
+        text-align: center;
+        border-radius: 5px;
    }

    .title {
@@ -308,6 +316,10 @@ export default {
            font-style: normal;
            font-size: 15px;
            color: #000000;
+            width: 120px;
+            overflow: hidden; 
+            text-overflow: ellipsis; 
+            white-space: nowrap;
        }

        .line {
@@ -361,5 +373,18 @@ export default {
    display: flex;
    justify-content: center;
    align-items: center;
-}</style>
+}
+
+.live-img {
+    width: 301px;
+    height: 349px;
+    border-radius: 16px;
+}
+
+.live-img:hover {
+    -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);
+}
+</style>
  
--- a/src/components/pageTopBar/pageTopBar.vue
+++ b/src/components/pageTopBar/pageTopBar.vue
@@ -5,9 +5,12 @@
      <!-- 顶部导航 -->
      <div class="dis-f jus-x al-item index-top-navigation-box">
        <div class="index-top-navigation dis-f al-item body-maxWidth">
-          <div class="navigation-text" :class="{ 'navigation-text-click': i === 1 }" v-for="(item, i) in topTab" :key="i">
+          <div class="navigation-text" 
+          @click="topTabSelect(i,item)"
+          :class="{ 'navigation-text-click': i === topTabNum }" 
+          v-for="(item, i) in topTab.data" :key="i">
            {{
-              item.title }}</div>
+              item.name }}</div>
          <img src="" class="user-img" alt="">
        </div>
      </div>
@@ -30,11 +33,11 @@
      </div>
      <div class="btm-seach-btn-box dis-f al-item jus-x">
        <div class="body-maxWidth dis-f" style="height:48px;">
-          <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in seachTab"
+          <div class="tab-btn dis-f al-item jus-x" :class="{ 'tab-btn-click': i === 0 }" v-for="(item, i) in seachTab.data"
            :key="i">
            <el-badge :value="12">
              <div style="padding:0 10px;">
-                {{ item.title }}
+                {{ item.name }}
              </div>
            </el-badge>

@@ -46,49 +49,30 @@
 </template>
  
 <script setup>
-let topTab = [
-  {
-    title: '寄托首页',
-  }, {
-    title: '论坛'
-  }, {
-    title: 'Offer榜'
-  }, {
-    title: '港校租房'
-  }, {
-    title: '院校库'
-  }, {
-    title: '兑换店'
-  }, {
-    title: '搜索'
-  }, {
-    title: '招生官'
-  }, {
-    title: '中外合办院校'
+import { defineProps, reactive, watchEffect, ref } from "vue";
+const props=defineProps({
+  tabMens:{
+    type:Object,
+    default:function(){
+      return {}
+    }
  }
-]
-let seachTab = [
-  {
-    title: '首页',
-  }, {
-    title: '个人房源'
-  }, {
-    title: '中介房源'
-  }, {
-    title: '品牌公寓'
-  }, {
-    title: '求房源'
-  }, {
-    title: '我的'
-  }
-]
-</script>
-<script>
-export default {
-  props: {
+})
+//组件数据
+let topTab=reactive({data:[]})
+let seachTab = reactive({data:[]})
+watchEffect(()=>{
+  seachTab.data=props.tabMens.menu
+  topTab.data=props.tabMens.nav
+})

-  }
+//顶部导航跳转
+let topTabNum=ref('gter')
+let topTabSelect=(type,item)=>{
+  topTabNum.value=type
+  window.open(item.url)
 }
+
 </script>
 <style scoped>
 .pos-r {
--- a/src/components/seachModule/seachModule.vue
+++ b/src/components/seachModule/seachModule.vue
@@ -57,10 +57,10 @@
                        </div>
                    </div>
                    <div class="seach-info-box dis-f">
-                        <seachInfo title="学校附近" :btn="seachSchoolBtn" seachType="1"></seachInfo>
-                        <seachInfo title="合租" seachType="2" :btn="hireType"></seachInfo>
-                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea"></seachInfo>
-                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType"></seachInfo>
+                        <seachInfo title="学校附近" :btn="seachSchoolBtn.data" seachType="1"></seachInfo>
+                        <seachInfo title="合租" seachType="2" :btn="hireType.data"></seachInfo>
+                        <seachInfo title="区域找房" seachType="3" style="margin-top:30px;" :btn="seachArea.data"></seachInfo>
+                        <seachInfo title="整租" seachType="2" style="margin-top:30px;" :btn="allHireType.data"></seachInfo>
                    </div>
                    <!--  -->
                    <!-- <div>
@@ -73,46 +73,41 @@
 </template>
  
 <script setup>
-import { ref } from 'vue';
+import { ref, defineProps, watchEffect,reactive,watch } from 'vue';
 import seachInfo from '../indexSeachInfo/indexSeachInfo.vue';
 import selectTabBox from "../selectTabBox/selectTabBox.vue";
+import { useRouter} from 'vue-router'
+//监听路由
+const router = useRouter()
+watch(()=>router.currentRoute.value,(nVal)=>{
+    console.log(nVal)
+})
+
+const props = defineProps({
+    list: {
+        type: Array,
+        default: function () {
+            return []
+        }
+    }
+})
 //搜索框
 let seachValue = ref('')
 let historyShow = ref(false);
 let setHistoryShow = () => {
    historyShow.value = !historyShow.value
 }
+let seachSchoolBtn=reactive({data:[]});//学校地区
+let hireType={};//整租
+let allHireType={};//合租
+let seachArea={};//区域找房
+watchEffect(() => {
+    seachSchoolBtn.data = props.list[0] ? props.list[0].where : []
+    hireType.data = props.list[2] ? props.list[2].where[0].data : []
+    allHireType.data = props.list[2] ? props.list[2].where[1].data : []
+    seachArea.data = props.list[1] ? props.list[1].where : []
+})

-let seachSchoolBtn = [
-    { text: '港大' },
-    { text: '科大' },
-    { text: '中大' },
-    { text: '城大' },
-    { text: '理工' },
-    { text: '浸会' },
-    { text: '教大' },
-    { text: '岭大' },
-]
-let hireType = [
-    { text: '不限' },
-    { text: '房间' },
-    { text: '床位' },
-    { text: '客厅' },
-    { text: '其他' },
-]
-let allHireType = [
-    { text: '不限' },
-    { text: 'studio' },
-    { text: '一房' },
-    { text: '两房' },
-    { text: '三房' },
-    { text: '四房以上' }
-]
-let seachArea = [
-    { text: '港岛',data:[{title:1,id:1},{title:2,id:2},{title:3,id:3},{title:4,id:4}] },
-    { text: '九龙',data:[{title:5,id:5},{title:2,id:2},{title:3,id:3},{title:7,id:7}] },
-    { text: '新界',data:[{title:6,id:6},{title:8,id:8},{title:11,id:11},{title:9,id:9}] }
-]
 let historyArr = [
    { title: '有阳台' },
    { title: '有洗衣机' },
@@ -128,13 +123,6 @@ defineExpose({
    seachValue
 })
 </script>
-<script>
-export default {
-    props: {
-
-    }
-}
-</script>
 <style scoped>
 .dis-f {
    display: flex;
@@ -197,14 +185,16 @@ export default {
                -moz-box-shadow: none;
                -webkit-box-shadow: none;
                box-shadow: none;
-                margin-left:20px;
-                .text-img{
-                    width:100px;
-                    height:26px;
+                margin-left: 20px;
+
+                .text-img {
+                    width: 100px;
+                    height: 26px;
                }
-                .code-img{
-                    width:20px;
-                    height:20px;
+
+                .code-img {
+                    width: 20px;
+                    height: 20px;
                }
            }