系统通知

src/App.vue

@@ -6,7 +6,7 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 // router.push(`/edit-choosing`)
 </script>
-<style>
+<style lang="less">
 * {
   margin: 0;
   padding: 0;
@@ -25,6 +25,12 @@ img {
   object-fit: contain;
 }
 
+.ellipsis {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .shadow {
   -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
   -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
@@ -79,4 +85,23 @@ input::-webkit-outer-spin-button {
 input[type="number"] {
   -moz-appearance: textfield;
 }
+
+.scrollbar {
+
+  /*滚动条样式*/
+  &::-webkit-scrollbar {
+    width: 8px;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+    background: rgba(242, 242, 242, 1);
+  }
+
+  &::-webkit-scrollbar-track {
+    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
+    border-radius: 0;
+    background: transparent;
+  }
+}
 </style>

src/assets/img/publicImage/green-arrow-below.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="14px" height="8px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -453 -219 )">
+    <path d="M 13.740234375 0.263888888888889  C 13.9134114583333 0.439814814814814  14 0.648148148148146  14 0.888888888888889  C 14 1.12962962962963  13.9134114583333 1.33796296296296  13.740234375 1.51388888888889  L 7.615234375 7.73611111111111  C 7.44205729166667 7.91203703703704  7.23697916666667 8  7 8  C 6.76302083333333 8  6.55794270833333 7.91203703703704  6.384765625 7.73611111111111  L 0.259765625 1.51388888888889  C 0.0865885416666667 1.33796296296296  0 1.12962962962963  0 0.888888888888889  C 0 0.648148148148146  0.0865885416666667 0.439814814814814  0.259765625 0.263888888888889  C 0.432942708333333 0.0879629629629619  0.638020833333333 0  0.875 0  L 13.125 0  C 13.3619791666667 0  13.5670572916667 0.0879629629629619  13.740234375 0.263888888888889  Z " fill-rule="nonzero" fill="#62b1ff" stroke="none" transform="matrix(1 0 0 1 453 219 )" />
+  </g>
+</svg>

src/assets/img/publicImage/green-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="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -517 -6376 )">
+    <path d="M 6.125 11.7213541666667  C 6.28298611111111 11.7213541666667  6.41970486111111 11.6636284722222  6.53515625 11.5481770833333  L 10.6731770833333 7.41015625  C 10.7886284722222 7.29470486111111  10.8463541666667 7.15798611111111  10.8463541666667 7  C 10.8463541666667 6.84201388888889  10.7886284722222 6.70529513888889  10.6731770833333 6.58984375  L 6.53515625 2.45182291666667  C 6.41970486111111 2.33637152777778  6.28298611111111 2.27864583333333  6.125 2.27864583333333  C 5.96701388888889 2.27864583333333  5.83029513888889 2.33637152777778  5.71484375 2.45182291666667  L 4.78515625 3.38151041666667  C 4.66970486111111 3.49696180555555  4.61197916666667 3.63368055555555  4.61197916666667 3.79166666666667  C 4.61197916666667 3.94965277777778  4.66970486111111 4.08637152777778  4.78515625 4.20182291666667  L 7.58333333333333 7  L 4.78515625 9.79817708333333  C 4.66970486111111 9.91362847222222  4.61197916666667 10.0503472222222  4.61197916666667 10.2083333333333  C 4.61197916666667 10.3663194444444  4.66970486111111 10.5030381944444  4.78515625 10.6184895833333  L 5.71484375 11.5481770833333  C 5.83029513888889 11.6636284722222  5.96701388888889 11.7213541666667  6.125 11.7213541666667  Z M 13.0611979166667 3.486328125  C 13.6870659722222 4.55881076388889  14 5.73003472222222  14 7  C 14 8.26996527777778  13.6870659722222 9.44118923611111  13.0611979166667 10.513671875  C 12.4353298611111 11.5861545138889  11.5861545138889 12.4353298611111  10.513671875 13.0611979166667  C 9.44118923611111 13.6870659722222  8.26996527777778 14  7 14  C 5.73003472222222 14  4.55881076388889 13.6870659722222  3.486328125 13.0611979166667  C 2.41384548611111 12.4353298611111  1.56467013888889 11.5861545138889  0.938802083333333 10.513671875  C 0.312934027777778 9.44118923611111  0 8.26996527777778  0 7  C 0 5.73003472222222  0.312934027777778 4.55881076388889  0.938802083333333 3.486328125  C 1.56467013888889 2.41384548611111  2.41384548611111 1.56467013888889  3.486328125 0.938802083333333  C 4.55881076388889 0.312934027777777  5.73003472222222 0  7 0  C 8.26996527777778 0  9.44118923611111 0.312934027777777  10.513671875 0.938802083333333  C 11.5861545138889 1.56467013888889  12.4353298611111 2.41384548611111  13.0611979166667 3.486328125  Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 517 6376 )" />
+  </g>
+</svg>

src/assets/img/publicImage/white-cross.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="14px" height="14px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -813 -5804 )">
+    <path d="M 13.6700336700337 10.4646464646465  C 13.8900112233446 10.6846240179573  14 10.9517396184063  14 11.2659932659933  C 14 11.5802469135802  13.8900112233446 11.8473625140292  13.6700336700337 12.0673400673401  L 12.0673400673401 13.6700336700337  C 11.8473625140292 13.8900112233446  11.5802469135802 14  11.2659932659933 14  C 10.9517396184063 14  10.6846240179574 13.8900112233446  10.4646464646465 13.6700336700337  L 7 10.2053872053872  L 3.53535353535354 13.6700336700337  C 3.31537598204265 13.8900112233446  3.04826038159371 14  2.73400673400673 14  C 2.41975308641975 14  2.15263748597082 13.8900112233446  1.93265993265993 13.6700336700337  L 0.32996632996633 12.0673400673401  C 0.109988776655443 11.8473625140292  0 11.5802469135802  0 11.2659932659933  C 0 10.9517396184063  0.109988776655443 10.6846240179573  0.32996632996633 10.4646464646465  L 3.79461279461279 7  L 0.32996632996633 3.53535353535353  C 0.109988776655443 3.31537598204265  0 3.04826038159371  0 2.73400673400673  C 0 2.41975308641975  0.109988776655443 2.15263748597082  0.32996632996633 1.93265993265993  L 1.93265993265993 0.32996632996633  C 2.15263748597082 0.109988776655443  2.41975308641975 0  2.73400673400673 0  C 3.04826038159371 0  3.31537598204265 0.109988776655443  3.53535353535354 0.32996632996633  L 7 3.79461279461279  L 10.4646464646465 0.32996632996633  C 10.6846240179574 0.109988776655443  10.9517396184063 0  11.2659932659933 0  C 11.5802469135802 0  11.8473625140292 0.109988776655443  12.0673400673401 0.32996632996633  L 13.6700336700337 1.93265993265993  C 13.8900112233446 2.15263748597082  14 2.41975308641975  14 2.73400673400673  C 14 3.04826038159371  13.8900112233446 3.31537598204265  13.6700336700337 3.53535353535353  L 10.2053872053872 7  L 13.6700336700337 10.4646464646465  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0.898039215686275" transform="matrix(1 0 0 1 813 5804 )" />
+  </g>
+</svg>

src/assets/img/user/big-circle.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="162px" height="134px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -685 -5784 )">
+    <path d="M 0 15.7647058823529  C 0 10.4103578456703  0.341073483960434 5.14879341568589  1.00316033296216 0  L 161 0  L 161 126.358563726511  C 148.021534260155 131.304077041254  133.647622467886 134  118.536585365854 134  C 52.1560975609756 134  0 81.9764705882353  0 15.7647058823529  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0.0392156862745098" transform="matrix(1 0 0 1 685 5784 )" />
+  </g>
+</svg>

src/assets/img/user/small-circle.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="111px" height="83px" xmlns="http://www.w3.org/2000/svg">
+  <g transform="matrix(1 0 0 1 -736 -5784 )">
+    <path d="M 0 15.8095238095238  C 0 10.3478777513572  0.624772863139144 5.05611260274199  1.80836365885964 0  L 110 0  L 110 68.0438379402685  C 98.6366012045417 77.4282227676267  83.7768054955971 83  67.3928571428571 83  C 29.6528571428571 83  0 53.4361904761905  0 15.8095238095238  Z " fill-rule="nonzero" fill="#ffffff" stroke="none" fill-opacity="0.0392156862745098" transform="matrix(1 0 0 1 736 5784 )" />
+  </g>
+</svg>

src/components/public/empty-duck.vue

@@ -0,0 +1,32 @@
+<template>
+    <div class="empty-box flexflex">
+        <img class="empty-icon" src="@/assets/img/publicImage/empty-duck.png">
+        <text class="empty-text">{{ hintText || '暂无内容' }}</text>
+    </div>
+</template>
+
+<script setup>
+const props = defineProps({
+    hintText: String,
+})
+
+</script>
+
+<style lang="less" scoped>
+.empty-box {
+    flex-direction: column;
+    align-items: center;
+
+    .empty-icon {
+        width: 102px;
+        height: 120px;
+        margin-bottom: 16px;
+    }
+
+    .empty-text {
+        color: #7f7f7f;
+        line-height: 24px;
+        font-size: 14px;
+    }
+}
+</style>

src/components/public/head.vue

@@ -73,6 +73,7 @@ const tabList = [{
     position: relative;
     height: 260px;
     margin: 0 auto;
+    min-width: 1200px;
 
     .header-bj-box {
         position: absolute;

src/components/user/systematic-notification-pop.vue

@@ -1,28 +1,164 @@
 <template>
     <div class="pop-mask flexcenter">
-
-
-        <div class="content">
-
-            <div class="header flexcenter">
+        <div class="content flexflex">
+            <div class="header flexflex">
                 <img class="header-icon" src="@/assets/img/user/inform-icon.png" />
                 <img class="header-text" src="@/assets/img/user/inform-text.png" />
+                <img class="circle" src="@/assets/img/user/big-circle.svg">
+                <img class="circle" src="@/assets/img/user/small-circle.svg">
+                <img class="white-cross" @click="emit('close')" src="@/assets/img/publicImage/white-cross.svg">
             </div>
 
-
-
             <div class="attention flexacenter">
                 <div class="attention-text">关注寄托服务号，第一时间收到消息通知</div>
-                <div class="attention-btn flexcenter">关注</div>
+                <el-popover placement="bottom" popper-class="have-questions flexcenter" :width="160" trigger="click"
+                    popper-style="border-radius: 14px;padding: 20px;">
+                    <template #reference>
+                        <div class="attention-btn flexcenter">关注</div>
+                    </template>
+                    <img class="QR-code" :src="qrcode" alt="">
+                </el-popover>
             </div>
 
-            <div class="list"></div>
+            <div class="flex1 list scrollbar" @scroll="handleScroll">
+                <div class="empty-box" v-if="false">
+                    <empty-duck></empty-duck>
+                </div>
+                <template v-for="(item, index) in list" :key="index">
+                    <!-- event: certapplication 群发  middlemanauth 中介 tenementcertified 个人  tenementreport 举报 -->
+                    <div class="item flexflex" v-if="item['event'] == 'certapplication'">
+                        <img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
+                        <div class="time">{{ item['timestamp'] }}</div>
+                        <div class="text">{{ item['message'] }}</div>
+                        <el-popover placement="bottom" :width="360" trigger="click" :show-arrow="false"
+                            popper-style="background: transparent;padding:0;box-shadow: none;border: none;">
+                            <template #reference>
+                                <div class="footer flexcenter" v-if="item['data'] && item['data']['url']">
+                                    去认证<img class="green-arrow" src="@/assets/img/publicImage/green-arrow.svg">
+                                </div>
+                            </template>
+
+                            <img v-if="item['data']['url'].indexOf('middlemanAuth') != -1" style="width: 360px;"
+                                src="@/assets/img/publicImage/mediation-authentication-code.svg">
+                            <img v-else style="width: 360px;" src="@/assets/img/publicImage/housing-certification-code.svg">
+                        </el-popover>
+                    </div>
+                    <div class="item flexflex" v-else-if="item['event'] == 'middlemanauth'">
+                        <img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
+                        <div class="time">{{ item['timestamp'] }}</div>
+                        <div class="text">{{ item['message'] }}</div>
+                        <el-popover placement="bottom" :width="360" trigger="click" :show-arrow="false"
+                            popper-style="background: transparent;padding:0;box-shadow: none;border: none;">
+                            <template #reference>
+                                <div class="footer flexcenter"
+                                    v-if="item.data && item.data['middlemanauthstatus'] == 0 && item.data.url">
+                                    去认证<img class="green-arrow" src="@/assets/img/publicImage/green-arrow.svg">
+                                </div>
+                            </template>
+                            <img style="width: 360px;" src="@/assets/img/publicImage/mediation-authentication-code.svg">
+                        </el-popover>
+                    </div>
+
+                    <div class="item flexflex" v-else-if="item['event'] == 'tenementcertified'">
+                        <img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
+                        <div class="time">{{ item['timestamp'] }}</div>
+                        <div class="text">{{ item['message'] }}</div>
+                        <div class="info flexacenter" v-if="item['data']">
+                            <img class="soldOut" v-if="item['data']['status'] != 1" src="@/assets/img/user/u75.png" alt="">
+                            <img class="img-icon" v-if="item['data']['isimage'] == 1"
+                                src="@/assets/img/publicImage/img-icon.png">
+                            <div class="title flex1 ellipsis">{{ item['data']['subject'] }}</div>
+                            <div class="id">房源ID：{{ item['data']['id'] }}</div>
+                        </div>
+                        <el-popover placement="bottom" :width="360" trigger="click" :show-arrow="false"
+                            popper-style="background: transparent;padding:0;box-shadow: none;border: none;">
+                            <template #reference>
+                                <div class="footer flexcenter"
+                                    v-if="item.data && item.data['tenementcertifiedstatus'] == 0 && item.data.url">
+                                    去认证<img class="green-arrow" src="@/assets/img/publicImage/green-arrow.svg">
+                                </div>
+                            </template>
+                            <img style="width: 360px;" src="@/assets/img/publicImage/housing-certification-code.svg">
+                        </el-popover>
+                    </div>
+
+                    <div class="item flexflex" v-else>
+                        <img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
+                        <div class="time">{{ item['timestamp'] }}</div>
+                        <div class="text">{{ item['message'] }}</div>
+                        <div class="text" v-for="item in item['data']['reportnummessage']">- {{ item }}</div>
+                        <div class="info flexacenter" v-if="item['data']">
+                            <img class="soldOut" v-if="item['data']['status'] != 1" src="@/assets/img/user/u75.png" alt="">
+                            <img class="img-icon" v-if="item['data']['isimage'] == 1"
+                                src="@/assets/img/publicImage/img-icon.png">
+                            <div class="title flex1 ellipsis"
+                                @click="goDetail(item['data']['uniqid'], item['data']['status'])">{{
+                                    item['data']['subject'] }}</div>
+                            <div class="id">房源ID：{{ item['data']['id'] }}</div>
+                        </div>
+                    </div>
+                </template>
+
+            </div>
         </div>
 
     </div>
 </template>
 
-<script>
+<script setup>
+import emptyDuck from '@/components/public/empty-duck.vue'
+import { onMounted, getCurrentInstance, ref, onUnmounted, defineEmits } from 'vue'
+import { useRouter } from 'vue-router';
+const emit = defineEmits(['close'])
+
+const router = useRouter();
+
+const { proxy } = getCurrentInstance()
+
+onMounted(() => {
+    init()
+})
+
+let qrcode = ref("") // 关注二维码
+let issubscribe = ref(0) // 是否已经关注公众号
+let list = ref([]) // 列表数据
+let state = false // 请求状态
+let page = 1 // 页数
+const init = () => {
+    // proxy.$post("/tenement/message/lists").then((res) => {
+    if (page == 0 || state) return
+    state = true
+    proxy.$post("/tenement/pc/api/user/messageList", {
+        page
+    }).then((res) => {
+        if (res.code != 200) return
+        let data = res.data
+        qrcode.value = data['qrcode']
+        issubscribe.value = data['issubscribe']
+        list.value = list.value.concat(data['data'])
+        page = data['page'] * data['limit'] < data['count'] ? page + 1 : 0
+    }).catch((err) => {
+    }).finally(() => {
+        state = false
+    })
+}
+
+const handleScroll = (event) => {
+    if (page == 0 || state) return
+    const scrollContainer = event.target; // 获取滚动容器元素
+    const scrollHeight = scrollContainer.scrollHeight; // 元素内容的总高度
+    const scrollTop = scrollContainer.scrollTop; // 滚动条距离滚动容器顶部的距离
+    const clientHeight = scrollContainer.clientHeight; // 可见区域的高度
+
+    if (scrollHeight - scrollTop === clientHeight) init()
+};
+
+// 点击跳转详情页
+const goDetail = (uniqid, status) => {
+    if (status != 1) return
+    router.push(`/detail?uniqid=${uniqid}`);
+}
+
 </script>
 
 <style lang="less" scoped>
@@ -33,6 +169,7 @@
     width: 100vw;
     height: 100vh;
     background: rgba(0, 0, 0, 0.698039215686274);
+    z-index: 1;
 }
 
 .content {
@@ -43,6 +180,8 @@
     -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
     -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
     box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
+    flex-direction: column;
+    position: relative;
 
     .header {
         width: 100%;
@@ -51,21 +190,37 @@
         background: -moz-linear-gradient(-67.5797491428887deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
         background: linear-gradient(-67.5797491428887deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
         border-radius: 16px 16px 0 0;
+        justify-content: center;
+
+        .circle {
+            position: absolute;
+            top: 0;
+            right: 0;
+        }
+
+        .white-cross {
+            position: absolute;
+            top: 20px;
+            right: 20px;
+            cursor: pointer;
+        }
 
         .header-icon {
             width: 52px;
             height: 57px;
+            margin-top: 43px;
             margin-right: 21px;
         }
 
         .header-text {
             width: 145px;
             height: 47px;
+            margin-top: 48px;
         }
     }
 
     .attention {
-        margin: -26px auto 0;
+        margin: -26px auto 10px;
         width: 660px;
         height: 50px;
         background-color: rgba(255, 255, 255, 1);
@@ -91,5 +246,106 @@
             cursor: pointer;
         }
     }
+
+    .list {
+        overflow: auto;
+        margin: 0 6px 30px;
+
+        /*滚动条样式*/
+        &::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        .empty-box {
+            margin-top: 170px;
+        }
+
+        .item {
+            flex-direction: column;
+            width: 660px;
+            background-color: rgba(255, 255, 255, 1);
+            border: 1px solid rgba(235, 235, 235, 1);
+            border-radius: 16px;
+            -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);
+            margin: 0 auto 10px;
+            position: relative;
+
+            .new {
+                position: absolute;
+                top: 7px;
+                right: 17px;
+                width: 40px;
+                height: 40px;
+            }
+
+            .time {
+                color: #aaaaaa;
+                font-size: 13px;
+                padding: 18px 16px 14px;
+
+            }
+
+            .text {
+                color: #7F7F7F;
+                line-height: 24px;
+                font-size: 14px;
+                padding: 0 16px;
+                margin-bottom: 10px;
+                word-wrap: break-word;
+            }
+
+            .info {
+                width: 630px;
+                height: 56px;
+                background-color: rgba(246, 246, 246, 1);
+                border-radius: 10px;
+                font-size: 15px;
+                color: #333;
+                margin: 0 auto 16px;
+                padding: 0 16px;
+                position: relative;
+
+                .soldOut {
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    width: 40px;
+                    height: 40px;
+                }
+
+                .title {
+                    padding-right: 60px;
+                    cursor: pointer;
+                }
+
+                .img-icon {
+                    width: 22px;
+                    height: 16px;
+                    margin-right: 10px;
+                }
+
+                .id {
+                    color: #AAAAAA;
+                    font-size: 13px;
+                }
+            }
+
+            .footer {
+                border-top: 1px solid #ebebeb;
+                font-size: 14px;
+                color: #50E3C2;
+                height: 45px;
+                cursor: pointer;
+
+                .green-arrow {
+                    margin-left: 10px;
+                    width: 14px;
+                    height: 14px;
+                }
+            }
+        }
+    }
 }
 </style>

src/router/index.js

@@ -36,13 +36,21 @@ const routes = [
       title: "我的"
     }
   },
+  {
+    path: '/detail',
+    name: 'detail',
+    component: () => import(/* webpackChunkName: "detail" */ '@/views/detail.vue'),
+    meta: {
+      title: "详情"
+    }
+  },
   {//个人房源
-    path:'/personHousing',
-    component:()=> import(/* webpackChunkName: "housing" */ '@/views/housingView/person.vue')
+    path: '/personHousing',
+    component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/person.vue')
   },
   {//中介房源
-    path:'/intermediaryHousing',
-    component:()=> import(/* webpackChunkName: "housing" */ '@/views/housingView/intermediary.vue')
+    path: '/intermediaryHousing',
+    component: () => import(/* webpackChunkName: "housing" */ '@/views/housingView/intermediary.vue')
   }
 ]
 

src/utils/axios.js

@@ -1,10 +1,6 @@
 import axios from 'axios';
 import QS from 'qs';
 import { goTologin } from '@/utils/util.js'
-//qs.stringify()是将对象 序列化成URL的形式，以&进行拼接
-//  let protocol = window.location.protocol; //协议
-//  let host = window.location.host; //主机
-//  axios.defaults.baseURL = protocol + "//" + host;
 axios.defaults.baseURL = 'https://app.gter.net'
 // axios.defaults.baseURL = '/index'
 axios.defaults.emulateJSON = true
@@ -12,12 +8,7 @@ axios.defaults.withCredentials = true
 
 axios.interceptors.request.use( //响应拦截
     async config => {
-        // 每次发送请求之前判断vuex中是否存在token        
-        // 如果存在，则统一在http请求的header都加上token，这样后台根据token判断你的登录情况
-        // 即使本地存在token，也有可能token是过期的，所以在响应拦截器中要对返回状态进行判断 
-        // config.headers.withCredentials = true
-        // config.headers['Content-Type'] = 'multipart/form-data'     
-
+        // 开发时登录用的，可以直接替换小程序的 authorization
         // if (process.env.NODE_ENV == "development") config['headers']['authorization'] = "x2mmnl9grt51bpplj2k6ioiuummzhnw3"
         if (process.env.NODE_ENV == "development") config['headers']['authorization'] = "0h870ovk2xckoqfsh8a3t3sg4sg5z7eg"
         return config;
@@ -38,10 +29,7 @@ axios.interceptors.response.use(
             switch (error.response.status) {
                 // 401: 未登录                
                 case 401:
-                    console.log("401");
-                    goTologin()
-                    console.log("401");
-
+                    goTologin()  // 跳转登录页面
                     break
                 case 403:
                     // router.push('/login')

src/utils/util.js

@@ -3,7 +3,6 @@ function setSeoTitle(title) {
 }
 
 function redirectToExternalWebsite(url) {
-    console.log(url, "url");
     const link = document.createElement('a');
     link.href = url;
     // link.target = '_blank';

src/views/detail.vue

@@ -0,0 +1,11 @@
+<template>
+    详情页
+</template>
+
+<script setup>
+import { useRoute } from 'vue-router';
+const route = useRoute()
+const uniqid = route.query.uniqid
+</script>
+
+<style lang="less" scoped></style>

src/views/edit.vue

@@ -293,7 +293,7 @@
                                             <div class="semicircle-outside"></div>
                                         </div>
                                     </div>
-                                    <div class="area-right flex1">
+                                    <div class="area-right flex1 scrollbar">
                                         <div class="area-item flexacenter"
                                             :class="{ 'pitchpitch': info['location'] == index }"
                                             v-for="(item, index) in locationData[locationValue].data" :key="index"
@@ -371,7 +371,7 @@
 
                             </template>
 
-                            <div class="residential-area">
+                            <div class="residential-area scrollbar">
                                 <div class="residential-item flexacenter" v-for="item in communityList" :key="item.id"
                                     @click="clickResidentialArea(item.id, item.name)">
                                     <div class="residential-dot"></div>
@@ -547,7 +547,7 @@
         <div class="pop area-pop-box radius16 target-area" @click.stop="">
             <div class="area-pop-header">目标区域</div>
             <div class="area-box flexflex">
-                <div class="target-area-left flex1">
+                <div class="target-area-left flex1 scrollbar">
 
                     <div class="target-area-item" v-for="(item, index) in locationData" :key="index">
                         <div class="target-area-head">{{ item.name }}</div>
@@ -2321,14 +2321,12 @@ export default {
     &.type-pop-box {
         width: 640px;
         height: 181px;
-        background: inherit;
         background-color: rgba(255, 255, 255, 1);
         border: 1px solid rgba(235, 235, 235, 1);
         -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);
         padding: 30px;
-
         position: absolute;
         top: 58px;
 
@@ -2479,37 +2477,18 @@ export default {
             overflow: auto;
             padding-top: 16px;
 
-            /*滚动条样式*/
-            &::-webkit-scrollbar {
-                width: 8px;
-            }
-
-            &::-webkit-scrollbar-thumb {
-                border-radius: 10px;
-                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
-                background: rgba(242, 242, 242, 1);
-            }
-
-            &::-webkit-scrollbar-track {
-                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
-                border-radius: 0;
-                background: transparent;
-            }
-
             .area-item {
                 height: 70px;
-
                 cursor: pointer;
-
-                &:not(:last-of-type) {
-                    border-bottom: 1px solid rgba(242, 242, 242, 1);
-                }
-
                 margin-right: 5px;
                 color: #555;
                 font-size: 16px;
                 justify-content: space-between;
 
+                &:not(:last-of-type) {
+                    border-bottom: 1px solid rgba(242, 242, 242, 1);
+                }
+
                 &.pitchpitch {
                     color: #62B1FF;
 
@@ -2558,23 +2537,6 @@ export default {
                 background-color: red;
             }
 
-            /*滚动条样式*/
-            &::-webkit-scrollbar {
-                width: 8px;
-            }
-
-            &::-webkit-scrollbar-thumb {
-                border-radius: 10px;
-                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
-                background: rgba(242, 242, 242, 1);
-            }
-
-            &::-webkit-scrollbar-track {
-                box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
-                border-radius: 0;
-                background: transparent;
-            }
-
             .target-area-item {
                 margin-bottom: 20px;
 
@@ -2596,8 +2558,6 @@ export default {
                         border-radius: 4px;
                         background-color: rgba(255, 215, 82, 1);
                     }
-
-
                 }
 
                 .box {
@@ -2723,23 +2683,6 @@ export default {
     padding: 10px 30px;
     overflow: auto;
 
-    /*滚动条样式*/
-    &::-webkit-scrollbar {
-        width: 8px;
-    }
-
-    &::-webkit-scrollbar-thumb {
-        border-radius: 10px;
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
-        background: rgba(242, 242, 242, 1);
-    }
-
-    &::-webkit-scrollbar-track {
-        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0);
-        border-radius: 0;
-        background: transparent;
-    }
-
     .residential-item {
         height: 60px;
         cursor: pointer;

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 {