我的-发布

src/views/user.vue

@@ -1,7 +1,5 @@
 <template>
-    <!-- <header-nav></header-nav> -->
     <pageTopBar></pageTopBar>
-
     <div class="user-box">
         <div class="info-box flexacenter">
             <div class="info-left flexacenter flex1">
@@ -70,22 +68,23 @@
     <div class="quantity wid1200" v-else>共 <b>{{ count['publish'] }}</b> 条房源（上架 {{ stat['listing'] }} | 草稿 {{ stat['draft']
     }} | 下架 {{ stat['offshelf'] }}）</div>
 
-    <div class="list wid1200 flexflex" v-if="tabState == 'fav'">
-        <div class="item" v-for="(item, index) in favData['list']" :key="index">
+    <div class="list wid1200 flexflex" v-show="tabState == 'fav'" ref="gridContainer">
+        <div class="item" v-for="(item, index) in favData['list']" :key="item.id">
             <public-list-item :item="item" :index="index" @cancelCollection="cancelCollection"></public-list-item>
         </div>
     </div>
-    <div class="list wid1200 flexflex" v-if="tabState == 'publish'">
-        <div class="item" v-for="(item, index) in publishData['list']" :key="index">
-            <public-list-item :item="item" :index="index" @cancelCollection="cancelCollection"></public-list-item>
+    <div class="list wid1200 flexflex" v-show="tabState == 'publish'" ref="gridContainerpublish">
+        <div class="item" v-for="(item, index) in publishData['list']" :key="item.id">
+            <public-list-item :item="item" :index="index" @cancelCollection="cancelCollection" :ispublish="true"
+                @goUp="goUp" @undercarriage="undercarriage" @handleDelete="handleDelete"></public-list-item>
         </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)">
         <empty-duck></empty-duck>
     </div>
 
-
     <!-- 有疑问 -->
     <have-questions></have-questions>
 
@@ -105,13 +104,32 @@ import pageFooter from '@/components/footer/footer.vue'
 import biserialListItem from '@/components/biserialListItem/biserialListItem.vue'
 import publicListItem from '@/components/public/public-list-item.vue'
 import emptyDuck from '@/components/public/empty-duck.vue'
-import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
+import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, nextTick } from 'vue'
 const { proxy } = getCurrentInstance()
-import { ElLoading } from 'element-plus'
+import { ElLoading, ElMessage } from 'element-plus'
+import Masonry from 'masonry-layout';
 
 
+
+const gridContainer = ref(null);
+const gridContainerpublish = ref(null);
+let masonryInstance = null
+let masonryInstancepublish = null
+
 onMounted(() => {
+    masonryInstance = new Masonry(gridContainer.value, {
+        itemSelector: '.item',
+        gutter: 20
+    });
+    masonryInstancepublish = new Masonry(gridContainerpublish.value, {
+        itemSelector: '.item',
+        gutter: 20
+    });
+
     init()
+
+    window.addEventListener('scroll', handleScroll);
+
 })
 
 let systematicState = ref(false) // 系统通知
@@ -119,27 +137,30 @@ let user = ref({})
 let count = ref({}) // 发布和收藏的数量
 let newmessagenum = ref(0)
 let validityidentity = ref('')
-let tabState = ref('fav') // fav  publish
+let tabState = ref('publish') // fav  publish
 
 const identityObj = {
     1: "中介认证",
     "-1": "房源认证"
 }
 
+
+
+
 async function init() {
     proxy.$post("/tenement/v2/api/user").then(res => {
         if (res.code != 200) return
         let data = res.data
 
-        // if (data.count['publish'] > 0) {
-        //     tabState.value = 'publish'
-        //     getPublishData()
-        // } else {
-        //     tabState.value = 'fav'
-        //     getFavData()
-        // }
+        if (data.count['publish'] > 0) {
+            tabState.value = 'publish'
+            getPublishData()
+        } else {
+            tabState.value = 'fav'
+            getFavData()
+        }
 
-        getFavData()
+        // getFavData()
 
         user.value = data.user
         count.value = data.count
@@ -148,8 +169,6 @@ async function init() {
     });
 }
 
-// let loading = null
-
 let loading = ElLoading.service({
     lock: true,
     text: 'Loading',
@@ -172,13 +191,18 @@ const getPublishData = () => {
         background: 'rgba(0, 0, 0, 0.7)',
     })
     proxy.$post("/tenement/pc/api/user/publishList", {
-        page: publishData['page']
+        page: publishData.value['page']
     }).then(res => {
         if (res.code != 200) return
         let data = res.data
         stat.value = data['stat']
         publishData.value['page'] = data['page'] * data['limit'] >= data['count'] ? 0 : data['page'] + 1
         publishData.value['list'] = publishData.value['list'].concat(data['data'] || [])
+        nextTick(() => {
+            masonryInstancepublish.reloadItems();
+            masonryInstancepublish.layout();
+            loading.close()
+        })
     }).finally(() => {
         loading.close()
     })
@@ -198,12 +222,18 @@ const getFavData = () => {
         background: 'rgba(0, 0, 0, 0.7)',
     })
     proxy.$post("/tenement/pc/api/user/favList", {
-        page: favData['page']
+        page: favData.value['page']
     }).then(res => {
         if (res.code != 200) return
         let data = res.data
         favData.value['page'] = data['page'] * data['limit'] >= data['count'] ? 0 : data['page'] + 1
         favData.value['list'] = favData.value['list'].concat(data['data'] || [])
+
+        nextTick(() => {
+            masonryInstance.reloadItems();
+            masonryInstance.layout();
+            loading.close()
+        })
     }).finally(() => {
         loading.close()
     })
@@ -216,16 +246,62 @@ const cutTab = (value) => {
     else if (tabState.value == 'fav' && favData.value['list'].length == 0) getFavData()
 }
 
+// 取消收藏
 let cancelCollection = data => {
     proxy.$post("/tenement/relation/operation", {
         token: data['token']
     }).then(res => {
-        console.log(res, "res");
         if (res.code != 200) return
         favData.value.list.splice(data['index'], 1)
+        count.value['fav']--
+
+        nextTick(() => {
+            masonryInstance.reloadItems();
+            masonryInstance.layout();
+            loading.close()
+        })
     })
 }
 
+// 点击下架都修改状态
+const undercarriage = (index, status) => {
+    stat.value['listing']--
+    stat.value['offshelf']++
+    publishData.value['list'][index].status = status
+}
+
+
+// 点击顶上去后改 数据 状态
+const goUp = index => publishData.value['list'][index].isding = 1
+
+// 点击删除
+const handleDelete = (index, status) => {
+    if (status == 0) stat.value['draft']--
+    else if (status == 1) stat.value['listing']--
+    else stat.value['offshelf']--
+    publishData.value['list'].splice(index, 1)
+    nextTick(() => {
+        masonryInstancepublish.reloadItems();
+        masonryInstancepublish.layout();
+        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) {
+        if (tabState.value == 'publish') getPublishData()
+        else getFavData()
+    }
+};
+
+onUnmounted(() => {
+    window.removeEventListener('scroll', handleScroll);
+});
+
 </script>
 
 <style lang="less" scoped>
@@ -438,7 +514,7 @@ let cancelCollection = data => {
     justify-content: space-between;
 
     .item {
-        margin-bottom: 20px;
+        cursor: pointer;
     }
 }
 
@@ -448,5 +524,6 @@ let cancelCollection = data => {
     margin: 0 auto;
     justify-content: center;
     align-items: center;
+    border-radius: 16px;
 }
 </style>