library-management-system/src/views/components/bookSwiper.vue

<template>
  <div>
    <swiper
      ref="swiperTitle"
      class="swiper-title"
      :options="swiperOptionTitle"
      :auto-update="true"
      :auto-destroy="true"
      :delete-instance-on-destroy="true"
      :cleanup-styles-on-destroy="true"
    >
      <swiper-slide
        v-for="(item, index) in tabListData"
        ref="swiperSlideItem"
        :key="'name' + index"
        class="swiper-slide-title"
      >
        <div
          class="tab-name"
          :class="{ active: index === swiperActiveIndex }"
          @click="handleSlidClickFun(index)"
        >
          {{ item.name }}
        </div>
      </swiper-slide>
    </swiper>
    <swiper
      ref="swiperContent"
      class="swiper-content"
      :options="swiperOptionContent"
      :auto-update="true"
      :auto-destroy="true"
      :delete-instance-on-destroy="true"
      :cleanup-styles-on-destroy="true"
    >
      <swiper-slide
        v-for="(item, index) in tabListData"
        :key="'content' + index"
        class="swiper-slide-content"
      >
        <el-table
          :data="bookList"
          stripe
          style="width: 100%"
          height="150"
        >
          <el-table-column
            prop="title"
            :label="swiperActiveIndex === 1 ? '书架' :'书名'"
          >
            <template slot-scope="scope">
              {{ swiperActiveIndex === 0 ? scope.row.title : scope.row.grid_name }}
            </template>
          </el-table-column>
          <el-table-column
            prop="downNum"
            label="出架册次"
            width="80"
            align="center"
          />
        </el-table>
      </swiper-slide>
    </swiper>
  </div>
</template>

<script>
import { FetchInitHotBookList, FetchInitHotShelfList } from '@/api/stockTask/index'
import { mapGetters } from 'vuex'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
export default {
  name: 'BookSwiper',
  components: { swiper, swiperSlide },
  props: {
  },
  data() {
    const _this = this
    return {
      swiperActiveIndex: 0,
      swiperOptionContent: {
        slidesPerView: 'auto',
        on: {
          slideChangeTransitionStart: function() {
            _this.swiperActiveIndex = this.activeIndex
            _this.swiperTitle.slideTo(this.activeIndex, 500, false)
          }
        }
      },
      swiperOptionTitle: {
        slidesPerView: 'auto',
        freeMode: true
      },
      tabListData: [{ name: '热门图书' }, { name: '热门架位' }],
      bookList: [],
      swiperParams: {},
      swiperShelfParams: {}
    }
  },
  computed: {
    ...mapGetters([
      'baseApi'
    ]),
    swiperContent() {
      return this.$refs.swiperContent.$el.swiper
    },
    swiperTitle() {
      return this.$refs.swiperTitle.$el.swiper
    }
  },
  mounted() {
    // if (this.swiperActiveIndex === 0) {
    //   this.getInitHotBookList()
    // } else {
    //   this.getInitHotShelfList()
    // }
  },
  methods: {
    handleSlidClickFun(index) {
      this.handleSlideToFun(index)
    },
    handleSlideToFun(index) {
      this.bookList = []
      this.swiperActiveIndex = index
      if (this.swiperActiveIndex === 0) {
        this.getInitHotBookList()
      } else {
        this.getInitHotShelfList()
      }
      this.swiperContent.slideTo(index, 500, false)
      this.swiperTitle.slideTo(index, 500, false)
    },
    getInitHotBookList() {
      const params = this.swiperParams
      FetchInitHotBookList(params).then(res => {
        this.bookList = res
      }).catch(() => {
      })
    },
    getInitHotShelfList() {
      const params = this.swiperShelfParams
      FetchInitHotShelfList(params).then(res => {
        this.bookList = res
      }).catch(() => {
      })
    }

  }
}
</script>

<style lang="scss" scoped>
.swiper-title{
  font-size: 14px;
  ::v-deep .swiper-wrapper{
    margin: 10px 0;
    border-bottom: 1px solid #EDEFF3;
  }
}
.swiper-slide-title {
	width: auto !important;
  margin-right: 20px;
  cursor: pointer;
	.tab-name {
		padding: 10px;
		&.active {
			color: #0348F3;
      border-bottom: 3px solid #0348F3;
		}
	}
}
</style>