quickapp_front/src/views/Reader/index.ux

<import name="short-page" src="../../components/short/index.ux"></import>
 <import name="wechat-page" src="../../components/wechat/index.ux"></import> 
  <import name="recom-page" src="../../components/book/read_recom.ux"></import>
<template>
  <div id="reader-content">
    <stack>   
      <div class="reader-wrap" id='list' style="background-color:{{currentColor.color}}">
      <div class="back-btn" @click="backToPak" if="isShowBackBtn">
        <div class="back-btn-wrap">
        <image src="../../assets/imgs/white_back.png" ></image>
        <text>{{back_name}}</text>
      </div>
      </div>
         <div class="reader-title">
          <text class="title" style="color:{{isNight=='night'?'#666':'#333'}}">{{bookinfo.chapter_name}}</text>
          <!-- <text class="add-shelf" @click="addShelf">加入书架1</text> -->
        </div> 
        
        <div class="reader-content">
          <div class="readContent" @click="showMore"><text class="chapter-text" for='content' style="color:{{currentColor.fontColor}};font-size:{{`${readFontSize}px`}}">{{$item}}</text></div>
          <div class="bottom-setting" style="background-color:{{currentColor.btColor}}" if={{showSetting}} @click="stopPop">
            <div class="item-content">
              <text class="label-min" style="color:{{isNight=='night'?'#666':'#333'}}">A</text>
              <slider class="slider" min="30" max="48" step="2" value="{{readFontSize}}" onchange="changeFontSize" style="blockColor: #fff"></slider>
              <text class="label-max" style="color:{{isNight=='night'?'#666':'#333'}}">A</text>
            </div>
            <div class="item-color">
              <text class="colori" for="colorList" onclick="changeColor($item,undefined)" style="border-color:{{currentColor.color==$item.color? currentBorder: $item.borderColor}};background-color:{{$item.color}};"></text>
              <text class="color-icon {{ isNight }}" onclick="changeColor(nightColor,isNight)"></text>
            </div>
            <div class="item-page">
              <text @click="getPrevChapter" style="color:{{isNight=='night'?'#666':'#333'}}">上一章</text>
              <text @click="toCatalog" style="color:{{isNight=='night'?'#666':'#333'}}">目录</text>
              <text @click="getNextChapter" style="color:{{isNight=='night'?'#666':'#333'}}">下一章</text>
            </div>
            <div>
            </div>
            <div class="setting-top" style="background-color:{{currentColor.color}}" if={{showSetting}} @click="backRouter">
              <image src="{{getImgUrl}}" class="back-icon"></image> <text style="color:{{isNight=='night'?'#666':'#333'}}">{{bookinfo.chapter_name}}</text><text style="text-indent:-999px">1</text>
            </div>
          </div>
  
          <div class="banner-list" if="{{reader_banner.length>0}}">
            <swiper class="swipe-bar" autoplay="true" indicator="false">
              <block for="reader_banner">
                <div class="swipe-item">
                  <image class="cover" src="{{$item.img}}" @click="goActivity($item)"></image>
                </div>
              </block>
            </swiper>
          </div>
        </div>
         <recom-page if="{{isShowBackRecom}}"  @addshort="changeRecomEnd"  recom_list="{{recom_list}}"></recom-page>
        <short-page if="{{showShortPop}}" @addshort="shortEnd" bottom="40"></short-page>
        <!-- <wechat-page></wechat-page> -->
        <div class='toast' if="{{showtoast}}">
          <text>正在加载中...</text>
        </div>
    </stack>
    <div class="reader-bottom">
        <div class="reader-operator-next" @click="getNextChapter"><text class="operator">下一章</text></div>
          <div class="reader-operator">
                  <text class="operator prev" @click="getPrevChapter">上一章</text>
                  <text>|</text>
                 <text class="operator catalog" @click="toCatalog">目录</text>
          </div>
    </div>
    <div class="mustToask" show="{{showMustTost}}">
      <div class="mustBox">
        <image src="../../assets/imgs/addImg.png" @click="addDestop"></image>
      </div>
    </div>
    <div class="mustToask" show="{{showWorkWechatTost}}">
      <div class="qiweiMustBox">
        <image src="../../assets/imgs/add_work_wechat.png"  @click="goToWorkWeachat" ></image>
        <!-- <div class="add-area" @click="goToWorkWeachat" :style="{{workWeachatHight}}"></div> -->
        <div class="close-box" @click="closeWorkWeachat" show="{{force_add_work_wechat_type === 1}}"> 
          <image src="../../assets/imgs/close.png"></image>
        </div>
       
    </div>
  </div>

</template>

<script>
import prompt from '@system.prompt';
import router from "@system.router";
import storage from '@system.storage';
import pkg from '@system.package'
import it from "../../helper/interface.js";
import { getChapters, getIsonshelf, postUserShelfBooks, chapterOrders, userAddDsktop, noAdvBookInfo, recommendBooks, advReplaceBookInfo } from "../../api";
import { getAppConfig } from '../../api/utils.js';
let getConfig;
export default {
  // protected: {
  //   bid: '',
  //   chapter_id: ''
  // },
  public: {
    workWeachatHight: "",
    bid: '',
    tx_bid: "",
    chapter_id: '',
    send_order_id: "",
    push_id: "",
    canReadecid: "",
    showtoast: false,
    back_name: '',
    back_url: '',
    back_pkg: '',
    platform: '',
    isShowBackBtn: false,
    recom_list: [],
    isShowBackRecom: false,
    last_recom_bid: "",
  },
  private: {
    bookinfo: {},
    content: [],
    reader_banner: [],
    showShortPop: false,
    readFontSize: 38,
    isNight: 'sun',
    back_nums: 0,
    hasShort: false,
    showSetting: false,
    force_add_desk_type: 0,
    force_add_work_wechat_type: 0, // 企微
    hasClickWorkWechat: false, // 是否跳转过企微
    showWorkWechatTost: false,
    workWechatUrl: "",
    showMustTost: false,
    back_reader: 0,
    colorList: [
      { color: '#DFDAC7', borderColor: '#6090AE', btColor: '#E8F6FF', isIcon: false },
      { color: '#E6E6E6', borderColor: '#CCC', btColor: '#F2F2F2', isIcon: false },
      { color: '#EED9BB', borderColor: '#C6A473', btColor: '#FFFBE8', isIcon: false },
      { color: '#B3E2CB', borderColor: '#68AA8A', btColor: '#D5F2D8', isIcon: false },
      { color: '#B3D0E2', borderColor: '#6090AE', btColor: '#E8F6FF', isIcon: false },

    ],
    currentBorder: '#EE6159',
    nightColor: {
      fontColor: '#666',
      btColor: '#333',
      color: '#1a1a1a'
    },
    currentColor: {
      color: '#DFDAC7', btColor: '#F2F2F2', fontColor: '#1a1a1a'
    }
  },
  computed: {
    getImgUrl() {
      return this.isNight == 'night' ? '../../assets/imgs/white_back.png' : '../../assets/imgs/black_back.png'
    }
  },
  async onInit() {
    // 企微点击读取
    let clilck_work_wechat = (await storage.get({ key: "has_click_work_wechat_"  + this.bid })).data;
    if (clilck_work_wechat) {
      this.hasClickWorkWechat = true;
    }
   
    if (this.platform) {
      await storage.set({ key: "platform", value: this.platform });
    } else {
      let platform = (await storage.get({ key: "platform" })).data;
      if (platform) this.platform = platform;
  
    }
    if (!this.last_recom_bid || this.last_recom_bid == "") {
      let last_recom_bid = (await storage.get({ key: "last_recom_bid" })).data;
      if (last_recom_bid) {
        this.last_recom_bid = last_recom_bid;
      } else {
        this.last_recom_bid = "";
      }
    }
    if (this.back_name) {
      await storage.set({ key: "back_name", value: this.back_name });
    } else {
      let back_name = (await storage.get({ key: "back_name" })).data;
      if (back_name) this.back_name = back_name;
    }
    if (this.back_url) {
      await storage.set({ key: "back_url", value: this.back_url });
    } else {
      let back_url = (await storage.get({ key: "back_url" })).data;
      if (back_url) this.back_url = back_url;
    }
    if (this.back_pkg) {
      await storage.set({ key: "back_pkg", value: this.back_pkg });
    } else {
      let back_pkg = (await storage.get({ key: "back_pkg" })).data;
      if (back_pkg) this.back_pkg = back_pkg;
    }
    if (this.send_order_id) {
      await storage.set({ key: "send_order_id", value: this.send_order_id });
    } else {
      let send_order_id = (await storage.get({ key: "send_order_id" })).data;
      if (send_order_id) this.send_order_id = send_order_id;
    }
    if (this.push_id) {
      await storage.set({ key: "push_id", value: this.push_id });
    }
   
    this.back_name = decodeURI(this.back_name)
    if (this.platform && (this.platform == 'tx_adq' || this.platform == 'tx_adq_new')) {
      if (this.back_url) {
        // console.log('book_info',book_info);
        pkg.hasInstalled({
          package: this.back_pkg,
          success: data => {
            if (!data.result) {
              this.isShowBackBtn = false
            }
            if (data.result) {
              this.isShowBackBtn = true;
            }
          },
          fail: function (data, code) {
            console.log(data)
          },
          complete: data => {

          }
        })
      } 

    } 
    // else {
    //   //  如果书籍id为派单书籍id则检测是否需要替换书籍
    //   if (this.send_order_id > 0 && this.ad_bid == this.bid) {
    //     let realBook = await advReplaceBookInfo(this.send_order_id);
    //     // let realBook = {};
    //     if (realBook && realBook.bid && realBook.bid && realBook.cid) {
    //       this.bid = realBook.bid;
    //       this.chapter_id = realBook.cid;
    //     }
    //   }
    // }

    /* let s = (await storage.get({ key: "send_order_id" })).data;
    console.log("save send_order_id in storage");
    console.log("send_order_id", this.send_order_id);
    console.log("storage send_order_id", s); */
    await this.getChapters(this.bid, this.chapter_id);
    let setting = (await storage.get({ key: "readSetting" })).data;
    if (setting) {
      let sets = JSON.parse(setting)
      this.currentColor = sets;
      this.isNight = sets.isNight;
    }
    let font = (await storage.get({ key: "readFont" })).data;
    if (font) {
      this.readFontSize = font;
    }
    getConfig = getAppConfig(this);
    let { reader_banner } = await getConfig('position');
    this.reader_banner = reader_banner;
    let { sign_out_reader_show } = await getConfig('add_desk_alert');
    this.back_reader = sign_out_reader_show;
    this.getRecomList();
    userAddDsktop(this.$app.$def.data.backClickCount).then(res => {
      //TODO 加桌后统计上报
    }).catch(r => {
      //TODO 失败后统计上报
    });
  },
  goActivity(item) {
    router.push({
      uri: item.url,
      params: item.params
    })
  },
  backToPak() {
    console.log(12)
    router.push({
      uri: this.back_url
    })
  },
  backRouter() {
    this.back_reader = 1;
    let that = this;
    if (this.back_reader == 1) {
      if (this.back_nums == 0 && this.recom_list.length > 0) {
        this.showShortPop = false;
        this.back_nums = 2;
        this.isShowBackRecom = true;
        return true;
      }
      if (this.back_nums == 2) {
        if (!this.hasShort) {
          this.showShortPop = true;
        }
        this.back_nums = 3;
        this.isShowBackRecom = false;
        return true;
      }

      it.backCreateShortCut(res => {
        if (res == 'back') {
          that.getLastPage();
          return true;
        }
      });
    } else {
      that.getLastPage();
    }
    return true;
  },
  async onShow() {
    it.getShortCut((value) => {
      this.showSetting = false;
      this.showShortPop = !value;
      this.hasShort = value;
      if (value) {
        this.$app.$def.data.backClickCount = 1
      } else {
        this.$app.$def.data.backClickCount = 0
      }
    })
    let params = {
      bid: this.bid,
      chapter_id: this.chapter_id,
    }
    await storage.set({ key: "lastCapter", value: JSON.stringify(params) });
  },
  stopPop(evt) {
    evt.stopPropagation();
    return;
  },
  showMore() {
    this.showSetting = !this.showSetting;
    if (this.showSetting) {
      this.showShortPop = false;
    } else {
      if (!this.hasShort) this.showShortPop = true;
    }
  },

  async changeFontSize(evt) {
    this.readFontSize = evt.progress;
    await storage.set({ key: "readFont", value: this.readFontSize });
  },
  async changeColor(item, type) {
    if (type) {
      if (type == 'sun') {
        this.isNight = 'night';
        this.currentColor = this.nightColor;
        await storage.set({ key: "readSetting", value: JSON.stringify({ ...this.nightColor, isNight: 'night' }) });
      } else {
        this.isNight = 'sun';
        this.currentColor = { color: '#E6E6E6', borderColor: '#CCC', btColor: '#F2F2F2', isIcon: false };
        await storage.set({ key: "readSetting", value: JSON.stringify({ ...this.currentColor, isNight: 'sun' }) });
      }
    } else {
      this.isNight = 'sun';
      this.currentColor = {
        color: item.color,
        btColor: item.btColor,
        fontColor: '#1a1a1a'
      }
      await storage.set({ key: "readSetting", value: JSON.stringify({ ...this.currentColor, isNight: 'sun' }) });
    }
  },
  addShelf() {
    console.log("add shelf");
    getIsonshelf({ bid: this.bid }).then(r => {
      r.is_on ? '' : postUserShelfBooks({ bid: this.bid })
    })
  },
  shortEnd(value) {
    if (value.detail.installed) {
      this.showMustTost = false;
      prompt.showToast({ message: "添加桌面成功！请前往任务中心领取奖励" });
    }
    this.showShortPop = !value.detail.installed;
    this.hasShort = value.detail.installed;

  },
  getChapters(bid, chapter_id) {
    this.showtoast = true
    console.log("router length:", router.getLength());
    getChapters({ bid: bid, chapter_id: chapter_id }).then(r => {
      this.force_add_desk_type = r.force_add_desk_type;
      this.force_add_work_wechat_type = r.force_add_work_wechat_type;
      this.workWechatUrl = r.force_add_work_wechat_url
      this.content = r.chapter_content.trim().split(/\n/)
      this.bookinfo = r;
      // this.$element('list').scrollTo({ index: 0 })
      this.addShelf();
      this.showtoast = false
    }).catch(e => {
      console.log('e code')
      console.log(e.data)
      console.log(e.data.code == '10016' || e.data.code == '10019')
      if (e.data.code == '10016' || e.data.code == '10019' || e.data.code == '10017') {
        chapterOrders({ bid: bid, chapter_id: chapter_id }).then(r => {
          this.content = r.chapter_content.trim().split(/\n/)
          this.bookinfo = r
          this.showtoast = false
          // this.$element('list').scrollTo({ index: 0 })
        }).catch(f => {
          console.log('f code')
          console.log(f.data)
          this.showtoast = false
          if (f.data.code == '10014' || f.data.code == '10015' || f.data.code == '10016') {
            this.getChapters(bid, this.canReadecid)
            router.push({
              uri: "/views/Pay",
              params: {
                code: f.data.code,
                fee: e.data.data.fee,
                bid: this.bid
              }
            })
          }
        })
      } else if (e.data.code == '10014' || e.data.code == '10015') {
        this.showtoast = false
        this.getChapters(bid, this.canReadecid)
        router.push({
          uri: "/views/Pay",
          params: {
            code: e.data.code,
            fee: e.data.data.fee,
            bid: this.bid
          }
        })
      }
    })
  },
  toCatalog(evt) {
    evt.stopPropagation();
    router.replace({
      uri: "/views/Catalog",
      params: {
        chapter_sequence: this.bookinfo.chapter_sequence,
        bid: this.bid,
        chapter_id: this.chapter_id,
        fromReader: true,
      }
    })
  },
  getPrevChapter(evt) {
    evt.stopPropagation();
    console.log("get prev chapter");
    if (this.bookinfo.prev_cid == 0) {
      return prompt.showToast({ message: '已经是第一章啦' });
    }
    router.replace({
      uri: "/views/Reader",
      params: {
        bid: this.bookinfo.bid,
        chapter_id: this.bookinfo.prev_cid,
        canReadecid: this.bookinfo.chapter_id
      }
    })
  },
  addDestop() {
    it.mustCreateShort((res, code) => {
      if (res) {
        this.goNext();
      } else {
        prompt.showToast({ message: '开启加桌权限可以领取新人福利哟~' });
      }
    })
  },
  getNextChapter(evt) {
    evt.stopPropagation();
    let _this = this;
    if (!this.hasClickWorkWechat && this.force_add_work_wechat_type > 0) {
      // 需要处理企微
      if (this.force_add_desk_type == 1) {
        // 强加桌
        it.getShortCut(res => {
          if (!res) { this.showMustTost = true; } else {
            this.showWorkWechatTost = true;
            // this.goNext();
          }
        })
      } else {
        this.showWorkWechatTost = true;
      }
    } else {
      // 无需弹窗企微
      if (this.force_add_desk_type == 1) {
        it.getShortCut(res => {
          if (!res) { this.showMustTost = true; } else {
            this.goNext();
          }
        })
      } else if (this.force_add_desk_type == 2) {
        it.loseLevelShortCut(res => {
          this.goNext();
        })
      } else {
        this.goNext();
      }
    }

  },
  goNext() {
    let self = this;
    if (this.bookinfo.next_cid == 0) {
      router.push({
        uri: "/views/Raderover",
        params: {
          bid: this.bid
        }
      })
      return
    }
    //判断是否自然流量自然流量付费章节开启付费提醒
    if (!this.send_order_id && this.bookinfo.next_chapter_status == 2) {
      prompt.showDialog({
        title: '温馨提示',
        message: `下一章即将消耗${this.bookinfo.next_price}书币哟~`,
        buttons: [
          {
            text: '阅读下一章',
            color: '#EF5952'
          },
          {
            text: '我再想想',
            color: '#999'
          }
        ],
        success: function (data) {
          if (data.index === 0) {
            router.replace({
              uri: "/views/Reader",
              params: {
                bid: self.bookinfo.bid,
                chapter_id: self.bookinfo.next_cid,
                canReadecid: self.bookinfo.chapter_id
              }
            })
          }

        },
        cancel: function () {
          console.log('取消前往')
        },
      })
    } else {
      router.replace({
        uri: "/views/Reader",
        params: {
          bid: this.bookinfo.bid,
          chapter_id: this.bookinfo.next_cid,
          canReadecid: this.bookinfo.chapter_id
        }
      })
    }

    // this.getChapters(this.bookinfo.bid, this.bookinfo.next_cid)

  },
  onBackPress() {
    this.backRouter();
    // that.getLastPage();
    return true;
  }, async changeRecomEnd(data) {
    if (data.detail.op == "change_book") {
      this.getRecomList(1);

    } else if (data.detail.op == "close") {
      this.isShowBackRecom = false;
      this.back_nums = 3;
      if (!this.hasShort) {
        this.back_nums = 2;
      }

    }
  }, async getRecomList(isChang = 0) {
    let recom_list = await recommendBooks(this.last_recom_bid);
    if (recom_list.length > 0) {
      this.recom_list = recom_list;
      this.last_recom_bid = recom_list[recom_list.length - 1].book_id;
    }
    if (isChang == 1 || !this.last_recom_bid || this.last_recom_bid == '') {
      await storage.set({ key: "last_recom_bid", value: this.last_recom_bid });
    }

    // console.log(this.recom_list.length);
    // if(this.recom_list.length == 3){
    //   return true;
    // }

  }, getLastPage() {
    let page = router.getState();
    let allPage = router.getPages();
    let back = {};
    for (var i = allPage.length - 1; i >= 0; i--) {
      if (allPage[i].name != page.name  && allPage[i].name != "views/Dispatch") {
        back = allPage[i];
        break;
      }
    }
    if (JSON.stringify(back) === '{}') {
      router.replace({ uri: "/views/Index" });
    } else {
      router.back(back);
    }
  }, async  goToWorkWeachat() {
    await storage.set({ key: "has_click_work_wechat_"  + this.bid, value: 1 });
    this.showWorkWechatTost = false;
    this.hasClickWorkWechat = true;
    if (this.workWechatUrl) {
      router.push({
        uri: this.workWechatUrl
      })
      let $this = this;
        setTimeout(() => {
          $this.goNext();
        }, 10000)
    }else{
       this.goNext();
    }
   
  }, async closeWorkWeachat() {
    await storage.set({ key: "has_click_work_wechat_"  + this.bid, value: 2 });
    this.showWorkWechatTost = false;
    this.hasClickWorkWechat = true;
    this.goNext();

  }
}

</script>

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