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}}" prevent="{{true}}">
        <div class="book-info">
          <text class="name">一念阑珊，致辞中生</text>
          <div class="category">
            <text>豪门虐情</text>
            <text class="status">已完结</text>
          </div>
          <text class="words">字数：123124</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.lastest_id)">最新章节：第307章 大结局大结局大结局大结局大结局大结局大结局</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">共307章</text>
        </div>
        <text class="wrap-right">2018-06-19 10:22:22</text>
      </div>
      <div class="chapter-list">
        <block for="cid in chapters">
          <text class="chapter-item" @click="toRead(cid)">第{{$idx + 1}}章</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}}"></x-book>
        </block>
      </div>
    </div>
  </div>
</template>

<script>
import router from '@system.router';

export default {
  private: {
    showLongText: false,
    book: {},
    info: "“boss，夫人说想去商场购物。”　　某男笑，“去把商场买下来。”　　“boss，有记者非议夫人。”　　某男怒，“去告诉他，余阑珊是我顾念琛的妻子。”　　“boss，夫人说晚上要和秦家公子聚餐。”　　某男拍案，“反了。”　　“老婆，你是我的独家私宠，谁准许你和别的男人去幽会的。”　　自此之后，她身边有多少桃花，他就拧掉多少。　　余阑珊终于忍无可忍了，愤怒道：“顾念琛，你太过分了。”　　某男邪魅一笑，“老婆，这点就算过分？我还有更过分的。”　",
    chapters: [1, 2, 3, 4, 54, 6, 6, 1, 2, 3],
    similar: [1, 2, 3]
  },
  substrInfoText() {
    return this.showLongText ? this.info : this.info.slice(0, 110);
  },
  toggleTextStatus() {
    this.showLongText = !this.showLongText;
    this.substrInfoText();
  },
  addShelf() { },
  toRead(cid) {
    let chapter_id = this.book.cid;
    if (cid) chapter_id = cid;
    router.push({
      uri: "/views/Reader",
      params: {
        bid: this.book.bid,
        cid: chapter_id
      }
    })
  },
  toBookCatalog() {
    router.push({
      uri: "/views/Catalog",
      params: {
        bid: this.book.bid
      }
    })
  }
}
</script>

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