搜索功能完善

2023-07-06 13:58:57 +08:00
parent d8e6771cfe
commit 9017864f82
13 changed files with 736 additions and 83 deletions
--- a/src/components/Home/SearchResultsList.vue
+++ b/src/components/Home/SearchResultsList.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="SearchResult" @click="goToProjectDeatil" style=";align-items:center;cursor: pointer;margin-top: 5px;display: flex;flex-direction: row;flex-wrap: nowrap">
+     <div style="width: 50px;height: 50px;">
+         <el-avatar  :size="50" :src="searchResult.projectIco"></el-avatar>
+     </div>
+      <div style="display: flex;flex-direction: column;flex-wrap: nowrap">
+          <div style="margin-left:10px;display: flex;flex-direction: row;flex-wrap: nowrap">
+              <span style="font-size: 14px;font-weight: bold">{{briefTitle}}</span>
+          </div>
+          <div style="margin-left:10px;">
+              <span style="font-size: 12px">{{briefContent}}</span>
+          </div>
+          <div style=";margin-left:10px;margin-top: 5px;display: flex;flex-direction: row;justify-content: space-between;flex-wrap: nowrap">
+              <div style="align-items: center;font-size: 12px;color: #9ca3af">
+                  <span>{{formatTime}}</span>
+              </div>
+              <div style="align-items: center;font-size: 12px;color: #9ca3af">
+                  <i class="el-icon-view"></i> <span>{{formatNumber(searchResult.lookCount)}}</span>
+              </div>
+              <div style="align-items: center;font-size: 12px;color: #9ca3af">
+                  <i class="el-icon-star-on"></i> <span>{{formatNumber(searchResult.startNum)}}</span>
+              </div>
+              <div style="margin-left: 10px;justify-content: space-between;display: flex;flex-direction:row;flex-wrap: nowrap;align-items: center;font-size: 12px;color: #9ca3af">
+                  <div style="width: 8px;height: 8px;background-color: #ffba00;border-radius: 50px"></div>
+                  <span style="margin-left: 5px">{{searchResult.categoryName}}</span>
+              </div>
+          </div>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+    name: "SearchResultsList",
+    props:{
+      searchResult:Object
+    },
+    data(){
+        return{
+        }
+    },
+    methods:{
+        formatNumber(num) {
+            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
+        },
+        goToProjectDeatil(){
+            this.$router.push({
+                path:'/ProjectDetail',
+                query: {
+                    id: this.searchResult.projectId,
+                    refresh: true
+                }})
+            // console.log(this.$route.query.id)
+        },
+    },
+    computed: {
+        // 对时间进行格式化
+        formatTime: function() {
+            if (this.searchResult) {
+                const dt = new Date(this.searchResult.submitTime)
+                const year=dt.getFullYear()
+                const month = dt.getMonth()
+                const date = dt.getDate()
+                return `${year}-${month}-${date}`
+            }
+            return '';
+        },
+        // 截取文章内容的前 35 个字，并加上省略号
+        briefContent: function() {
+            return this.searchResult.projectDescription.substr(0, 17) + '...';
+        },
+        briefTitle: function() {
+            return this.searchResult.projectTitle.substr(0, 10) + '...';
+        },
+
+    },
+}
+</script>
+
+<style scoped>
+.SearchResult:hover{
+    background-color: #eeeeee;
+    border-radius: 10px;
+}
+</style>