refactor(组件): 移除冗余代码并优化样式和功能

移除`imageWatch.vue`中的冗余变量`index`，优化`apartmentDetail.css`和`apartmentDetail.less`中的样式，增加`cursor: pointer`和`align-items: flex-start`等属性。在`user.vue`中移除调试日志并优化数据处理逻辑。在`apartment-item.vue`中恢复并优化点评展示功能。在`apartmentDetail.vue`中重构点评展示逻辑，增加点评类型切换功能，并优化数据加载和展示逻辑。
2025-05-19 19:00:09 +08:00
parent fbb5a6599d
commit 173e05c13a
6 changed files with 156 additions and 53 deletions
--- a/src/assets/styles/apartmentDetail.css
+++ b/src/assets/styles/apartmentDetail.css
@@ -550,6 +550,7 @@
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.11764706);
  padding: 24px 30px 28px;
  margin-bottom: 20px;
+  cursor: pointer;
 }
 .content .details-box .details-left .remark .head {
  justify-content: space-between;
@@ -604,6 +605,7 @@
  background-color: #f6f6f6;
  border-radius: 8px;
  padding-left: 20px;
+  align-items: flex-start;
 }
 .content .details-box .details-left .remark .inspect .left {
  padding: 18px 0;
@@ -626,6 +628,7 @@
  color: #50e3c2;
  font-size: 13px;
  height: 20px;
+  line-height: 20px;
  background-color: rgba(246, 246, 246, 0);
  border: 1px solid #50e3c2;
  border-radius: 30px;
--- a/src/assets/styles/apartmentDetail.less
+++ b/src/assets/styles/apartmentDetail.less
@@ -709,6 +709,7 @@
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.117647058823529);
                padding: 24px 30px 28px;
                margin-bottom: 20px;
+                cursor: pointer;

                .head {
                    justify-content: space-between;
@@ -773,6 +774,7 @@
                    background-color: rgba(246, 246, 246, 1);
                    border-radius: 8px;
                    padding-left: 20px;
+                    align-items: flex-start;

                    .left {
                        padding: 18px 0;
@@ -801,6 +803,7 @@
                                color: #50e3c2;
                                font-size: 13px;
                                height: 20px;
+                                line-height: 20px;
                                background-color: rgba(246, 246, 246, 0);
                                border: 1px solid rgba(80, 227, 194, 1);
                                border-radius: 30px;
--- a/src/components/detail/imageWatch.vue
+++ b/src/components/detail/imageWatch.vue
@@ -20,7 +20,6 @@
            <img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon left-arrow" @click="prev" alt="" />
            <img src="../../assets/img/detail/imageArrowIcon.svg" class="image-arrow-icon right-arrow" @click="next" alt="" />
        </div>
-        {{ index }}
        <div class="tab-text">{{ `${imageTab + 1}/${list.length}` }}</div>
        <div class="dis-f jus-x al-item">
            <div class="list-img-box dis-f al-item jus-x">
--- a/src/components/public/apartment-item.vue
+++ b/src/components/public/apartment-item.vue
@@ -10,13 +10,13 @@
            <img v-if="item.selection" class="gter-select" src="@/assets/img/publicImage/gter-select.png" />
            <div class="name flexflex">{{ item.title }}</div>
            <img class="img" v-lazy="item['image']" @load="loadload" />
-            <!-- <div class="apartment-introduce flexacenter">
+            <div class="apartment-introduce flexacenter" v-if="item.comment.content">
                <div class="remark-on flexacenter">
-                    <img class="fang-icon" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_Zwocn3qqsgFptxhcq_cQnrld6YjDgwVBq_D-81qNDQyOQ~~" />
-                    方同学点评
+                    <img class="fang-icon" :src="item.comment.avatar" />
+                    {{ item.comment.type }}
                </div>
-                <div class="remark-text flex1 ellipsis">交通和生活都非常便利，房间整洁完善交通和生活都非常便利，房间整洁完善交通和生活都非常便利，房间整洁完善</div>
-            </div> -->
+                <div class="remark-text flex1 ellipsis">{{ item.comment.content }}</div>
+            </div>
        </div>
        <div class="label-list flexacenter">
            <div class="label-item flexacenter blue">
--- a/src/views/apartmentDetail.vue
+++ b/src/views/apartmentDetail.vue
@@ -161,45 +161,47 @@
                    <img class="bottom-orange" src="@/assets/img/publicImage/special-bottom-orange.svg" />
                </div>

-                <div class="remark" ref="inspectEle">
+                <div class="remark" ref="inspectEle" v-if="spotSum > 0" @click="openInspectPop">
                    <div class="head flexacenter">
                        <div class="text">寄托实地考察</div>
                        <div class="more flexacenter">
-                            2
+                            {{ spotSum }}
                            <img class="icon" src="@/assets/img/publicImage/arrow-black-down.svg" />
                        </div>
                    </div>
                    <div class="inspect flexacenter">
                        <div class="left flex1">
                            <div class="info flexacenter">
-                                <img class="avatar" src="https://oss.x-php.com/avatar/97K4EWIMLrsbGTWXslC2WlhUEKSOikN42jDKLNjtax7HJY5hLpXaSdU90AVyYWFjYQ~~/mini" />
-                                <div class="username">寄托方同学</div>
-                                <img class="label" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdH_qqsgFptxhcq_cQnrlcfAgCgwSBq_D-81qNDQyOQ~~" />
+                                <img class="avatar" :src="spotObj.avatar" />
+                                <div class="username">{{ spotObj.nickname }}</div>
+                                <img class="label" :src="spotObj.groupimage" />
                            </div>
-                            <div class="explain two-line-text">交通和生活都非常便利，交通和生活都非常便利，交通和生活都非常便利，房间整洁完善，拎包入住没问题！周围五百米内，超市…</div>
+                            <div class="explain two-line-text">{{ spotObj.content }}</div>
                        </div>
-                        <img class="inspect-img" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-S-5MvfHrqqsgFptxhXa6QWi2uePJ5Bg8cFLPIqoYV7MsPC27D4Fz_-kU8uRQ0NDI5" />
+                        <img class="inspect-img" :src="spotObj.sources[0].thumbnail" />
                    </div>
                </div>

-                <div class="remark" ref="followEle">
+                <div class="remark" ref="followEle" v-if="returnSum > 0" @click="openInspectPop">
                    <div class="head flexacenter">
                        <div class="text">寄托回访</div>
                        <div class="more flexacenter">
-                            3
+                            {{ returnSum }}
                            <img class="icon" src="@/assets/img/publicImage/arrow-black-down.svg" />
                        </div>
                    </div>

                    <div class="return-visit flexacenter" scroll-x>
-                        <div class="item flex1" v-for="(item, index) in 2" :key="index">
-                            <div class="info flexacenter">
-                                <img class="avatar" src="https://oss.x-php.com/avatar/97K4EWIMLrsbGTWXslC2WlhUEKSOikN42jDKLNjtax7HJY5hLpXaSdU90AVyYWFjYQ~~/mini" />
-                                <div class="username">寄托方同学</div>
-                                <div class="label flexacenter">已入住</div>
+                        <template v-for="(item, index) in remarkList" :key="index">
+                            <div class="item flex1" v-if="item.typeid == 2">
+                                <div class="info flexacenter">
+                                    <img class="avatar" :src="item.avatar" />
+                                    <div class="username">{{ item.nickname }}</div>
+                                    <div class="label flexacenter">已入住</div>
+                                </div>
+                                <div class="explain two-line-text">{{ item.content }}</div>
                            </div>
-                            <div class="explain two-line-text">交通和生活都非常便利，交通和生活都非常便利，交通和生活都非常便利，房间整洁完善，拎包入住没问题！周围五百米内，超市…</div>
-                        </div>
+                        </template>
                    </div>
                </div>

@@ -620,35 +622,40 @@
            <img src="@/assets/img/detail/close.png" class="close-icon" @click="isSelectSchool = false" />
        </div> -->
        <div class="type flexacenter">
-            <div class="item pitch">全部 4</div>
-            <div class="item">寄托实地考察 2</div>
-            <div class="item">寄托回访 2</div>
+            <div class="item" :class="{ pitch: remarkTypeid == 0 }" @click="cutRemarkType(0)">全部 {{ spotSum + returnSum }}</div>
+            <div class="item" :class="{ pitch: remarkTypeid == 1 }" @click="cutRemarkType(1)">寄托实地考察 {{ spotSum }}</div>
+            <div class="item" :class="{ pitch: remarkTypeid == 2 }" @click="cutRemarkType(2)">寄托回访 {{ returnSum }}</div>
        </div>

        <div class="list">
-            <div class="item flexflex" v-for="(item, index) in 10" :key="index">
-                <img class="avatar" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-d_Zwocn3qqsgFptxhcq_cQnrld6YjDgwVBq_D-81qNDQyOQ~~" />
-                <div class="remark-content flexflex flex1">
-                    <div class="type flexacenter">
-                        <img class="image" src="@/assets/img/publicImage/return-visit.png" />
-                        <img class="image" src="@/assets/img/publicImage/inspect-icon.png" />
-                        寄托实地考察
-                    </div>
-                    <div class="username flexacenter">
-                        寄托方同学
-                        <div class="checked-in">已入住</div>
-                        <img class="image" src="" />
-                    </div>
-                    <div class="date">2025.3.15</div>
-                    <div class="text">交通和生活都非常便利，房间整洁完善，拎包入住没问题！周围五百米内，超市、购物广场及娱乐设施应有尽有。步行至地铁口仅需3分钟！ 所有房间都有大窗，基本都朝南，每个房间阳光都很充足，窗外是公园。所有房间可以看到绿树，公园，很开阔，不压抑。真是非常难得的窗景！ 客服小COCO24小时在线，每日提供清洁服务，妥妥的生活无忧！</div>
-                    <div class="media" scroll-x>
-                        <div class="media-item" v-for="(item, index) in 10" :key="index">
-                            <img class="media-img" src="https://oss.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-X9pkucH3qqsgFptxhcq_cQnrleqEnW1EdBq_D-81qNDQyOQ~~" />
-                            <img class="media-icon" src="@/assets/img/publicImage/video-icon.svg" />
+            <template v-for="(item, index) in remarkList" :key="index">
+                <div class="item flexflex" v-if="remarkTypeid == 0 || (remarkTypeid == 1 && item.typeid == 1) || (remarkTypeid == 2 && item.typeid == 2)">
+                    <img class="avatar" :src="item.avatar" />
+                    <div class="remark-content flexflex flex1">
+                        <div class="type flexacenter" v-if="item.typeid == 1">
+                            <img class="image" src="@/assets/img/publicImage/inspect-icon.png" />
+                            寄托实地考察
+                        </div>
+                        <div class="type flexacenter" v-else>
+                            <img class="image" src="@/assets/img/publicImage/return-visit.png" />
+                            寄托回访
+                        </div>
+                        <div class="username flexacenter">
+                            {{ item.nickname }}
+                            <div class="checked-in" v-if="item.typeid == 2">已入住</div>
+                            <img class="image" v-if="item.groupimage" :src="item.groupimage" />
+                        </div>
+                        <div class="date">{{ item.date }}</div>
+                        <div class="text">{{ item.content }}</div>
+                        <div class="media" scroll-x>
+                            <div class="media-item" v-for="(item, i) in item.sources" :key="i" @click="previewImg(index, i)">
+                                <img class="media-img" :src="item.thumbnail" />
+                                <img class="media-icon" v-if="item.type == 'videos'" src="@/assets/img/publicImage/video-icon.svg" />
+                            </div>
                        </div>
                    </div>
                </div>
-            </div>
+            </template>
        </div>
    </el-dialog>
 </template>
@@ -907,11 +914,9 @@ const init = () => {
            handleNavData();
            getFacilitiesHeight();
            getDetailsHeight();
-
            getLikeList();
            getMapDistance();
-
-            if (!data.info.promotionalactivities) navTab.value = "inspectEle";
+            getComment();
        });

        if (data.withsameapartments > 0) dualBrandData();
@@ -1080,8 +1085,17 @@ let navList = ref([]);

 let navTab = ref("specialEle");

+// 初始化 判断 navTab 值
+const initNavTab = () => {
+    if (info.value.promotionalactivities) navTab.value = "specialEle";
+    else if (spotSum.value > 0) navTab.value = "inspectEle";
+    else if (returnSum.value > 0) navTab.value = "followEle";
+    else navTab.value = "roomEle";
+};
+
 // 处理 navList 数据
 const handleNavData = () => {
+    navList.value = [];
    navconfig.forEach((element) => {
        if (eval(element["value"]).value) navList.value.push(element);
    });
@@ -1419,8 +1433,6 @@ const openMap = () => {
 };

 const roomCollect = (id, index) => {
-    console.log(id, index);
-
    proxy.$post("https://api.gter.net/v1/apartment/roomCollection", { id }).then((res) => {
        if (res.code != 200) return;
        const data = res.data;
@@ -1430,6 +1442,93 @@ const roomCollect = (id, index) => {
 };

 let isInspectPop = ref(false);
+let spotObj = ref({});
+let spotSum = ref(0);
+let returnSum = ref(0);
+let remarkList = ref([]);
+let remarkTypeid = ref(0); // 0 全部 1 考察 2 回访
+
+const getComment = () => {
+    proxy
+        .$post("https://api.gter.net/v1/apartment/comment", { token })
+        .then((res) => {
+            if (res.code != 200) return;
+            let data = res.data || [];
+            let spot = null; // 实地考察
+            let sSum = 0;
+            let rSum = 0;
+            data.forEach((element) => {
+                element.date = formatDate(element.created_at);
+
+                // 合并视频和图片资源
+                element.sources = [
+                    ...(element.attachment.videos || []).map((video) => ({
+                        type: "videos",
+                        thumbnail: video.cover,
+                        poster: video.cover,
+                        videourl: video.url,
+                    })),
+                    ...(element.attachment.images || []).map((image) => ({
+                        type: "attachment",
+                        imageurl: image.url,
+                        thumbnail: image.cover,
+                    })),
+                ];
+
+                // 分类统计
+                element.typeid === 1 ? ((spot = element), sSum++) : rSum++;
+            });
+
+            spotObj.value = spot;
+            remarkList.value = data;
+            spotSum.value = sSum;
+            returnSum.value = rSum;
+
+            nextTick(() => {
+                handleNavData();
+                initNavTab();
+            });
+        })
+        .catch((err) => {
+            initNavTab();
+        });
+};
+
+const formatDate = (dateStr) => {
+    const date = new Date(dateStr);
+    const year = date.getFullYear();
+    const month = date.getMonth() + 1; // 月份从 0 开始
+    const day = date.getDate();
+
+    // 移除前导零（如果需要）
+    return `${year}.${month}.${day}`;
+};
+
+const openInspectPop = () => {
+    isInspectPop.value = true;
+};
+
+const previewImg = (index, i) => {
+    const list = remarkList.value || [];
+    // const url = e.currentTarget.dataset.url;
+
+    // if (url) {
+    //     list.forEach((element, indexi) => {
+    //         (element.sources || []).forEach((element, indexii) => {
+    //             if (url == element.poster) {
+    //                 index = indexi;
+    //                 i = indexii;
+    //             }
+    //         });
+    //     });
+    // }
+
+    const sources = list[index].sources || [];
+    cloaseImageShow(sources, i, "inspect");
+};
+
+// 切换点评
+const cutRemarkType = (value) => (remarkTypeid.value = value);
 </script>

 <style lang="less" scoped>
--- a/src/views/user.vue
+++ b/src/views/user.vue
@@ -359,12 +359,13 @@ const getFavData = () => {
        .then((res) => {
            if (res.code != 200) return;
            let data = res.data;
-            console.log("data", data);
            let list = data.data || [];
+
            list = list.map((item) => {
                const newItem = item.data ? { ...item.data } : { ...item };
                newItem.typetype = item.type;
                newItem.token = item.token;
+                if (typeof newItem.hottags == "string") newItem.hottags = JSON.parse(newItem.hottags);
                if (newItem.typetype === "apartmentcollection" && typeof newItem.tags === "string") newItem.tags = newItem.tags.split(",");
                if (newItem.typetype === "apartmentcollection" && typeof newItem.hottags === "string") newItem.hottags = newItem.hottags.split(",");
                return newItem;
@@ -498,8 +499,6 @@ const handleDelete = (index, status) => {

 // 监听滚动到底部
 const handleScroll = () => {
-    console.log("handleScroll");
-
    if (!user.value["uid"]) return;
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;