个人中心

src/api/index.js

@@ -6,11 +6,40 @@
  * @Description: api
  */
 import fly from "./fly";
-export const demoApi = () => {
-  return fly.get("/books/male/index");
+
+// 获取首页数据
+export const getHomeList = (sex) => {
+  console.log(sex);
+  return fly.get(`/books/${sex}/index`);
 };
 
+
 //充值记录
 export const rechargeApi = () => {
   return fly.get("/order/chargeRecordLists");
-};
+};
+
+
+// 获取分类
+export const getCategory = () => {
+  return fly.get("/books/getCategory");
+}
+
+// 获取书库
+export const getBooksList = (params) => {
+  return fly.get("/books/library", params);
+}
+
+// 获取图书详情
+export const getBooksInfo = (bid) => {
+  return fly.get(`/book/${bid}`);
+}
+
+// 获取详情页相似数据
+export const getSimilarBooks = (category_id, bid) => {
+  return fly.get("/books/similar", {
+    category_id,
+    bid
+  })
+}
+

src/api/promise.finally.js

@@ -0,0 +1,8 @@
+// promise finally 实现
+Promise.prototype.finally = function (callback) {
+  let P = this.constructor;
+  return this.then(
+    value => P.resolve(callback()).then(() => value),
+    reason => P.resolve(callback()).then(() => { throw reason })
+  );
+};

src/api/utils.js

@@ -1,3 +1,4 @@
+import "./promise.finally";
 import fly from "./fly";
 import qs from "qs";
 import storage from "@system.storage";
@@ -13,7 +14,7 @@ export const getToken = async () => {
   if (!token) token = (await storage.get({ key: "token" })).data;
 
   // token格式化
-  if (token) token = JSON.parse(token);
+  if (token && (typeof token === "string")) token = JSON.parse(token);
 
   if (!token) getToken.promise = login();
   else if (checkToken(token)) return Promise.resolve(token.token);
@@ -22,7 +23,6 @@ export const getToken = async () => {
       return login();
     });
   }
-
   getToken.promise = getToken.promise
     .finally(() => {
       getToken.promise = null;

src/assets/less/index.less

@@ -1,11 +1,15 @@
 .index-wrap {
   flex-direction: column;
-
+  
+  
   .fixed-tabbar {
-    height: 120px;
-    flex-shrink: 0;
-    background-color: #fff;
-    border-top: 2px solid #bfbfbf;
+    flex-direction: column;
+
+    .tabbar-item__wrap {
+      height: 120px;
+      flex-shrink: 0;
+      background-color: #fff;
+    }
 
     .tabbar-item {
       flex: 1;

src/components/book/book.ux

@@ -1,15 +1,15 @@
 <template>
   <div class="{{multi ? 'book-wrap__multi' : 'book-wrap'}}" style="{{bookSimpleStyle()}}" @click="getBooks(book)">
     <block if="!multi">
-      <image style="height: {{width * 1.33}}px" class="book-cover__simple" src="https://cdn-newyc.ycsd.cn/ycsd_cover/covermiddle/11/11989.jpg?t=2019101714"></image>
-      <text class="book-name {{lines ? 'book-name__line2' : ''}}">惊世妖娆凤凰月惊世妖娆凤凰月</text>
+      <image style="height: {{width * 1.33}}px" class="book-cover__simple" src="{{book.cover_url}}"></image>
+      <text class="book-name {{lines ? 'book-name__line2' : ''}}">{{book.book_name}}</text>
     </block>
     <block else>
-      <image style="{{bookMultiStyle()}}" class="book-cover__multi" src="https://cdn-newyc.ycsd.cn/ycsd_cover/covermiddle/11/11989.jpg?t=2019101714"></image>
+      <image style="{{bookMultiStyle()}}" class="book-cover__multi" src="{{book.cover_url}}"></image>
       <slot>
         <div class="book-info__multi">
-          <text class="name">惊世妖娆凤凰月惊世妖娆凤凰月</text>
-          <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
+          <text class="name">{{book.book_name}}</text>
+          <text class="intro">{{book.book_summary}}</text>
         </div>
       </slot>
     </block>

src/helper/regenerator.js

@@ -1,8 +1,8 @@
 // 脚本：regenerator.js
 // 注意：仅用于注入类库函数，不允许存储页面组件等数据
-const injectRef = Object.getPrototypeOf(global) || global
+const injectRef = Object.getPrototypeOf(global) || global;
 
 // 注入regeneratorRuntime
-injectRef.regeneratorRuntime = require('@babel/runtime/regenerator')
+injectRef.regeneratorRuntime = require('@babel/runtime/regenerator');
 // 如果使用的 hap-toolkit 版本低于0.0.38(babel 版本低于 7)，则按下面的方式引入
 // injectRef.regeneratorRuntime = require('babel-runtime/regenerator')

src/views/Home/index.ux

@@ -19,87 +19,55 @@
       </list-item>
       <list-item type="swipe">
         <swiper class="swipe-bar" autoplay="true" indicator="false">
-          <block for="banner">
+          <block for="b in banner.books">
             <div class="swipe-item">
-              <image class="cover" src="https://cdn-newyc.ycsd.cn/ycsd_web_3nd/images/homebanners/夫人，魔尊大人盼你早点死呢1000390.jpg"></image>
+              <image class="cover" src="{{b.cover_url}}"></image>
             </div>
           </block>
         </swiper>
       </list-item>
-      <list-item type="simple" class="book-list__wrap">
-        <div class="book-list__title">
-          <text>热门推荐</text>
-        </div>
-        <div class="book-list">
-          <block for="books">
-            <x-book multi="{{false}}"></x-book>
-          </block>
-        </div>
-      </list-item>
-      <list-item type="multi" class="book-list__wrap book-list__wrap--multi">
-        <div class="book-list__title">
-          <text class="border"></text>
-          <text>神书直播</text>
-        </div>
-        <div class="book-list__line">
-          <block for="books.slice(0, 4)">
-            <x-book multi="{{false}}" width="{{150}}" lines="{{true}}"></x-book>
-          </block>
-        </div>
-        <div class="book-list__multi">
-          <block for="books.slice(4)">
-            <div class="book-item">
-              <x-book multi="{{true}}" width="{{150}}">
-                <div class="book-info__multi">
-                  <text class="name">惊世妖娆凤凰月惊世妖娆凤凰月</text>
-                  <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
-                </div>
-              </x-book>
-            </div>
-          </block>
-        </div>
-      </list-item>
-      <list-item type="simple" class="book-list__wrap">
-        <div class="book-list__title">
-          <text class="border"></text>
-          <text>编辑推荐</text>
-        </div>
-        <div class="book-list">
-          <block for="books">
-            <x-book multi="{{false}}"></x-book>
-          </block>
-        </div>
-      </list-item>
-      <list-item type="multi" class="book-list__wrap book-list__wrap--multi">
-        <div class="book-list__title">
-          <text class="border"></text>
-          <text>新书推荐</text>
-        </div>
-        <div class="book-list__line">
-          <block for="books.slice(0, 4)">
-            <x-book multi="{{false}}" width="{{150}}" lines="{{true}}"></x-book>
-          </block>
-        </div>
-        <div class="book-list__multi">
-          <block for="books.slice(4)">
-            <div class="book-item">
-              <x-book multi="{{true}}" width="{{150}}">
-                <div class="book-info__multi">
-                  <text class="name">惊世妖娆凤凰月惊世妖娆凤凰月</text>
-                  <text class="intro">我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进，我作为一名公司普通的小职员，一觉醒来居然被人睡了，本来以为只是一次简单的意外事件，却不料因此被人蓄意利用卷卷卷进...</text>
-                </div>
-              </x-book>
-            </div>
-          </block>
-        </div>
-      </list-item>
+      <block for="bookObj in list">
+        <list-item type="simple" class="book-list__wrap" if="$idx % 2 === 0">
+          <div class="book-list__title">
+            <text>{{bookObj.lable}}</text>
+          </div>
+          <div class="book-list">
+            <block for="book in bookObj.books">
+              <x-book multi="{{false}}" book="{{book}}"></x-book>
+            </block>
+          </div>
+        </list-item>
+        <list-item type="multi" class="book-list__wrap book-list__wrap--multi" else>
+          <div class="book-list__title">
+            <text class="border"></text>
+            <text>{{bookObj.lable}}</text>
+          </div>
+          <div class="book-list__line">
+            <block for="book in bookObj.books.slice(0, 4)">
+              <x-book multi="{{false}}" width="{{150}}" lines="{{true}}" book="{{book}}"></x-book>
+            </block>
+          </div>
+          <div class="book-list__multi">
+            <block for="book in bookObj.books.slice(4)">
+              <div class="book-item">
+                <x-book multi="{{true}}" width="{{150}}" book="{{book}}">
+                  <div class="book-info__multi">
+                    <text class="name">{{book.book_name}}</text>
+                    <text class="intro">{{book.book_summary}}</text>
+                  </div>
+                </x-book>
+              </div>
+            </block>
+          </div>
+        </list-item>
+      </block>
     </list>
   </div>
 </template>
 
 
 <script>
-import { demoApi } from "../../api";
+import { getHomeList } from "../../api";
 
 export default {
   props: {},
@@ -115,21 +83,28 @@ export default {
           index: 1
         }
       ],
-      banner: [1, 2, 3],
-      books: [1, 2, 3, 4, 5, 6],
+      banner: [],
+      list: [],
       current: 0
     }
   },
   onInit() {
-    demoApi().then(r => {
-      console.log(r);
-    })
+    this.getCityListByTabChange();
+    this.$watch('current', 'getCityListByTabChange')
   },
   typeChange(index) {
     this.current = index;
   },
   toCategory() {
     this.$emit('change');
+  },
+  async getCityListByTabChange(index) {
+    console.log(index);
+    let sex = index ? "female" : "male";
+    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

@@ -15,12 +15,15 @@
         </tab-content>
       </tabs>
       <div class="fixed-tabbar">
-        <block for="tab in tabbar">
-          <div class="tabbar-item " @click="tabbarChange(tab)">
-            <image src="{{tab.index === current ? tab.active_icon : tab.icon}}"></image>
-            <text class="{{tab.index === current ? 'tabbar-name__cur' : ''}}">{{tab.name}}</text>
-          </div>
-        </block>
+        <image src="../../assets/imgs/shadow.png" class="shadow"></image>
+        <div class="tabbar-item__wrap">
+          <block for="tab in tabbar">
+            <div class="tabbar-item " @click="tabbarChange(tab)">
+              <image src="{{tab.index === current ? tab.active_icon : tab.icon}}"></image>
+              <text class="{{tab.index === current ? 'tabbar-name__cur' : ''}}">{{tab.name}}</text>
+            </div>
+          </block>
+        </div>
       </div>
     </div>
     <div class="stack-popup" @click="closeWrap" if="showPopup">

src/views/Shelf/index.ux

@@ -17,7 +17,7 @@
     <block if="current === 0">
       <div class="shelf-books__wrap">
         <block for="mockList">
-          <div type="shelf-item" class="book-item__wrap {{(($idx + 1)%3 === 0) ? 'm0' : ''}}">
+          <div class="book-item__wrap {{(($idx + 1)%3 === 0) ? 'm0' : ''}}">
             <stack>
               <x-book></x-book>
               <div class="book-del__wrap" show="{{isDelMode}}">
@@ -27,7 +27,7 @@
             </stack>
           </div>
         </block>
-        <div type="add-shelf" class="book-item__wrap book-item__add m0" @click="toCategory">
+        <div class="book-item__wrap book-item__add m0" @click="toCategory">
           <image class="add-cover" src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/bookstory.png"></image>
           <text>添加书籍</text>
         </div>