home category detail

src/api/fly.js

@@ -20,6 +20,7 @@ const filterNoToken = ["/login"]
 fly.interceptors.request.use(async config => {
   // 过滤一些不需要登录的路由
   if (filterNoToken.indexOf(config.url) === -1) {
+    console.log(config);
     let token = await getToken();
     if (config.headers) config.headers.Authorization = token;
     else config.headers = { Authorization: token };

src/api/index.js

@@ -37,6 +37,14 @@ export const getSimilarBooks = (category_id, bid) => {
   })
 }
 
+// 获取详情页中的目录
+export const getShortCatalog = (bid) => {
+  return fly.get(`/books/${bid}/catalog`, {
+    page_size: 10,
+    page: 1
+  }).then(r => r.list);
+}
+
 // 获取充值列表
 export const getChargeList = () => {
   return fly.get("/order/chargeList");

src/api/utils.js

@@ -14,6 +14,8 @@ export const getToken = async () => {
   // token格式化
   if (token && (typeof token === "string")) token = JSON.parse(token);
 
+  console.log("checkToken", checkToken(token));
+
   if (!token) getToken.promise = login();
   else if (checkToken(token)) return Promise.resolve(token.token);
   else {

src/components/book/book.ux

@@ -63,18 +63,19 @@ export default {
   },
   getBooks(book) {
     if (this.prevent) return;
+    console.log("click_book", book);
     if (this.similar) {
       router.replace({
         uri: "/views/Detail",
         params: {
-          bid: book.bid || ""
+          bid: book.book_id || ""
         }
       })
     } else {
       router.push({
         uri: "/views/Detail",
         params: {
-          bid: book.bid || ""
+          bid: book.book_id || ""
         }
       })
     }

src/components/loading/loading.ux

@@ -0,0 +1,32 @@
+<template>
+  <div class="loading-wrap">
+    <text>{{text}}</text>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    text: {
+      type: String,
+      default: "加载ing..."
+    }
+  },
+}
+</script>
+
+
+<style lang="less" scoped>
+.loading-wrap {
+  flex: 1;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  margin-top: 80px;
+
+  text {
+    font-size: 26px;
+    color: #999;
+  }
+}
+</style>

src/helper/index.js

@@ -0,0 +1,15 @@
+
+export const pageLoad = (meta, fn, params) => {
+  return new Promise(async (resolve, reject) => {
+    if (meta.current_page) {
+      if (meta.next_page_url) {
+        let ret = await fn(params);
+        resolve(ret);
+      } else reject("last page");
+    } else {
+      console.log("first page");
+      let ret = await fn(params);
+      resolve(ret);
+    }
+  })
+}

src/manifest.json

@@ -37,7 +37,7 @@
     "logLevel": "debug"
   },
   "router": {
-    "entry": "views/Shelf",
+    "entry": "views/Index",
     "pages": {
       "views/Index": {
         "component": "index"

src/views/Category/index.ux

@@ -1,4 +1,6 @@
 <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">
@@ -6,47 +8,45 @@
       <list-item type="search" class="search-bar">
         <div class="search-bar__wrap">
           <image src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/search.png"></image>
-          <input type="text" placeholder="书名"></input>
+          <input id="search" type="text" enterkeytype="search" placeholder="书名" @enterkeyclick="bookSearch"></input>
         </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">
-            <text class="filter-item__item cur">全部</text>
-            <text class="filter-item__item">女频</text>
-            <text class="filter-item__item">男频</text>
+            <block for="channel">
+              <text class="filter-item__item {{$item.key === filter.channel_id ? 'cur' : ''}}" @click="filterChange('channel_id', $item.key)">{{$item.name}}</text>
+            </block>
+            <!-- <text class="filter-item__item cur">全部</text> -->
           </div>
         </div>
         <div class="filter-item">
           <text class="filter-item__name">类型</text>
           <div class="filter-item__list">
-            <text class="filter-item__item cur">不限</text>
-            <text class="filter-item__item">豪门虐情</text>
-            <text class="filter-item__item">婚恋生活</text>
-            <text class="filter-item__item">青春校园</text>
-            <text class="filter-item__item">名国情院</text>
-            <text class="filter-item__item">女生玄幻</text>
-            <text class="filter-item__item">穿越重生</text>
-            <text class="filter-item__item">经商种田</text>
-            <text class="filter-item__item">女生灵异</text>
+            <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">
-            <text class="filter-item__item">不限</text>
-            <text class="filter-item__item cur">完结</text>
-            <text class="filter-item__item">连载</text>
+            <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>
-      <block for="mockList">
+      <list-item type="loading" if="!list.length">
+        <x-loading text="{{loadingText}}"></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}}">
+          <x-book multi="{{true}}" width="{{150}}" book="{{$item}}">
             <div class="book-info">
-              <text class="name">惊世妖娆凤凰月惊123123世妖娆凤凰月</text>
-              <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
+              <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">
@@ -63,17 +63,103 @@
 </template>
 
 <script>
+import { getCategory, getBooksList } from "../../api";
+import { pageLoad } from "../../helper";
+import storage from '@system.storage';
+
 export default {
   props: {},
   data() {
     return {
-      mockList: [1, 2, 3, 4, 5, 4, 6, 7, 8, 9, 10]
+      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: {},
+      loadingText: "加载ing..."
     }
   },
   onReachBottom() {
     // 请求更多数据
-    console.log("到达底部")
-  }
+    this.getBooksArray();
+  },
+  async getCategory() {
+    this.category = this.initCategory(await getCategory());
+    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
+      }
+    });
+  },
+  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.loadingText = "加载ing...";
+    this.filter.page = (this.meta.current_page || 0) + 1;
+    if (!isLoad) {
+      this.filter.page = 1;
+      this.meta = {};
+    }
+    let params = this.filter;
+    console.log(params);
+    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 = "没有更多数据";
+    }).catch(e => {
+      console.log("e", e);
+    })
+  },
+  onInit() {
+    this.getCategory();
+  },
 }
 </script>
 

src/views/Home/index.ux

@@ -68,6 +68,7 @@
 
 <script>
 import { getHomeList } from "../../api";
+import storage from '@system.storage';
 
 export default {
   props: {},
@@ -99,12 +100,11 @@ export default {
     this.$emit('change');
   },
   async getCityListByTabChange(index) {
-    console.log(index);
+    await storage.set({ key: "sex", value: index || 0 });
     let sex = index ? "female" : "male";
-    let ret = await getHomeList(sex)
+    let ret = await getHomeList(sex);
     this.banner = ret.slice(0, 1)[0];
     this.list = ret.slice(1);
-    console.log("list", this.list);
   }
 }
 </script>

src/views/Index/index.ux

@@ -68,7 +68,7 @@ export default {
         index: 3
       }
     ],
-    current: 0,
+    current: 1,
     showPopup: false
   },
   onBackPress() {