系统通知

src/views/user.vue

@@ -23,7 +23,7 @@
                 </div>
             </div>
             <div class="info-right flexacenter">
-                <div class="operate-item message flexcenter">
+                <div class="operate-item message flexcenter" @click="systematicState = true">
                     <div class="operate-item-shell flexcenter">
                         <div class="newmessagenum flexcenter" v-if="newmessagenum > 0">{{ newmessagenum }}</div>
                         <img class="operate-icon" src="@/assets/img/publicImage/message-icon.svg">
@@ -59,18 +59,30 @@
         </div>
 
         <div class="tab-box flexacenter">
-            <div class="tab-item flexcenter pitch">我的收藏</div>
-            <div class="tab-item flexcenter">我的发布</div>
+            <div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'fav' }" @click="cutTab('fav')">我的收藏</div>
+            <div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'publish' }" @click="cutTab('publish')">我的发布
+            </div>
+        </div>
+    </div>
+
+    <div class="quantity wid1200" v-if="tabState == 'fav'">共收藏 <b>{{ count['fav'] }}</b> 个房源</div>
+    <div class="quantity wid1200" v-else>共 <b>{{ count['publish'] }}</b> 条房源（上架 {{ stat['listing'] }} | 草稿 {{ stat['draft']
+    }} | 下架 {{ stat['offshelf'] }}）</div>
+
+    <div class="list wid1200 flexflex">
+        <div class="item" v-for="item in 10">
+            <biserial-list-item></biserial-list-item>
         </div>
     </div>
 
     <!-- 有疑问 -->
     <have-questions></have-questions>
 
+    <!-- 页底 -->
     <page-footer></page-footer>
 
     <!-- 系统通知弹窗 -->
-    <systematic-notification-pop></systematic-notification-pop>
+    <systematic-notification-pop v-if="systematicState" @close="systematicState = false"></systematic-notification-pop>
 </template>
 
 <script setup>
@@ -78,19 +90,21 @@ import headerNav from '@/components/public/head.vue'
 import systematicNotificationPop from '@/components/user/systematic-notification-pop.vue'
 import haveQuestions from '@/components/public/have-questions.vue'
 import pageFooter from '@/components/footer/footer.vue'
+import biserialListItem from '@/components/biserialListItem/biserialListItem.vue'
 import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
 const { proxy } = getCurrentInstance()
 
-console.log("proxy", proxy);
 
 onMounted(() => {
     init()
 })
 
+let systematicState = ref(false) // 系统通知
 let user = ref({})
-let count = ref({})
+let count = ref({}) // 发布和收藏的数量
 let newmessagenum = ref(0)
 let validityidentity = ref('')
+let tabState = ref('publish') // fav  publish
 
 const identityObj = {
     1: "中介认证",
@@ -101,22 +115,72 @@ async function init() {
     proxy.$post("/tenement/v2/api/user").then(res => {
         if (res.code != 200) return
         let data = res.data
-        // data.user['identity'] = 1
+
+        if (data.count['publish'] > 0) {
+            tabState.value = 'publish'
+            getPublishData()
+        } else {
+            tabState.value = 'fav'
+            getFavData()
+        }
+
         user.value = data.user
         count.value = data.count
         newmessagenum.value = data.newmessagenum
         validityidentity.value = data.validityidentity
-
     });
 }
 
+let publishData = ref({
+    page: 1,
+    list: []
+})
+
+let stat = ref({}) // 我的发布的详细数量
+// 获取发布数据
+const getPublishData = () => {
+    proxy.$post("/tenement/pc/api/user/publishList", {
+        page: publishData['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'])
+    })
+}
+
+let favData = ref({
+    page: 1,
+    list: []
+})
+
+// 获取收藏数据
+const getFavData = () => {
+    proxy.$post("/tenement/pc/api/user/favList", {
+        page: favData['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'])
+    })
+}
+
+// 切换 tab 
+const cutTab = (value) => {
+    tabState.value = value
+    if (tabState.value == 'publish' && publishData.value['list'].length == 0) getPublishData()
+    else if (tabState.value == 'fav' && favData.value['list'].length == 0) getFavData()
+}
+
 </script>
 
 <style lang="less">
 .user-box {
     width: 1200px;
     height: 238px;
-    margin: 30px auto 0;
+    margin: 30px auto 26px;
     font-size: 14px;
     background: linear-gradient(0deg, rgba(214, 236, 255, 1) -4%, rgba(232, 244, 255, 1) 34%, rgba(176, 216, 255, 1) 131%);
     border-radius: 16px;
@@ -289,11 +353,42 @@ async function init() {
                 font-style: normal;
                 font-size: 18px;
                 color: #FFFFFF;
+                position: relative;
+
+                &::after {
+                    content: "";
+                    position: absolute;
+                    bottom: -5px;
+                    width: 14px;
+                    height: 8px;
+                    background-image: url('@/assets/img/publicImage/green-arrow-below.svg');
+                }
+
             }
         }
     }
 }
 
+.quantity {
+    margin: 0 auto;
+    font-size: 14px;
+    color: #555;
+    margin-bottom: 24px;
+
+    b {
+        color: #000;
+    }
+}
+
+.list {
+    margin: 0 auto;
+    flex-wrap: wrap;
+    justify-content: space-between;
+
+    .item {
+        margin-bottom: 20px;
+    }
+}
 
 
 .have-questions {