proginn-frontend/kaifain_v2/pages/search.vue

<template lang="pug">
  .view.search-result#view
    Topnav(
      :q="q"
      :fixed="topnavFixed"
      @search-change="onSearchChange"
      @publish-click="connectPopupVisible = true"
      )
    .main
      Toolbar(
        :cities="cities"
        :city-id.sync="cityId"
        :sort-type.sync="sortType"
        :is-choice.sync="isChoice"
        )
      .container.is-content
        .hits-msg 为您找到 {{solutionTotal}} 个 "{{q}}" 解决方案
      #solution-list.list.container.is-content
        SolutionCell(
          v-for="row in solutionList"
          :key="row.hash_id"
          :data="row"
          )
      Pagination(
        mode="query"
        :page="page || 1"
        :total="solutionTotal"
        )

    KaifainFooter(:data="footer")
    ConnectUs(
      source="开发屋-搜索"
      :isShowToast="connectPopupVisible"
      @close="connectPopupVisible = false"
      )

</template>

<script lang="ts">
import Vue from 'vue'
import Topnav from '../components/Topnav.vue'
import Carousel from '../components/Carousel.vue'
import SearchBox from '../components/SearchBox.vue'
import CategoryNav from '../components/CategoryNav.vue'
import Toolbar from '../components/Toolbar.vue'
import SolutionCell from '../components/SolutionCell.vue'
import Pagination from '../components/Pagination.vue'
import { listBanners, listSearchKeywords, getInitParameters } from '../apis/common'
import { listSolutions } from '../apis/solution'
import { SolutionListMixin } from '../mixins/solution'
import { scrollToElement } from '../utils/misc'
import { genDocumentFooterData } from '../helpers/seoHelper'

import ConnectUs from '@/components/common/connectUs.vue'
import KaifainFooter from '@/components/SeoFooter.vue'

export default SolutionListMixin.extend({
  name: 'Search',
  components: {
    Topnav,
    Carousel,
    SearchBox,
    CategoryNav,
    Toolbar,
    SolutionCell,
    Pagination,
    ConnectUs,
    KaifainFooter
  },

  layout: 'kaifain_v2',

  head() {
    return {
      title: `${this.q} - 开发屋搜索`
    }
  },

  data() {
    return {
      topnavFixed: true,
      connectPopupVisible: false
    }
  },

  watch: {
    ['$route.query.page'](val) {
      if (val) {
        this.getSolutionList({
          page: ~~val,
          updateUrl: false
        })
          .then(() => {
            scrollToElement('#view')
          })
      }
    }
  },

  async asyncData(ctx: any) {
    const { store, query, error } = ctx
    const {
      q = '',
      page = 0,
      sort = 0,
      city_id,
      is_choice
    } = query as any

    if (!store.state.kaifain.inited) {
      await store.dispatch('parameters:load')
    }

    const { cities, classes, serviceTypes } = store.state.kaifain
    const solutionRes = await listSolutions({
      cat_id: undefined,
      q,
      sort,
      city_id,
      is_choice: is_choice ? 1 : undefined,
      page: ~~page || 1,
      size: 10
    })

    if (!solutionRes) {
      throw error({ statusCode: 404, message: 'Post not found (no data)' })
    }

    const footer = genDocumentFooterData({
      ctx,
      classes
    })

    return {
      q,
      page: ~~page,
      sortType: ~~sort,
      cityId: city_id || null,
      isChoice: !!is_choice || false,
      cities,
      classes,
      serviceTypes,
      solutionList: solutionRes.list || [],
      solutionTotal: ~~solutionRes.total,
      footer
    }
  },

  methods: {
    async onSearchChange(val) {
      if (!val) {
        return
      }

      this.q = val
      await this.getSolutionList({
        reset: true
      })
    }
  }
})
</script>

<style lang="scss">
.kaifain-view {
  .search-result {
    .main {
      padding-top: 54px;
      min-height: 720px;
    }

    .hits-msg {
      color: #444;
      font-size: 0.8125rem;
      font-weight: 500;
      padding: 1.25rem 0.75rem 0.75rem;
    }
  }
}
</style>