proginn-frontend/pages/user/searchTopic/index.vue

<template>
  <div class="topicSearch">
    <div class="searchInWeb" v-if="!mobile">
      <div class="title">
        为您找到 {{dataList.length}} 个  "{{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>
    <div class="searchInH5" v-else>
      <div class="title">
        搜索包含"{{page.keyword}}"的文章
      </div>
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="listArea" :class="{noneInWx: !$deviceType.app}">
        <div style="text-align: center" v-if="firstLoading">
          <van-loading size="24px">加载中...</van-loading>
        </div>
        <van-list
          v-else
          v-model="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="onLoad"
          :immediate-check="false"
          class="list"
        >
          <TopicCell
            v-for="(art, index) of dataList"
            :art="art"
            :mobile="mobile"
            :info="art.ownerInfo"
            :key="art.id + 'art' + index"
            :formatPublichTime="formatPublichTime"
            :left="0"
          />
        </van-list>
      </van-pull-refresh>

    </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,
        finished: false,
        refreshing: false,
        firstLoading: false, //移动端加载loading
        isLoading: 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() {
        if (this.isLoading) {
          return
        }
        this.loading = true
        this.isLoading = 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 list = data.list || []

            if (this.page.page === 1 || !this.mobile) {
              this.dataList = [ ...list ]
            } else {
              this.dataList = [ ...this.dataList, ...list ]
            }
            if (this.mobile) {
              this.page.page += 1
            }
            if (this.page.total <= this.dataList.length) {
              this.finished = true
            }
            this.error = false
          }
        }).finally(() => {
          this.firstLoading = false
          this.refreshing = false
          this.isLoading = false
          this.$nextTick(() => {
            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 ""
        }
      },
      onLoad() {
        this.getList()
      },
      /** 移动端下拉刷新 **/
      onRefresh() {
        console.log("refresh")
        // 清空列表数据
        this.finished = false;
        this.page.page = 1
        this.page.total = 0
        this.onLoad();
      },
    },
  };
</script>
<style lang='scss' scoped>
  @import "../../../assets/css/scssCommon";
  .topicSearch {

    .searchInWeb {
      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;
      }
    }
    .searchInH5 {
      width: 100vw;
      min-width: 100vw;
      margin-top: -20px;
      .title {
        padding-left: pxtovw(10);
        height: pxtovw(40);
        line-height: pxtovw(40);
      }
      .list {
        background-color: #fff;
        height: calc(100% - pxtovw(40));
        padding: pxtovw(10);
      }
    }
  }
</style>