quickapp_front/src/views/Category/index.ux

<import name="x-book" src="../../components/book/book.ux"></import>
<import name="x-loading" src="../../components/loading/loading.ux"></import>

<template>
  <div class="category-wrap">
    <div class="page_title"><text>分类</text></div>
    <div class="tab_bar">
      <div class="filter-item">
        <div class="filter-item__list">
          <block for="channel">
            <div class="filter-item_warp">
              <text
                class="filter-item__item {{$item.key === filter.channel_id ? 'cur_bar' : ''}}"
                @click="filterChange('channel_id', $item.key)"
                >{{ $item.name }}</text
              >
              <text
                class="choose-bar"
                show="{{$item.key === filter.channel_id }}"
              ></text>
            </div>
          </block>
          <div class="filter-item_warp" @click="toPage('Free')">
            <text>限时免费</text>
          </div>
        </div>
      </div>
    </div>

    <list class="list-content" @scrollbottom="onReachBottom">
      <!-- <list-item type="tab" class="tab_bar"> </list-item> -->

      <!-- <list-item type="search" class="search-bar">
        <div class="search-bar__wrap">
          <input
            id="search"
            type="text"
            enterkeytype="search"
            placeholder="请输入书名或者作者"
            @enterkeyclick="bookSearch"
          />
          <image
            src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/search.png"
          ></image>
        </div>
      </list-item> -->
      <list-item type="filter" class="filter-wrap">
        <div class="filter-item">
          <!-- <text class="filter-item__name">类型</text> -->
          <div class="filter-item__list">
            <block
              for="(category[filter.channel_id] && category[filter.channel_id].children)"
            >
              <text
                class="filter-item__item {{$item.id === filter.category_id ? 'cur': ''}}"
                @click="filterChange('category_id', $item.id)"
                >{{ $item.name }}</text
              >
            </block>
          </div>
        </div>
        <div class="filter-item">
          <!-- <text class="filter-item__name">是否完结</text> -->
          <div class="filter-item__list">
            <block for="status">
              <text
                class="filter-item__item {{$item.value === filter.status ? 'cur' : ''}}"
                @click="filterChange('status', $item.value)"
                >{{ $item.name }}</text
              >
            </block>
          </div>
        </div>
      </list-item>
      <list-item type="loading" if="!list.length">
        <x-loading text="{{loadingText}}" empty="{{empty}}"></x-loading>
      </list-item>
      <block for="list">
        <list-item
          type="books-item"
          class="books-item__wrap {{$idx === 0 ? 'book-item__wrap--first' : ''}}"
        >
          <x-book multi="{{true}}" width="{{150}}" book="{{$item}}">
            <div class="book-info">
              <text class="name">{{ $item.book_name }}</text>
              <text class="intro">{{ $item.book_summary }}</text>
              <!-- <text class="status">豪门虐情 完结</text>
              <text class="words">字数：1231231</text>
              <div class="update">
                <text>最新：</text>
                <text class="lastest">第213章 我是最后一章</text>
                <image src="../../assets/imgs/book-vip.png"></image>
              </div> -->
            </div>
          </x-book>
        </list-item>
      </block>
      <list-item style="height:120px;"></list-item>
    </list>
  </div>
</template>

<script>
import { getCategory, getBooksList } from '../../api'
import { pageLoad } from '../../helper'
import storage from '@system.storage'
import router from '@system.router'
export default {
  data() {
    return {
      channel: [],
      category: [],
      list: [],
      status: [
        {
          name: '完结',
          value: 1
        },
        {
          name: '连载',
          value: 0
        }
      ],
      filter: {
        key: '',
        channel_id: '',
        category_id: '',
        order_field: 'recommend_index',
        order_seq: 'asc',
        page_size: 100,
        page: 1,
        status: 1
      },
      meta: {},
      empty: false,
      loadingText: '加载ing...'
    }
  },
  onReachBottom() {
    // 请求更多数据
    this.getBooksArray()
  },
  async getCategory() {
    this.category = this.initCategory(await getCategory())
    console.log("this.category:", this.category);
    await this.initChannel(this.category)
    this.getBooksArray()
  },
  async initChannel(category) {
    this.filter.channel_id = +(await storage.get({ key: 'sex' })).data
    this.filter.category_id = category[this.filter.channel_id].id
    this.channel = category.map((c, i) => {
      return {
        name: c.name,
        id: c.id,
        key: i
      }
    });
    console.log("this.channel:", this.channel);
  },
  initCategory(category) {
    category.forEach(cate => {
      cate.children.unshift({
        id: cate.id,
        name: '全部'
      })
    })
    return category
  },
  filterChange(field, value) {
    this.filter[field] = value
    if (field === 'channel_id')
      this.filter.category_id = this.category[value].id
    this.getBooksArray(false)
  },
  bookSearch(iptValue) {
    this.filter.key = iptValue.value
    this.getBooksArray(false)
    this.$element('search').focus({ focus: false })
  },
  getBooksArray(isLoad = true) {
    this.empty = false
    this.loadingText = '加载ing...'
    this.filter.page = (this.meta.current_page || 0) + 1
    if (!isLoad) {
      this.filter.page = 1
      this.meta = {}
    }
    let params = this.filter
    pageLoad(this.meta, getBooksList, params)
      .then(ret => {
        let newList = isLoad ? this.list : []
        let dataList = ret.list
        newList.push(...dataList)
        this.meta = ret.meta
        this.list = newList
        if (!this.list.length)
          (this.loadingText = '没有更多数据'), (this.empty = true)
      })
      .catch(e => {

      })
  }, toPage(page) {
    router.push({
      uri: '/views/' + page,
      params: {
        sex: this.filter.channel_id
      }
    })
  },

  onInit() {
    this.getCategory()
  }
}
</script>

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