novelQuick/src/components/library/index.ux

<import name="book-list" src="./book-list"></import>
<import name="search-input-bar" src="../search-book/search-input-bar"></import>

<template>
  <div class="page-container">
    <search-input-bar onsearch="search" is-click="{{ true }}"></search-input-bar>
    <book-list
      list="{{library.list}}"
      show-load="{{library.load}}"
      onload-more="queryLibraryList"
      rank-list="{{rankList}}"
      hot-list="{{hotList}}"
      brand="{{ brand }}"
    >
      <div class="sub-container">
        <swiper autoplay="true" class="swiper">
          <image
            class="swiper-image"
            src="{{$item.novelImg}}"
            for="bannerList"
            onclick="goToDetail($item)"
          ></image>
        </swiper>
      </div>
    </book-list>
  </div>
</template>

<script>

import fetch from '@system.fetch'
import { bookListData } from '../../assets/data/book-list.js'
import ad from '@service.ad'
export default {
  props: [],
  data: {
    library: {
      list: [],
      pageNo: 1,
      pageSize: 10,
      total: null,
      load: true,
    },
    swiperList: bookListData,
    rankList: [],//bookListData.slice(0, 3),
    content: '', // 存储文本内容
    bannerList:[],
    hotList:[], // 热门图书
    bookList:[],// 图书列表
    bannerAd: null,
    adUnitId: "278eae7418b04abbb5926847ed42271e", // 这个id是vivo的com.quickapp.center创建的，需要修改manifest的package才能预览出效果
    brand:'vivo',// 当前手机品牌  vivo OPPO xiaomi honor
  },
  search(info) {
    let searchText = info.detail
    this.toSearch(searchText)
  },
  toSearch(text) {
    // $utils.route2theUrl('pages/search', { initValue: text })
    $utils.route2theUrl('pages/search-book', { initValue: text })
  },
  initAd() {
    try {
      this.bannerAd = ad.createBannerAd({  // 使用require方式避免在不支持广告接口的厂商运行时报错
        adUnitId: this.adUnitId
      })
      this.bannerAd.onLoad(() => {     // 监听广告加载
        console.log('onLoad event emit')
        this.bannerAd.show()
      })
      this.bannerAd.onError((err) => { // 监听广告出错
        console.log('onError event emit', err)
      })
      this.bannerAd.onClose((res) => { // 监听广告关闭
        console.log('onClose event emit', res)
      })
    } catch (e) {
      console.log('initAd',e)
    }
  },
  async onInit() {
    this.brand = await $utils.getStorage('brand')
    console.log(ad.getProvider())
    this.initAd()
    this.queryLibraryList(1)
    const res = await $apis.common.novelBanner({bannerType: 8, pageNum: 1,pageSize: 10})
    this.bannerList = res.data.result.list
    const res1 = await $apis.common.novelModulePage({moduleType: 8, pageNum: 1,pageSize: 10,statu:1})
    this.hotList = res1.data.result.list.slice(3)
    this.rankList = res1.data.result.list.slice(0, 3)
    // 国内
    const res2 = await $apis.common.novelModulePage({moduleType: 8, ageNum: 1,pageSize: 10})
    this.library.list = res2.data.result.list
    this.library.total = res2.data.result.total
    this.library.pageSize = res2.data.result.pageSize
  },
  /* -------------------SelfCustomEvent------------------ */
  queryLibraryList(pageNo) {
    if (!isNaN(pageNo) && pageNo !== this.library.pageNo) {
      return
    }
    if (
      this.library.total &&
      (this.library.pageNo - 1) * this.library.pageSize >= this.library.total
    ) {
      this.library.load = false
      return
    }
    this.queryFn()
  },
  async queryFn() {
    /* 
    开发时，根据pageNo和pageSize查询列表
    返回total和对应pageNo的list
    */
   console.log('queryFn',this.library)
    // this.library.total = 5
    // 模拟查询
    let total = this.library.pageNo * this.library.pageSize
    let end = this.library.total < total ? this.library.total : total
    let start = total - this.library.pageSize
    const res =  await $apis.common.novelModulePage({moduleType: 8, pageNum: this.library.pageNo,pageSize: 10}) //bookListData.slice(start, end)
    let concatList = res.data.result.list
    // 更新列表
    this.library.list = this.library.list.concat(concatList)
    this.library.pageNo++
    console.log('3333-----',total,end,start,concatList)
  },
  goToDetail(item) {
    console.log(item)
    // 根据id查询详情
    $utils.route2theUrl('pages/book-detail', { info: JSON.stringify(item) })
  }
}
</script>

<style lang="less">
@import '../../assets/styles/index.less';

.sub-container {
  width: 100%;
  .flex-box-mixins(column, flex-start, flex-start);
}
.swiper {
  indicator-selected-color: rgba(255, 255, 255, 1);
  indicator-color: rgba(255, 255, 255, 0.5);
  indicator-size: 12.5px;
  width: 100%;
  height: 400px;
  margin: @gap-4 0;
  .swiper-image {
    border-radius: 10px;
  }
}
</style>