公寓列表瀑布流

2023-07-17 11:50:19 +08:00 · 2023-07-17 11:50:19 +08:00 · cb3198febc
commit cb3198febc
parent 5760d0890b
4 changed files with 270 additions and 129 deletions
--- a/src/App.vue
+++ b/src/App.vue
@ -92,6 +92,7 @@ input[type="number"] {
  &::-webkit-scrollbar {
    width: 8px;
  }
+
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
@ -104,4 +105,13 @@ input[type="number"] {
    background: transparent;
  }
 }
+
+@font-face {
+  font-family: 'Arial-Black';
+  src: url('data:font/woff2;charset=utf-8;base64,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') format('woff2'),
+    url('data:font/woff;charset=utf-8;base64,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') format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
 </style>
--- a/src/assets/img/publicImage/black-arrow.svg
+++ b/src/assets/img/publicImage/black-arrow.svg
@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="7px" height="12px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -105 -4 )">
+    <path d="M 6.87972508591065 5.72344689378758  C 6.95990836197022 5.80360721442886  7 5.89579158316633  7 6  C 7 6.10420841683367  6.95990836197022 6.19639278557114  6.87972508591065 6.27655310621242  L 1.27491408934708 11.8797595190381  C 1.19473081328751 11.9599198396794  1.10252004581901 12  0.998281786941581 12  C 0.894043528064147 12  0.801832760595647 11.9599198396794  0.721649484536082 11.8797595190381  L 0.120274914089347 11.2785571142285  C 0.0400916380297824 11.1983967935872  0 11.1062124248497  0 11.002004008016  C 0 10.8977955911824  0.0400916380297824 10.8056112224449  0.120274914089347 10.7254509018036  L 4.84707903780069 6  L 0.120274914089347 1.27454909819639  C 0.0400916380297824 1.19438877755511  0 1.10220440881763  0 0.997995991983968  C 0 0.893787575150299  0.0400916380297824 0.801603206412824  0.120274914089347 0.721442885771542  L 0.721649484536082 0.120240480961924  C 0.801832760595647 0.0400801603206409  0.894043528064147 0  0.998281786941581 0  C 1.10252004581901 0  1.19473081328751 0.0400801603206409  1.27491408934708 0.120240480961924  L 6.87972508591065 5.72344689378758  Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 105 4 )" />
+  </g>
+</svg>
--- a/src/components/public/apartment-item.vue
+++ b/src/components/public/apartment-item.vue
@ -0,0 +1,173 @@
+<template>
+    <div class="item flexflex">
+        <img class="img" :src="item['image']">
+        <div class="title">{{ item['title'] }}</div>
+        <div class="hint">{{ item['propaganda'] }}</div>
+        <div class="tab-box flexflex">
+            <div class="tab-item flexcenter" v-for="it in item['tags'].split(',')">{{ it }}</div>
+        </div>
+        <div class="location flexacenter">
+            <img class="location-icon" src="@/assets/img/publicImage/location-icon.png">{{ item['address'] }}
+        </div>
+
+        <div class="type-list">
+            <div class="type-item flexacenter" v-for="it in item['roomlist']">
+                <div class="type-name flex1">{{ it['name'] }}</div>
+                <div class="type-data flexacenter">
+                    <div class="unit">HK$</div>
+                    <div class="price">{{ it['price'] }}</div>
+                    /月
+                </div>
+            </div>
+        </div>
+        <div class="type-quantity flexacenter">
+            共
+            <div class="type-quantity-number">{{ item['roomnum'] }}</div>
+            个房型
+            <img class="black-arrow" src="@/assets/img/publicImage/black-arrow.svg" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    item: Object,
+});
+</script>
+
+<style lang="less" scoped>
+.item {
+    width: 386px;
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 20px;
+    -moz-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);
+    flex-direction: column;
+    padding: 10px 10px 0;
+    margin-bottom: 20px;
+    position: relative;
+    height: fit-content;
+
+    .img {
+        width: 366px;
+        height: 244px;
+        border-radius: 10px;
+        margin-bottom: 19px;
+    }
+
+    .title {
+        font-weight: 650;
+        font-size: 20px;
+        color: #000000;
+        margin-bottom: 10px;
+        padding-left: 6px;
+    }
+
+    .hint {
+        color: #AAAAAA;
+        font-size: 14px;
+        margin: 0 6px 20px;
+
+    }
+
+    .tab-box {
+        flex-wrap: wrap;
+        margin-bottom: 14px;
+        padding-left: 6px;
+
+        .tab-item {
+            height: 28px;
+            background-color: rgba(224, 240, 255, 1);
+            border-radius: 5px;
+            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-weight: 400;
+            font-size: 13px;
+            color: #447EB3;
+            padding: 0 11px;
+            margin-right: 10px;
+            margin-bottom: 10px;
+        }
+    }
+
+    .location {
+        .location-icon {
+            width: 18px;
+            height: 18px;
+            margin-right: 2px;
+        }
+
+        font-size: 15px;
+        color: #555555;
+        margin-bottom: 16px;
+        padding-left: 6px;
+    }
+
+    .type-list {
+        width: 354px;
+        // height: 108px;
+        background: rgba(246, 246, 246, 1);
+        border-radius: 12px;
+        padding: 0 10px;
+        margin: 0 6px;
+
+        .type-item {
+            height: 54px;
+
+            &:not(:last-of-type) {
+                border-bottom: 1px solid #ebebeb;
+            }
+
+            .type-name {
+                color: #000000;
+                font-size: 15px;
+            }
+
+            .type-data {
+                font-size: 14px;
+
+                .unit {
+                    font-family: 'Arial-Black', 'Arial Black', sans-serif;
+                    font-weight: 900;
+                    color: #000000;
+                }
+
+                .price {
+                    font-family: 'Arial-Black', 'Arial Black', sans-serif;
+                    font-weight: 900;
+                    font-size: 20px;
+                    color: #F95D5D;
+                    margin: 0 5px;
+                }
+
+                font-size: 14px;
+                color: #555555;
+
+            }
+        }
+    }
+
+    .type-quantity {
+        font-size: 14px;
+        color: #555555;
+        margin: 24px auto;
+
+        .type-quantity-number {
+            font-weight: 650;
+            font-size: 14px;
+            color: #000000;
+            height: 18px;
+            background-color: rgba(253, 223, 109, 1);
+            border-radius: 9px;
+            padding: 0 8px;
+            margin: 0 8px;
+        }
+
+        .black-arrow {
+            width: 7px;
+            height: 12px;
+            margin-left: 8px;
+        }
+    }
+}
+</style>
--- a/src/views/housingView/apartment.vue
+++ b/src/views/housingView/apartment.vue
@ -2,35 +2,13 @@
    <div>
        <pageTopBar></pageTopBar>
        <!-- <seachModule></seachModule> -->
-        <div class="list wid1200">
-            <div class="item flexflex">
-                <img class="img" src="https://axure-file.lanhuapp.com/md5__3b3872c54074c559daab0b82c0e0514a.svg">
-                <div class="title">iRent佐敦二期公寓</div>
-                <div class="hint">油尖旺中心地带的品质公寓</div>
-                <div class="tab-box flexflex">
-                    <div class="tab-item flexcenter" v-for="item in 9">阳台</div>
-                </div>
-                <div class="location flexacenter">
-                    <img class="location-icon" src="@/assets/img/publicImage/location-icon.png">油尖旺区爱景街8号
-                </div>
-
-                <div class="type-list">
-                    <div class="type-item flexacenter">
-                        <div class="type-name flex1">单人间</div>
-                        <div class="type-data flexacenter">
-                            <div class="unit">HK$</div>
-                            <div class="price">7800</div>
-                            /月
-                        </div>
-                    </div>
-                </div>
-                <div class=""></div>
-            </div>
+        <div class="list wid1200 flexflex" ref="gridContainer">
+            <apartment-item v-for="item in list" :item="item"></apartment-item>
        </div>
-        <!-- <div ref="gridContainer">
-            <div v-for="item in items" :key="item.id" ref="gridItem" class="grid-item">{{ item.text }}</div>
-        </div> -->

+        <have-questions></have-questions>
+
+        <page-footer></page-footer>
    </div>
 </template>
  
@ -39,124 +17,98 @@
 import pageTopBar from '../../components/pageTopBar/pageTopBar.vue';
 import seachModule from "../../components/seachModule/seachModule.vue";
 import biserialItem from '../../components/biserialListItem/biserialListItem.vue'
-import { ref, onMounted, watch } from 'vue';
+import apartmentItem from '@/components/public/apartment-item.vue';
+import haveQuestions from '@/components/public/have-questions.vue'
+import pageFooter from '@/components/footer/footer.vue'
+import { ref, onMounted, onUnmounted, watch, getCurrentInstance, nextTick } from 'vue';
+import { ElLoading } from 'element-plus'
 import Masonry from 'masonry-layout';

-const gridContainer = ref(null);
-const gridItem = ref([]);
+const { proxy } = getCurrentInstance()

-const items = [
-    { id: 1, text: 'Item 1' },
-    { id: 2, text: 'Item 2' },
-    { id: 3, text: 'Item 3' },
-    { id: 4, text: 'Item 3' },
-    { id: 5, text: 'Item 3' },
-    { id: 6, text: 'Item 3' },
-    { id: 7, text: 'Item 3' },
-    { id: 8, text: 'Item 3' },
-    { id: 9, text: 'Item 3' },
-    { id: 10, text: 'Item 3' },
-    { id: 11, text: 'Item 3' },
-    { id: 12, text: 'Item 3' },
-    // ...
-];
+const props = defineProps({
+    item: Object,
+});
+
+const gridContainer = ref(null);
+
+
+let list = ref([])
+
+let masonryInstance = null

 onMounted(() => {
-    const masonryInstance = new Masonry(gridContainer.value, {
-        itemSelector: '.grid-item',
-        columnWidth: 200,
+    masonryInstance = new Masonry(gridContainer.value, {
+        itemSelector: '.item',
        gutter: 10
    });

-    watch(items, () => {
-        masonryInstance.reloadItems();
-        masonryInstance.layout();
-    });
+    getData()
+    window.addEventListener('scroll', handleScroll);
 });

+onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+});
+
+let loading = ref(null) // 加载
+let page = 1
+const getData = () => {
+
+    if (page == 0) return
+    
+    
+    loading = ElLoading.service({
+        lock: true,
+        text: 'Loading',
+        background: 'rgba(0, 0, 0, 0.7)',
+    })
+
+    proxy.$post("/tenement/pc/api/apartment", {
+        page
+    }).then(res => {
+        if (res.code != 200) return
+        let data = res.data
+        list.value = list.value.concat(data.data)
+        page = data.page * data.limit >= data.count ? 0 : page + 1,
+
+
+        nextTick(() => {
+            masonryInstance.reloadItems();
+            masonryInstance.layout();
+            loading.close()
+        })
+    }).catch(err => {
+        loading.close()
+    })
+
+}
+
+
+const handleScroll = () => {
+    const scrollHeight = document.documentElement.scrollHeight;
+    const clientHeight = document.documentElement.clientHeight;
+    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
+
+    if (scrollTop + clientHeight >= scrollHeight) {
+        // 进行滚动到底部时的操作
+        console.log('已滚动到底部');
+        // 执行其他操作...
+        getData()
+    }
+};
+
 </script>
 <style lang="less" scoped>
 .list {
    margin: 0 auto;
-    background-color: antiquewhite;
+    flex-wrap: wrap;
+    justify-content: space-between;

-    .item {
+    &:after {
+        content: "";
+        height: 0;
        width: 386px;
-        background-color: rgba(255, 255, 255, 1);
-        border-radius: 20px;
-        -moz-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);
-        flex-direction: column;
-        padding: 10px;
-
-        .img {
-            width: 366px;
-            height: 244px;
-            border-radius: 10px;
-            margin-bottom: 19px;
-            // margin: 0 auto;
-        }
-
-        .title {
-            font-weight: 650;
-            font-size: 20px;
-            color: #000000;
-            margin-bottom: 10px;
-        }
-
-        .hint {
-            color: #AAAAAA;
-            font-size: 14px;
-            margin-bottom: 20px;
-        }
-
-        .tab-box {
-            flex-wrap: wrap;
-            margin-bottom: 14px;
-
-            .tab-item {
-                height: 28px;
-                background-color: rgba(224, 240, 255, 1);
-                border-radius: 5px;
-                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
-                font-weight: 400;
-                font-size: 13px;
-                color: #447EB3;
-                padding: 0 11px;
-                margin-right: 10px;
-                margin-bottom: 10px;
-            }
-        }
-
-        .location {
-            .location-icon {
-                width: 18px;
-                height: 18px;
-                margin-right: 2px;
-            }
-
-            font-size: 15px;
-            color: #555555;
-        }
-
-        .type-list {
-            width: 354px;
-            // height: 108px;
-            background: rgba(246, 246, 246, 1);
-            border-radius: 12px;
-            padding: 0 10px;
-
-            .type-item {
-                height: 54px;
-            }
-        }
-
    }
 }
-
-.grid-item {
-    background-color: #eee;
-    padding: 10px;
-}
 </style>