quickapp_front/src/views/Shelf/index.ux

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

<template>
  <div class="shelfs">
    <div class="shelf_title">
      <text>书架</text>
    </div>
    <div v-if="isNull" if="{{Object.keys(firstBook).length > 0}}" @click="toReader(firstBook)" class="book_detail">
      <div class="image-recommend">
        <image src="../../assets/imgs/recommend-book.png"></image>
      </div>
      <div class="shelf-first__content">
        <image src="{{firstBook.cover_url}}"></image>
        <div class="book-info__multi">
            <text class="name">{{ firstBook.book_name }}</text>
            <text class="intro">{{ firstBook.intro }}</text>
            <text> {{firstBook.subtext}} </text>  
        </div>
      </div>        
    </div>
    <stack class="shelf">
      <div class="shelf-wrap">>
        <!-- <div class="type-bar">
          <div class="search-bar__wrap">
            <text @click="toSearch">请输入书名或者作者名</text
            ><image
              src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/search.png"
            ></image>
          </div>
        </div> -->
        <div
          class="shelf-total {{current === 1 ? 'shelf-total__inRecent' : ''}}"
          if="{{mockList.length>0}}"
        >
          <text>共{{ booksize }}本</text>
          <div if="modeText" @click="changeMode">
            <text>
              <image
                src="../../assets/imgs/manage.png"
                class="modeimage"
              ></image>
            </text>
            <text class="administration-btn">{{ modeText }}</text>
          </div>
          <div if="!modeText" @click="changeMode">
            <text class="complete-btn">完成</text>
          </div>
        </div>
        <div if="{{mockList.length<=0 && isinit}}" class="blank_img">
          <image
            src="../../assets/imgs/white_shelf.png"
          ></image>
          <text>书架空空如也</text>
          <div class="add_book" @click="toCategory">
            <text>去添加</text>
          </div>
        </div>
        <block if="current === 0">
          <div class="shelf-books__wrap">
            <block for="mockList">
              <div class="book-item__wrap {{(($idx + 1)%4 === 0) ? 'm0' : ''}}">
                <stack>
                  <x-book book="{{$item}}" read="{{true}}"></x-book>
                  <div
                    class="book-del__wrap"
                    show="{{isDelMode}}"
                    @click="deleteBook($item)"
                  >
                    <image
                      src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/delete.png"
                    ></image>
                    <text>删除</text>
                  </div>
                </stack>
              </div>
            </block>
            <div class="book-item__wrap book-item__add m0" @click="toCategory">
              <image
                class="add-cover"
                src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/bookstory.png"
              ></image>
              <text>添加书籍</text>
            </div>
          </div>
        </block>
        <block else>
          <list class="recent-list" if="{{mockList.length>0 && isinit}}">
            <list-item type="recent-item" class="recent-item">
              <div class="shelf-books__wrap">
                <block for="mockList">
                  <div
                    class="book-item__wrap {{(($idx + 1)%3 === 0) ? 'm0' : ''}}"
                  >
                    <stack>
                      <x-book
                        book="{{$item}}"
                        read="{{true}}"
                        isshowtext="{{false}}"
                      >
                        <div class="item_wrap">
                          <text class="name">{{ $item.book_name }}</text>
                          <text class="last-read"
                            >读到 {{ $item.chapter_name }}</text
                          >
                        </div>
                      </x-book>
                      <div
                        class="book-del__wrap"
                        show="{{isDelMode}}"
                        @click="deleteBook($item)"
                      >
                        <image
                          src="../../assets/imgs/delete_recent.png"
                        ></image>
                        <text>删除</text>
                      </div>
                    </stack>
                  </div>
                </block>
                <div
                  class="book-item__wrap book-item__add m0"
                  @click="toCategory"
                >
                  <image
                    class="add-cover"
                    src="https://yueduyun.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/img/bookstory.png"
                  ></image>
                  <text>添加书籍</text>
                </div>
              </div>
            </list-item>
            <list-item style="height:120px;"></list-item>
          </list>
        </block>
      </div>
    </stack>
  </div>
</template>

<script>
import { getUserShelfBooks, deleteShelfBook, getReadrecord } from '../../api'
import router from '@system.router'
export default {
  props: {
    tabindex: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      isInit: false,
      current: 1,
      isinit: false,
      isDelMode: false,
      modeText: '管理',
      mockList: [],
      booksize: 0,
      typeList: [
        {
          name: '我的书架',
          index: 0
        },
        {
          name: '最近阅读',
          index: 1
        }
      ],
      firstBook:{},
      isNull: false
    }
  },
  onInit() {
    this.getUserShelfBooks();
    this.$watch('isDelMode', 'listenMode')
    this.$watch('tabindex', 'watchPropsChange')
    this.$on('refreshData', this.broadevt);
    console.log("this.isInit:",this.isInit);
    console.log("this.mocKList:",this.mockList);
  },
  watchPropsChange(newV, oldV) {
    if (newV == 0) {
      this.getUserShelfBooks()
    }
  },
  broadevt(evt) {
    if (evt.detail.current == 1) {
      this.getUserShelfBooks()
    }
  },
  getUserShelfBooks(isDel = false) {
    getReadrecord().then(r => {
      if (!isDel) {
        this.isDelMode = false
      }
      r.map(m => {
        m.cover_url = m.cover
        m.recent_cid = m.cid
        delete m.cover
        delete m.cid
      })
      this.booksize = r.length
      if(this.booksize > 0){
        this.firstBook = r[0];
        this.firstBook.subtext = this.firstBook.author+"·"+(this.firstBook.status ==0 ? "连载·":"完结·")+(this.firstBook.size < 10000 ? this.firstBook.size : (this.firstBook.size/10000).toFixed(2)+"万");
      }else{
      this.firstBook = {};
      }
      this.mockList = r
      this.isinit = true
    })
  },
  deleteBook(book) {
    deleteShelfBook({ bid: book.book_id }).then(r => {
      this.getUserShelfBooks(true);
      Object.keys(this.firstBook) === 0 ? this.isNull = true : this.isNull = false;
    });
  },
  changeMode() {
    this.isDelMode = !this.isDelMode;
    this.getUserShelfBooks(true)
  },
  listenMode(v) {
    this.modeText = v ? '' : '管理'
  },
  toCategory() {
    this.$emit('change')
  },
  toSearch() {
    router.push({
      uri: '/views/Search'
    })
  },
  typeChange(index) {
    this.current = index
  },
  toReader(book){
     router.push({
        uri: '/views/Reader',
        params: {
          bid: book.book_id,
          chapter_id: book.recent_cid
        }
      })
  }
  
}
</script>

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