novelQuick/src/pages/main/index.ux

<import name="bookshelf" src="../../components/bookshelf"></import>
<import name="library" src="../../components/library"></import>
<import name="search-book" src="../../components/search-book"></import>

<template>
  <div class="page-wrapper">
    <tabs index="{{selectedTab}}" onchange="changeTab">
      <tab-content>
        <bookshelf
          shelf-list="{{shelfList}}"
          onupdate-shelf="updateShelf"
        ></bookshelf>
        <library></library>
        <search-book></search-book>
      </tab-content>
      <tab-bar mode="fixed" class="tab-bar">
        <div class="tab-item" for="tabList">
          <text class="iconfont">{{
            selectedTab === $idx ? $item.activatedIcon : $item.icon
          }}</text>
          <text class="tab-title">{{ $item.title }}</text>
        </div>
      </tab-bar>
    </tabs>
  </div>
</template>

<script>
import { bookListData } from '../../assets/data/book-list.js'
export default {
  private: {
    tabList: [
      {
        title: '书架',
        icon: '\ue602',
        activatedIcon: '\ue601'
      },
      {
        title: '书城',
        icon: '\ue681',
        activatedIcon: '\ue67d'
      },
      {
        title: '查找',
        icon: '\ue603',
        activatedIcon: '\ue604'
      },
      {
        title: '工具广场',
        icon: '\ue603',
        activatedIcon: '\ue604'
      }
    ],
    selectedTab: 1,
    defaultShelfList: bookListData.slice(0, 2),
    shelfList: []
  },
  onInit() {
    $utils.getStorage('bookshelf').then(value => {
      // 从storage获取
      if (!value) {
        this.shelfList = this.defaultShelfList
        $utils.setShelfList(this.shelfList, true) // 保存到全局变量和storage
      } else {
        this.shelfList = JSON.parse(value)
        $utils.setShelfList(this.shelfList) // 保存到全局变量
      }
    })
  },
  /* -------------------SelfCustomEvent------------------ */
  changeTab(e) {
    let index = e.index === undefined ? 1 : e.index
    this.selectedTab = index
  },
  updateShelf(param) {
    this.shelfList = param.detail.shelfList
    $utils.setShelfList(this.shelfList, true) // 保存到全局变量和storage
  }
}
</script>

<style lang="less">
@import '../../assets/styles/index.less';
.tab-bar {
  background-color: @white;
  .border-top-mixins();
  padding: 15px 0;
  height: 110px;
  .tab-item {
    flex: 1;
    .flex-box-mixins(column, center, center);
    .iconfont {
      font-size: 50px;
      color: @text-grey;
      &:active {
        color: @brand;
      }
    }
    .g22kjdgy {
      color: #ffffff;
    }
    .tab-title {
      font-size: 20px;
      color: @text-grey;
      &:active {
        color: @brand;
      }
    }
  }
}
</style>