修改bug

2024-04-16 15:16:47 +08:00
parent 249b326163
commit 8707053a9f
20 changed files with 146 additions and 37 deletions
--- a/src/assets/img/apartmentDetail/collecting-shadows.svg
+++ b/src/assets/img/apartmentDetail/collecting-shadows.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="38px" height="38px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="487px" y="1315px" width="38px" height="38px" filterUnits="userSpaceOnUse" id="filter689">
+      <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
+      <feGaussianBlur stdDeviation="2.5" in="shadowOffsetInner" result="shadowGaussian" />
+      <feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.349019607843137 0  " in="shadowComposite" />
+    </filter>
+    <g id="widget690">
+      <image preserveAspectRatio="none" style="overflow:visible" width="28" height="28" xlink:href="data:image/png;base64,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" x="492px" y="1320px" />
+    </g>
+  </defs>
+  <g transform="matrix(1 0 0 1 -487 -1315 )">
+    <use xlink:href="#widget690" filter="url(#filter689)" />
+    <use xlink:href="#widget690" />
+  </g>
+</svg>
--- a/src/assets/img/apartmentDetail/collecting-yellow-shadows.svg
+++ b/src/assets/img/apartmentDetail/collecting-yellow-shadows.svg
@@ -0,0 +1,18 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="44px" height="44px" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <filter x="484px" y="843px" width="44px" height="44px" filterUnits="userSpaceOnUse" id="filter691">
+      <feOffset dx="0" dy="0" in="SourceAlpha" result="shadowOffsetInner" />
+      <feGaussianBlur stdDeviation="4" in="shadowOffsetInner" result="shadowGaussian" />
+      <feComposite in2="shadowGaussian" operator="atop" in="SourceAlpha" result="shadowComposite" />
+      <feColorMatrix type="matrix" values="0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.247058823529412 0  " in="shadowComposite" />
+    </filter>
+    <g id="widget692">
+      <image preserveAspectRatio="none" style="overflow:visible" width="28" height="28" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAQKADAAQAAAABAAAAQAAAAABGUUKwAAAEFElEQVR4Ae1b0XHiMBCVMf+hgxMVhA7gOshVgFMAOTo46IBJCghUcCmB6yBXgaED+A/43hJ7hmAJSyvZYM6a8RhLu6v3njayLDtCNKVRoFHgf1YguAT5j/hpKEQSofMe9Z8IsRQieGt3nxdV46lcgF08egXJSEN0HnZfHjVtpVS3SomqCbqLnyZoijTNVB2lNmdM/DZVlgFJPJZ7sYtN4LdE2A26s5WJratNZRmwF/uxKVgbW9OYOrtKMgCj30lHv6MDclK/SbNgc1Lv/bKSDEhH1JQ8kYRg5hnjokrpGcAY/YxPJVlQegYg9SMa0YyVxbmzE7sHC3uWaekCANVPFjI4IT1/cX1N/UoV4CMeRQAiTcEo7GQaQ9Hkp6pUAXyMoI8Y56QqTQAPo5/hlphIS5sLShMA6IcZA9czJkP2PFLUdykCYMQGSN1BUeem7RSLYpra29ghtnuhe70Qu/u9CHqIht9JhLPE4bOscF+YIyDWB8m7EOFfPC9sXDuwEiCJR32AwCqNnuMTmYAkjY4rCBd/YFgCwwq4VkhnCNNaQxiczYpWABpVLEeHiUgGMAJhIc1CXo3VCuK8ByJYtkRrocsWpQAg38MK7ncNSevUR3aEP1SZkRPgc+QPz+0dXbSa1iufLXJ3AcaTW130UD5h5gTA5DasCyN7nHluCgFqN9nZ6CBPjVUCnNrc9LVCgGBxu4zz3HIC4J45u1UBVNxyAtC9EguIx1sTgTgZrQMy4vQ4i0XCa3Zd5zORb3df5ioO4KgvtyDCOfLE/KwAZFBnEYrIE7/cHECVx+UzdYLpcV09fgdTXdof4y/MgMwYLy3n9VklBouw+xxl2M+djQWgIPUQwZw8cbIS4PpFsCPPEuB6RbAnzxbg+kTgkScehXcBMlIVLCsnqvpL1LlgYQsAovISZDV9srGwBcDO0UADpvJqFyxsAcBSVs5U3yEbC1sAbJezO9Xz4LW4YGELgAVEnwfXv5cLFpYA2DqX/mm4ReRiYgkAqFcnABcTSwCXWddtnPXeXEwsAbhq6+F7aZGcKCwBXGZdDkgTHy4mlgAus64JGY4NMN1z/KwFoJennI4q8OlwsFkLACL0rYCPsqY9OzoQbO0jIGJYY2t76tgmzBbGE/xjxPELmDn+kWJM9TjucFRWOBngAC6Y4kMFeUL+EI/qqA2bVFOHDqxdMXfYF4zWBl4WIxUs6Jkdb2ZWJr3Rqg739YnlJuwWInZM4h/bcDMA4IoL/r7/YFS/0w6tKXmKSrbkQ74Uo7ing8XE0O6LGSsDKELBDvEa4Mcg8valN+YFMuIB3yzN4P5NHYK/JcYWgIAA2ABfcY4RZIDLu3S05iYvJMjftqSf30borw/fLfpbhiKcQeilbazGvlGgUaBRgBT4Bx4BLlsBzL06AAAAAElFTkSuQmCC" x="492px" y="851px" />
+    </g>
+  </defs>
+  <g transform="matrix(1 0 0 1 -484 -843 )">
+    <use xlink:href="#widget692" filter="url(#filter691)" />
+    <use xlink:href="#widget692" />
+  </g>
+</svg>
--- a/src/components/biserialListItem/biserialListItem.vue
+++ b/src/components/biserialListItem/biserialListItem.vue
@@ -42,6 +42,7 @@
                                                    ${location && location.data[data && data.data && data.data.location]}`
                                : ""
                        }}</span>
+                        <span v-if="item.distance && school" class="area-distance">{{ Math.round(item['distance'] * 10) / 10 }}km</span>
                    </div>
                    <div class="dis-f" style="flex-wrap: wrap;" v-if="data && data.data && data.data.location && Array.isArray(data.data.location)">
                        <template v-if="data && data.data && data.data.location">
@@ -468,4 +469,16 @@ img {
        }
    }
 }
+
+.area-distance {
+    margin-left: 16px;
+    color: #50e3c2;
+    position: relative;
+    &::after {
+        content: "|";
+        position: absolute;
+        left: -8px;
+        color: #d7d7d7;
+    }
+}
 </style>
--- a/src/components/public/apartment-item.vue
+++ b/src/components/public/apartment-item.vue
@@ -1,29 +1,34 @@
 <template>
    <div class="item flexflex" @click="goapArtmentDetails">
-        <img class="img" v-lazy="item['image']">
-        <div class="title">{{ item['title'] }}</div>
-        <div class="hint">{{ item['propaganda'] }}</div>
+        <div class="collect-box flexcenter" @click.stop="handleCollect(item)">
+            <img class="collect-icon" style="width: 30px; height: 30px;" src="@/assets/img/apartmentDetail/collecting-shadows.svg" />
+            <!-- <img class="collect-icon" src="@/assets/img/apartmentDetail/collecting-yellow-shadows.svg" /> -->
+        </div>
+        <img class="img" v-lazy="item['image']" />
+        <div class="title">{{ item["title"] }}</div>
+        <div class="hint">{{ item["propaganda"] }}</div>
        <div class="tab-box flexflex" v-if="item['tags']">
-            <div class="tab-item flexcenter" v-for="it in item['tags'].split(',')">{{ it }}</div>
+            <div class="tab-item flexcenter" v-for="(it, index) in item['tags'].split(',')" :key="index">{{ it }}</div>
        </div>
        <div class="location flexacenter" v-if="item['address']">
-            <img class="location-icon" src="@/assets/img/publicImage/location-icon.png">
-            <div class="ellipsis">{{ item['address'] }}</div>
+            <img class="location-icon" src="@/assets/img/publicImage/location-icon.png" />
+            <div class="ellipsis">{{ item["address"] }}</div>
+            <span class="area-distance" v-if="pitchValue['school'] && item['distance']">{{ Math.round(item["distance"] * 10) / 10 }}km</span>
        </div>

        <div class="type-list" v-if="item['roomlist']">
-            <div class="type-item flexacenter" v-for="it in item['roomlist']">
-                <div class="type-name flex1 ellipsis">{{ it['name'] }}</div>
+            <div class="type-item flexacenter" v-for="(it, index) in item['roomlist']" :key="index">
+                <div class="type-name flex1 ellipsis">{{ it["name"] }}</div>
                <div class="type-data flexacenter">
                    <div class="unit">HK$</div>
-                    <div class="price">{{ it['price'] }}</div>
+                    <div class="price">{{ it["price"] }}</div>
                    /月
                </div>
            </div>
        </div>
        <div class="type-quantity flexacenter">
            共
-            <div class="type-quantity-number">{{ item['roomnum'] }}</div>
+            <div class="type-quantity-number">{{ item["roomnum"] }}</div>
            个房型
            <img class="black-arrow" src="@/assets/img/publicImage/black-arrow.svg" />
        </div>
@@ -31,19 +36,25 @@
 </template>

 <script setup>
-import { ref } from 'vue';
-import { useRoute, useRouter } from 'vue-router';
-import { redirectToExternalWebsite } from '@/utils/util.js'
+import { ref } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { redirectToExternalWebsite } from "@/utils/util.js"
 const router = useRouter()

 const props = defineProps({
    item: Object,
-});
+    pitchValue: Object,
+})

-const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uniqid=${props['item'].uniqid}`)
+const emit = defineEmits(["handlecollect"])

-// router.push(`/apartmentDetail?uniqid=${props['item'].uniqid}`)
+const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uniqid=${props["item"].uniqid}`)

+// 点击收藏后传过父组件
+const handlecollect = item => {
+    console.log("item", item)
+    emit("handlecollect", item)
+}
 </script>

 <style lang="less" scoped>
@@ -67,6 +78,20 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.256862745098039);
    }

+    .collect-box {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        top: 0;
+        right: 0;
+        // background: #447eb3;
+        cursor: pointer;
+        .collect-icon {
+            width: 40px;
+            height: 40px;
+        }
+    }
+
    .img {
        width: 366px;
        height: 244px;
@@ -85,7 +110,7 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
    }

    .hint {
-        color: #AAAAAA;
+        color: #aaaaaa;
        font-size: 14px;
        margin: 0 6px 20px;
        word-break: break-all;
@@ -101,10 +126,10 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
            line-height: 28px;
            background-color: rgba(224, 240, 255, 1);
            border-radius: 5px;
-            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
+            font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
            font-weight: 400;
            font-size: 13px;
-            color: #447EB3;
+            color: #447eb3;
            padding: 0 11px;
            margin-right: 10px;
            margin-bottom: 10px;
@@ -150,22 +175,21 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
                font-size: 14px;

                .unit {
-                    font-family: 'Arial-Black', 'Arial Black', sans-serif;
+                    font-family: "Arial-Black", "Arial Black", sans-serif;
                    font-weight: 900;
                    color: #000000;
                }

                .price {
-                    font-family: 'Arial-Black', 'Arial Black', sans-serif;
+                    font-family: "Arial-Black", "Arial Black", sans-serif;
                    font-weight: 900;
                    font-size: 20px;
-                    color: #F95D5D;
+                    color: #f95d5d;
                    margin: 0 5px;
                }

                font-size: 14px;
                color: #555555;
-
            }
        }
    }
@@ -194,4 +218,16 @@ const goapArtmentDetails = () => redirectToExternalWebsite(`/apartmentDetail?uni
        }
    }
 }
-</style>
+
+.area-distance {
+    margin-left: 16px;
+    color: #50e3c2;
+    position: relative;
+    &::after {
+        content: "|";
+        position: absolute;
+        left: -8px;
+        color: #d7d7d7;
+    }
+}
+</style>
--- a/src/views/detail.vue
+++ b/src/views/detail.vue
@@ -982,6 +982,7 @@ let setNavigation = () => {
            path: pageType.value === 2 ? "/intermediaryHousing" : pageType.value === 3 ? "/needHousing" : "/personHousing",
            title: pageType.value === 2 ? "中介房源" : pageType.value === 3 ? "求房源" : "个人房源",
        }
+        housingInfo["data"]["info"].location = housingInfo["data"]["info"].location + ''
        store.state.routeList["thirdIndex"] = {
            path: `${store.state.routeList["secondaryIndex"].path}`,
            query: {
--- a/src/views/housingView/apartment.vue
+++ b/src/views/housingView/apartment.vue
@@ -8,7 +8,7 @@

    <div class="list wid1200 flexflex" ref="gridContainer">
        <template v-if="list.length != 0">
-            <apartment-item v-for="(item, index) in list" :key="index" :item="item"></apartment-item>
+            <apartment-item v-for="(item, index) in list" :key="index" :item="item" :pitchValue="pitchValue" @handlecollect="handlecollect"></apartment-item>
        </template>
    </div>

@@ -19,7 +19,7 @@
    <!-- 其他附近房源 -->
    <div v-if="moreList.length != 0" class="other-nearby-listings-box flexcenter">没有找到更多房源，为您推荐其他附近房源</div>
    <div class="wid1200" ref="moreShowList">
-        <apartment-item v-for="(item, index) in moreList" :key="index" :item="item"></apartment-item>
+        <apartment-item v-for="(item, index) in moreList" :key="index" :item="item" :pitchValue="pitchValue"></apartment-item>
    </div>

    <div class="bottom-tps" v-if="list.length != 0 && page == 0">- 到底了 -</div>
@@ -178,7 +178,7 @@ let moreLoading = ref(false)
 // 加载更多数据列表
 const getMoreList = () => {
    if (morePage.value == 0 || moreLoading.value) return
-    console.log("11111");
+    console.log("11111")
    moreLoading.value = true
    let postData = {
        page: morePage.value,
@@ -189,7 +189,7 @@ const getMoreList = () => {
        if (res.code != 200) return
        const data = res.data
        if (!data.data) return
-        
+
        moreList.value = moreList.value.concat(data.data)
        moreState.value = true
        if (data.data && data.data.length < data.limit) morePage.value = 0
@@ -212,6 +212,11 @@ const getMoreScroll = () => {
    let offsetHeight = body.offsetHeight
    if (scrollTop + clientHeight >= offsetHeight - 200 && !moreLoading.value) getMoreList()
 }
+
+// 处理列表的点击收藏
+const handlecollect = item => {
+    console.log("item", item)
+}
 </script>
 <style lang="less" scoped>
 .screen-box {