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">{{book.is_on_user_shelf ? '已加入' : '加入书架'}}</text> -->
            <text
              class="read"
              @click="
                toRead(
                  book.record_chapter_id
                    ? book.record_chapter_id
                    : book.first_cid
                )
              "
              >立即阅读</text
            >
          </div>
        </div>
      </x-book>
      <stack class="book-intro">
        <text class="short-info__text">{{ substrInfoText() }}</text>
        <div class="intro-div">
          <text class="toggle" @click="toggleTextStatus">{{
            showLongText ? "收起" : "展开"
          }}</text>
        </div>
      </stack>
    </div>
    <text
      class="lastest-chapter"
      @click="toRead(book.last_cid, book.is_need_charge)"
      >最新章节：{{ 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.is_need_charge)"
            >{{ $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, postUserShelfBooks } from "../../api";
import router from '@system.router';
import prompt from '@system.prompt';
import storage from "@system.storage";
export default {
  public: {
    push_id: '',
    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();
  },
  async addShelf() {
    if (!this.book.is_on_user_shelf) {
      let ret = await postUserShelfBooks({ bid: this.bid });
      if (ret) this.book.is_on_user_shelf = 1, prompt.showToast({ message: "添加成功" });
    }
  },
  toRead(cid = "", needCharge = 0) {
    console.log(cid)
    if (needCharge == 1) {
      this.chapter_sequence = needCharge
      router.push({
        uri: "/views/Pay",
        params: {
          bid: this.book.book_id,
        }
      })
      return false;
    }
    let 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);
  },
  onShow() {
    console.log("book bid", this.bid);
    this.getBooksInfo(this.bid);
  },
  async onInit() {
    console.log("book bid", this.bid);
    // this.getBooksInfo(this.bid);
    if (this.push_id) {
      await storage.set({ key: "push_id", value: this.push_id });
    }
  },
}
</script>

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