From 88ba558e3355750a67b29641a6186542207d0151 Mon Sep 17 00:00:00 2001
From: MiraiMagician <158348508@qq.com>
Date: Thu, 10 Jun 2021 14:10:40 +0800
Subject: [PATCH] =?UTF-8?q?searchByTag=E5=8A=9F=E8=83=BD=E5=89=8D=E7=AB=AF?=
 =?UTF-8?q?=E5=AE=9E=E7=8E=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/search.js        |  13 ++++-
 src/router/index.js      |   6 ++
 src/view/Search.vue      |  11 ++--
 src/view/Tag.vue         | 118 +++++++++++++++++++++++++++++++++++++++
 src/view/post/Detail.vue |  16 +++---
 src/view/post/Index.vue  |  22 ++++----
 6 files changed, 160 insertions(+), 26 deletions(-)
 create mode 100644 src/view/Tag.vue

diff --git a/src/api/search.js b/src/api/search.js
index 5482d81..7ba2748 100644
--- a/src/api/search.js
+++ b/src/api/search.js
@@ -2,7 +2,18 @@ import request from '@/util/request'
 
 export function searchByKeyword(query){
     return request({
-        url: '/search',
+        url: '/search/searchList',
+        method: 'get',
+        params:{
+            keyword: query.keyword,
+            pageNum: query.pageNum,
+            pageSize: query.pageSize
+        }
+    })
+}
+export function searchByTagName(query){
+    return request({
+        url: '/search/searchByTag',
         method: 'get',
         params:{
             keyword: query.keyword,
diff --git a/src/router/index.js b/src/router/index.js
index a57a416..9196205 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -51,6 +51,12 @@ const routes = [{
     component: () => import('@/view/Search'),
     meta: {title: '检索'}
   },
+  {
+    name: 'tag',
+    path: '/tag',
+    component: () => import('@/view/Tag'),
+    meta: {title: '检索'}
+  },
   {
       path: '*',
       redirect: '/404',
diff --git a/src/view/Search.vue b/src/view/Search.vue
index 7ac4bd2..9a9a868 100644
--- a/src/view/Search.vue
+++ b/src/view/Search.vue
@@ -2,7 +2,7 @@
   <div>
     <el-card shadow="never">
       <div slot="header" class="clearfix">
-        检索到 <code>{{ list.length }}</code>
+        检索到 <code>{{ query.total }}</code>
         条关于 <code class="has-text-info">{{ query.keyword }}</code> 的记录
       </div>
       <div>
@@ -41,9 +41,9 @@
                     :key="index"
                     class="tag is-hidden-mobile is-success is-light mr-1"
                   >
-                    <router-link :to="{ name: 'tag', params: { name: tag.name } }">
-                      {{ "#" + tag.name }}
-                    </router-link>
+                    <span @click="search(tag.name)" style="cursor:pointer;">
+                          {{ "#" + tag.name }}
+                    </span>
                   </span>
 
                   <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
@@ -105,6 +105,9 @@ export default {
         this.query.pageSize = data.size
         this.query.pageNum = data.current
       })
+    },
+    search(tagName) {
+      this.$router.push({ path: '/tag?key=' + tagName })
     }
   }
 }
diff --git a/src/view/Tag.vue b/src/view/Tag.vue
new file mode 100644
index 0000000..c6b3aa3
--- /dev/null
+++ b/src/view/Tag.vue
@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <el-card shadow="never">
+      <div slot="header" class="clearfix">
+        检索到 <code>{{ query.total }}</code>
+        条关于 <code class="has-text-info">{{ '#'+query.keyword }}</code> 的记录
+      </div>
+      <div>
+        <article v-for="(item, index) in list" :key="index" class="media">
+          <div class="media-left">
+            <figure class="image is-48x48">
+              <img 
+              :src="item.avatar"
+              style="border-radius: 5px"
+              > 
+            </figure>
+          </div>
+          <div class="media-content">
+            <div class="">
+              <p class="ellipsis is-ellipsis-1">
+                <el-tooltip class="item" effect="dark" :content="item.title" placement="top">
+                  <router-link :to="{name:'post-detail',params:{id:item.id}}">
+                    <span class="is-size-6">{{ item.title }}</span>
+                  </router-link>
+                </el-tooltip>
+              </p>
+            </div>
+            <nav class="level has-text-grey is-mobile  is-size-7 mt-2">
+              <div class="level-left">
+                <div class="level-left">
+                  <router-link class="level-item" :to="{ path: `/member/${item.username}/home` }">
+                    {{ item.alias }}
+                  </router-link>
+
+                  <span class="mr-1">
+                    发布于:{{ dayjs(item.createTime).format("YYYY/MM/DD") }}
+                  </span>
+
+                  <span
+                    v-for="(tag, index) in item.tags"
+                    :key="index"
+                    class="tag is-hidden-mobile is-success is-light mr-1"
+                  >
+                    <span @click="search(tag.name)" style="cursor:pointer;">
+                        {{ "#" + tag.name }}
+                    </span>
+                  </span>
+
+                  <span class="is-hidden-mobile">浏览:{{ item.view }}</span>
+                </div>
+              </div>
+            </nav>
+          </div>
+          <div class="media-right" />
+        </article>
+      </div>
+
+      <!--分页-->
+      <pagination
+        v-show="query.total > 0"
+        :total="query.total"
+        :page.sync="query.pageNum"
+        :limit.sync="query.pageSize"
+        @pagination="fetchList"
+      />
+    </el-card>
+  </div>
+</template>
+
+<script>
+import { searchByTagName } from '@/api/search'
+import Pagination from '@/component/Pagination'
+
+export default {
+  name: 'Tag',
+  components: { Pagination },
+  watch: {
+    "$route": {
+      handler(route) {
+        this.query.keyword = route.query.key;
+        this.fetchList();
+      }
+    }
+  },
+  data() {
+    return {
+      list: [],
+      query: {
+        keyword: this.$route.query.key,
+        pageNum: 1,
+        pageSize: 10,
+        total: 0
+      }
+    }
+  },
+  created() {
+    this.fetchList()
+  },
+  methods: {
+    fetchList() {
+      searchByTagName(this.query).then(value => {
+        const { data } = value
+        this.list = data.records
+        this.query.total = data.total
+        this.query.pageSize = data.size
+        this.query.pageNum = data.current
+      })
+    },
+    search(tagName) {
+      this.$router.push({ path: '/tag?key=' + tagName })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/view/post/Detail.vue b/src/view/post/Detail.vue
index 977d84d..cf3b955 100644
--- a/src/view/post/Detail.vue
+++ b/src/view/post/Detail.vue
@@ -52,15 +52,10 @@
           <div class="level-left">
             <p class="level-item">
               <b-taglist>
-                <router-link
-                  v-for="(tag, index) in tags"
-                  :key="index"
-                  :to="{ name: 'tag', params: { name: tag.name } }"
-                >
-                  <b-tag type="is-info is-light mr-1">
-                    {{ "#" + tag.name }}
-                  </b-tag>
-                </router-link>
+                <span v-for="(tag, index) in tags" :key="index"
+                  @click="search(tag.name)" style="cursor:pointer;">
+                  {{ "#" + tag.name }}
+                </span>
               </b-taglist>
             </p>
           </div>
@@ -199,6 +194,9 @@ export default {
     unliking(id){
       this.liked = false;
       this.handleunLike(id);
+    },
+    search(tagName) {
+      this.$router.push({ path: '/tag?key=' + tagName })
     }
   },
 };
diff --git a/src/view/post/Index.vue b/src/view/post/Index.vue
index 9e7bff2..3247beb 100644
--- a/src/view/post/Index.vue
+++ b/src/view/post/Index.vue
@@ -53,11 +53,9 @@
                         :key="index"
                         class="tag is-hidden-mobile is-success is-light mr-1"
                       >
-                        <router-link
-                          :to="{ name: 'tag', params: { name: tag.name } }"
-                        >
+                        <span @click="search(tag.name)" style="cursor:pointer;">
                           {{ "#" + tag.name }}
-                        </router-link>
+                        </span>
                       </span>
 
                       <span class="is-hidden-mobile">{{ $t('post.view') }}:{{ item.view }}</span>
@@ -118,11 +116,9 @@
                         :key="index"
                         class="tag is-hidden-mobile is-success is-light mr-1"
                       >
-                        <router-link
-                          :to="{ name: 'tag', params: { name: tag.name } }"
-                        >
+                        <span @click="search(tag.name)" style="cursor:pointer;">
                           {{ "#" + tag.name }}
-                        </router-link>
+                        </span>
                       </span>
 
                       <span class="is-hidden-mobile">{{ $t('post.view') }}:{{ item.view }}</span>
@@ -183,11 +179,9 @@
                         :key="index"
                         class="tag is-hidden-mobile is-success is-light mr-1"
                       >
-                        <router-link
-                          :to="{ name: 'tag', params: { name: tag.name } }"
-                        >
+                        <span @click="search(tag.name)" style="cursor:pointer;">
                           {{ "#" + tag.name }}
-                        </router-link>
+                        </span>
                       </span>
 
                       <span class="is-hidden-mobile">{{ $t('post.view') }}:{{ item.view }}</span>
@@ -249,12 +243,16 @@ export default {
         this.page.total = data.total;
         this.page.size = data.size;
         this.articleList = data.records;
+        this.page.tab = data.tab;
       });
     },
     handleClick(tab) {
       this.page.current = 1;
       this.init(tab.name);
     },
+    search(tagName) {
+      this.$router.push({ path: '/tag?key=' + tagName })
+    }
   },
 };
 </script>
-- 
Gitee