quickapp_front/src/views/Free/index.ux

<import name="x-book" src="../../components/book/book.ux"></import>
<template>
  <list id="free" class="free-wrap" v-if="list.length>0 && isInit">
    <list-item type="tab">
      <div class="type-bar">
        <block for="type in typeList">
          <div class="type-item" @click="typeChange(type.index)">
            <text class="{{type.index === current ? 'cur' : ''}}">{{type.name}}</text>
            <text class="choose-bar" show="{{type.index === current}}"></text>
          </div>
        </block>
      </div>
    </list-item>
    <list-item type="banner" class="free-title" if="{{endTime}}">
      <text>限时免费结束时间：{{endTime}}</text>
    </list-item>
    <block for="book in list" if="{{isInit && list.length>0}}">
      <list-item type="books-item" class="book-list__wrap book-list__wrap--multi">
        <div class="book-list__multi">
            <div class="book-item">
              <x-book multi="{{true}}" width="{{150}}" book="{{book}}">
                <div class="book-info__multi">
                  <text class="name">{{book.book_name}}</text>
                  <text class="intro">{{book.intro}}</text>
                </div>
              </x-book>
            </div>
        </div>
      </list-item>
    </block>
    <list-item type="blank" if="{{isInit && list.length<=0}}" class="blank_img">
      <image src="https://cdn-novel.iycdm.com/quickapp/activity/white_shelf.png"></image>
    </list-item>
  </list>
</template>

<script>
import { getFreeBook } from "../../api";
import router from '@system.router';
import prompt from '@system.prompt';



export default {
  public: {
    bid: "",
    chapter_sequence: "",
  },
  private: {
    isInit: false,
    list: [],
    endTime: '',
    typeList: [
      {
        name: "男生",
        index: 1
      },
      {
        name: "女生",
        index: 2
      }
    ],
    current: 2
  },
  onInit() {
    this.getBookList(this.current)
  },

  typeChange(index) {
    this.current = index;
    this.getBookList(index);

  },
  async getBookList(index = 2) {
    let data = await getFreeBook(index);
    if (!data || (Array.isArray(data) && data.length <= 0)) {
      this.list = [];
      this.endTime = undefined;
      this.isInit = true;
    } else {
      this.list = data.list;
      this.endTime = data.end_time;
      this.isInit = true;
    }

  },


}
</script>

<style lang="less">
.free-title {
  margin: 30px 0;
  justify-content: center;
  text {
    width: 600px;
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: rgba(239, 89, 82, 0.1);
    border: 1px solid rgba(239, 89, 82, 1);
    color: #ef5952;
    font-size: 26px;
    border-radius: 30px;
  }
}
.book-list__wrap {
  background-color: #fff;
  // margin-top: 24px;
  padding: 0 24px;
  flex-direction: column;

  .book-list__title {
    padding: 30px 0;
    align-items: center;

    text {
      color: #333;
      font-size: 32px;
    }
  }
}

.book-list {
  flex: 1;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.book-list__multi {
  margin-top: 30px;
  flex-direction: column;

  .book-item {
    margin-bottom: 30px;
  }

  .book-info__multi {
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    margin-left: 38px;
    // margin-bottom: 40px;

    .name {
      font-size: 32px;
      color: #333;
      lines: 1;
      text-overflow: ellipsis;
    }

    .intro {
      font-size: 24px;
      color: #666;
      lines: 3;
      text-overflow: ellipsis;
      margin-top: 36px;
      line-height: 36px;
    }
  }
}
.blank_img {
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  image {
    width: 500px;
  }
}
.type-bar {
  width: 100%;
  .type-item {
    flex: 1;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: relative;
    text {
      font-size: 30px;
      color: #999;
      // padding: 34px 0;
    }

    .cur {
      color: #3AACFF;
      font-size: 36px;
      font-weight: bold;
    }

    .choose-bar {
      width: 38px;
      height: 4px;
      background-color: #3AACFF;
      border-radius: 2px;
      margin-top: 10px;
    }
  }
}
</style>