新增技术圈搜索

components/user/jishuin/topicCell.vue

@@ -1,5 +1,6 @@
 <template>
-  <div class="topicCell" :class="{topicCellMobile: mobile}" @click="clickArt(art, index)">
+  <div class="topicCell" :class="{topicCellMobile: mobile}" @click="clickArt(art, index)" :style="{marginLeft:
+  left+'px'}">
     <div class="leftArea" :class="{noePic: !art.cover_url}">
       <div class="topicTitle">
         {{art.title}}
@@ -34,7 +35,7 @@
 
 <script>
   export default {
-    props: [ "art", "formatPublichTime", "mobile", "info" ],
+    props: [ "art", "formatPublichTime", "mobile", "info", 'left' ],
     components: {},
     data() {
       return {

pages/user/searchTopic/index.vue

@@ -0,0 +1,178 @@
+<template>
+  <div class="topicSearch">
+    <div class="title">
+      搜索包含"{{page.keyword}}"的文章
+    </div>
+    <div class="list" v-loading="loading">
+      <TopicCell
+        v-for="(art, index) of dataList"
+        :art="art"
+        :mobile="false"
+        :info="art.ownerInfo"
+        :key="art.id + 'art' + index"
+        :formatPublichTime="formatPublichTime"
+        :left="-20"
+      />
+    </div>
+
+    <div class="pagination">
+      <el-pagination background layout="prev, pager, next" :total="page.total"
+        :page-size="page.size" @current-change="pageChange"></el-pagination>
+    </div>
+  </div>
+</template>
+<script>
+  import TopicCell from "@/components/user/jishuin/topicCell"
+  import moment from "moment"
+
+  export default {
+    components: { TopicCell },
+    head() {
+      const {
+        canonical = "", title = "", keywords = "", description = "", h1 = ""
+      } = this.seoInfo
+      return {
+        title: title,
+        meta: [ {
+          'name': 'keywords',
+          'content': keywords
+        }, {
+          'name': 'description',
+          'content': description
+        }, {
+          'name': 'h1',
+          'content': h1
+        } ],
+        script: [ {
+          src: "https://res.wx.qq.com/open/js/jweixin-1.2.0.js",
+        },
+          {
+            src: "https://hm.baidu.com/hm.js?18455f493c982100e5a82ec978a8d06e"
+          },
+          {
+            src: "https://g.alicdn.com/de/prismplayer/2.8.2/aliplayer-h5-min.js",
+          }
+        ],
+        link: [ {
+          rel: "canonical",
+          href: canonical
+        }, {
+          rel: "stylesheet",
+          href: "https://g.alicdn.com/de/prismplayer/2.8.2/skins/default/aliplayer-min.css"
+        }
+        ]
+      };
+    },
+    async asyncData({ $axios, params, req, app }) {
+      const { headers: { host }, url } = req
+      //拼接canonical
+      let canonical = ""
+      if (host.indexOf('local') !== -1) {
+        canonical = 'http://' + host + url
+      } else {
+        canonical = 'https://' + host + url
+      }
+      return {
+        title: `技术圈-程序员客栈`,
+        mobile: app.$deviceType.isMobile(),
+        seoInfo: {
+          title: `技术圈-程序员客栈`,
+          keywords: `技术圈-程序员客栈`,
+          description: `技术圈-程序员客栈`,
+          h1: '/',
+          canonical
+        }
+      }
+    },
+    data() {
+      return {
+        baseUrl: "",
+        jishuBaseUrl: "",
+        keyword: "",
+        dataList: [],
+        page: {
+          keyword: "",
+          page: 1,
+          pageSize: 20,
+          total: 0,
+        },
+        loading: false
+      };
+    },
+    computed: {
+
+    },
+    created() {
+      this.page.keyword = this.$route.query.keyword || ''
+      this.baseUrl = this.$store.state.domainConfig.siteUrl;
+      this.jishuBaseUrl = this.$store.state.domainConfig.jishuinUrl;
+    },
+    mounted() {
+      this.getList()
+    },
+    methods: {
+      getList() {
+        this.loading = true
+        this.$axios.post('/api/community/topicList/search', this.page).then(res => {
+          if (Number(res.data.status) === 1) {
+            let data = res.data.data
+            this.page.total = data.total
+            let dataList = data.list || []
+            this.dataList = [...dataList]
+            this.page.page += 1
+          }
+        }).finally(() => {
+          this.loading = false
+        })
+      },
+      pageChange(i) {
+        this.page.page = i
+        this.getList()
+      },
+      formatPublichTime(ts) {
+        try {
+          ts = moment(ts).toDate().getTime()
+          let now = new Date().getTime()
+          let fromNow = Math.floor((now - ts) / 1000)
+          if (fromNow < 5 * 60) {
+            return "刚刚";
+          } else if (fromNow < 60 * 60) {
+            return Math.floor(fromNow / 60) + "分钟前";
+          } else if (fromNow < 60 * 60 * 24) {
+            return Math.floor(fromNow / 3600) + "小时前";
+          } else if (fromNow < 60 * 60 * 24 * 10) {
+            return Math.floor(fromNow / 86400) + "天前";
+          } else {
+            return moment(ts).format("YYYY-MM-DD HH:mm")
+          }
+        } catch ( e ) {
+          console.log(e)
+          return ""
+        }
+      },
+    },
+  };
+</script>
+<style lang='scss' scoped>
+  .topicSearch {
+    background-color: #fff;
+    width: 800px;
+    min-width: 800px;
+    margin: 20px auto 20px auto;
+    padding: 20px;
+
+    .title {
+      margin-top: 20px;
+    }
+
+    .list {
+      margin-top: 20px;
+      min-height: 300px;
+    }
+
+    .pagination {
+      margin-top: 70px;
+      text-align: center;
+    }
+  }
+</style>