mall4pc-bbc/pages/shopList.vue

<template>
  <div class="list flash-sale">
    <div class="content">
      <div class="list-banner" v-if="shopList.length">
        <img src="~/assets/images/shop-list.jpg" alt />
      </div>
      <div class="goods-list shop-list">
        <!-- 全部 -->
        <ShopItem v-if="shopList.length" :shop-list="shopList" />
        <div class="empty" v-else>
          <div class="img">
            <img src="~/assets/images/emptyPic/search-empty.png" alt />
          </div>
          <div class="action">
            <div class="text">{{$t('shopInfo.noRelevant')}}</div>
            <nuxt-link to="/" class="btn">{{$t('backToHome')}}</nuxt-link>
          </div>
        </div>
        <!-- 页码 -->
        <pagination v-model="current" :pages="pages" @changePage="getSearchShopPage"></pagination>
        <!-- /页码 -->
      </div>
    </div>
  </div>
</template>

<script>
import PageUtil from '~/plugins/pageUtil'
import ShopItem from '~/components/shop-item'
import Pagination from '~/components/pagination'
export default {
  components: {
    ShopItem,
    Pagination
  },
  watchQuery: ['fansCount', 'intro', 'prodCount', 'shopId', 'shopLogo', 'shopName', 'current'],
  data () {
    return {
      shopList: [],  //店铺列表
      fansCount: 0, //粉丝数量
      intro: '',  //店铺简介
      prodCount: 0,  //商品数量
      shopId: null,  //店铺id
      shopLogo: '', //店铺logo
      shopName: this.$route.query.shopName || '',  //店铺名称
      current: this.$route.query.current || 1, // 当前页数 // 当前页数
      type: this.$route.query.type || '', // 店铺类型
      pages: 1, // 总页数
    }
  },
  /**
   * 请求店铺接口 | 在页面加载前加载数据
   * @param query
   */
  async asyncData ({ app, query }) {
    var param = Object.assign({
      fansCount: parseInt(query.fansCount) || 0, //粉丝数量
      intro: query.intro || '',  //店铺简介
      prodCount: parseInt(query.prodCount) || 0,  //商品数量
      shopId: parseInt(query.shopId) || null,  //店铺id
      shopLogo: query.shopLogo || '', //店铺logo
      shopName: query.shopName || '',  //店铺名称
      current: parseInt(query.current) || 1,  //当前页
      size: 20,
      type: query.type || ''
    }, param)
    return await app.$axios.get('/shop/searchShops', {
      params: param
    }).then(({ data }) => {
      // data.rainbow = PageUtil.rainbowWithDot(data.current, data.pages, 5)
      // return data
      param.pages = data.pages
      param.shopList = data.records
      return param
    })
  },
  mounted () {
    document.title = this.$i18n.t('shopInfo.storeList')
  },
  methods: {
    /**
     * 请求店铺列表
     */
    getSearchShopPage (current) {
      this.$router.push({
        path: '/shopList',
        query: {
          fansCount: this.fansCount || '',  //粉丝数量
          intro: this.intro || '',  //店铺介绍
          prodCount: this.prodCount || '',  //商品数量
          shopId: this.shopId || null,  //店铺id
          shopLogo: this.shopLogo || '', //店铺logo
          shopName: this.shopName || '',  //店铺名称
          current: this.current,
          size: 20,
          type: this.type || ''
        }
      })
    },

  },
}
</script>

<style scoped src='~/assets/css/list.css'></style>
<style scoped>
.empty {
  padding-top: 140px;
}
</style>