mall4pc-bbc/pages/group-buy.vue

<template>
  <div class="list group-buy">
    <div class="content">
      <div class="list-banner">
        <img src="~/assets/images/group-banner.jpg" alt />
      </div>
      <div class="goods-list group-list">
        <ProdItem :pale-list="teamBuyingList" :list-type="1" />
        <!-- 页码 -->
        <!-- <div class="pagination">
          <div class="pages" v-if="page.pages >= 1">
            <a
              href="javascript:void(0);"
              class="item prev"
              :class="{default: page.current <= 1}"
              @click="getTeamBuyingList(page.current -1)"
            >上一页</a>
            <div v-for="(item,index) in page.rainbow" :key="index">
              <a
                href="javascript:void(0);"
                @click="getTeamBuyingList(item)"
                class="item"
                :class="{cur: page.current === item}"
                v-if="item !== '...'"
              >{{item}}</a>
              <span class="ellipsis" v-else>...</span>
            </div>

            <a
              href="javascript:void(0);"
              class="item next"
              :class="{default: page.current > page.pages - 1}"
              @click="getTeamBuyingList(page.current +1)"
            >下一页</a>
            <div class="go-page">
              到第
              <input type="text" class="page-input" />页
              <a href class="page-btn">GO</a>
            </div>
            <div class="total-num">
              共
              <span class="num">{{page.pages}}</span>条
            </div>
          </div>
        </div>-->
        <!-- /页码 -->

        <!-- 页码 -->
        <pagination v-model="current" :pages="pages" @changePage="getTeamBuyingList"></pagination>
        <!-- /页码 -->
      </div>
    </div>
  </div>
</template>

<script src='~/assets/js/load-transition'></script>
<script>
import ProdItem from '~/components/prod-item'
import PageUtil from '~/plugins/pageUtil'
import CategroySidebar from '~/components/categroy-sidebar'
import Pagination from '~/components/pagination'
export default {
  components: {
    ProdItem,
    Pagination
  },
  data () {
    return {
      teamBuyingList: [], //团购列表
      total: 0, // 总条
      pages: 0, // 总页数
      current: this.$route.query.current || 1, // 当前页数
      size: 12, // 每页显示多少条
    }
  },
  mounted () {
    // 设置网页标题
    document.title = this.$t('commonHead.groupDiscount')
    this.getTeamBuyingList(this.current) //团购列表
  },
  methods: {
    /**
     * 请求团购列表
     */
    getTeamBuyingList (current) {
      // this.$axios.get('/groupProd/page', {
      this.$axios.get('/search/page', {
        params: {
          current: current,
          size: 12,
          prodType: 1,
          isActive: 1 // 过滤掉活动商品
        }
      })
        .then((({ data }) => {
          this.teamBuyingList = data.records[0].products
          this.pages = data.pages
          // data.rainbow = PageUtil.rainbowWithDot(data.current, data.pages, 5)
          // this.page = data
        }))
    },
    /**
     * 分页
     */
    // changePage(value) {
    //   this.current = value
    //   this.getTeamBuyingList()
    // },
  },
}
</script>

<style scoped src='~/assets/css/list.css'></style>