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>