quickapp_front/src/views/Detail/index.ux

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

<template>
  <div class="detail-wrap">
    <div class="book-wrap">
      <x-book multi="{{true}}" width="{{180}}" book="{{book}}" prevent="{{true}}">
        <div class="book-info">
          <text class="name">{{book.book_name}}</text>
          <div class="category">
            <text>{{book.book_category}}</text>
            <text class="status">{{book.book_end_status ? '完结': '连载'}}</text>
          </div>
          <text class="words">字数：{{bookWordsFormat(book.book_word_count)}}</text>
          <div class="user-operator">
            <text class="add" @click="addShelf">加入书架</text>
            <text class="read" @click="toRead">立即阅读</text>
          </div>
        </div>
      </x-book>
      <stack class="book-intro">
        <text class="short-info__text">{{substrInfoText()}}</text>
        <text class="toggle" @click="toggleTextStatus">{{showLongText ? '收起' : '展开'}}</text>
      </stack>
    </div>
    <text class="lastest-chapter" @click="toRead(book.last_cid)">最新章节：{{book.last_chapter}}</text>
    <div class="box-wrap short-chapter__list">
      <div class="small-title">
        <div class="wrap-left">
          <!-- <text class="border-left"></text> -->
          <text class="title">目录</text>
          <text class="total">共{{book.book_chapter_total}}章</text>
        </div>
        <text class="wrap-right">{{book.update_time}}</text>
      </div>
      <div class="chapter-list">
        <block for="chapters">
          <text class="chapter-item" @click="toRead($item.chapter_id)">{{$item.chapter_name}}</text>
        </block>
      </div>
      <text class="more-chapters" @click="toBookCatalog">更多目录 &gt;</text>
    </div>
    <div class="box-wrap similar-list__wrap">
      <div class="small-title">
        <div class="wrap-left">
          <!-- <text class="border-left"></text> -->
          <text class="title">同款推荐</text>
        </div>
      </div>
      <div class="similar-wrap">
        <block for="similar">
          <x-book similar="{{true}}" book="{{$item}}"></x-book>
        </block>
      </div>
    </div>
  </div>
</template>

<script>
import { getBooksInfo, getShortCatalog, getSimilarBooks } from "../../api";
import router from '@system.router';

export default {
  protected: {
    bid: ""
  },
  private: {
    showLongText: false,
    book: {},
    chapters: [],
    similar: []
  },
  substrInfoText() {
    if (this.book.book_summary) {
      return this.showLongText ? this.book.book_summary : this.book.book_summary.slice(0, 110);
    } else return "";
  },
  toggleTextStatus() {
    this.showLongText = !this.showLongText;
    this.substrInfoText();
  },
  addShelf() { },
  toRead(cid) {
    let chapter_id = this.book.first_cid;
    if (cid) chapter_id = cid;
    router.push({
      uri: "/views/Reader",
      params: {
        bid: this.book.book_id,
        chapter_id: chapter_id
      }
    })
  },
  toBookCatalog() {
    router.push({
      uri: "/views/Catalog",
      params: {
        bid: this.book.book_id
      }
    })
  },
  bookWordsFormat(words) {
    if (words > 10000) return (words / 10000).toFixed(2) + "万字";
    else return words + "字";
  },
  async getBooksInfo(bid) {
    this.book = await getBooksInfo(bid);
    this.chapters = await getShortCatalog(bid);
    this.similar = await getSimilarBooks(this.book.book_category_id, bid);
  },
  onInit() {
    console.log("book bid", this.bid);
    this.getBooksInfo("5pNo6A7wqQmB1WgQygDjkOM9VZn2vXeY");
  },
}
</script>

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