mall-web-ssr/pages/mobile/center/user/cart/_key.vue

<template>
  <div class="mobile-search-goods mobile-content mobile-content-long">
    <search-header
      :placeholder="'请输入您要采购的型号'"
      :outerKeyword="outerKeyword"
      :useMatchRule="false"
      :expandClass="'normal'"
      :similarType="'code'"
      @searchAction="onSearch"></search-header>
    <ul>
      <li v-for="goods in goodsList">
        <component-item :item="goods" @cancatSeller="concatSeller"></component-item>
      </li>
    </ul>
    <link-user :infoObj="currentStoreInfo"
               :showLink="showLink"
               @closeAction="showLink = false"></link-user>
    <pull-up
      :allPage="allPage"
      :page="page"
      @pullUpAction="onPullUpAction"
      :searchMore="fetching"></pull-up>
  </div>
</template>
<script>
  import {LinkUser, SearchHeader} from '~components/mobile/base'
  import componentItem from '~components/mobile/search/componet-item'
  import { PullUp } from '~components/mobile/common'
  export default {
    layout: 'mobile',
    components: {
      LinkUser,
      SearchHeader,
      componentItem,
      PullUp
    },
    data () {
      return {
        outerKeyword: '',
        currentStoreInfo: {},
        showLink: false,
        page: 1,
        goodsList: []
      }
    },
    fetch ({ store, params }) {
      return Promise.all([
        store.dispatch('searchData/searchForListNew', {count: 10, keyword: params.key, page: 1, type: 'component'})
      ])
    },
    watch: {
      '$route.params.key': {
        handler: function (val) {
          this.outerKeyword = val || ''
        },
        immediate: true
      },
      'searchList': {
        handler: function (val) {
          if (val && val.stock && val.stock.content) {
            this.goodsList = [...this.goodsList, ...val.stock.content]
          }
        },
        immediate: true
      }
    },
    computed: {
      listData () {
        return this.$store.state.searchData.searchList.listNew
      },
      searchList () {
        return this.listData.data
      },
      fetching () {
        return this.listData.fetching
      },
      goods () {
        return this.searchList ? this.searchList.stock : {}
      },
      allPage () {
        return this.goods.total ? Math.ceil(this.goods.total / this.goods.size) : 0
      }
    },
    methods: {
      onSearch (searchObj) {
        if (searchObj.keyword) {
          this.$router.push(`/mobile/center/user/cart/${searchObj.keyword}`)
        }
      },
      concatSeller (item) {
        this.$http.get(`/api/store-service/stores?uuid=${item.storeid}`).then(res => {
          this.currentStoreInfo = res.data.enterprise
          this.showLink = true
        })
      },
      reloadList () {
        this.$store.dispatch('searchData/searchForListNew', {count: 10, keyword: this.$route.params.key, page: this.page, type: 'component'})
      },
      onPullUpAction () {
        this.page++
        this.reloadList()
      }
    }
  }
</script>
<style lang="scss" scoped>
  .mobile-search-goods {
    ul {
      li {
        border-bottom: .2rem solid #f1f3f6;
      }
    }
  }
</style>