From c80cee6eb0c51cddbd18d4322580085f2ea216cb Mon Sep 17 00:00:00 2001
From: A1300399510 <A1300399510>
Date: Mon, 25 Dec 2023 18:39:49 +0800
Subject: [PATCH] no message

---
 app.vue                 |   2 +-
 components/Empty.vue    |   4 +-
 components/Header.vue   |  24 +-
 components/MyPopup.vue  | 495 ++++++++++++++++++++++++++--------------
 composables/api.js      |  14 +-
 package-lock.json       | 229 ++++++++++++++++++-
 package.json            |   6 +-
 pages/details/[id].vue  | 340 ++++++++++++++++-----------
 pages/publish/index.vue |  30 ++-
 tsconfig.json           |  14 +-
 utils/http.js           | 110 +++++----
 11 files changed, 879 insertions(+), 389 deletions(-)

diff --git a/app.vue b/app.vue
index e058ced..8997749 100644
--- a/app.vue
+++ b/app.vue
@@ -5,7 +5,7 @@
 <template>
     <div>
         <!-- <NuxtWelcome /> -->
-        <RouterView></RouterView>
+        <RouterView :key="$route.fullPath"></RouterView>
     </div>
 </template>
 
diff --git a/components/Empty.vue b/components/Empty.vue
index 8b555c4..8e3a042 100644
--- a/components/Empty.vue
+++ b/components/Empty.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="empty-box flexcenter">
+    <div class="empty-box-list flexcenter">
         <div class="dot-list flexacenter">
             <img class="item" src="@/assets/img/dot-yellow.svg" />
             <img class="item" src="@/assets/img/dot-yellow.svg" />
@@ -20,7 +20,7 @@ let props = defineProps({
 </script>
 
 <style lang="less" scoped>
-.empty-box {
+.empty-box-list {
     // width: 690px;
     // height: 490px;
     background-color: #ffffff;
diff --git a/components/Header.vue b/components/Header.vue
index bb448ec..24cedae 100644
--- a/components/Header.vue
+++ b/components/Header.vue
@@ -14,8 +14,8 @@
                     </div>
                 </div>
                 <div class="my-btn-list flexacenter">
-                    <div class="my-btn-item flexcenter">我的收藏</div>
-                    <div class="my-btn-item flexcenter">我的面经</div>
+                    <div class="my-btn-item flexcenter" @click="handleUser('collect')">我的收藏</div>
+                    <div class="my-btn-item flexcenter" @click="handleUser('mj')">我的面经</div>
                 </div>
                 <div class="sponsor-btn flexcenter" @click="goPublish">
                     <img class="add-icon" src="@/assets/img/add-icon.svg" />
@@ -25,8 +25,7 @@
         </div>
     </header>
 
-    <MyPopup v-if="false"></MyPopup>
-
+    <MyPopup ref="MyPopupRef" :count="count"></MyPopup>
 </template>
 
 <script setup>
@@ -37,15 +36,16 @@ let keyword = ref("")
 onMounted(() => {
     getHistoricalSearchList()
 
-    getUser()
+    // getUser()
 })
 
+let count = ref({})
+
 const getUser = () => {
     MyUserInfoHttp().then(res => {
         if (res.code != 200) return
         let data = res.data
-        console.log("data", data)
-        let count = data['count']
+        count.value = data["count"]
     })
 }
 
@@ -82,7 +82,7 @@ const setHistoricalSearchList = () => {
 
 // 搜索点击事件
 const searchClick = () => {
-    router.push(`/index.html?keyword=${keyword.value}`)
+    router.push(`/index.html?keyword=${keyword.value || ""}`)
     setHistoricalSearchList()
     searchBlur()
 }
@@ -111,6 +111,14 @@ const handleClickClear = () => {
 
 let historicalSearchState = ref(false) // 历史记录弹窗状态
 let historicalSearchList = ref([]) // 历史记录数据
+
+
+let MyPopupRef = ref(null)
+// 点击我的获取消息
+const handleUser = key => {
+    if (Object.keys(count.value).length === 0) getUser()
+    MyPopupRef.value.cutMy(key)
+}
 </script>
 
 <style scoped lang="less">
diff --git a/components/MyPopup.vue b/components/MyPopup.vue
index d937e18..86a8162 100644
--- a/components/MyPopup.vue
+++ b/components/MyPopup.vue
@@ -1,44 +1,53 @@
 <template>
-    <div class="popup-mask flexcenter">
+    <el-dialog v-model="show" width="750px" align-center class="dialog-box">
+        <!-- <div class="popup-mask flexcenter"> -->
         <div class="box flexflex">
+            <img class="cross" src="@/assets/img/cross-icon.png" alt @click="cutMy('')" />
             <div class="tba-list flexcenter">
-                <div class="tab-item pitch flexcenter">
+                <div class="tab-item flexcenter" :class="{ pitch: MyPopupState == 'collect' }" @click="cutMy('collect')">
                     我的收藏
-                    <div class="value">12</div>
+                    <div class="value">{{ count["collect"] }}</div>
                 </div>
 
-                <div class="tab-item flexcenter">
+                <div class="tab-item flexcenter" :class="{ pitch: MyPopupState == 'mj' }" @click="cutMy('mj')">
                     我的面经
-                    <div class="value">12</div>
+                    <div class="value">{{ count["publish"] }}</div>
                 </div>
             </div>
-            <div class="empty-box flexcenter" v-if="false"><Empty></Empty></div>
-            <div class="content">
-                <div class="item flexflex" v-for="(item, index) in 10" :key="index">
+            <div class="empty-box flexcenter" v-if="showList.length == 0">
+                <Empty></Empty>
+            </div>
+            <div class="content" v-else @scroll="handleListScroll">
+                <div class="item flexflex" v-for="(item, index) in showList" :key="index" @click="goDetails(item['uniqid'])">
                     <div class="left flexflex">
-                        <div class="name">香港理工大学</div>
+                        <div class="name">{{ item["school"] }}</div>
                         <div class="info-box flexflex">
-                            <div class="info-item flexacenter" v-for="item in 2" :key="item">
+                            <div class="info-item flexacenter" v-if="item['profession']">
                                 <div class="info-item-name">专业</div>
-                                <div class="info-item-value">Electrical and Electronics Engineering</div>
+                                <div class="info-item-value">{{ item["profession"] }}</div>
+                            </div>
+                            <div class="info-item flexacenter" v-if="item['project']">
+                                <div class="info-item-name">项目</div>
+                                <div class="info-item-value">{{ item["project"] }}</div>
                             </div>
                         </div>
                         <div class="text-box flexacenter">
-                            我是本专业+跨专业申请，中大是直接给了推研所。没啥经验分享，主要是港大和港科的面经…
+                            <div class="text-time">1小时前发布</div>
+                            <div class="text-message flex1 ellipsis">{{ item["message"] }}</div>
                         </div>
                     </div>
                     <div class="operate-area flexacenter">
-                        <!-- <img class="delete-icon" src="@/assets/img/delete-icon.svg" /> -->
-                        <div class="anonymous-box flexacenter">
-                            <div class="text">公开</div>
+                        <img class="delete-icon" v-if="MyPopupState == 'collect'" src="@/assets/img/delete-icon.svg" />
+                        <div class="anonymous-box flexacenter" v-else @click="openAnonymousState(index)">
+                            <div class="text">{{ item["anonymous"] == 1 ? "匿名" : "公开" }}</div>
                             <img class="arrow-icon" src="@/assets/img/arrow-gray.svg" />
-                            <div class="state-popup flexflex" v-if="false">
-                                <div class="state-popup-item flexacenter flex1 pitch">
-                                    <div class="">公开发表</div>
+                            <div class="state-popup flexflex" v-if="item['anonymousState']" @click.stop="">
+                                <div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 0 }" @click="handleAnonymousState(item['token'], index)">
+                                    <div class>公开发表</div>
                                     <img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
                                 </div>
-                                <div class="state-popup-item flexacenter flex1">
-                                    <div class="">匿名发表</div>
+                                <div class="state-popup-item flexacenter flex1" :class="{ 'pitch': item['anonymous'] == 1 }" @click="handleAnonymousState(item['token'], index)">
+                                    <div class>匿名发表</div>
                                     <img class="state-popup-icon" src="@/assets/img/tick-green.svg" />
                                 </div>
                             </div>
@@ -47,9 +56,106 @@
                 </div>
             </div>
         </div>
-    </div>
+    </el-dialog>
+    <!-- </div> -->
 </template>
-<script setup></script>
+<script setup>
+let props = defineProps({
+    // MyPopupState: String, // collect  mj
+    count: Object,
+})
+
+let show = ref(false)
+const router = useRouter()
+
+let MyPopupState = ref("") // collect  mj
+
+onMounted(() => {
+    // if (MyPopupState.value == "collect") getCollect();
+    // else if (MyPopupState.value == "mj") getPublish();
+})
+
+// 展示的 列表数据
+let showList = ref([])
+
+let collectList = []
+const getCollect = () => {
+    MyUserCollectHttp({}).then(res => {
+        if (res.code != 200) return
+        let data = res.data
+        collectList = collectList.concat(data.data)
+        showList.value = collectList
+    })
+}
+
+let publishList = []
+let publisPage = 1
+let publisloading = false
+const getPublish = () => {
+    if (publisPage == 0 && !publisloading) return
+
+    publisloading = true
+    MyUserPublishHttp({ limit: 4, page: publisPage })
+        .then(res => {
+            if (res.code != 200) return
+            let data = res.data
+            publishList = publishList.concat(data.data)
+            if (publishList.length < data["count"]) publisPage++
+            else publisPage = 0
+            showList.value = publishList
+        })
+        .finally(() => (publisloading = false))
+}
+
+// 切换
+const cutMy = key => {
+    if (key == "collect" && collectList.length == 0) getCollect()
+    else if (key == "mj" && publishList.length == 0) getPublish()
+
+    if (key == "collect") showList.value = collectList
+    else if (key == "mj") showList.value = publishList
+
+    MyPopupState.value = key
+
+    if (MyPopupState.value) show.value = true
+    else show.value = false
+}
+
+// 打开匿名弹窗
+const openAnonymousState = index => {
+    publishList.forEach(element => {
+        element["anonymousState"] = false
+    })
+    publishList[index]["anonymousState"] = true
+    showList.value = [...publishList]
+}
+
+// 修改匿名状态
+const handleAnonymousState = (token, index) => {
+    console.log("token", token, index)
+}
+
+// 详情页滚动事件
+const handleListScroll = e => {
+    const el = e.target
+    // 判断滚动到底部
+    if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
+    if (MyPopupState.value == "collect") getCollect()
+    if (MyPopupState.value == "mj") getPublish()
+}
+
+// 打开详情页
+const goDetails = uniqid => {
+    router.push(`/details/${uniqid}`)
+}
+
+//暴露state和play方法
+defineExpose({
+    cutMy,
+})
+
+// const emit = defineEmits(["cutMy"]);
+</script>
 <style lang="less" scoped>
 .popup-mask {
     width: 100vw;
@@ -62,185 +168,209 @@
     max-height: none;
     border: none;
     outline: none;
-    .box {
-        width: 750px;
-        height: 606px;
-        background-color: rgba(255, 255, 255, 1);
-        border-radius: 10px;
-        -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
-        -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
-        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
-        flex-direction: column;
-        padding: 30px 30px 46px;
+    z-index: 1;
+}
+.box {
+    width: 750px;
+    height: 606px;
+    background-color: rgba(255, 255, 255, 1);
+    border-radius: 10px;
+    -moz-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
+    -webkit-box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
+    box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.117647058823529);
+    flex-direction: column;
+    padding: 30px 30px 46px;
+    position: relative;
 
-        .tba-list {
-            font-size: 16px;
-            margin-bottom: 29px;
-            .tab-item {
-                color: #aaaaaa;
-                padding: 0 22px;
-                cursor: pointer;
-                position: relative;
+    .cross {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        width: 12px;
+        height: 12px;
+        cursor: pointer;
+    }
 
-                &:first-of-type::after {
-                    content: "";
-                    width: 1px;
-                    height: 16px;
-                    background: #d7d7d7;
-                    position: absolute;
-                    right: 0;
-                }
+    .tba-list {
+        font-size: 16px;
+        margin-bottom: 29px;
+        .tab-item {
+            color: #aaaaaa;
+            padding: 0 22px;
+            cursor: pointer;
+            position: relative;
+
+            &:first-of-type::after {
+                content: "";
+                width: 1px;
+                height: 16px;
+                background: #d7d7d7;
+                position: absolute;
+                right: 0;
+            }
+            .value {
+                margin-left: 10px;
+            }
+            &.pitch {
+                font-weight: 650;
+                color: #000000;
                 .value {
-                    margin-left: 10px;
-                }
-                &.pitch {
-                    font-weight: 650;
-                    color: #000000;
-                    .value {
-                        color: #555;
-                        font-weight: 400;
-                    }
+                    color: #555;
+                    font-weight: 400;
                 }
             }
         }
+    }
 
-        .empty-box {
-            width: 100%;
-            height: 100%;
-            background-color: rgba(255, 255, 255, 1);
-            border: 1px solid rgba(235, 235, 235, 1);
-            border-radius: 6px;
-            margin: 0 auto;
-        }
+    .empty-box {
+        width: 100%;
+        height: 100%;
+        background-color: rgba(255, 255, 255, 1);
+        border: 1px solid rgba(235, 235, 235, 1);
+        border-radius: 6px;
+        margin: 0 auto;
+    }
 
-        .content {
-            width: 100%;
-            height: 100%;
-            // background: #000000;
-            overflow: auto;
-            padding-right: 10px;
+    .content {
+        width: 100%;
+        height: 100%;
+        // background: #000000;
+        overflow: auto;
+        padding-right: 10px;
+        padding-bottom: 35px;
+        .item {
+            // flex-direction: column;
+            border-bottom: 1px dotted #ebebeb;
             padding-bottom: 20px;
-            .item {
-                // flex-direction: column;
-                border-bottom: 1px dotted #ebebeb;
-                padding-bottom: 20px;
-                cursor: pointer;
-                margin-left: 22px;
-                margin-bottom: 21px;
-                .left {
-                    flex-direction: column;
-                    // padding-left: 22px;
-                    position: relative;
-                    &::after {
-                        content: "";
-                        position: absolute;
-                        top: 4px;
-                        left: -22px;
-                        width: 5px;
-                        height: 12px;
-                        background-color: rgba(49, 215, 46, 1);
-                        border-radius: 25px;
-                    }
-                    .name {
-                        font-weight: 650;
-                        font-size: 14px;
-                        color: #000000;
-                        margin-bottom: 10px;
-                    }
-                    .info-box {
-                        flex-direction: column;
-                        margin-bottom: 7px;
-
-                        .info-item {
-                            line-height: 24px;
-                            &:not(:last-of-type) {
-                                margin-bottom: 3px;
-                            }
-
-                            .info-item-name {
-                                color: #7f7f7f;
-                                font-size: 13px;
-                                margin-right: 12px;
-                            }
-                            .info-item-value {
-                                font-size: 13px;
-                                color: #333333;
-                            }
-                        }
-                    }
-
-                    .text-box {
-                        width: 580px;
-                        height: 45px;
-                        background-color: rgba(246, 246, 246, 1);
-                        border-radius: 5px;
-                        color: #000000;
-                        font-size: 13px;
-                        padding: 0 16px;
-                    }
+            cursor: pointer;
+            margin-left: 22px;
+            margin-bottom: 21px;
+            .left {
+                flex-direction: column;
+                // padding-left: 22px;
+                position: relative;
+                &::after {
+                    content: "";
+                    position: absolute;
+                    top: 4px;
+                    left: -22px;
+                    width: 5px;
+                    height: 12px;
+                    background-color: rgba(49, 215, 46, 1);
+                    border-radius: 25px;
                 }
-                .operate-area {
-                    flex: 1;
-                    display: flex;
-                    justify-content: flex-end;
-                    .delete-icon {
-                        width: 12px;
-                        cursor: pointer;
-                    }
+                .name {
+                    font-weight: 650;
+                    font-size: 14px;
+                    color: #000000;
+                    margin-bottom: 10px;
+                }
+                .info-box {
+                    flex-direction: column;
+                    margin-bottom: 7px;
 
-                    .anonymous-box {
-                        .text {
+                    .info-item {
+                        line-height: 24px;
+                        &:not(:last-of-type) {
+                            margin-bottom: 3px;
+                        }
+
+                        .info-item-name {
+                            color: #7f7f7f;
+                            font-size: 13px;
+                            margin-right: 12px;
+                        }
+                        .info-item-value {
                             font-size: 13px;
                             color: #333333;
                         }
-                        .arrow-icon {
-                            width: 8px;
-                            height: 5px;
-                            margin-left: 6px;
-                        }
+                    }
+                }
 
+                .text-box {
+                    width: 580px;
+                    height: 45px;
+                    line-height: 45px;
+                    background-color: rgba(246, 246, 246, 1);
+                    border-radius: 5px;
+                    color: #000000;
+                    font-size: 13px;
+                    padding: 0 16px;
+
+                    .text-time {
+                        color: #7f7f7f;
+                        padding-right: 16px;
                         position: relative;
-
-                        .state-popup {
+                        &::after {
+                            content: "|";
                             position: absolute;
-                            top: 30px;
-                            right: 0;
-                            width: 140px;
-                            height: 101px;
-                            background-color: rgba(255, 255, 255, 1);
-                            border-radius: 10px;
-                            -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
-                            -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
-                            box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
-                            flex-direction: column;
+                            right: 8px;
+                            color: #d7d7d7;
+                        }
+                    }
+                }
+            }
+            .operate-area {
+                flex: 1;
+                display: flex;
+                justify-content: flex-end;
+                .delete-icon {
+                    width: 12px;
+                    cursor: pointer;
+                }
 
-                            .state-popup-item {
-                                justify-content: space-between;
-                                color: #555;
-                                font-size: 14px;
-                                padding: 0 10px;
+                .anonymous-box {
+                    .text {
+                        font-size: 13px;
+                        color: #333333;
+                    }
+                    .arrow-icon {
+                        width: 8px;
+                        height: 5px;
+                        margin-left: 6px;
+                    }
 
-                                &:hover {
-                                    color: #000000;
-                                }
+                    position: relative;
 
-                                &.pitch {
-                                    color: #72db86;
-                                    .state-popup-icon {
-                                        display: block;
-                                    }
-                                }
+                    .state-popup {
+                        position: absolute;
+                        top: 30px;
+                        right: 0;
+                        width: 140px;
+                        height: 101px;
+                        background-color: rgba(255, 255, 255, 1);
+                        border-radius: 10px;
+                        -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
+                        -webkit-box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
+                        box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.203921568627451);
+                        flex-direction: column;
 
-                                &:not(:last-of-type) {
-                                    border-bottom: 1px dotted #e3e3e3;
-                                }
+                        .state-popup-item {
+                            justify-content: space-between;
+                            color: #555;
+                            font-size: 14px;
+                            padding: 0 10px;
 
+                            &:hover {
+                                color: #000000;
+                            }
+
+                            &.pitch {
+                                color: #72db86;
                                 .state-popup-icon {
-                                    width: 11px;
-                                    height: 8px;
-                                    display: none;
+                                    display: block;
                                 }
                             }
+
+                            &:not(:last-of-type) {
+                                border-bottom: 1px dotted #e3e3e3;
+                            }
+
+                            .state-popup-icon {
+                                width: 11px;
+                                height: 8px;
+                                display: none;
+                            }
                         }
                     }
                 }
@@ -249,3 +379,16 @@
     }
 }
 </style>
+
+<style lang="less">
+.dialog-box {
+    header {
+        display: none;
+    }
+    border-radius: 10px;
+
+    .el-dialog__body {
+        padding: 0;
+    }
+}
+</style>
diff --git a/composables/api.js b/composables/api.js
index f1851c9..914695c 100644
--- a/composables/api.js
+++ b/composables/api.js
@@ -30,11 +30,11 @@ export const detailsCommentListHttp = query => {
 }
 // 详情数据 - 获取子评论数据
 export const detailsChildCommentListHttp = query => {
-    return Http.post("https://ask.gter.net/api/comment/childrenList", query)
+    return Http.post("/api/comment/childrenList", query)
 }
 // 详情数据 - 提交评论
 export const detailsSubmitommentListHttp = query => {
-    return Http.post("https://ask.gter.net/api/comment/submit", query)
+    return Http.post("/api/comment/submit", query)
 }
 
 // 发布相关 - 发布问题初始化,编辑
@@ -42,6 +42,11 @@ export const publishInitHttp = query => {
     return Http.post("/api/publish", query)
 }
 
+// 发布相关 - 发布问题初始化,编辑
+export const publishSchoolSearchHttp = query => {
+    return Http.post("https://offer.gter.net/miniprogram/InterviewExperience/schoolSearch", query)
+}
+
 // 我的 - 用户信息
 export const MyUserInfoHttp = query => {
     return Http.post("/api/user", query)
@@ -50,4 +55,9 @@ export const MyUserInfoHttp = query => {
 // 我的 - 我的发布的面经
 export const MyUserPublishHttp = query => {
     return Http.post("/api/user/publish", query)
+}
+
+// 数据操作 - 收藏
+export const MyUserCollectHttp = query => {
+    return Http.post("/api/user/collect", query)
 }
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e6028c6..e1a2940 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,7 +7,9 @@
       "name": "nuxt-app",
       "hasInstallScript": true,
       "dependencies": {
-        "masonry-layout": "^4.2.2"
+        "axios": "^1.6.2",
+        "masonry-layout": "^4.2.2",
+        "qs": "^6.11.2"
       },
       "devDependencies": {
         "@element-plus/nuxt": "^1.0.7",
@@ -3912,6 +3914,11 @@
       "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==",
       "dev": true
     },
+    "node_modules/asynckit": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
     "node_modules/autoprefixer": {
       "version": "10.4.16",
       "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.16.tgz",
@@ -3949,6 +3956,16 @@
         "postcss": "^8.1.0"
       }
     },
+    "node_modules/axios": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.2.tgz",
+      "integrity": "sha512-7i24Ri4pmDRfJTR7LDBhsOTtcm+9kjX5WiY1X3wIisx6G9So3pfMkEiU7emUBe46oceVImccTEM3k6C5dbVW8A==",
+      "dependencies": {
+        "follow-redirects": "^1.15.0",
+        "form-data": "^4.0.0",
+        "proxy-from-env": "^1.1.0"
+      }
+    },
     "node_modules/b4a": {
       "version": "1.6.4",
       "resolved": "https://registry.npmjs.org/b4a/-/b4a-1.6.4.tgz",
@@ -4216,6 +4233,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/call-bind": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.5.tgz",
+      "integrity": "sha512-C3nQxfFZxFRVoJoGKKI8y3MOEo129NQ+FgQ08iye+Mk4zNZZGdjfs06bVTr+DBSlA66Q2VEcMki/cUCP4SercQ==",
+      "dependencies": {
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.2.1",
+        "set-function-length": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/camelcase": {
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-6.3.0.tgz",
@@ -4518,6 +4548,17 @@
       "integrity": "sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==",
       "dev": true
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -4904,6 +4945,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/define-data-property": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.1.tgz",
+      "integrity": "sha512-E7uGkTzkk1d0ByLeSc6ZsFS79Axg+m1P/VsgYsxHgiuc3tFSj+MjMIwe90FC4lOAZzNBdY7kkO2P2wKdsQ1vgQ==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/define-lazy-prop": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -4919,6 +4973,14 @@
       "integrity": "sha512-Vy2wmG3NTkmHNg/kzpuvHhkqeIx3ODWqasgCRbKtbXEN0G+HpEEv9BtJLp7ZG1CZloFaC41Ah3ZFbq7aqCqMeQ==",
       "dev": true
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/delegates": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
@@ -5407,6 +5469,25 @@
       "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==",
       "dev": true
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.3",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
+      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.1.1.tgz",
@@ -5435,6 +5516,19 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fraction.js": {
       "version": "4.3.7",
       "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz",
@@ -5507,7 +5601,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -5550,6 +5643,20 @@
         "node": "6.* || 8.* || >= 10.*"
       }
     },
+    "node_modules/get-intrinsic": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.2.tgz",
+      "integrity": "sha512-0gSo4ml/0j98Y3lngkFEot/zhiCeWsbYIlZ+uZOVgzLyLaUw7wxUL+nCTP0XJvJg1AXulJRI3UJi8GsbDuxdGA==",
+      "dependencies": {
+        "function-bind": "^1.1.2",
+        "has-proto": "^1.0.1",
+        "has-symbols": "^1.0.3",
+        "hasown": "^2.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/get-port-please": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/get-port-please/-/get-port-please-3.1.1.tgz",
@@ -5694,6 +5801,17 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/gopd": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
+      "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
+      "dependencies": {
+        "get-intrinsic": "^1.1.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/graceful-fs": {
       "version": "4.2.11",
       "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
@@ -5740,6 +5858,39 @@
         "node": ">=4"
       }
     },
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.1.tgz",
+      "integrity": "sha512-VsX8eaIewvas0xnvinAe9bw4WfIeODpGYikiWYLH+dma0Jw6KHYqWiWfhQlgOVK8D6PvjubK5Uc4P0iIhIcNVg==",
+      "dependencies": {
+        "get-intrinsic": "^1.2.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-proto": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.1.tgz",
+      "integrity": "sha512-7qE+iP+O+bgF9clE5+UoBFzE65mlBiVj3tKCrlNQ0Ogwm0BjpT/gK4SlLYDMybDh5I3TCTKnPPa0oMG7JDYrhg==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
@@ -5756,7 +5907,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.0.tgz",
       "integrity": "sha512-vUptKVTpIJhcczKBbgnS+RtcuYMB8+oNzPK2/Hp3hanz8JmpATdmmgLgSaadVREkDm+e2giHwY3ZRkyjSIDDFA==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -6791,6 +6941,25 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/mimic-fn": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-4.0.0.tgz",
@@ -7740,6 +7909,14 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.13.1",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.13.1.tgz",
+      "integrity": "sha512-5qoj1RUiKOMsCCNLV1CBiPYE10sziTsnmNxkAI/rZhiD63CF7IqdFGC/XzjWjpSgLf0LxXX3bDFIh0E18f6UhQ==",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/ofetch": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/ofetch/-/ofetch-1.3.3.tgz",
@@ -8588,6 +8765,11 @@
       "integrity": "sha512-/XJ368cyBJ7fzLMwLKv1e4vLxOju2MNAIokcr7meSaNcVbWz/CPcW22cP04mwxOErdA5mwjA8Q6w/cdAQxVn7Q==",
       "dev": true
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/prr": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
@@ -8595,6 +8777,20 @@
       "dev": true,
       "optional": true
     },
+    "node_modules/qs": {
+      "version": "6.11.2",
+      "resolved": "https://registry.npmjs.org/qs/-/qs-6.11.2.tgz",
+      "integrity": "sha512-tDNIz22aBzCDxLtVH++VnTfzxlfeK5CbqohpSqpJgj1Wg/cQbStNAz3NuqCs5vV+pjBsK4x4pN9HlVh7rcYRiA==",
+      "dependencies": {
+        "side-channel": "^1.0.4"
+      },
+      "engines": {
+        "node": ">=0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -9238,6 +9434,20 @@
       "integrity": "sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==",
       "dev": true
     },
+    "node_modules/set-function-length": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.1.1.tgz",
+      "integrity": "sha512-VoaqjbBJKiWtg4yRcKBQ7g7wnGnLV3M8oLvVWwOk2PdYY6PEFegR1vezXR0tw6fZGF9csVakIRjrJiy2veSBFQ==",
+      "dependencies": {
+        "define-data-property": "^1.1.1",
+        "get-intrinsic": "^1.2.1",
+        "gopd": "^1.0.1",
+        "has-property-descriptors": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/setprototypeof": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -9274,6 +9484,19 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/signal-exit": {
       "version": "3.0.7",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
diff --git a/package.json b/package.json
index 5b54f99..c701479 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
     "vue-router": "^4.2.5"
   },
   "dependencies": {
-    "masonry-layout": "^4.2.2"
+    "axios": "^1.6.2",
+    "masonry-layout": "^4.2.2",
+    "qs": "^6.11.2"
   }
-}
\ No newline at end of file
+}
diff --git a/pages/details/[id].vue b/pages/details/[id].vue
index a335fcf..d5a3a09 100644
--- a/pages/details/[id].vue
+++ b/pages/details/[id].vue
@@ -9,9 +9,7 @@
     <div class="content flexflex">
         <div class="left">
             <div class="school-box flexcenter">
-                <a :href="info['school']?.['url']" target="_blank">
-                    <img class="school-icon" :src="info['school']?.['image']" />
-                </a>
+                <a class="school-box-icon" :href="info['school']?.['url']" target="_blank"><img class="school-icon" v-if="info['school']?.['image']" :src="info['school']?.['image']" /></a>
                 <a class="school-name" :href="info['school']?.['url']" target="_blank">{{ info["school"]?.["name"] }}</a>
                 <a class="school-en-name" :href="info['school']?.['url']" target="_blank">{{ info["school"]?.["enname"] }}</a>
             </div>
@@ -22,7 +20,7 @@
                 个面经
             </div>
             <div class="mj-list">
-                <div class="mj-item flexflex" :class="{pitch: pitchIndex == index}" v-for="(item, index) in relatedlist" :key="index" @click="handleItem(item['uniqid'])">
+                <a class="mj-item flexflex" :class="{ pitch: pitchIndex == index }" v-for="(item, index) in relatedlist" :key="index" @click.prevent="handleItem(item['uniqid'])" :href="`./details/${item['uniqid']}`">
                     <img class="item-bj" src="@/assets/img/item-bj.svg" />
                     <div class="mj-header flexacenter">
                         <img class="mj-avatar" :src="item['avatar']" />
@@ -44,7 +42,7 @@
                             <div class="info-value flex1 ellipsis">{{ item["interviewtime"] }}</div>
                         </div>
                     </div>
-                </div>
+                </a>
             </div>
         </div>
         <div class="right flex1">
@@ -58,7 +56,7 @@
                     </div>
                     <div class="mj-header-right flexacenter">
                         <img class="eye-icon" src="@/assets/img/eye-icon.svg" />
-                        96
+                        {{ info["views"] }}
                     </div>
                 </div>
             </div>
@@ -93,7 +91,7 @@
                     <div class="details-top">面试过程及内容</div>
                     <div class="details-list">
                         <div class="details-list-item flexacenter">
-                            <div class="details-value describe" :class="{'unlock-unlock': !isdisplay}" v-if="info['message']">
+                            <div class="details-value describe" :class="{ 'unlock-unlock': !isdisplay }" v-if="info['message']">
                                 {{ info["message"] }}
                                 <div class="unlock-mask flexflex">
                                     <div class="">作者设置了浏览限制</div>
@@ -112,93 +110,99 @@
             <div class="comment-box">
                 <div class="comment-title flexacenter">
                     讨论
-                    <div class="value">{{ commentCount }}</div>
+                    <div class="value">{{ commentCount || "" }}</div>
                 </div>
                 <div class="post-comment flexacenter">
                     <textarea class="post-input flex1" placeholder="说说你的想法或疑问…" v-model="commentInputTop"></textarea>
-                    <div class="post-ok flexcenter" @click="submitAnswerComments">OK</div>
+                    <div class="post-ok flexcenter" @click="submitAnswerComments()">发送</div>
                 </div>
 
-                <div class="comment-list">
-                    <div class="comment-item flexflex" v-for="(item, index) in commentList" :key="index">
-                        <img class="comment-avatar" :src="item['avatar']" />
-                        <div class="comment-content flex1">
-                            <div class="comment-header flexacenter">
-                                <div class="comment-header-left flexacenter">
-                                    <div class="comments-username">{{ item["nickname"] }}</div>
-                                    <div class="comments-time">{{ handleDate(item["timestamp"]) }}</div>
-                                    <div class="comments-identity" v-if="item['isauthor']">作者</div>
-                                </div>
-                                <div class="comment-header-right flexacenter">
-                                    <div class="menu-box flexacenter">
-                                        <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
-                                        <div class="report-box flexcenter">举报</div>
+                <template v-if="isEmptyState">
+                    <div class="empty-box">
+                        <Empty hint="说说你的观点吧"></Empty>
+                    </div>
+                </template>
+                <template v-else>
+                    <div class="comment-list">
+                        <div class="comment-item flexflex" v-for="(item, index) in commentList" :key="index">
+                            <img class="comment-avatar" :src="item['avatar']" />
+                            <div class="comment-content flex1">
+                                <div class="comment-header flexacenter">
+                                    <div class="comment-header-left flexacenter">
+                                        <div class="comments-username">{{ item["nickname"] }}</div>
+                                        <div class="comments-time">{{ handleDate(item["timestamp"]) }}</div>
+                                        <div class="comments-identity" v-if="item['isauthor']">作者</div>
                                     </div>
-                                    <img class="comment-icon" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" />
-                                    <div class="flexacenter like-box">
-                                        <img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
-                                        <img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
-                                        <div class="like-quantity">{{ item["likenum"] || 0 }}</div>
+                                    <div class="comment-header-right flexacenter">
+                                        <div class="menu-box flexacenter">
+                                            <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
+                                            <div class="report-box flexcenter">举报</div>
+                                        </div>
+                                        <img class="comment-icon" @click="openAnswerCommentsChild(index)" src="@/assets/img/comment-icon-gray.svg" />
+                                        <div class="flexacenter like-box">
+                                            <img class="like-icon" v-if="item['islike'] == 1" src="@/assets/img/like-icon-colours.png" />
+                                            <img class="like-icon" v-else src="@/assets/img/like-icon-gray.png" />
+                                            <div class="like-quantity">{{ item["likenum"] || 0 }}</div>
+                                        </div>
                                     </div>
                                 </div>
-                            </div>
-                            <div class="comment-text">{{ item["content"] }}</div>
-                            <!-- <div class="comments-input-box flexacenter" v-if="item['childState']"> -->
-                            <div class="comments-input-box flexacenter" v-if="item['childState']">
-                                <div class="comments-input flexflex">
-                                    <textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
-                                    <div class="comments-btn flexcenter" @click="submitAnswerComments(index)">发送</div>
+                                <div class="comment-text">{{ item["content"] }}</div>
+                                <!-- <div class="comments-input-box flexacenter" v-if="item['childState']"> -->
+                                <div class="comments-input-box flexacenter" v-if="item['childState']">
+                                    <div class="comments-input flexflex">
+                                        <textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
+                                        <div class="comments-btn flexcenter" @click="submitAnswerComments(index)">发送</div>
+                                    </div>
+                                    <img class="forkfork" @click="closeAnswerCommentsChild(index)" src="@/assets/img/cross-icon.png" />
                                 </div>
-                                <img class="forkfork" @click="closeAnswerCommentsChild(index)" src="@/assets/img/cross-icon.png" />
-                            </div>
-                            <!-- 子评论 -->
-                            <div class="child-comments" v-if="item['child'].length > 0">
-                                <div class="comment-item flexflex" v-for="(ite, i) in item['child']" :key="i">
-                                    <img class="comment-avatar" :src="item['avatar']" />
-                                    <div class="comment-content flex1">
-                                        <div class="comment-header flexacenter">
-                                            <div class="comment-header-left flexacenter">
-                                                <div class="comments-username">{{ item["nickname"] }}</div>
-                                                <div class="comments-time">{{ handleDate(item["timestamp"]) }}</div>
-                                                <div class="comments-identity" v-if="item['isauthor']">作者</div>
-                                            </div>
-                                            <div class="comment-header-right flexacenter">
-                                                <div class="menu-box flexacenter">
-                                                    <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
-                                                    <div class="report-box flexcenter">举报</div>
+                                <!-- 子评论 -->
+                                <div class="child-comments" v-if="item['child'].length > 0">
+                                    <div class="comment-item flexflex" v-for="(ite, i) in item['child']" :key="i">
+                                        <img class="comment-avatar" :src="item['avatar']" />
+                                        <div class="comment-content flex1">
+                                            <div class="comment-header flexacenter">
+                                                <div class="comment-header-left flexacenter">
+                                                    <div class="comments-username">{{ item["nickname"] }}</div>
+                                                    <div class="comments-time">{{ handleDate(item["timestamp"]) }}</div>
+                                                    <div class="comments-identity" v-if="item['isauthor']">作者</div>
                                                 </div>
-                                                <img class="comment-icon" @click="openAnswerCommentsChild(index, i)" src="@/assets/img/comment-icon-gray.svg" />
-                                                <div class="flexacenter like-box">
-                                                    <img class="like-icon" v-if="item['islike']" src="@/assets/img/like-icon-gray.png" />
-                                                    <img class="like-icon" v-else src="@/assets/img/like-icon-colours.png" />
-                                                    <div class="like-quantity">{{ item["likenum"] || 0 }}</div>
+                                                <div class="comment-header-right flexacenter">
+                                                    <div class="menu-box flexacenter">
+                                                        <img class="menu-icon" src="@/assets/img/menu-icon-gray.svg" />
+                                                        <div class="report-box flexcenter">举报</div>
+                                                    </div>
+                                                    <img class="comment-icon" @click="openAnswerCommentsChild(index, i)" src="@/assets/img/comment-icon-gray.svg" />
+                                                    <div class="flexacenter like-box">
+                                                        <img class="like-icon" v-if="item['islike']" src="@/assets/img/like-icon-gray.png" />
+                                                        <img class="like-icon" v-else src="@/assets/img/like-icon-colours.png" />
+                                                        <div class="like-quantity">{{ item["likenum"] || 0 }}</div>
+                                                    </div>
                                                 </div>
                                             </div>
-                                        </div>
-                                        <div class="comment-text">
-                                            <div class="comments-reply" v-if="JSON.stringify(ite['reply']) != '[]'">@{{ ite["reply"]["nickname"] }}</div>
-                                            {{ item["content"] }}
-                                        </div>
-                                        <div class="comments-input-box flexacenter" v-if="ite['childState']">
-                                            <div class="comments-input flexflex">
-                                                <textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
-                                                <div class="comments-btn flexcenter" @click="submitAnswerComments(index, i)">发送</div>
+                                            <div class="comment-text">
+                                                <div class="comments-reply" v-if="JSON.stringify(ite['reply']) != '[]'">@{{ ite["reply"]["nickname"] }}</div>
+                                                {{ item["content"] }}
+                                            </div>
+                                            <div class="comments-input-box flexacenter" v-if="ite['childState']">
+                                                <div class="comments-input flexflex">
+                                                    <textarea class="flex1" placeholder="回复" v-model="commentInput"></textarea>
+                                                    <div class="comments-btn flexcenter" @click="submitAnswerComments(index, i)">发送</div>
+                                                </div>
+                                                <img class="forkfork" @click="closeAnswerCommentsChild(index, i)" src="@/assets/img/cross-icon.png" />
                                             </div>
-                                            <img class="forkfork" @click="closeAnswerCommentsChild(index, i)" src="@/assets/img/cross-icon.png" />
                                         </div>
                                     </div>
                                 </div>
-                            </div>
-                            <!-- 还有几个 -->
-                            <div class="comments-also flexacenter" v-if="item['childnum'] >= 3 && item['childnum'] > item['child'].length" @click="alsoCommentsData(index)">
-                                <div class="">还有{{ item["childnum"] - item["child"].length }}条回复</div>
-                                <img class="also-icon" src="@/assets/img/arrow-circular-gray.png" />
+                                <!-- 还有几个 -->
+                                <div class="comments-also flexacenter" v-if="item['childnum'] >= 3 && item['childnum'] > item['child'].length" @click="alsoCommentsData(index)">
+                                    <div class="">还有{{ item["childnum"] - item["child"].length }}条回复</div>
+                                    <img class="also-icon" src="@/assets/img/arrow-circular-gray.png" />
+                                </div>
                             </div>
                         </div>
                     </div>
-                </div>
-
-                <div class="comment-end" v-if="commentPage == 0 && commentList.length != 0">· End ·</div>
+                    <div class="comment-end" v-if="commentPage == 0 && commentList.length != 0">· End ·</div>
+                </template>
             </div>
         </div>
 
@@ -264,6 +268,7 @@
 </template>
 
 <script setup>
+import { ElMessage } from "element-plus"
 const route = useRoute()
 let uniqid = route.params.id
 
@@ -273,6 +278,34 @@ onMounted(() => {
     getDetails()
 })
 
+watch(route, () => {
+    clearAllData()
+
+    nextTick(() => getDetails())
+})
+
+// 清空全部数据
+const clearAllData = () => {
+    info.value = {}
+    qrcode.value = ""
+    iscollection.value = 0
+    isdisplay.value = true
+    islike.value = 0
+    ismyself.value = 0
+
+    relatedlist.value = []
+    relatedcount.value = 0
+
+    pitchIndex.value = null
+
+    seo.value = {}
+    commentCount.value = 0
+    commentPage.value = 1
+    commentList.value = []
+    commentLoading = false
+    token = ""
+}
+
 let floorRightState = ref(false) // 右下角 的二维码显示状态
 
 const handleFloorRight = value => {
@@ -290,7 +323,7 @@ let islike = ref(0) // 是否点赞
 let ismyself = ref(0) // 是否是作者
 
 const getDetails = () => {
-    detailsHttp({uniqid}).then(res => {
+    detailsHttp({ uniqid }).then(res => {
         if (res.code != 200) return
         let data = res.data
         token = data["token"]
@@ -303,7 +336,6 @@ const getDetails = () => {
         qrcode.value = data["share"]["qrcode"]
 
         getCommentListHttp()
-
         if (relatedlist.value.length == 0) getRelatedlistHttp()
         else CalculateSelectedList()
     })
@@ -339,7 +371,7 @@ let relatedcount = ref(0)
 let pitchIndex = ref(null) // 列表选中 index
 
 const getRelatedlistHttp = () => {
-    relatedlistHttp({token, page: 1}).then(res => {
+    relatedlistHttp({ token, page: 1 }).then(res => {
         if (res.code != 200) return
 
         let data = res.data
@@ -357,15 +389,16 @@ let commentPage = ref(1)
 let commentList = ref([])
 let commentLoading = false
 let token = ""
+let isEmptyState = ref(false) // 评论是否为空
+
 // 获取详情评论数据
 const getCommentListHttp = () => {
-    console.log(commentPage.value, "commentPage.value")
     if (commentPage.value == 0 || commentLoading) return
     commentLoading = true
     detailsCommentListHttp({
-        page: commentPage.value,
-        childlimit: 1,
-        limit: commentPage.value == 1 ? 3 : 10,
+        // page: commentPage.value,
+        // childlimit: 1,
+        // limit: commentPage.value == 1 ? 3 : 10,
         token,
     })
         .then(res => {
@@ -374,6 +407,9 @@ const getCommentListHttp = () => {
 
             let data = res.data
             commentCount.value = data["count"]
+            if (data["count"] == 0) isEmptyState.value = true
+            else isEmptyState.value = false
+
             commentList.value = commentList.value.concat(data["data"])
 
             if (commentList.value.length == data["count"]) commentPage.value = 0
@@ -386,9 +422,7 @@ const getCommentListHttp = () => {
 const alsoCommentsData = (index, ind) => {
     // const targetAnswerList = [...answerList.value]
 
-    // console.log(commentList.value[index])
-    let targetCommentItem = {...commentList.value[index]}
-    console.log(targetCommentItem, "targetCommentItem")
+    let targetCommentItem = { ...commentList.value[index] }
     const token = targetCommentItem["token"]
     const parentid = targetCommentItem["id"]
     let page = targetCommentItem["childPage"] ?? 1
@@ -402,14 +436,12 @@ const alsoCommentsData = (index, ind) => {
     }).then(res => {
         if (res.code != 200) return
         let data = res.data
-
-        // console.log("data", data)
-
         targetCommentItem.child = targetCommentItem.child.concat(data.data)
         targetCommentItem["childnum"] = data.count
 
         if (targetCommentItem.child.length == data["count"]) page = 0
         else page++
+
         targetCommentItem["childPage"] = page
 
         commentList.value[index] = targetCommentItem
@@ -457,17 +489,20 @@ let commentInput = ref("")
 
 // 提交回答-评论
 const submitAnswerComments = (index, i) => {
+    console.log(index, "index")
     // answerList.value[index]['commentState'] = true
     const targetCommentList = [...commentList.value]
     let content = ""
-    let parentid = 0
-    let token = targetCommentList[index]["token"]
-
-    console.log("index", index, targetCommentList[index])
+    let parentid = null
+    let targetToken = ""
+    if (index) targetToken = targetCommentList[index]["token"]
+    else targetToken = token
 
     if (index == null) content = commentInputTop.value
     else content = commentInput.value
 
+    console.log("content", content)
+
     if (i != null) {
         parentid = targetCommentList[index]["child"][i]["id"]
     } else if (index != null) {
@@ -478,15 +513,13 @@ const submitAnswerComments = (index, i) => {
 
     detailsSubmitommentListHttp({
         content,
-        token,
-        parentid,
+        token: targetToken,
+        // parentid,
     }).then(res => {
         if (res.code != 200) return
         let data = res.data
 
         console.log("data", data)
-        return
-
         if (i != null) {
             let targetData = {
                 id: data["commentid"],
@@ -495,25 +528,13 @@ const submitAnswerComments = (index, i) => {
                 islike: 0,
                 likenum: 0,
                 reply: {
-                    nickname: targetAnswerList[index]["commentList"][ind]["child"][i]["nickname"],
+                    nickname: targetCommentList[index]["child"][i]["nickname"],
                 },
                 ...data,
             }
 
-            targetAnswerList[index]["commentList"][ind]["child"].unshift(targetData)
-            targetAnswerList[index]["commentList"][ind]["childnum"]++
-        } else if (ind != null) {
-            let targetData = {
-                id: data["commentid"],
-                content,
-                isauthor: 1,
-                islike: 0,
-                likenum: 0,
-                reply: [],
-                ...data,
-            }
-            targetAnswerList[index]["commentList"][ind]["child"].unshift(targetData)
-            targetAnswerList[index]["commentList"][ind]["childnum"]++
+            targetCommentList[index]["child"].unshift(targetData)
+            targetCommentList[index]["childnum"]++
         } else {
             let targetData = {
                 id: data["commentid"],
@@ -524,15 +545,15 @@ const submitAnswerComments = (index, i) => {
                 ...data,
                 child: [],
             }
-            targetAnswerList[index]["commentList"].unshift(targetData)
-            targetAnswerList[index]["commentCount"]++
+            targetCommentList.unshift(targetData)
+            commentCount.value++
         }
 
-        targetAnswerList[index]["commentnum"] = data["count"]
-
-        closeAnswerCommentsChild()
-
-        handleMsg("success", res["message"] || "操作成功")
+        commentList.value = targetCommentList
+        ElMessage({
+            message: res.message,
+            type: "success",
+        })
     })
 }
 
@@ -546,14 +567,11 @@ const timestampToDate = timestamp => {
     return `${year}-${month}-${day}`
 }
 
-onUnmounted(() => {
-    window.removeEventListener("scroll", handleScroll)
-})
+onUnmounted(() => window.removeEventListener("scroll", handleScroll))
 
 // 获取完整 url
 const getFullUrl = () => {
     if (typeof window === "undefined") return
-
     return window.location.href
 }
 
@@ -586,12 +604,9 @@ let copyText = text => {
 
 // 点击点赞
 const handleLike = () => {
-    console.log("like")
-    operateLikeHttp({token}).then(res => {
-        console.log("res", res)
+    operateLikeHttp({ token }).then(res => {
         if (res.code != 200) return
         let data = res.data
-        console.log("data", data)
         info.value["likenum"] = data["count"]
         islike.value = data["status"]
 
@@ -604,20 +619,51 @@ const handleLike = () => {
 
 // 点击 收藏
 const handleCollect = () => {
-    operateCollectHttp({token}).then(res => {
-        console.log("res", res)
+    operateCollectHttp({ token }).then(res => {
         if (res.code != 200) return
         let data = res.data
 
         info.value["favnum"] = data["count"]
         iscollection.value = data["status"]
+
+        ElMessage({
+            message: res["message"],
+            type: "success",
+        })
     })
 }
 
+const router = useRouter()
+
 // 处理点击列表
 const handleItem = uni => {
+    // router.push(`/details/${uni}`)
+
     uniqid = uni
-    getDetails()
+
+    info.value = {}
+    qrcode.value = ""
+    iscollection.value = 0
+    isdisplay.value = true
+    islike.value = 0
+    ismyself.value = 0
+
+    commentCount.value = 0
+    commentPage.value = 1
+    commentList.value = []
+    commentLoading = false
+    token = ""
+    // clearAllData()
+
+    nextTick(() => getDetails())
+    // replaceState(uni)
+}
+
+// 修改 url
+const replaceState = uni => {
+    if (typeof window === "undefined") return
+    // 替换当前URL，但不刷新页面
+    window.history.pushState({}, "", `${window.location.origin}/details/${uni}`)
 }
 </script>
 
@@ -631,26 +677,35 @@ const handleItem = uni => {
         width: 376px;
         border-right: 16px solid #f6f6f6;
         padding-top: 30px;
+        height: calc(100vh - 70px);
+        overflow: auto;
+
         .school-box {
             flex-direction: column;
             margin-bottom: 40px;
             text-align: center;
-            .school-icon {
-                width: 40px;
-                height: 40px;
-                margin-bottom: 12px;
-            }
 
+            .school-box-icon {
+                height: 52px;
+
+                .school-icon {
+                    width: 40px;
+                    height: 40px;
+                    margin-bottom: 12px;
+                }
+            }
             .school-name {
                 font-weight: 650;
                 font-size: 15px;
                 color: #000000;
                 margin-bottom: 7px;
+                height: 28px;
             }
 
             .school-en-name {
                 color: #555555;
                 font-size: 13px;
+                height: 18px;
             }
         }
 
@@ -762,6 +817,16 @@ const handleItem = uni => {
     }
 
     .right {
+        height: calc(100vh - 70px);
+        overflow: auto;
+
+        &::-webkit-scrollbar {
+            width: 0 !important;
+        }
+
+        scrollbar-width: none;
+        -ms-overflow-style: none;
+
         .header {
             padding: 30px 45px 25px;
             border-bottom: 1px solid #ebebeb;
@@ -885,6 +950,7 @@ const handleItem = uni => {
                                         justify-content: flex-end;
                                         padding-bottom: 38px;
                                         line-height: normal;
+                                        // display: none;
 
                                         > div {
                                             margin-top: 7px;
@@ -946,12 +1012,16 @@ const handleItem = uni => {
                     height: 60px;
                     background-color: rgba(98, 177, 255, 1);
                     color: #fff;
-                    font-size: 13px;
+                    font-size: 14px;
                     cursor: pointer;
                     border-radius: 6px;
                 }
             }
 
+            .empty-box {
+                padding: 80px 0 110px;
+            }
+
             .comment-list {
                 margin-bottom: 78px;
                 .comment-item {
diff --git a/pages/publish/index.vue b/pages/publish/index.vue
index d6b44cf..bd90b74 100644
--- a/pages/publish/index.vue
+++ b/pages/publish/index.vue
@@ -107,7 +107,6 @@
 
 <script setup>
 import zhCn from "element-plus/dist/locale/zh-cn.mjs"
-console.log("zhCn", zhCn)
 
 const state1 = ref("")
 
@@ -125,6 +124,21 @@ const getInit = () => {
 }
 
 const querySearch = (queryString, cb) => {
+    // https://offer.gter.net/miniprogram/InterviewExperience/schoolSearch
+    publishSchoolSearchHttp({ keyword: queryString }).then(res => {
+        // console.log("res", res)
+        if (res.code != 200) return
+        let data = res.data
+        console.log(data, "data")
+        data.forEach(element => {
+            console.log(element, "element")
+            element['value'] 
+        })
+        cb(data)
+    })
+
+    return
+
     const results = queryString ? restaurants.value.filter(createFilter(queryString)) : restaurants.value
     // call callback function to return suggestions
     cb(results)
@@ -137,13 +151,13 @@ const createFilter = queryString => {
 }
 const loadAll = () => {
     return [
-        {value: "vue", link: "https://github.com/vuejs/vue"},
-        {value: "element", link: "https://github.com/ElemeFE/element"},
-        {value: "cooking", link: "https://github.com/ElemeFE/cooking"},
-        {value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui"},
-        {value: "vuex", link: "https://github.com/vuejs/vuex"},
-        {value: "vue-router", link: "https://github.com/vuejs/vue-router"},
-        {value: "babel", link: "https://github.com/babel/babel"},
+        { value: "vue", link: "https://github.com/vuejs/vue" },
+        { value: "element", link: "https://github.com/ElemeFE/element" },
+        { value: "cooking", link: "https://github.com/ElemeFE/cooking" },
+        { value: "mint-ui", link: "https://github.com/ElemeFE/mint-ui" },
+        { value: "vuex", link: "https://github.com/vuejs/vuex" },
+        { value: "vue-router", link: "https://github.com/vuejs/vue-router" },
+        { value: "babel", link: "https://github.com/babel/babel" },
     ]
 }
 
diff --git a/tsconfig.json b/tsconfig.json
index e213c0b..84eb675 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,11 +1,11 @@
 {
   // https://nuxt.com/docs/guide/concepts/typescript
   "extends": "./.nuxt/tsconfig.json",
-  "compilerOptions": {
-    "baseUrl": ".",
-    "paths": {
-      "~/*": ["./*"],
-      "@/*": ["./*"]
-    }
-  }
+  // "compilerOptions": {
+  //   "baseUrl": ".",
+  //   "paths": {
+  //     "~/*": ["./*"],
+  //     "@/*": ["./*"]
+  //   }
+  // }
 }
\ No newline at end of file
diff --git a/utils/http.js b/utils/http.js
index bd0f983..1c8c291 100644
--- a/utils/http.js
+++ b/utils/http.js
@@ -1,54 +1,74 @@
+import axios from 'axios';
+import QS from 'qs';
 import { ElMessage } from "element-plus";
 
-const baseUrl = "https://interviewexperience.gter.net";
-// 指定后端返回的基本数据类型
 
-const fetch = async (url, options) => {
-    await nextTick(); //解决刷新页面useFetch无返回
-    url = url.indexOf('https://') > -1 ? url : baseUrl + url;
+axios.defaults.baseURL = 'https://interviewexperience.gter.net'
+axios.defaults.emulateJSON = true
+axios.defaults.withCredentials = true
 
-    options['headers'] = {
-        authorization: "7a89997c2ccd8cb5ed8cb20d843dafdd"
+axios.interceptors.request.use( //响应拦截
+    async config => {
+        // 开发时登录用的，可以直接替换小程序的 authorization
+        config['headers']['authorization'] = "pa5o1v493ed5mahrcio66267e2"
+        return config;
+    },
+    error => {
+        return Promise.error(error);
+    })
+// 响应拦截器
+axios.interceptors.response.use(response => {
+    if (response.status === 200) return Promise.resolve(response); //进行中        
+    else return Promise.reject(response); //失败       
+}, error => { // 服务器状态码不是200的情况    
+    if (error.response.status) {
+        switch (error.response.status) {
+            // 401: 未登录
+            case 401:
+                // goTologin()  // 跳转登录页面
+                break
+            default:
+        }
+        return Promise.reject(error.response);
     }
-    // 9c92af854f552bbd2aab43230bcf8438 headers authorization
+});
+
+/** 
+ * get方法，对应get请求 
+ * @param {String} url [请求的url地址] 
+ * @param {Object} params [请求时携带的参数] 
+ */
+const get = (url, params) => {
     return new Promise((resolve, reject) => {
-        useFetch(url, { ...options })
-            .then(({ data, error }) => {
-                if (error.value) {
-                    reject(error.value);
-                    return;
-                }
-                const value = data.value;
-                if (value.code === 201) {
-                    ElMessage({
-                        message: value.message,
-                        type: "error",
-                    });
-                }
-                resolve(value);
-
-            })
-            .catch((err) => {
-                reject(err);
-            });
+        axios.get(url, {
+            params,
+        }).then(res => {
+            resolve(res.data);
+        }).catch(err => {
+            reject(err.data)
+        })
     });
-};
+}
+/** 
+ * post方法，对应post请求 
+ * @param {String} url [请求的url地址] 
+ * @param {Object} params [请求时携带的参数] 
+ */
+const post = (url, params) => {
+    return new Promise((resolve, reject) => {
+        //是将对象 序列化成URL的形式，以&进行拼接   
+        axios.post(url, QS.stringify(params)).then(res => {
+            resolve(res.data);
+        }).catch(err => {
+            if (err.data.code == 401) {
+                resolve(err.data);
+            } else reject(err.data)
 
-export default new (class Http {
-    get(url, params) {
-        return fetch(url, { method: "get", params });
-    }
-
-    post(url, body) {
-        return fetch(url, { method: "post", body });
-    }
-
-    put(url, body) {
-        return fetch(url, { method: "put", body });
-    }
-
-    delete(url, body) {
-        return fetch(url, { method: "delete", body });
-    }
-})();
+        })
+    });
+}
 
+export default {
+    get,
+    post,
+}
\ No newline at end of file