novelQuick/src/pages/book-detail/index.ux

<import name="info" src="../../components/book-detail/info"></import>
<import name="add-desktop" src="../../components/addDesktop"></import>
<import
  name="comment-item-simple"
  src="../../components/book-detail/comment-item-simple"
></import>
<import name="my-toast" src="apex-ui/components/toast/index"></import>

<template>
  <div class="page-wrapper">
    <list>
      <list-item type="info"> <info info="{{bookInfo}}"></info> </list-item>
      <list-item type="description" class="description">
        <text class="description-title">作品简介</text>
        <text class="text-remark">{{ bookInfo.novelIntroduction }}</text>
      </list-item>
      <list-item type="sub-title" class="sub-title">
        <text class="text-title">共{{ bookInfo.novelChapterCount || 100 }}章</text>
        <div @click="goToContents">
          <text class="text-remark">{{ bookInfo.createTime && bookInfo.createTime.split('T')[0] || '' }}更新</text>
          <text class="text-remark iconfont">&#xe622;</text>
        </div>
      </list-item>
      <!-- <list-item type="sub-title" class="detail-title">
        <text class="text-title">热门评论</text>
        <div @click="goToComment">
          <text class="text-remark">30人正在讨论</text>
          <text class="text-remark iconfont">&#xe6d7;</text>
        </div>
      </list-item> -->
      <!-- <list-item type="comment" for="{{commentList}}">
        <comment-item-simple
          item="{{$item}}"
        ></comment-item-simple>
      </list-item> -->
      <!-- <list-item type="detail-title" class="detail-title">
        <text class="text-title">相似图书推荐</text>
      </list-item>
      <list-item type="image-list" class="book-image-list">
        <div
          class="book-image-item"
          for="{{recommandBook}}"
          @click="goToDetail($item)"
        >
          <image src="{{$item.image}}"></image>
          <text class="book-image-title">{{ $item.title }}</text>
          <text class="text-remark">{{ $item.author }}</text>
        </div>
      </list-item> -->
    </list>
    <div class="detail-bottom-bar">
      <text
        class="btn btn-shelf {{isInShelf ? 'btn-shelf-disabled' : ''}}"
        @click="addToShelf"
      >
        {{ isInShelf ? '已加入书架' : '加入书架' }}
      </text>
      <text class="btn-read" @click="goToContent">开始阅读</text>
    </div>
    <my-toast id="toast"></my-toast>
    <add-desktop></add-desktop>
  </div>
</template>

<script>
import { bookListData } from '../../assets/data/book-list.js'
import { commentData } from '../../assets/data/comment.js'
import device from '@system.device'
import prompt from '@system.prompt'
export default {
  public: {
    info: '',
    linkId:'',//链接id
  },
  private: {
    bookInfo: {},
    commentList: commentData.slice(0, 3),
    recommandBook: bookListData.slice(0, 3),
    isInShelf: false,
    shelfList: [],
    shelfInfo:{},//书架信息
    linkInfo:{},
    adList:[],
    ad:null,
    screenHeight:0,
  },
  async onInit() {
    // 此处直接将图书内容传进来，实际开发中也可以传入id查询图书信息
    this.bookInfo = this.info ? JSON.parse(this.info) : {}
    if(this.linkId){
      this.linkId = this.linkId.replace(/\?/g, '');
      const detail = await $apis.common.ytNovelLinkDetail({ linkId:this.linkId })
      this.linkInfo = detail.data
      // channelName 渠道名称 phoneTypeName 机型名称
      this.bookInfo.novelId = detail.data.novelId
    }
    // $shelfList:全局变量
    this.shelfList = $shelfList
    this.isInShelf = !!this.shelfList.filter(book => {
      return book.id === this.bookInfo.id
    }).length
    if(this.isInShelf){ // 如果在书架中
      this.shelfInfo = this.shelfList.filter(book => {
        return book.id === this.bookInfo.id
      })[0] || {}
    }
    // 如果没有书名 有id
    if(this.bookInfo.novelId){
      const res = await $apis.common.novelDetail({id:this.bookInfo.novelId})
      this.bookInfo = res.data.ytNovel
    }
    this.initAd();
      setTimeout(()=>{
        if(this.ad) {        
        this.ad.show();
        } else {        
          this.initAd();
        }
      },50)
    // this.indexNativeAd()  // 原生退出广告弹窗
  },
  async initAd(){
    try {
      var that = this
      const ret = await device.getInfo()
         that.ad = require('@service.ad').createBannerAd({  // 使用require方式避免在不支持的广告接口的厂商运行是报错
          adUnitId: '9bcd5671a506459c9e6ef9c642468dc9',          
          style:{            
            left: 0,       
            top: ret.data.statusBarHeight > 119 ?  ret.data.screenHeight - 100 :  ret.data.screenHeight + (120 - ret.data.statusBarHeight),
            height:100,
            width: 1080
          }
        })
      } catch (e) {        
        console.log(e)
      }
  },
  indexNativeAd(){
    // 原生广告 1.0
    let nativeAd = require('@service.ad').createNativeAd({  // 使用require方式避免在不支持的广告接口的厂商运行是报错
        adUnitId:  'e2528e5d2baf4cef9a359f3074ca193c',
    })
    nativeAd.onLoad((data) => {          
      console.log('Native ad resources!', data); // 广告加载成功，返回原生广告资源，根据但是资源自行渲染展现
    })        
    nativeAd.load();
    // 原生广告2.0
    let adParams = {
      adUnitId: 'e2528e5d2baf4cef9a359f3074ca193c', // 原生广告2.0广告位id
      type: 'native',          // 原生广告2.0广告类型 
      adCount: 2,              // 原生广告2.0广告预期返回广告条数   
    }
    require('@service.ad').preloadAd({
      ...adParams,
      success: (data) => {
        this.adList = data.adList
        console.log('data',data)
        // prompt.showToast({
        //   message: `success! data=${JSON.stringify(data)}`
        // })
      }, fail: (data, code) => {
        console.log(data, code)
        // prompt.showToast({
        //   message: `fail! data=${JSON.stringify(data)}, code=${code}`
        // })
      }
    })
  },
  /* -------------------SelfCustomEvent------------------ */
  goToComment() {
    $utils.route2theUrl('pages/comment-all', this.bookInfo)
  },
  goToContents() {
    $utils.route2theUrl('pages/contents', {
      bookId: this.bookInfo.id,
      bookTitle: this.bookInfo.novelName
    })
  },
  goToDetail(item) {
    console.log(item)
    // 根据id查询详情，跳转到另一个图书的详情页，用router.replace，无法返回当前页
    $utils.routeReplacetheUrl('pages/book-detail', {
      info: JSON.stringify(item)
    })
  },
  goToContent() {
    $utils.route2theUrl('pages/book-content', {
      bookId: this.bookInfo.id,
      bookTitle: this.bookInfo.novelName,//title,
      total: this.bookInfo.novelChapterCount,//count
      chapterId:this.shelfInfo.chapterId || 1, // 如果在书架中
    })
  },
  addToShelf() {
    if (this.isInShelf) {
      return
    }
    if (!this.bookInfo.id) {
      this.$child('toast').showToast({
        content: '图书信息有误',
        icon: 'warning'
      })
      return
    }
    this.isInShelf = true
    this.bookInfo.chapterId = 1 // 设置默认章节为第一章
    this.shelfList.push(this.bookInfo)
    $utils.setShelfList(this.shelfList, true) // 保存到全局变量和storage
    this.$child('toast').showToast({
      content: '已加入书架',
      icon: 'thumbs-up'
    })
  }
}
</script>

<style lang="less">
@import '../../assets/styles/index.less';
.description {
  padding: @gap-4;
  width: 100%;
  background-color: @white;
  .flex-box-mixins(column, flex-start, flex-start);
  .description-title {
    .text-title;
    margin-bottom: @gap-2;
  }
}
.sub-title {
  .detail-title;
  padding: @gap-4;
}
.detail-title {
  background-color: @white;
  padding: @gap-4 @gap-4 @gap-2 @gap-4;
  margin-top: @gap-2;
  .text-title;
  .flex-box-mixins(row, space-between, center);
}
.comment-more {
  margin-right: @gap-3;
}

.book-image-list {
  width: 100%;
  padding: 0 @gap-2 @gap-2 @gap-2;
  background-color: @white;
  margin-bottom: @gap-2;
  flex-wrap: wrap;
  .flex-box-mixins(row, flex-start, flex-start);
  .g22kjdgy{
    color: #ffffff;
  }
  .book-image-item {
    width: 28%;
    margin: @gap-2;
    .flex-box-mixins(column, flex-start, flex-start);
    image {
      border-radius: 5px;
      width: 100%;
      height: 270px;
      flex: 1;
    }
    .book-image-title {
      .text-remark-black;
      margin: @gap-1 0 5px 0;
    }
  }
}

.detail-bottom-bar {
  padding: @gap-3 @gap-4 115px;
  background-color: @bg-grey;
  .border-top-mixins();
  .flex-box-mixins(row, space-between, center);
}
.btn-shelf {
  color: @brand;
  border: 1px solid @brand;
  border-radius: 5px;
  padding: 15px 0;
  flex: 1;
  text-align: center;
  margin-right: @gap-2;
}
.btn-read {
  color: @white;
  border: 1px solid @brand;
  background-color: @brand;
  border-radius: 5px;
  padding: 15px 0;
  flex: 1;
  text-align: center;
}
.btn-shelf-disabled {
  .btn-disabled;
}
</style>