专属书单

src/api/index.js

@@ -655,3 +655,7 @@ export function advertisementPopupInfo(params) {
 export function orderProductInfo(params) {
   return axios("/order/product/info", { params });
 }
+//专属书单
+export function promotionExclusiveBook() {
+  return axios("/promotionExclusiveBook");
+}

src/router/index.js

@@ -21,6 +21,7 @@ const BookCity = () => import("../view/book-city.vue");
 const BookStock = () => import("../view/book-stock.vue");
 const BookShelf = () => import("../view/book-shelf.vue");
 const BookRecent = () => import("../view/book-recent.vue");
+const BookExclusive = () => import("../view/book_exclusive.vue");
 const BookDetail = () => import("../view/book-detail.vue");
 const BookCatalog = () => import("../view/book-catalog.vue");
 const BookRecommend = () => import("../view/book-recommend.vue");
@@ -89,6 +90,7 @@ const router = new Router({
     [namespace.Pay, Pay],
     [namespace.adPay, adPay],
     [namespace.Rank, Rank2],
+    [namespace.BookExclusive, BookExclusive],
     // [namespace.Help, Help,
     [namespace.Reader, Reader],
     [namespace.Person, Person],

src/view/book-recent.vue

@@ -3,8 +3,9 @@
     <ad-popup popup_position="readingRecord"></ad-popup>
     <x-header>
       <div class="book-shelf-head">
-        <span class="book-shelf-head__item is-active">最近阅读</span>
-        <router-link tag="span" replace :to="BookShelf" class="book-shelf-head__item">我的书架</router-link>
+        <span @click="$router.replace({ name: 'BookRecent' })" class="book-shelf-head__item is-active">最近阅读</span>
+        <span @click="$router.replace({ name: 'BookShelf' })" class="book-shelf-head__item">我的书架</span>
+        <span @click="$router.replace({ name: 'BookExclusive' })" class="book-shelf-head__item">专属书单</span>
       </div>
     </x-header>
     <div class="banner-bar" v-if="hotList.length">
@@ -13,11 +14,12 @@
       </div> -->
       <div class="book-city-banner">
         <mt-swipe>
-          <mt-swipe-item v-for="(book,index) in hotList" :key="index">
-            <a href="javascript:void(0)" @touchstart="onTapBegin" @touchmove="onTapMove" @touchend="onTapEnd($event, book)">
+          <mt-swipe-item v-for="(book, index) in hotList" :key="index">
+            <a href="javascript:void(0)" @touchstart="onTapBegin" @touchmove="onTapMove"
+              @touchend="onTapEnd($event, book)">
               <x-book :book="book" width="1.5rem" multi prevent>
-                <p class="book-city-banner__title">{{book.book_name}}</p>
-                <p class="book-city-banner__intro">{{book.book_summary}}</p>
+                <p class="book-city-banner__title">{{ book.book_name }}</p>
+                <p class="book-city-banner__intro">{{ book.book_summary }}</p>
               </x-book>
             </a>
           </mt-swipe-item>
@@ -25,21 +27,23 @@
       </div>
     </div>
     <div class="book-shelf-bar">
-      <div class="section-title">最近阅读<span>（共{{books.length}}本）</span></div>
-      <v-touch class="book-shelf-bar__edit" @tap="editChange">{{edit?'完成':'管理'}}</v-touch>
+      <div class="section-title">最近阅读<span>（共{{ books.length }}本）</span></div>
+      <v-touch class="book-shelf-bar__edit" @tap="editChange">{{ edit ? '完成' : '管理' }}</v-touch>
 
     </div>
-    <div class="book-recent-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
-      <x-book v-for="(book,index) in books" :key="book.book_id" :book="book" class="book-recent-book" width="1.5rem" prevent @click="routeReader(book)" multi>
-        <p class="x-book-info__name free-name">{{book.book_name}}
+    <div class="book-recent-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading"
+      infinite-scroll-distance="10">
+      <x-book v-for="(book, index) in books" :key="book.book_id" :book="book" class="book-recent-book" width="1.5rem"
+        prevent @click="routeReader(book)" multi>
+        <p class="x-book-info__name free-name">{{ book.book_name }}
           <img v-if="book.is_advertise_sub" src="../assets/free-read.jpg" />
         </p>
         <p class="x-book-info__flex">
           <span class="x-book-info__lastest">
-            <span class="red">最新：</span>{{book.last_chapter}}</span>
+            <span class="red">最新：</span>{{ book.last_chapter }}</span>
           <img src="../assets/书库-vip.png" class="x-book-info__vip">
         </p>
-        <p class="x-book-info__recent">上次阅读：{{book.chapter_name}}</p>
+        <p class="x-book-info__recent">上次阅读：{{ book.chapter_name }}</p>
         <div class="book-recent-book__add" @click.stop="addShelf(book)">
           <template v-if="!book.is_on_user_shelf">
             <span class="book-recent-book__heart">♥</span>加入书架
@@ -48,7 +52,7 @@
             <span class="book-recent-book__heart is-added">♥</span>已加入书架
           </template>
         </div>
-        <div slot="shadow" class="x-book-shadow" :class="edit?'is-edit':''" @click.stop="delBook(book,index)"></div>
+        <div slot="shadow" class="x-book-shadow" :class="edit ? 'is-edit' : ''" @click.stop="delBook(book, index)"></div>
       </x-book>
       <mt-spinner v-if="!isLoadLast" type="fading-circle" color="#32a1ff"></mt-spinner>
     </div>
@@ -65,7 +69,7 @@
   </div>
 </template>
 <script>
-import { BookRecent, BookShelf, Reader, BookDetail } from "./namespace.js";
+import { BookRecent, BookShelf, Reader, BookDetail, BookExclusive } from "./namespace.js";
 import {
   getReadrecord,
   delReadrecord,
@@ -76,7 +80,7 @@ import {
 // import books from "../mock/recommend.js";
 export default {
   name: BookRecent.name,
-  data () {
+  data() {
     return {
       BookShelf: BookShelf.route,
       books: [],
@@ -91,11 +95,11 @@ export default {
     };
   },
   methods: {
-    ClickStatistics (bid) {
+    ClickStatistics(bid) {
       console.log(bid);
       getbookFromWhere(bid, "readrecord");
     },
-    loadMore () {
+    loadMore() {
       this.loading = true;
       setTimeout(() => {
         console.log("loadMore");
@@ -103,16 +107,16 @@ export default {
         this.loading = false;
       }, 2500);
     },
-    editChange () {
+    editChange() {
       this.edit = !this.edit;
     },
-    addShelf (book) {
+    addShelf(book) {
       if (book.is_on_user_shelf) return;
       addShelf(book.bid).then((r) => {
         book.is_on_user_shelf = 1;
       });
     },
-    delBook (book, index) {
+    delBook(book, index) {
       if (this.edit) {
         this.edit &&
           delReadrecord(book.bid).then((r) => {
@@ -122,7 +126,7 @@ export default {
         this.routeReader(book);
       }
     },
-    routeReader (book) {
+    routeReader(book) {
       this.$router.push({
         name: Reader.name,
         query: {
@@ -131,7 +135,7 @@ export default {
         },
       });
     },
-    getRecentSwiperList () {
+    getRecentSwiperList() {
       recentSlideList().then((r) => {
         this.hotList = r.map((b) => {
           return Object.assign(b, {
@@ -140,25 +144,25 @@ export default {
         });
       });
     },
-    toFreePage () {
+    toFreePage() {
       if (this.showFreeEntry) {
         location.href = this.showFreeEntry.link + "&p_src=recent";
       }
     },
-    tapActivity () {
+    tapActivity() {
       location.href = this.activity_link.url;
     },
-    onTapBegin (e) {
+    onTapBegin(e) {
       const { pageX } = e.touches[0];
       this.pageX = pageX;
     },
-    onTapMove (e) {
+    onTapMove(e) {
       const { pageX } = e.touches[0];
       if (Math.abs(pageX - this.pageX) < 10) {
         this.is_click = true;
       } else this.is_click = false;
     },
-    onTapEnd (e, book) {
+    onTapEnd(e, book) {
       if (this.is_click) {
         this.ClickStatistics(book.book_id);
         this.$router.push({
@@ -170,7 +174,7 @@ export default {
       this.is_click = true;
     },
   },
-  created () {
+  created() {
     getReadrecord().then((r) => {
       this.books = r;
       this.getRecentSwiperList();

src/view/book-shelf.vue

@@ -2,38 +2,26 @@
   <div class="book-shelf">
     <x-header>
       <div class="book-shelf-head">
-        <router-link :to="BookRecent"
-                     tag="span"
-                     replace
-                     class="book-shelf-head__item">最近阅读</router-link>
-        <span class="book-shelf-head__item is-active">我的书架</span>
+        <span @click="$router.replace({ name: 'BookRecent' })" class="book-shelf-head__item">最近阅读</span>
+        <span @click="$router.replace({ name: 'BookShelf' })" class="book-shelf-head__item is-active">我的书架</span>
+        <span @click="$router.replace({ name: 'BookExclusive' })" class="book-shelf-head__item">专属书单</span>
       </div>
     </x-header>
     <div class="book-shelf-bar">
-      <span>共{{books.length}}本</span>
-      <v-touch @tap="editChange"
-               class="book-shelf-bar__edit">管理</v-touch>
+      <span>共{{ books.length }}本</span>
+      <v-touch @tap="editChange" class="book-shelf-bar__edit">管理</v-touch>
     </div>
-    <x-shelf-core :books="books"
-                  :bar="false"
-                  :edit.sync="edit"
-                  @read-book="readBook"
-                  @edit-book="editBook"
-                  @add-book="addBook">
-      <x-book slot="book"
-              slot-scope="{ book, className }"
-              :book="book"
-              :prevent="true"
-              style="width: 2rem;margin: .2rem auto 0">
-        <div slot="shadow"
-             class="x-book-shadow"
-             :class="className"></div>
+    <x-shelf-core :books="books" :bar="false" :edit.sync="edit" @read-book="readBook" @edit-book="editBook"
+      @add-book="addBook">
+      <x-book slot="book" slot-scope="{ book, className }" :book="book" :prevent="true"
+        style="width: 2rem;margin: .2rem auto 0">
+        <div slot="shadow" class="x-book-shadow" :class="className"></div>
       </x-book>
     </x-shelf-core>
   </div>
 </template>
 <script>
-import { BookShelf, BookCity, BookRecent, Reader } from "./namespace.js";
+import { BookShelf, BookCity, BookRecent, Reader, BookExclusive } from "./namespace.js";
 // import books from "../mock/recommend.js";
 import { getShelf, delShelf } from "../api";
 export default {

src/view/book_exclusive.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="book-rank-page">
+    <x-header>
+      <div class="book-shelf-head">
+        <span @click="$router.replace({ name: 'BookRecent' })" class="book-shelf-head__item">最近阅读</span>
+        <span @click="$router.replace({ name: 'BookShelf' })" class="book-shelf-head__item">我的书架</span>
+        <span @click="$router.replace({ name: 'BookExclusive' })" class="book-shelf-head__item is-active">专属书单</span>
+      </div>
+    </x-header>
+    <div class="book-rank-body">
+      <div class="book-list-wrap">
+        <template v-if="!isNotEmpty">
+          <img class="empty" src="https://cdn-novel.bookkks.com/static/img/empty_bg.jpg" alt="">
+        </template>
+        <template v-else>
+          <template v-for="(book, index) in books">
+            <div class="book-item-wrap" :key="book.bid">
+              <img v-if="index < 3" class="number-top" :src="rank[index]" alt="">
+              <span class="number" v-else>{{ index + 1 }}</span>
+              <x-book class="book-item" @click="readBook" :book="book" width="1.5rem" multi>
+                <div class="book-info">
+                  <p class="name">{{ book.book_name }}</p>
+                  <p class="intro">{{ book.intro }}</p>
+                </div>
+              </x-book>
+            </div>
+          </template>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { promotionExclusiveBook } from "@/api";
+import { BookShelf, BookCity, BookRecent, Reader, BookExclusive } from "./namespace.js";
+export default {
+  data: () => ({
+    rank: [
+      require("@/assets/rank_1.png"),
+      require("@/assets/rank_2.png"),
+      require("@/assets/rank_3.png"),
+    ],
+    books: [],
+  }),
+  computed: {
+    isNotEmpty() {
+      return this.books.length > 0;
+    },
+  },
+  methods: {
+    readBook(book, index) {
+      this.$router.push({
+        name: Reader.name,
+        query: {
+          bid: book.bid,
+          cid: book.cid
+        }
+      });
+    },
+    initRankBooks() {
+      promotionExclusiveBook().then((r) => {
+        console.log(r, 'promotionExclusiveBookpromotionExclusiveBook');
+        this.books = r
+      });
+    },
+  },
+  created() {
+    this.initRankBooks();
+  },
+};
+</script>

src/view/namespace.js

@@ -48,6 +48,16 @@ export const BookRecent = {
   route: { name: "BookRecent" },
   path: "/recent"
 };
+
+export const BookExclusive = {
+  name: "BookExclusive",
+  meta: {
+    Chinese: "专属书单"
+  },
+  route: { name: "BookExclusive" },
+  path: "/exclusive"
+};
+
 export const Reader = {
   name: "Reader",
   meta: {
@@ -55,7 +65,7 @@ export const Reader = {
   },
   route: { name: "Reader" },
   path: "/reader",
-  alias:"/reader/:str"
+  alias: "/reader/:str"
 };
 
 export const BookDetail = {