1
This commit is contained in:
@fawn-nine
72
pages/eBook/1/battery.vue
Normal file
72
pages/eBook/1/battery.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<template>
|
||||
<view class="battery-container">
|
||||
<view class="battery-body">
|
||||
<view class="battery" :style="{width: `${level}%`}"></view>
|
||||
<text class="iconfont charging" v-if="charging"></text>
|
||||
</view>
|
||||
<view class="battery-head"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
return:{
|
||||
level: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
charging: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
},
|
||||
methods: {
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import '@/pages/eBook/1/uni.scss';
|
||||
.battery-container{
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 25px;
|
||||
height: 10px;
|
||||
.battery-body{
|
||||
position: relative;
|
||||
padding: 1px;
|
||||
width: 22px;
|
||||
height: 100%;
|
||||
border-radius: 1px;
|
||||
border: $minor-text-color solid 1px;
|
||||
.battery{
|
||||
height: 100%;
|
||||
background-color: $minor-text-color;
|
||||
}
|
||||
.charging{
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
height: 12px;
|
||||
line-height: 12px;
|
||||
font-size: 15px;
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
.battery-head{
|
||||
width: 2px;
|
||||
height: 6px;
|
||||
background-color: $minor-text-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
2294
pages/eBook/1/bookComent.vue
Normal file
2294
pages/eBook/1/bookComent.vue
Normal file
File diff suppressed because one or more lines are too long
80
pages/eBook/1/uni.scss
Normal file
80
pages/eBook/1/uni.scss
Normal file
@@ -0,0 +1,80 @@
|
||||
/**
|
||||
* 这里是uni-app内置的常用样式变量
|
||||
*
|
||||
* uni-app 官方扩展插件及插件市场（https://ext.dcloud.net.cn）上很多三方插件均使用了这些样式变量
|
||||
* 如果你是插件开发者，建议你使用scss预处理，并在插件代码中直接使用这些变量（无需 import 这个文件），方便用户通过搭积木的方式开发整体风格一致的App
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
|
||||
*
|
||||
* 如果你的项目同样使用了scss预处理，你也可以直接在你的 scss 代码中使用如下变量，同时无需 import 这个文件
|
||||
*/
|
||||
|
||||
/* 颜色变量 */
|
||||
|
||||
/* 行为相关颜色 */
|
||||
$uni-color-primary: #007aff;
|
||||
$uni-color-success: #4cd964;
|
||||
$uni-color-warning: #f0ad4e;
|
||||
$uni-color-error: #dd524d;
|
||||
|
||||
/* 文字基本颜色 */
|
||||
$main-text-color:#303133;//主要文字
|
||||
$general-text-color:#606266;//常规文字
|
||||
$minor-text-color:#909399;//次要文字
|
||||
$placeholder-text-color:#c0c4cc;//占位文字
|
||||
$uni-text-color:#333;//基本色
|
||||
$uni-text-color-inverse:#fff;//反色
|
||||
$uni-text-color-grey:#999;//辅助灰色，如加载更多的提示信息
|
||||
$uni-text-color-placeholder: #808080;
|
||||
$uni-text-color-disable:#c0c0c0;
|
||||
|
||||
/* 背景颜色 */
|
||||
$uni-bg-color:#ffffff;
|
||||
$uni-bg-color-grey:#f8f8f8;
|
||||
$uni-bg-color-hover:#f1f1f1;//点击状态颜色
|
||||
$uni-bg-color-mask:rgba(0, 0, 0, 0.4);//遮罩颜色
|
||||
|
||||
/* 边框颜色 */
|
||||
$uni-border-color:#c8c7cc;
|
||||
|
||||
/* 尺寸变量 */
|
||||
|
||||
/* 文字尺寸 */
|
||||
$uni-font-size-sm:24rpx;
|
||||
$uni-font-size-base:28rpx;
|
||||
$uni-font-size-lg:32rpx;
|
||||
|
||||
/* 图片尺寸 */
|
||||
$uni-img-size-sm:40rpx;
|
||||
$uni-img-size-base:52rpx;
|
||||
$uni-img-size-lg:80rpx;
|
||||
|
||||
/* Border Radius */
|
||||
$uni-border-radius-sm: 4rpx;
|
||||
$uni-border-radius-base: 6rpx;
|
||||
$uni-border-radius-lg: 12rpx;
|
||||
$uni-border-radius-circle: 50%;
|
||||
|
||||
/* 水平间距 */
|
||||
$uni-spacing-row-sm: 10px;
|
||||
$uni-spacing-row-base: 20rpx;
|
||||
$uni-spacing-row-lg: 30rpx;
|
||||
|
||||
/* 垂直间距 */
|
||||
$uni-spacing-col-sm: 8rpx;
|
||||
$uni-spacing-col-base: 16rpx;
|
||||
$uni-spacing-col-lg: 24rpx;
|
||||
|
||||
/* 透明度 */
|
||||
$uni-opacity-disabled: 0.3; // 组件禁用态的透明度
|
||||
|
||||
/* 文章场景相关 */
|
||||
$uni-color-title: #2C405A; // 文章标题颜色
|
||||
$uni-font-size-title:40rpx;
|
||||
$uni-color-subtitle: #555555; // 二级标题颜色
|
||||
$uni-font-size-subtitle:36rpx;
|
||||
$uni-color-paragraph: #3F536E; // 文章段落颜色
|
||||
$uni-font-size-paragraph:30rpx;
|
||||
68
pages/eBook/1/utils.js
Normal file
68
pages/eBook/1/utils.js
Normal file
File diff suppressed because one or more lines are too long
133
pages/eBook/1/virtualList.vue
Normal file
133
pages/eBook/1/virtualList.vue
Normal file
@@ -0,0 +1,133 @@
|
||||
<template>
|
||||
<view class="virtual-list" style="position: relative;">
|
||||
<movable-area style="position: absolute;right: 0;width: 30px;height: 100%;">
|
||||
<movable-view class="action-bar-box" direction="vertical" @change="change" :y="y" :animation="false">
|
||||
<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
|
||||
<view style="border-bottom: #000 solid 2px;width: 100%;"></view>
|
||||
</movable-view>
|
||||
</movable-area>
|
||||
<scroll-view scroll-y="true"
|
||||
:style="{
|
||||
'height': scrollHeight + 'px',
|
||||
'position': 'relative',
|
||||
'zIndex': 1
|
||||
}"
|
||||
@scroll="handleScroll" :scroll-top="scrollTop" :show-scrollbar="false">
|
||||
|
||||
<view class="scroll-bar"
|
||||
:style="{
|
||||
'height': localHeight + 'px'
|
||||
}"></view>
|
||||
<view class="list"
|
||||
:style="{
|
||||
'transform': `translateY(${offset}px)`
|
||||
}">
|
||||
<view class="item-wrap"
|
||||
v-for="(item, index) in visibleData"
|
||||
:key="index">
|
||||
<slot :item="item" :active="active"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'VirtualList',
|
||||
return: {
|
||||
// 所有的items
|
||||
items: Array,
|
||||
// 可视区域的item数量
|
||||
remain: Number,
|
||||
// item大小
|
||||
size: Number,
|
||||
// 当前章节
|
||||
active: Number,
|
||||
// 可使区域高度
|
||||
scrollHeight: Number
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
// 起始
|
||||
start: 0,
|
||||
// 结束
|
||||
end: this.remain,
|
||||
// list 偏移量
|
||||
offset: 0,
|
||||
scrollTop: 0,
|
||||
y: 0
|
||||
}
|
||||
},
|
||||
created() {
|
||||
//当前章节滚动至顶部
|
||||
this.scrollTop = this.size * this.active
|
||||
},
|
||||
computed: {
|
||||
// 预留项
|
||||
preCount() {
|
||||
return Math.min(this.start, this.remain);
|
||||
},
|
||||
nextCount() {
|
||||
return Math.min(this.items.length - this.end, this.remain);
|
||||
},
|
||||
// 可视区域的item
|
||||
visibleData() {
|
||||
const start = this.start - this.preCount;
|
||||
const end = this.end + this.nextCount;
|
||||
return this.items.slice(start, end);
|
||||
},
|
||||
localHeight() {
|
||||
return this.items.length * this.size
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
change(e) {
|
||||
if (e.detail.source !== 'touch') {
|
||||
return
|
||||
}
|
||||
let y = e.detail.y;
|
||||
let scroll = y/(this.scrollHeight-40)*(this.localHeight-this.scrollHeight);
|
||||
scroll = scroll < 0 ? 0 : scroll;
|
||||
this.scrollTop = scroll;
|
||||
},
|
||||
handleScroll(ev) {
|
||||
const scrollTop = ev.detail.scrollTop;
|
||||
this.y = scrollTop/(this.localHeight-this.scrollHeight)*(this.scrollHeight-40)
|
||||
// 开始位置
|
||||
const start = Math.floor(scrollTop / this.size)
|
||||
this.start = start < 0 ? 0 : start;
|
||||
// 结束位置
|
||||
this.end = this.start + this.remain;
|
||||
// 计算偏移
|
||||
const offset = scrollTop - (scrollTop % this.size) - this.preCount * this.size
|
||||
this.offset = offset < 0 ? 0 : offset;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.list {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.action-bar-box{
|
||||
padding: 3px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
background-color: transparent;
|
||||
border-radius: 10rpx;
|
||||
box-shadow: 0 0 5px #000;
|
||||
width: 20px;
|
||||
height: 40px;
|
||||
z-index:2;
|
||||
}
|
||||
</style>
|
||||
809
pages/eBook/2/book.vue
Normal file
809
pages/eBook/2/book.vue
Normal file
@@ -0,0 +1,809 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- 仅计算用 -->
|
||||
<cus-page id="preChapter" class="hidden" :content="preChapter.content" :fontSize="fontSize"
|
||||
:lineHeight="lineHeight"></cus-page>
|
||||
<cus-page id="curChapter" class="hidden" :content="curChapter.content" :fontSize="fontSize"
|
||||
:lineHeight="lineHeight"></cus-page>
|
||||
<cus-page id="nextChapter" class="hidden" :content="nextChapter.content" :fontSize="fontSize"
|
||||
:lineHeight="lineHeight"></cus-page>
|
||||
|
||||
<!-- 上一页 -->
|
||||
<cus-page v-if="prePage.ready" :zIndex="102" :bgColor="bgColor" :transform="prePage.pageTransform[turnType]"
|
||||
:showAnimation="showAnimation" :showShadow="showShadow" :turnType="turnType"
|
||||
:chapterName="prePage.chapterName" :innerHeight="innerHeight" :content="prePage.content"
|
||||
:fontSize="fontSize" :lineHeight="lineHeight" :textColor="textColor" :pageNum="prePage.pageNum"
|
||||
:systemTimeStr="systemTimeStr" :totalPage="prePage.totalPage" :clipPath="prePage.clipPath"
|
||||
:bgStyle="prePage.bgStyle" :subBgStyle="prePage.subBgStyle">
|
||||
</cus-page>
|
||||
|
||||
<!-- 本页 -->
|
||||
<cus-page :isTouch="true" :zIndex="101" :bgColor="bgColor" :transform="curPage.pageTransform[turnType]"
|
||||
:showAnimation="showAnimation" :showShadow="showShadow" :turnType="turnType"
|
||||
:chapterName="curPage.chapterName" :innerHeight="innerHeight" :content="curPage.content"
|
||||
:fontSize="fontSize" :lineHeight="lineHeight" :textColor="textColor" :pageNum="curPage.pageNum"
|
||||
:systemTimeStr="systemTimeStr" :totalPage="curPage.totalPage" :clipPath="curPage.clipPath"
|
||||
:bgStyle="curPage.bgStyle" :subBgStyle="curPage.subBgStyle" @touch-start="touchStart"
|
||||
@touch-move="touchMove" @touch-end="touchEnd" @touch-cancel="touchCancel">
|
||||
</cus-page>
|
||||
|
||||
<!-- 下一页 -->
|
||||
<cus-page ref="curChapter" v-if="nextPage.ready" :zIndex="100" :bgColor="bgColor"
|
||||
:transform="nextPage.pageTransform[turnType]" :showAnimation="showAnimation" :showShadow="showShadow"
|
||||
:turnType="turnType" :chapterName="nextPage.chapterName" :innerHeight="innerHeight"
|
||||
:content="nextPage.content" :fontSize="fontSize" :lineHeight="lineHeight" :textColor="textColor"
|
||||
:pageNum="nextPage.pageNum" :systemTimeStr="systemTimeStr" :totalPage="nextPage.totalPage">
|
||||
</cus-page>
|
||||
|
||||
<!-- 点击屏幕弹出 -->
|
||||
<content-setting ref="contentSetting" :bgColor="bgColor" :textColor="textColor" :isDark="isDark"
|
||||
:fontSize="fontSize" :bgColorList="bgColorList" :textColorList="textColorList" :turnTypeList="turnTypeList"
|
||||
:colorType="colorType" :turnType="turnType" :chapterData="chapterData"
|
||||
:chapterIndex="curChapter.chapterIndex" @updateProps="updateProps" @updatePage="updatePage"
|
||||
@updateCatalog="updateCatalog" @whenHide="hideMenu" @moreHandle="moreHandle" @listenHandle="listenHandle">
|
||||
</content-setting>
|
||||
|
||||
<!-- 悬浮窗 -->
|
||||
<cus-audio-play ref="audioPlay" :bookId="id" :bookName="title" :chapterName="curChapter.chapterName"
|
||||
:content="curChapter.content" :styleBottom="120" @show="getAudioPlayShow"></cus-audio-play>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import contentSetting from './contentSetting.vue'
|
||||
import {
|
||||
mapGetters,
|
||||
mapMutations,
|
||||
mapActions
|
||||
}
|
||||
from 'vuex'
|
||||
export default {
|
||||
components: {
|
||||
contentSetting,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
id:"5f9c97aa52f7032983c485e4",
|
||||
title: '开局就杀皇帝',
|
||||
chapterData: [],
|
||||
preChapter: { //上一章数据
|
||||
ready: false, //是否准备完毕
|
||||
chapterIndex: 0,
|
||||
chapterName: '',
|
||||
content: '',
|
||||
totalPage: 1,
|
||||
},
|
||||
|
||||
curChapter: { //本一章数据
|
||||
chapterIndex: 0,
|
||||
chapterName: '',
|
||||
content: '',
|
||||
totalPage: 1,
|
||||
},
|
||||
|
||||
nextChapter: { //下一章数据
|
||||
ready: false, //是否准备完毕
|
||||
chapterIndex: 0,
|
||||
chapterName: '',
|
||||
content: '',
|
||||
totalPage: 1,
|
||||
},
|
||||
|
||||
prePage: { //上一页数据
|
||||
ready: false, //是否准备完毕
|
||||
chapterName: '',
|
||||
content: '',
|
||||
pageNum: 0,
|
||||
totalPage: 1,
|
||||
pageTransform: ['', '', '', ''], //页面位移，三个数对应三种翻页方式
|
||||
clipPath: '', // 仿真翻页
|
||||
bgStyle: {},
|
||||
subBgStyle: {},
|
||||
},
|
||||
|
||||
curPage: { //本页数据
|
||||
ready: false, //是否准备完毕
|
||||
chapterName: '',
|
||||
content: '',
|
||||
pageNum: 0,
|
||||
totalPage: 1,
|
||||
pageTransform: ['', '', '', ''], //页面位移，三个数对应三种翻页方式
|
||||
clipPath: '', // 仿真翻页
|
||||
subBgStyle: {},
|
||||
},
|
||||
|
||||
nextPage: { //下一页数据
|
||||
ready: false, //是否准备完毕
|
||||
chapterName: '',
|
||||
content: '',
|
||||
pageNum: 0,
|
||||
totalPage: 1,
|
||||
pageTransform: ['', '', '', ''], //页面位移，三个数对应三种翻页方式
|
||||
},
|
||||
|
||||
showAnimation: false, //是否开启动画
|
||||
showShadow: false, //是否显示页面阴影
|
||||
aimdistance: 50, // 滑动翻页的最小距离
|
||||
|
||||
windowWidth: 0, //可用屏幕宽度
|
||||
windowHeight: 0, //可用屏幕高度
|
||||
statusBarHeight: 0,
|
||||
contentHeight: 0, //阅读区域高度
|
||||
|
||||
systemTimeStr: '', //系统时间字符串
|
||||
|
||||
touchStartX: 0, // 触屏起始点x
|
||||
touchStartY: 0, // 触屏起始点y
|
||||
deltaX: 0, // 手指瞬时位移
|
||||
deltaY: 0, // 手指瞬时位移
|
||||
|
||||
bgColorList: ['#CCE8CF', '#CCBF95', '#E1C7CA', '#3C3734'], //背景色列表
|
||||
textColorList: ['#352C1D', '#352C1D', '#FFFFFF', '#352C1D'], //字体色列表
|
||||
turnTypeList: ['覆盖', '平移', '仿真', '上下'],
|
||||
maxFontSize: 30, //最大字体大小，px
|
||||
minFontSize: 14, //最小字体大小，px
|
||||
turnType: 0, //翻页方式 覆盖0，平移1，仿真2，上下3
|
||||
fontSize: 16, //字体大小，
|
||||
simplified: 1, //是否简体
|
||||
lineHeight: 1.5, //行高，注意是fontSize的倍数
|
||||
isDark: false, // 是否夜间模式
|
||||
colorType: 0,
|
||||
history: { //本书历史记录
|
||||
chapterIndex: 0,
|
||||
progress: 0
|
||||
},
|
||||
|
||||
bgColor: '', // 背景色
|
||||
textColor: '', // 字体色
|
||||
over: 40,
|
||||
turnDirect: 0, //向左向下-1 向右向上1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
curSource: 'get_curSource',
|
||||
readHistorys: 'get_readHistorys',
|
||||
setting: 'get_setting'
|
||||
}),
|
||||
//截取至整行的最大高度
|
||||
innerHeight() {
|
||||
let lineHeight = this.fontSize * this.lineHeight
|
||||
let lineNum = Math.floor(this.contentHeight / lineHeight)
|
||||
return lineNum * lineHeight
|
||||
},
|
||||
},
|
||||
onLoad() {
|
||||
// this.id = option.id
|
||||
// this.title = option.title
|
||||
this.getSystemInfo()
|
||||
this.setPageInfo()
|
||||
this.initPage()
|
||||
},
|
||||
onUnload() {
|
||||
uni.hideLoading()
|
||||
|
||||
// 浏览记录
|
||||
let t_progress = Math.floor((this.curPage.pageNum + 1) / this.curPage.totalPage * 100) / 100
|
||||
let idx = this.readHistorys.findIndex(item => item._id === this.id)
|
||||
if (idx > -1) {
|
||||
let params = {
|
||||
...this.readHistorys[idx],
|
||||
index: this.curPage.chapterIndex,
|
||||
progress: t_progress || 0,
|
||||
readChapter: this.chapterData[this.curPage.chapterIndex].title,
|
||||
readHistory: true
|
||||
}
|
||||
this.updateReadHistory(params)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['set_setting']),
|
||||
...mapActions(['updateReadHistory']),
|
||||
async initPage() {
|
||||
uni.hideLoading()
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '章节准备中'
|
||||
})
|
||||
this.getChapterInfo()
|
||||
await this.getChapterList()
|
||||
await this.getThreeChapter(this.history.chapterIndex)
|
||||
let page = Math.floor((this.curChapter.totalPage - 1) * this.history.progress)
|
||||
this.goToPage(page)
|
||||
uni.hideLoading()
|
||||
},
|
||||
getChapterInfo() {
|
||||
let res = this.readHistorys.filter(item => item._id === this.id)
|
||||
if (res && res.length) {
|
||||
this.history = {
|
||||
chapterIndex: res[0].index,
|
||||
progress: res[0].progress
|
||||
}
|
||||
}
|
||||
},
|
||||
// 获取设备信息
|
||||
getSystemInfo() {
|
||||
let sysInfo = uni.getSystemInfoSync()
|
||||
this.windowWidth = sysInfo.windowWidth
|
||||
this.windowHeight = sysInfo.windowHeight
|
||||
this.statusBarHeight = sysInfo.statusBarHeight
|
||||
|
||||
// 设置时间
|
||||
// this.systemTimeStr = this.$formatTimestamp('', 'hh:mm')
|
||||
// setInterval(() => {
|
||||
// this.systemTimeStr = this.$formatTimestamp('', 'hh:mm')
|
||||
// }, 60000)
|
||||
},
|
||||
// 计算页面布局信息
|
||||
setPageInfo() {
|
||||
this.contentHeight = this.windowHeight - 30 - 30 - 10 - this.statusBarHeight
|
||||
|
||||
let t_setting = this.setting
|
||||
this.turnType = t_setting.hasOwnProperty('turnType') ? t_setting.turnType : this.turnType
|
||||
this.fontSize = t_setting.hasOwnProperty('fontSize') ? t_setting.fontSize : this.fontSize
|
||||
this.simplified = t_setting.hasOwnProperty('simplified') ? t_setting.simplified : this.simplified
|
||||
this.lineHeight = t_setting.hasOwnProperty('lineHeight') ? t_setting.lineHeight : this.lineHeight
|
||||
this.isDark = t_setting.hasOwnProperty('isDark') ? t_setting.isDark : this.isDark
|
||||
this.colorType = t_setting.hasOwnProperty('colorType') ? t_setting.colorType : this.colorType
|
||||
this.$nextTick(function() {
|
||||
this.$refs.contentSetting.changeBackground(this.colorType, this.isDark)
|
||||
})
|
||||
},
|
||||
// 获取章节列表
|
||||
async getChapterList() {
|
||||
let res = await this.$store.dispatch('getChapterList', this.id)
|
||||
if (res) {
|
||||
this.chapterData = res
|
||||
}
|
||||
},
|
||||
// 获取章节内容
|
||||
async getBookContent(idx, attrName) {
|
||||
let params = this.chapterData[idx]
|
||||
let res = await this.$store.dispatch('getBookContent', params)
|
||||
if (res) {
|
||||
// console.log(this.chapterData[idx]);
|
||||
this[attrName] = {
|
||||
chapterIndex: idx,
|
||||
chapterName: this.chapterData[idx].title,
|
||||
content: res,
|
||||
}
|
||||
await this.calcChapter(attrName)
|
||||
}
|
||||
},
|
||||
// 计算章节页数
|
||||
calcChapter(attrName) {
|
||||
const self = this
|
||||
return new Promise((resolve, reject) => {
|
||||
const query = uni.createSelectorQuery().in(this)
|
||||
this.$nextTick(function() {
|
||||
query.select(`#${attrName} .book-inner`).boundingClientRect(data => {
|
||||
if (data.height) {
|
||||
let totalPage = Math.ceil(data.height / self.innerHeight)
|
||||
self[attrName].totalPage = totalPage || 1
|
||||
self[attrName].ready = true //章节准备完毕
|
||||
resolve(true)
|
||||
} else {
|
||||
resolve(false)
|
||||
}
|
||||
}).exec()
|
||||
})
|
||||
})
|
||||
},
|
||||
// 获取三章内容
|
||||
async getThreeChapter(idx) {
|
||||
await this.getBookContent(idx, 'curChapter') // 获取当前章节的内容
|
||||
if (idx > 0) {
|
||||
await this.getBookContent(idx - 1, 'preChapter') // 获取上一个章节的内容
|
||||
} else {
|
||||
this.preChapter = {
|
||||
ready: true,
|
||||
isOver: true
|
||||
}
|
||||
}
|
||||
if (idx < this.chapterData.length - 1) {
|
||||
await this.getBookContent(idx + 1, 'nextChapter') // 获取下一个章节的内容
|
||||
} else {
|
||||
this.nextChapter = {
|
||||
ready: true,
|
||||
isOver: true
|
||||
}
|
||||
}
|
||||
},
|
||||
// 根据页码跳转
|
||||
goToPage(page) {
|
||||
let winW = this.windowWidth,
|
||||
winH = this.windowHeight
|
||||
|
||||
this.showAnimation = false
|
||||
this.curPage = {
|
||||
...this.curChapter,
|
||||
pageNum: page < this.curChapter.totalPage - 1 ? page : this.curChapter.totalPage - 1,
|
||||
pageTransform: [
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
],
|
||||
clipPath: '', // 仿真翻页
|
||||
bgStyle: {},
|
||||
subBgStyle: {},
|
||||
}
|
||||
|
||||
let perCommon = {
|
||||
pageTransform: [
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(0,${-winH}px)`
|
||||
],
|
||||
clipPath: '', // 仿真翻页
|
||||
bgStyle: {},
|
||||
subBgStyle: {},
|
||||
}
|
||||
// 翻到章节的第一页并且没有上一章
|
||||
if (page === 0 && this.preChapter.isOver) {
|
||||
this.prePage = {
|
||||
ready: true,
|
||||
isOver: true,
|
||||
...perCommon
|
||||
}
|
||||
}
|
||||
// 翻到章节的第一页并且有上一章
|
||||
else if (page === 0 && !this.preChapter.isOver) {
|
||||
this.prePage = {
|
||||
...this.preChapter,
|
||||
pageNum: this.preChapter.totalPage - 1,
|
||||
...perCommon
|
||||
}
|
||||
}
|
||||
//还有上一页
|
||||
else {
|
||||
this.prePage = {
|
||||
...this.curChapter,
|
||||
pageNum: page - 1,
|
||||
...perCommon
|
||||
}
|
||||
}
|
||||
|
||||
let nextCommon = {
|
||||
pageTransform: [
|
||||
`translate(0,0)`,
|
||||
`translate(${winW}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
],
|
||||
}
|
||||
// 翻到章节的最后一页并且没有下一章
|
||||
if (page >= this.curChapter.totalPage - 1 && this.nextChapter.isOver) {
|
||||
this.nextPage = {
|
||||
ready: true,
|
||||
isOver: true,
|
||||
...nextCommon
|
||||
}
|
||||
}
|
||||
// 翻到章节的最后一页并且有下一章
|
||||
else if (page >= this.curChapter.totalPage - 1 && !this.nextChapter.isOver) {
|
||||
this.nextPage = {
|
||||
...this.nextChapter,
|
||||
pageNum: 0,
|
||||
...nextCommon
|
||||
}
|
||||
}
|
||||
//还有下一页
|
||||
else {
|
||||
this.nextPage = {
|
||||
...this.curPage,
|
||||
pageNum: page + 1,
|
||||
...nextCommon
|
||||
}
|
||||
}
|
||||
},
|
||||
// 章节轮换
|
||||
async chapterRotate(type) {
|
||||
uni.showLoading({
|
||||
mask: true,
|
||||
title: '章节准备中'
|
||||
})
|
||||
let curIndex = 0
|
||||
switch (type) {
|
||||
// 上一章
|
||||
case 'pre':
|
||||
this.nextChapter = JSON.parse(JSON.stringify(this.curChapter))
|
||||
this.curChapter = JSON.parse(JSON.stringify(this.preChapter))
|
||||
curIndex = this.curChapter.chapterIndex
|
||||
if (curIndex > 0) {
|
||||
await this.getBookContent(curIndex - 1, 'preChapter') // 获取上一个章节的内容
|
||||
} else {
|
||||
this.preChapter = {
|
||||
ready: true,
|
||||
isOver: true
|
||||
}
|
||||
}
|
||||
break
|
||||
// 下一章
|
||||
case 'next':
|
||||
this.preChapter = JSON.parse(JSON.stringify(this.curChapter))
|
||||
this.curChapter = JSON.parse(JSON.stringify(this.nextChapter))
|
||||
curIndex = this.curChapter.chapterIndex
|
||||
if (curIndex < this.chapterData.length - 1) {
|
||||
await this.getBookContent(curIndex + 1, 'nextChapter') // 获取下一个章节的内容
|
||||
} else {
|
||||
this.nextChapter = {
|
||||
ready: true,
|
||||
isOver: true
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
uni.hideLoading()
|
||||
},
|
||||
// 去上一页
|
||||
// num: 页码
|
||||
async goPrePage(num) {
|
||||
let winW = this.windowWidth
|
||||
let winH = this.windowHeight
|
||||
|
||||
if (num === -1) {
|
||||
if (this.preChapter.ready && this.preChapter.isOver) {
|
||||
return
|
||||
}
|
||||
await this.chapterRotate('pre')
|
||||
num = this.curChapter.totalPage - 1
|
||||
}
|
||||
|
||||
let pre = [].concat(this.prePage.pageTransform)
|
||||
let cur = [].concat(this.curPage.pageTransform)
|
||||
let tClipPath = this.prePage.clipPath
|
||||
let tBgStyle = JSON.parse(JSON.stringify(this.prePage.bgStyle))
|
||||
let tSubBgStyle = JSON.parse(JSON.stringify(this.prePage.subBgStyle))
|
||||
this.goToPage(num)
|
||||
this.prePage.pageTransform = [
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(0,${-winH}px)`
|
||||
]
|
||||
this.curPage.pageTransform = pre
|
||||
this.nextPage.pageTransform = cur
|
||||
|
||||
if (this.turnType === 2) {
|
||||
this.curPage.clipPath = tClipPath
|
||||
this.curPage.bgStyle = tBgStyle
|
||||
this.curPage.subBgStyle = tSubBgStyle
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.pageReset('pre')
|
||||
}, 50)
|
||||
},
|
||||
// 去下一页
|
||||
// num: 页码
|
||||
async goNextPage(num) {
|
||||
let winW = this.windowWidth
|
||||
let winH = this.windowHeight
|
||||
|
||||
if (num === this.curPage.totalPage) {
|
||||
if (this.nextChapter.ready && this.nextChapter.isOver) {
|
||||
return
|
||||
}
|
||||
await this.chapterRotate('next')
|
||||
num = 0
|
||||
}
|
||||
let cur = [].concat(this.curPage.pageTransform)
|
||||
let next = [].concat(this.nextPage.pageTransform)
|
||||
let tClipPath = this.curPage.clipPath
|
||||
let tBgStyle = JSON.parse(JSON.stringify(this.curPage.bgStyle))
|
||||
let tSubBgStyle = JSON.parse(JSON.stringify(this.curPage.subBgStyle))
|
||||
this.goToPage(num)
|
||||
this.prePage.pageTransform = cur
|
||||
this.curPage.pageTransform = next
|
||||
this.nextPage.pageTransform = [
|
||||
`translate(0,0)`,
|
||||
`translate(${winW}px,0)`,
|
||||
`translate(0,0)`,
|
||||
'translate(0,0)'
|
||||
]
|
||||
|
||||
if (this.turnType === 2) {
|
||||
this.prePage.clipPath = tClipPath
|
||||
this.prePage.bgStyle = tBgStyle
|
||||
this.prePage.subBgStyle = tSubBgStyle
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.pageReset('next')
|
||||
}, 50)
|
||||
},
|
||||
touchStart(touche) {
|
||||
this.showAnimation = false
|
||||
this.touchStartX = touche.clientX;
|
||||
this.touchStartY = touche.clientY;
|
||||
},
|
||||
touchMove(touche) {
|
||||
this.showShadow = true;
|
||||
let deltaX = touche.clientX - this.touchStartX
|
||||
let deltaY = touche.clientY - this.touchStartY
|
||||
let winW = this.windowWidth
|
||||
let winH = this.windowHeight
|
||||
|
||||
// 限制边界
|
||||
if (this.turnType !== 2) {
|
||||
deltaX = Math.abs(deltaX) < winW ? deltaX : deltaX / Math.abs(deltaX) * winW
|
||||
deltaY = Math.abs(deltaY) < winH ? deltaY : deltaY / Math.abs(deltaY) * winH
|
||||
}
|
||||
let delta = this.getTouche(deltaX, deltaY)
|
||||
if (Math.abs(delta) < 5) {
|
||||
return
|
||||
}
|
||||
if (this.turnDirect === 0) {
|
||||
this.turnDirect = delta / Math.abs(delta)
|
||||
}
|
||||
let attrName = this.turnDirect > 0 ? 'prePage' : 'nextPage'
|
||||
if (this[attrName].ready && this[attrName].isOver) { //翻至封面了
|
||||
this.deltaX = 0
|
||||
this.deltaY = 0
|
||||
return
|
||||
}
|
||||
this.deltaX = deltaX;
|
||||
this.deltaY = deltaY;
|
||||
let over = this.over
|
||||
if (this.turnDirect < 0) {
|
||||
// console.log('向下翻页');
|
||||
// 向下翻页
|
||||
if (this.turnType === 2) {
|
||||
let absDeltaY = Math.abs(deltaY)
|
||||
let symbolY = deltaY / absDeltaY
|
||||
let posX1 = winW + deltaX - (symbolY === 1 ? absDeltaY : 0)
|
||||
let posX2 = winW + deltaX - (symbolY === 1 ? 0 : absDeltaY)
|
||||
if (posX1 <= 0 || posX2 <= 0) {
|
||||
return
|
||||
}
|
||||
let rotateZ = ((Math.atan2(winH * 0.5, absDeltaY) * 180 / Math.PI))
|
||||
rotateZ = (90 - rotateZ).toFixed(0)
|
||||
let blurDis = 1 - ((posX1 + posX2) / (winW * 2))
|
||||
blurDis = blurDis < 0.4 ? 0.4 : blurDis
|
||||
this.curPage.clipPath =
|
||||
`polygon(0px 0px, ${posX1}px 0px, ${posX2}px ${winH}px, 0px ${winH}px)`
|
||||
this.curPage.bgStyle = {
|
||||
filter: `drop-shadow(0px 0px ${40*blurDis}px rgba(0, 0, 0, 0.8))`,
|
||||
transform: `rotateY(180deg) rotateZ(${rotateZ*symbolY}deg)`,
|
||||
transformOrigin: `${winW + deltaX - absDeltaY*0.5}px 50%`,
|
||||
display: 'block'
|
||||
}
|
||||
this.curPage.subBgStyle = {
|
||||
clipPath: `polygon(${posX1}px ${-over}px, ${winW+over}px ${-over}px, ${winW+over}px ${winH+over}px, ${posX2}px ${winH+over}px)`,
|
||||
boxShadow: `inset -10px 0 20px 0px rgba(0,0,0,0.1)`,
|
||||
}
|
||||
}
|
||||
|
||||
this.curPage.pageTransform = [
|
||||
`translate(${deltaX}px,0)`,
|
||||
`translate(${deltaX}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,${deltaY}px)`
|
||||
]
|
||||
this.nextPage.pageTransform = [
|
||||
`translate(0,0)`,
|
||||
`translate(${winW+deltaX}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
]
|
||||
} else {
|
||||
// console.log('向上翻页');
|
||||
// 向上翻页
|
||||
if (this.turnType === 2) {
|
||||
let posX = touche.clientX
|
||||
if (posX <= 0) {
|
||||
return
|
||||
}
|
||||
let blurDis = 1 - (posX / winW)
|
||||
blurDis = blurDis < 0.4 ? 0.4 : blurDis
|
||||
this.prePage.clipPath =
|
||||
`polygon(0px 0px, ${posX}px 0px, ${posX}px ${winH}px, 0px ${winH}px)`
|
||||
this.prePage.bgStyle = {
|
||||
filter: `drop-shadow(0px 0px ${40*blurDis}px rgba(0, 0, 0, 0.8))`,
|
||||
transform: `rotateY(180deg) rotateZ(0deg)`,
|
||||
transformOrigin: `${posX}px 50%`,
|
||||
display: 'block'
|
||||
}
|
||||
this.prePage.subBgStyle = {
|
||||
clipPath: `polygon(${posX}px ${-over}px, ${winW+over}px ${-over}px, ${winW+over}px ${winH+over}px, ${posX}px ${winH+over}px)`,
|
||||
boxShadow: `inset -10px 0 20px 0px rgba(0,0,0,0.1)`,
|
||||
}
|
||||
}
|
||||
|
||||
this.prePage.pageTransform = [
|
||||
`translate(${-winW+deltaX}px,0)`,
|
||||
`translate(${-winW+deltaX}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,${-winH+deltaY}px)`
|
||||
]
|
||||
this.curPage.pageTransform = [
|
||||
`translate(0,0)`,
|
||||
`translate(${deltaX}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
]
|
||||
}
|
||||
},
|
||||
async touchEnd(touche) {
|
||||
let winW = this.windowWidth
|
||||
let winH = this.windowHeight
|
||||
let touchStart = this.getTouche(this.touchStartX, this.touchStartY)
|
||||
let client = this.getTouche(touche.clientX, touche.clientY)
|
||||
let delta = client - touchStart
|
||||
if (Math.abs(delta) < 0.8) { //部分手机点击屏幕时无法做到delta===0
|
||||
if (touche.clientX < winW / 3) { //点击屏幕左1/3为上一页
|
||||
this.showAnimation = true
|
||||
this.showShadow = false
|
||||
this.goPrePage(this.curPage.pageNum - 1)
|
||||
} else if (touche.clientX > winW / 3 * 2) { //点击屏幕右1/3为下一页
|
||||
this.showAnimation = true
|
||||
this.showShadow = false
|
||||
this.goNextPage(this.curPage.pageNum + 1)
|
||||
} else { //点击屏幕中间1/3为呼出菜单
|
||||
if (this.turnDirect === 0) {
|
||||
this.showMenu()
|
||||
}
|
||||
}
|
||||
} else {
|
||||
let symbol = delta / Math.abs(delta)
|
||||
// 如果小于最小允许翻页的距离
|
||||
if (Math.abs(delta) < this.aimdistance) {
|
||||
this.pageReset(symbol < 0 ? 'pre' : 'next')
|
||||
return
|
||||
}
|
||||
this.showShadow = false
|
||||
if (symbol < 0) {
|
||||
this.goNextPage(this.curPage.pageNum + 1)
|
||||
} else {
|
||||
this.goPrePage(this.curPage.pageNum - 1)
|
||||
}
|
||||
}
|
||||
},
|
||||
touchCancel(e) {
|
||||
this.pageReset()
|
||||
},
|
||||
pageReset(type = 'next') {
|
||||
let over = this.over
|
||||
// let type1 = this.turnDirect > 0 ? 'next' : 'pre'
|
||||
// console.log(type, type1);
|
||||
this.turnDirect = 0
|
||||
this.showAnimation = true
|
||||
this.showShadow = false
|
||||
//取消翻页,重置页面
|
||||
let winW = this.windowWidth,
|
||||
winH = this.windowHeight
|
||||
this.prePage.pageTransform = [
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${type==='next'?0:-winW}px,0)`,
|
||||
`translate(0,${-winH}px)`
|
||||
]
|
||||
this.curPage.pageTransform = [
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
]
|
||||
this.nextPage.pageTransform = [
|
||||
`translate(0,0)`,
|
||||
`translate(${winW}px,0)`,
|
||||
`translate(0,0)`,
|
||||
`translate(0,0)`
|
||||
]
|
||||
|
||||
if (this.turnType === 2) {
|
||||
let posX = type === 'next' ? 0 : winW
|
||||
let prop = type === 'next' ? 'prePage' : 'curPage'
|
||||
this[prop].clipPath =
|
||||
`polygon(0px 0px, ${posX}px 0px, ${posX}px ${winH}px, 0px ${winH}px)`
|
||||
this[prop].bgStyle = {
|
||||
transform: `rotateY(180deg) rotateZ(0deg)`,
|
||||
transformOrigin: `${posX}px 50%`,
|
||||
display: 'block'
|
||||
}
|
||||
this[prop].subBgStyle = {
|
||||
clipPath: `polygon(${posX}px ${-over}px, ${winW+over}px ${-over}px, ${winW+over}px ${winH+over}px, ${posX}px ${winH+over}px)`,
|
||||
boxShadow: `inset -10px 0 20px 0px rgba(0,0,0,0.1)`,
|
||||
}
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
this.prePage.pageTransform = [
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(${-winW}px,0)`,
|
||||
`translate(0,${-winH}px)`
|
||||
]
|
||||
}, 100)
|
||||
},
|
||||
getTouche(x, y) {
|
||||
let result = 0
|
||||
switch (this.turnType) {
|
||||
// 覆盖
|
||||
case 0:
|
||||
result = x
|
||||
break
|
||||
// 平移
|
||||
case 1:
|
||||
result = x
|
||||
break
|
||||
// 仿真
|
||||
case 2:
|
||||
result = x
|
||||
break
|
||||
// 上下
|
||||
case 3:
|
||||
result = y
|
||||
break
|
||||
}
|
||||
return result
|
||||
},
|
||||
// 显示操作菜单
|
||||
showMenu() {
|
||||
this.$refs.curChapter.setFullscreen(false)
|
||||
this.$refs.contentSetting.show()
|
||||
},
|
||||
// 隐藏操作菜单
|
||||
hideMenu() {
|
||||
this.$refs.curChapter.setFullscreen(true)
|
||||
},
|
||||
updateProps(res) {
|
||||
res.forEach(item => {
|
||||
this[item[0]] = item[1]
|
||||
if (item.length === 2 || (item.length > 2 && !item[2])) {
|
||||
this.updateSetting(item[0])
|
||||
}
|
||||
})
|
||||
},
|
||||
async updatePage() {
|
||||
await this.calcChapter('preChapter')
|
||||
await this.calcChapter('curChapter')
|
||||
await this.calcChapter('nextChapter')
|
||||
this.goToPage(this.curPage.pageNum)
|
||||
},
|
||||
updateSetting(prop) {
|
||||
let t_setting = Object.assign({}, this.setting || {})
|
||||
t_setting[prop] = this[prop]
|
||||
this.set_setting(t_setting)
|
||||
},
|
||||
updateCatalog(index) {
|
||||
let idx = this.readHistorys.findIndex(item => item._id = this.id)
|
||||
if (idx > -1) {
|
||||
let params = {
|
||||
...this.readHistorys[idx],
|
||||
index: index,
|
||||
progress: 0,
|
||||
readChapter: this.chapterData[index].title
|
||||
}
|
||||
this.updateReadHistory(params)
|
||||
}
|
||||
this.initPage()
|
||||
},
|
||||
moreHandle() {
|
||||
uni.redirectTo({
|
||||
url: '/pages/public/bookDetail?id=' + this.id
|
||||
})
|
||||
},
|
||||
listenHandle() {
|
||||
this.$refs.audioPlay.show()
|
||||
},
|
||||
getAudioPlayShow(data) {
|
||||
this.show = data
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.page {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
opacity: 0;
|
||||
}
|
||||
</style>
|
||||
461
pages/eBook/2/contentSetting.vue
Normal file
461
pages/eBook/2/contentSetting.vue
Normal file
@@ -0,0 +1,461 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="fixed menu" v-show="menuFlag" @touchend="hide">
|
||||
<cus-navbar :style="{boxShadow: `0 2rpx 8rpx ${textColor}29`}" :bgColor="bgColor" :titleColor="textColor">
|
||||
<block slot="right">
|
||||
<text class="iconfont icon-gengduo" @tap.stop.prevent="moreHandle"></text>
|
||||
</block>
|
||||
</cus-navbar>
|
||||
|
||||
<view class="bottom"
|
||||
:style="{backgroundColor:bgColor,color:textColor,boxShadow: `0 -2rpx 8rpx ${textColor}29`}">
|
||||
<view class="item" @touchend.prevent.stop="catalogHandle">
|
||||
<text class="iconfont icon-caidan1"></text>
|
||||
<text>目录</text>
|
||||
</view>
|
||||
<view class="item" @touchend.prevent.stop="darkHandle">
|
||||
<text class="iconfont" :class="isDark?'icon-rijian':'icon-yejian'"></text>
|
||||
<text>{{isDark?'日间':'夜间'}}</text>
|
||||
</view>
|
||||
<view class="item" @touchend.prevent.stop="cacheHandle">
|
||||
<text v-if="!isCacheing" class="iconfont icon-xiazai"></text>
|
||||
<text v-else>{{curCaches.length}}/{{chapterData.length}}</text>
|
||||
<text>{{curCaches.length!==chapterData.length?'缓存':'已缓存'}}</text>
|
||||
</view>
|
||||
<view class="item" @touchend.prevent.stop="settingHandle">
|
||||
<text class="iconfont icon-shezhi"></text>
|
||||
<text>设置</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 听书 -->
|
||||
<view v-if="!settingFlag" class="listen" :style="{color:bgColor}" @touchend.prevent.stop="listenHandle">听
|
||||
</view>
|
||||
|
||||
<!-- 设置 -->
|
||||
<view class="setting" v-show="settingFlag"
|
||||
:style="{backgroundColor:bgColor,color:textColor,boxShadow: `0 -2rpx 8rpx ${textColor}29`}"
|
||||
@touchend.stop>
|
||||
<view class="line">
|
||||
<view class="title">字号</view>
|
||||
<cus-button data-str="-" bgColor="rgba(0,0,0,.1)" :textColor="textColor" width="60px"
|
||||
fontSize="14px" :disabled="fontSize<=minFontSize" :border="false" @click="changeFontSize(-2)">A
|
||||
</cus-button>
|
||||
<view style="margin: 0 8px;">{{fontSize}}</view>
|
||||
<cus-button data-str="+" bgColor="rgba(0,0,0,.1)" :textColor="textColor" width="60px"
|
||||
fontSize="14px" :disabled="fontSize>=maxFontSize" :border="false" @click="changeFontSize(2)">A
|
||||
</cus-button>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view class="title">背景</view>
|
||||
<cus-button class="background" v-for="(item,index) in bgColorList" :key="index" :bgColor="item"
|
||||
:border="index===colorType" @click="changeBackground(index)">
|
||||
</cus-button>
|
||||
</view>
|
||||
<view class="line">
|
||||
<view class="title">翻页</view>
|
||||
<cus-button v-for="(item,index) in turnTypeList" :key="index" :bgColor="bgColor" :border="true"
|
||||
:textColor="textColor" width="60px" :hairLine="index!==turnType" @click="changeTurnType(index)">
|
||||
{{item}}
|
||||
</cus-button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 侧边目录 -->
|
||||
<view class="fixed catalog" v-show="catalogFlag">
|
||||
<view class="mask" @tap="catalogFlag=false"></view>
|
||||
<view class="catalog-content" :style="{backgroundColor:bgColor,color:textColor}">
|
||||
<view class="order iconfont" :class="descFlag?'icon-paixu1':'icon-paixu'"
|
||||
@touchend.prevent.stop="sortHandle">
|
||||
</view>
|
||||
<scroll-view class="scroll-view" scroll-y="true" :scroll-into-view="'siv'+sivId">
|
||||
<view :class="{'reverse':descFlag}">
|
||||
<view class="item" :id="'siv'+index"
|
||||
:class="{'text-gray':curCaches.includes(item.index),'text-red':chapterIndex===index}"
|
||||
v-for="(item,index) in chapterData" :key="item.index" @tap="clickCatalog(index)">
|
||||
<view class="chapter-name">{{item.title}}</view>
|
||||
<view v-if="curCaches.includes(item.index)">已缓存</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
mapGetters,
|
||||
mapMutations
|
||||
}
|
||||
from 'vuex'
|
||||
export default {
|
||||
return: {
|
||||
// 背景色
|
||||
bgColor: {
|
||||
type: String,
|
||||
default: '#cdeeda'
|
||||
},
|
||||
// 字体颜色
|
||||
textColor: {
|
||||
type: String,
|
||||
default: '#000'
|
||||
},
|
||||
// 夜间模式背景色
|
||||
darkBgColor: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
// 夜间模式字体颜色
|
||||
darkTextColor: {
|
||||
type: String,
|
||||
default: '#666666'
|
||||
},
|
||||
// 是否是夜间模式
|
||||
isDark: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 字体大小
|
||||
fontSize: {
|
||||
type: Number,
|
||||
default: 16
|
||||
},
|
||||
// 背景颜色列表
|
||||
bgColorList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
// 字体颜色列表
|
||||
textColorList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
// 翻页方式列表
|
||||
turnTypeList: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
// 颜色类别，对应颜色列表的下标
|
||||
colorType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 翻页方式类别，对应翻页方式列表的下标
|
||||
turnType: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
// 章节列表
|
||||
chapterData: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
// 当前章节的下标
|
||||
chapterIndex: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
menuFlag: false, // 控制菜单的显隐
|
||||
settingFlag: false, // 控制设置的显隐
|
||||
minFontSize: 15,
|
||||
maxFontSize: 40,
|
||||
|
||||
catalogFlag: false, // 控制目录的显隐
|
||||
descFlag: false, // 是否倒序排序
|
||||
sivId: null, // 打开目录时跳转至位置
|
||||
|
||||
curCaches: [], // 缓存的章节id
|
||||
isCacheing: false, // 是否缓存中
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters({
|
||||
setting: 'get_setting',
|
||||
curSource: 'get_curSource',
|
||||
}),
|
||||
},
|
||||
watch: {
|
||||
curCaches: {
|
||||
handler(nVal, oVal) {
|
||||
if (nVal.length === this.chapterData.length) {
|
||||
this.isCacheing = false
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapMutations(['set_setting']),
|
||||
// 显示操作菜单
|
||||
async show() {
|
||||
this.menuFlag = true
|
||||
|
||||
if (this.chapterData && this.chapterData.length > 0) {
|
||||
// 从缓存获取信息
|
||||
// bookChapterCache
|
||||
let bcc = await this.$fileReader(`_bcc_${this.curSource.value}_${this.chapterData[0].id}`)
|
||||
this.curCaches = JSON.parse(bcc || '[]')
|
||||
}
|
||||
},
|
||||
hide() {
|
||||
this.menuFlag = false
|
||||
this.settingFlag = false
|
||||
this.$emit('whenHide')
|
||||
},
|
||||
// 章节目录的显示
|
||||
catalogHandle() {
|
||||
this.catalogFlag = true
|
||||
this.settingFlag = false
|
||||
this.hide()
|
||||
|
||||
this.$nextTick(function() {
|
||||
this.sivId = this.chapterIndex === 0 ? 0 : this.chapterIndex - 5
|
||||
})
|
||||
},
|
||||
// 夜间/日间
|
||||
darkHandle() {
|
||||
this.$emit('updateProps', [
|
||||
['isDark', !this.isDark],
|
||||
])
|
||||
this.changeBackground(this.colorType, !this.isDark)
|
||||
},
|
||||
// 缓存
|
||||
async cacheHandle() {
|
||||
if (this.isCacheing) {
|
||||
return
|
||||
}
|
||||
|
||||
if (this.curCaches.length === this.chapterData.length) {
|
||||
return
|
||||
}
|
||||
|
||||
this.isCacheing = true
|
||||
for (let chapter of this.chapterData) {
|
||||
if (this.curCaches.includes(chapter.index)) {
|
||||
continue
|
||||
}
|
||||
await this.doBookContent(chapter)
|
||||
}
|
||||
this.isCacheing = false
|
||||
},
|
||||
async doBookContent(params, num = 0) {
|
||||
if (num === 20) {
|
||||
return false
|
||||
}
|
||||
|
||||
let res = await this.$store.dispatch('getBookContent', params)
|
||||
if (res) {
|
||||
this.curCaches.push(params.index)
|
||||
return true
|
||||
} else {
|
||||
num += 1
|
||||
await this.doBookContent(params, num)
|
||||
}
|
||||
},
|
||||
// 设置
|
||||
settingHandle() {
|
||||
this.settingFlag = !this.settingFlag
|
||||
},
|
||||
// 听书
|
||||
listenHandle() {
|
||||
this.$emit('listenHandle')
|
||||
},
|
||||
changeFontSize(num) {
|
||||
this.$emit('updateProps', [
|
||||
['fontSize', this.fontSize + num],
|
||||
])
|
||||
this.$emit('updatePage')
|
||||
},
|
||||
changeBackground(index, isDark) {
|
||||
if (isDark) {
|
||||
this.$emit('updateProps', [
|
||||
['bgColor', this.darkBgColor],
|
||||
['textColor', this.darkTextColor]
|
||||
])
|
||||
} else {
|
||||
this.$emit('updateProps', [
|
||||
['bgColor', this.bgColorList[index], true],
|
||||
['textColor', this.textColorList[index], true],
|
||||
['colorType', index],
|
||||
])
|
||||
}
|
||||
},
|
||||
changeTurnType(index) {
|
||||
this.$emit('updateProps', [
|
||||
['turnType', index],
|
||||
])
|
||||
},
|
||||
// 点击某一章节目录
|
||||
async clickCatalog(index) {
|
||||
this.catalogFlag = false
|
||||
this.sivId = index
|
||||
this.$emit('updateCatalog', index)
|
||||
},
|
||||
// 排序
|
||||
sortHandle() {
|
||||
this.descFlag = !this.descFlag
|
||||
},
|
||||
moreHandle() {
|
||||
this.$emit('moreHandle')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.fixed {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: transparent;
|
||||
z-index: 1024;
|
||||
}
|
||||
|
||||
.menu {
|
||||
|
||||
.bottom {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
font-size: 11px;
|
||||
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 80px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.iconfont {
|
||||
font-size: 21px;
|
||||
}
|
||||
|
||||
text {
|
||||
line-height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting {
|
||||
position: absolute;
|
||||
bottom: 80px;
|
||||
width: 100%;
|
||||
padding: 20px 0;
|
||||
background-color: rgba($color: #000000, $alpha: 0.8);
|
||||
font-size: 11px;
|
||||
|
||||
.line {
|
||||
padding: 0 40rpx;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
|
||||
.title {
|
||||
margin-right: 40rpx;
|
||||
}
|
||||
|
||||
.background+.background {
|
||||
margin-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.line+.line {
|
||||
padding-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.catalog {
|
||||
width: 600rpx;
|
||||
|
||||
.mask {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: #000000;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.catalog-content {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: var(--status-bar-height);
|
||||
|
||||
.order {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
padding: 32rpx 40rpx;
|
||||
text-align: right;
|
||||
font-size: 50rpx;
|
||||
line-height: 56rpx;
|
||||
}
|
||||
|
||||
.scroll-view {
|
||||
height: calc(100% - 120rpx);
|
||||
box-sizing: border-box;
|
||||
opacity: 1;
|
||||
|
||||
.item {
|
||||
padding: 0 10px;
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
font-size: 12px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.chapter-name {
|
||||
width: 480rpx;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.listen {
|
||||
position: fixed;
|
||||
bottom: 120px;
|
||||
right: 20px;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 60px;
|
||||
border-radius: 50%;
|
||||
background-color: #6b6b6b;
|
||||
text-align: center;
|
||||
font-size: 30px;
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.reverse {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.text-gray {
|
||||
color: #999999;
|
||||
}
|
||||
|
||||
.text-red {
|
||||
color: #ff0000;
|
||||
}
|
||||
</style>
|
||||
191
pages/eBook/bookBuy.vue
Normal file
191
pages/eBook/bookBuy.vue
Normal file
@@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<view>
|
||||
<z-nav-bar title="电子书购买记录"></z-nav-bar>
|
||||
|
||||
<view class="book_list">
|
||||
<view class="bl_tioa" v-for="(item,index) in bookList" @click="onBookJump(item)">
|
||||
<image :src="item.image"></image>
|
||||
<view style="margin:0 0 10rpx 0;">
|
||||
<text class="bok_name">{{item.bookName}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>作者：<text style="color: #333;">{{item.author}}</text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text style="line-height: 20rpx;">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 1px;"></view>
|
||||
<view v-if="bookList.length==0" style="font-size: 30rpx;text-align: center;">无购买记录</view>
|
||||
</view>
|
||||
|
||||
<view>
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<view v-if="status==1">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="padding-bottom: 20rpx;">
|
||||
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
status: 3,
|
||||
BuyScreen: {
|
||||
page: 1, //当前页码数
|
||||
limit: 5, //单页数据数量
|
||||
},
|
||||
totalPage: 0,
|
||||
totalCount: 0,
|
||||
bookList: [],
|
||||
bgiStyle: {
|
||||
background: '#2ab58833'
|
||||
},
|
||||
iconStyle: {
|
||||
fontSize: '40rpx',
|
||||
fontWeight: 'bold',
|
||||
color: '#54a966',
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
// 返回顶部
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onReachBottom() {
|
||||
this.status = 0
|
||||
if (this.BuyScreen.page < this.totalPage) {
|
||||
this.BuyScreen.page = this.BuyScreen.page + 1
|
||||
setTimeout(() => {
|
||||
this.$http
|
||||
.post('book/userebookbuy/list?userId=' + this.userInfo.id + '&page=' + this.BuyScreen
|
||||
.page + '&limit=' + this.BuyScreen.limit)
|
||||
.then(res => {
|
||||
this.totalPage = res.page.totalPage
|
||||
this.totalCount = res.page.totalCount
|
||||
for (let i in res.page.list) {
|
||||
this.bookList.push(res.page.list[i])
|
||||
}
|
||||
});
|
||||
}, 1000)
|
||||
} else {
|
||||
this.status = 1
|
||||
}
|
||||
},
|
||||
|
||||
//第一次加载
|
||||
onLoad() {
|
||||
this.getData();
|
||||
},
|
||||
|
||||
computed: {
|
||||
...mapState(['userInfo'])
|
||||
},
|
||||
|
||||
//页面显示
|
||||
onShow() {
|
||||
// this.getData();
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.getData()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取列表数据
|
||||
getData() {
|
||||
this.bookList = []
|
||||
this.$http
|
||||
.post('book/userebookbuy/list?userId=' + this.userInfo.id + '&page=' + this.BuyScreen
|
||||
.page + '&limit=' + this.BuyScreen.limit)
|
||||
.then(res => {
|
||||
this.bookList = res.page.list
|
||||
this.totalPage = res.page.totalPage
|
||||
this.status = 3
|
||||
});
|
||||
},
|
||||
|
||||
// 电子书内容跳转
|
||||
onBookJump(e) {
|
||||
uni.navigateTo({
|
||||
url: './bookContent?Id=' + e.bookId
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
.book_list {
|
||||
margin: 50rpx 30rpx 0 30rpx;
|
||||
|
||||
.bl_tioa {
|
||||
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
padding: 30upx 25upx 10upx 230upx;
|
||||
margin: 0 0 60rpx 0;
|
||||
border-radius: 15rpx;
|
||||
min-height: 300rpx;
|
||||
|
||||
view {
|
||||
// margin: 0 0 10rpx 0;
|
||||
|
||||
text {
|
||||
color: #9b9b9b;
|
||||
font-size: 26rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.bok_name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
left: 30upx;
|
||||
top: 30upx;
|
||||
width: 160upx;
|
||||
height: 240upx;
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: #27b386;
|
||||
position: absolute;
|
||||
left: -1upx;
|
||||
top: -10upx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
802
pages/eBook/bookContent.vue
Normal file
802
pages/eBook/bookContent.vue
Normal file
@@ -0,0 +1,802 @@
|
||||
<template>
|
||||
<view style="background-color: #fff;padding: 30rpx;">
|
||||
<z-nav-bar title="电子书详情"></z-nav-bar>
|
||||
<view class="book_neir">
|
||||
<img :src="bookMessage.images" class="bn_img">
|
||||
<b class="leiXing" v-if="bookMessage.isVip==1" style="background: #c79119;">VIP</b>
|
||||
<b class="leiXing" v-if="bookMessage.isVip==2" style="background: #c74119;">付费</b>
|
||||
<view class="bn_nes">
|
||||
<view style="font-weight: bold;margin-bottom: 30rpx;">
|
||||
{{bookMessage.name}}
|
||||
</view>
|
||||
<view style="color: #9b9b9b;font-size: 28rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 38rpx;">
|
||||
<p @click="onAuCHJump(bookMessage.authorId,1)" style="margin-bottom: 20rpx;">
|
||||
{{bookMessage.authorName}} [著] >
|
||||
</p>
|
||||
<p @click="onAuCHJump(item.id,2)" v-for="item in this.bookMessage.publisherNIList">
|
||||
{{item.title}} >
|
||||
</p>
|
||||
</view>
|
||||
<view v-if="this.bookMessage.chapterNum!=null"
|
||||
style="color: #cdcdcd;font-size: 20rpx;margin:20rpx 0 0 0;max-width: 400rpx;line-height: 36rpx;">
|
||||
上次阅读到{{this.bookCatalogue[this.bookMessage.chapterNum-1].chapterName}}
|
||||
</view>
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
<view class="book_dredge" @click="onPageJump('../peanut/opeVip')" v-if="bookMessage.isVip!=0&&this.userMes.vip==0">
|
||||
<image src="../../static/icon/mine_p.png" alt=""></image>
|
||||
开通会员，免费读本书
|
||||
<b>></b>
|
||||
</view>
|
||||
<view class="book_dredge book_vip" v-if="this.userMes.vip==1">
|
||||
<image src="../../static/icon/mine_v.png" alt=""></image>
|
||||
尊享会员权益中
|
||||
</view>
|
||||
<view class="book_tab">
|
||||
<view>
|
||||
<u-tabs :list="tab_list" @click="tab_click" lineColor="#54a966 100% 100%"
|
||||
:activeStyle="{color: '#303133',fontWeight: 'bold',transform: 'scale(1.1)'}"></u-tabs>
|
||||
</view>
|
||||
<view class="bt_cont">
|
||||
<view v-if="tab_muJian==0" class="bt_jian">
|
||||
<text>
|
||||
{{bookMessage.description}}
|
||||
</text>
|
||||
</view>
|
||||
<view v-if="tab_muJian==1">
|
||||
<p style="text-align: right;color: #a5a5a5;margin-bottom: 10rpx;">
|
||||
共{{bookCatalogue.length}}章</p>
|
||||
<view class="bt_nulu" v-for='(item,index) in bookCatalogue'>
|
||||
<!-- 最近阅读的 -->
|
||||
<view @click="onBokReadJump(index)" v-if="bookMessage.isBuy==1" style="display: flex;justify-content: space-between;">
|
||||
{{item.chapterName}}
|
||||
<font v-if="bookMessage.chapterId==index">最近阅读</font>
|
||||
</view>
|
||||
<view v-if="bookMessage.isBuy==0">
|
||||
<view @click="onBokReadJump(index)" v-if="index<bookMessage.freeChapterCount">
|
||||
{{item.chapterName}}
|
||||
<font v-if="bookMessage.chapterId==index">最近阅读</font>
|
||||
</view>
|
||||
<view v-if="index>=bookMessage.freeChapterCount" @click="collectFee()">
|
||||
<!-- 不是会员显示锁 -->
|
||||
<font style=" color:#bfa853;margin-left: 20rpx;">
|
||||
<u-icon name="lock" color="#ccc" size="20" v-if="bookMessage.isBuy!==1"></u-icon>
|
||||
</font>
|
||||
{{item.chapterName}}
|
||||
</view>
|
||||
<view
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 60rpx;"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="book_caozuo">
|
||||
<view v-if="this.bookMessage.flag" style="color: #aaa;">已加入书架</view>
|
||||
<view v-if="!this.bookMessage.flag" @click="joInshelf">加入书架</view>
|
||||
<view @click="onBokReadJump(0)" v-if="this.bookMessage.isBuy==1&&this.bookMessage.chapterId==null">开始阅读</view>
|
||||
<view @click="onBokReadJump(bookMessage.chapterNum-1)" v-if="this.bookMessage.isBuy==1&&this.bookMessage.chapterId!=null">
|
||||
继续阅读
|
||||
</view>
|
||||
<view @click="onBokReadJump(0)" v-if="this.bookMessage.isBuy==0&&this.bookMessage.chapterNum==null&&this.bookMessage.freeChapterCount!=0">开始试读</view>
|
||||
<view @click="onBokReadJump(bookMessage.chapterNum-1)" v-if="this.bookMessage.isBuy==0&&this.bookMessage.chapterNum!=null&&this.bookMessage.freeChapterCount!=0">继续试读</view>
|
||||
<view v-if="this.bookMessage.isBuy==0&&this.bookMessage.freeChapterCount==0">购买阅读</view>
|
||||
<view @click="buyShowFun" v-if="bookMessage.isBuy==0" style="background-color: #d85f54;">立即购买</view>
|
||||
<view v-if="bookMessage.isBuy==1&&bookMessage.isVip!=0" style="background-color: #bfa853;">已购买</view>
|
||||
<view v-if="bookMessage.isVip==0">本书免费</view>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 购买 -->
|
||||
<u-popup :show="buyShow" :round="10" @close="buyShow=false" :closeable='true'>
|
||||
<view class="tanchu">
|
||||
<view class="by_title">购买</view>
|
||||
<view class="by_package">
|
||||
<view v-if="userMes.vip==0" :class="typeFen== 1?'Tab_by by_fen':'by_fen'" @click="chBuyType(1)">
|
||||
<view class="biao">开通会员</view>
|
||||
<view class="wenz">
|
||||
连续包月
|
||||
<text>节省{{bookMessage.salePrice}}疯币</text>
|
||||
</view>
|
||||
</view>
|
||||
<br>
|
||||
<view :class="typeFen== 2?'Tab_by by_fen':'by_fen'" @click="chBuyType(2)">
|
||||
<view class="biao" v-if="userMes.vip==0">直接购买</view>
|
||||
<view class="biao" v-if="userMes.vip==1">会员权益购买</view>
|
||||
<view class="benl">
|
||||
<b v-if="useCouponAmount != ''">{{useCouponAmount}}</b>
|
||||
<span v-else>
|
||||
<b v-if="bookMessage.isSale==1">{{bookMessage.salePrice}}</b>
|
||||
<b v-if="bookMessage.isSale==0||bookMessage.isSale==null">{{bookMessage.price}}</b></span>
|
||||
疯币
|
||||
<text>{{bookMessage.price}}疯币</text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 优惠券 ------------------------>
|
||||
<view class="yq_youhui" @click="CyouhuiShow" style="margin-top:20px;">
|
||||
<u-icon name="red-packet-fill" color="#e74141" size="18" class="yqLeft"></u-icon>
|
||||
优惠券
|
||||
<u-icon name="arrow-right" color="#aaa" size="18" class="yqRight"></u-icon>
|
||||
<text class="dagnqian"
|
||||
v-if="youhuiList.length>0&&youhuiContent.id==undefined">当前可选{{this.youhuiList.length}}张</text>
|
||||
<text class="dagnqian" v-if="youhuiList.length==0&&youhuiContent.id==undefined"
|
||||
style="background-color: #999;">暂无优惠券</text>
|
||||
<text class="dagnqian" v-if="youhuiContent.id!=undefined">
|
||||
- ￥{{youhuiContent.coupons.couponAmount}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 1px;width: 100%;background-color: #eee;margin-top: 50rpx;"></view>
|
||||
<view style="margin: 40rpx 10rpx 20rpx 10rpx;font-size: 30rpx;">
|
||||
<view style="float: left;">余额</view>
|
||||
<view style="float: right;color: #999;">
|
||||
{{userMes.peanutCoin}} 疯币
|
||||
<view class="chongBtn" @click="buPoint()">充值疯币</view>
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
|
||||
<view style="color: #c3c3c3;font-size: 20rpx;margin: 30rpx 0;">支付成功后，立即解锁已购内容</view>
|
||||
|
||||
<view @click="buyVip()" v-if="typeFen== 1" class="by_btn">查看套餐开通VIP</view>
|
||||
<view @click="buyMoneTip()" v-if="typeFen== 2" class="by_btn">购买本书</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
|
||||
<u-modal :show="buysignShow" :content="buysignContent" :showCancelButton="true" @cancel="cancelMoney"
|
||||
@confirm="buyMoney">
|
||||
</u-modal>
|
||||
|
||||
<view>
|
||||
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||||
</view>
|
||||
<!-- 优惠券弹1出 -->
|
||||
<u-popup :show="youhuiShow" :round="10" @close="hideyouhui">
|
||||
<view class="tanchu">
|
||||
<view class="dp_title">请选择优惠券</view>
|
||||
<view style="max-height: 1000rpx;overflow-y: scroll;">
|
||||
<span @click="clearYouhui" style="font-size: 14px; display:inline-block;border: 1px solid #c74119; border-radius: 5px; float: right; color:#c74119; padding: 5px; margin-bottom: 10px;">不使用优惠券</span>
|
||||
<view :class="youhuiIndex === index ? 'youhuiItem youItem_style' : 'youhuiItem'"
|
||||
v-for="(item,index) in youhuiList" :key="index" @click="choseYouhui(index)">
|
||||
<view style="width: 25%;color:#fd6004;text-align: center;">
|
||||
<text>￥</text>
|
||||
<b style="font-size: 45rpx;">{{item.coupons.couponAmount}}</b>
|
||||
<text
|
||||
style="display: block;color: #666;font-size: 25rpx;margin-top: 10rpx;">满{{item.coupons.useLevel}}元可用</text>
|
||||
</view>
|
||||
<view style="width: 68%;padding-left: 5%;">
|
||||
<text>{{item.coupons.couponName}}</text>
|
||||
<text
|
||||
style="display: block;font-size: 20rpx;color: #999;margin-top: 10rpx;">到期时间：{{item.coupons.expirationDate}}</text>
|
||||
</view>
|
||||
<view style="width: 7%;">
|
||||
<text
|
||||
style="border: 1px solid #d9d9d9;width: 35rpx;height:35rpx;display:inline-block;border-radius: 30rpx;"
|
||||
v-if="youhuiIndex !== index"></text>
|
||||
<u-icon name="checkmark-circle-fill" color="#fd6004" size="20" v-if="youhuiIndex === index">
|
||||
</u-icon>
|
||||
</view>
|
||||
<br clear="both">
|
||||
</view>
|
||||
</view>
|
||||
<view style="font-size: 20rpx;color: #aaa;margin-top: 30rpx;">* 每笔订单只能使用一张优惠价</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
youhuiShow:false,
|
||||
youhuiIndex:'',
|
||||
youhuiList:[], // 优惠券列表
|
||||
couponMz: 0, // 优惠券钱数
|
||||
useCouponAmount: '' , // 使用的优惠券金额
|
||||
bookJiageA: 0,
|
||||
youhuiContent: {
|
||||
coupons:{
|
||||
id:'0'
|
||||
}
|
||||
},
|
||||
scrollTop: 0,
|
||||
tab_list: [{
|
||||
name: '简介',
|
||||
}, {
|
||||
name: '目录',
|
||||
}],
|
||||
userMes: {},
|
||||
bokMesDet: {},
|
||||
tab_muJian: 0,
|
||||
bookId: '',
|
||||
bookMessage: {
|
||||
flag: false
|
||||
},
|
||||
bookCatalogue: [],
|
||||
bgiStyle: {
|
||||
background: '#2ab58833'
|
||||
},
|
||||
iconStyle: {
|
||||
fontSize: '40rpx',
|
||||
fontWeight: 'bold',
|
||||
color: '#54a966',
|
||||
},
|
||||
typeFen: 1,
|
||||
buyShow: false,
|
||||
buysignShow: false,
|
||||
buysignContent: ''
|
||||
};
|
||||
},
|
||||
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
this.bookId = e.Id
|
||||
|
||||
},
|
||||
computed: {
|
||||
...mapState(['userInfo'])
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
this.getData();
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
getData() {
|
||||
// 获取电子书详情
|
||||
this.$http
|
||||
.post('book/book/appinfo/' + this.bookId + '/' + this.userInfo.id)
|
||||
.then(res => {
|
||||
this.bookMessage = res.book
|
||||
this.bokMesDet.bookId = res.book.id
|
||||
this.bokMesDet.bookName = res.book.name
|
||||
if (this.bookMessage.isSale == 1) {
|
||||
this.buysignContent = '您确定要花费' + this.bookMessage.salePrice + '疯币购买' + this.bokMesDet
|
||||
.bookName + '吗？'
|
||||
} else {
|
||||
this.buysignContent = '您确定要花费' + this.bookMessage.price + '疯币购买' + this.bokMesDet
|
||||
.bookName + '吗？'
|
||||
}
|
||||
|
||||
this.bokMesDet.userId = this.userInfo.id
|
||||
|
||||
if (this.bookMessage.publisherName.indexOf(',') > 0) {
|
||||
this.bookMessage.publisherName = this.bookMessage.publisherName.split(',')
|
||||
this.bookMessage.publisherId = this.bookMessage.publisherId.split(',')
|
||||
this.bookMessage.publisherNIList = []
|
||||
for (let i in this.bookMessage.publisherName) {
|
||||
this.bookMessage.publisherNIList.push({
|
||||
title: this.bookMessage.publisherName[i]
|
||||
})
|
||||
}
|
||||
for (let j in this.bookMessage.publisherId) {
|
||||
this.bookMessage.publisherNIList[j].id = this.bookMessage.publisherId[j]
|
||||
}
|
||||
} else {
|
||||
this.bookMessage.publisherNIList = []
|
||||
this.bookMessage.publisherNIList.push({
|
||||
'title': this.bookMessage.publisherName,
|
||||
'id': this.bookMessage.publisherId
|
||||
})
|
||||
}
|
||||
});
|
||||
|
||||
// 获取电子目录
|
||||
this.$http
|
||||
.post('book/book/getBookCatalogue', {
|
||||
'bookid': this.bookId
|
||||
})
|
||||
.then(res => {
|
||||
this.bookCatalogue = res.bookCatalogue
|
||||
});
|
||||
|
||||
|
||||
|
||||
// 用户详情
|
||||
if (this.userInfo.id != undefined) {
|
||||
this.$http
|
||||
.post('book/user/info/' + this.userInfo.id)
|
||||
.then(res => {
|
||||
this.userMes = res.user
|
||||
if (this.userMes.vip != 0) {
|
||||
this.typeFen = 2
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 加入书架
|
||||
joInshelf() {
|
||||
const that = this;
|
||||
$http.request({
|
||||
url: "book/bookshelf/save",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: that.bokMesDet,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(function(res) {
|
||||
if (res.code == 0) {
|
||||
uni.showToast({
|
||||
title: '加入书架成功'
|
||||
})
|
||||
that.bookMessage.flag = true
|
||||
}
|
||||
}).catch(function(error) {
|
||||
//这里只会在接口是失败状态返回，不需要去处理错误提示
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
// 点击tab
|
||||
tab_click(e) {
|
||||
this.tab_muJian = e.index
|
||||
},
|
||||
CyouhuiShow(){
|
||||
this.youhuiShow = true
|
||||
this.getCourpe()
|
||||
this.buyShow = false // 隐藏购买弹窗
|
||||
},
|
||||
buyShowFun(){
|
||||
this.buyShow = true
|
||||
this.getCourpe()
|
||||
},
|
||||
hideyouhui(){
|
||||
this.youhuiShow = false,
|
||||
this.buyShow = true // 隐藏购买弹窗
|
||||
},
|
||||
clearYouhui(){
|
||||
this.youhuiContent = {}
|
||||
this.youhuiIndex = ''
|
||||
this.useCouponAmount = ''
|
||||
this.getData()
|
||||
this.youhuiShow = false
|
||||
this.buyShow = true // 隐藏购买弹窗
|
||||
//this.couponMz = 0
|
||||
|
||||
},
|
||||
|
||||
// 选择优惠券
|
||||
choseYouhui(e) {
|
||||
this.youhuiIndex = e
|
||||
this.youhuiContent = this.youhuiList[this.youhuiIndex]
|
||||
console.log(this.youhuiContent, 'youhuiContent')
|
||||
//this.couponMz = this.youhuiContent.coupons.couponAmount
|
||||
|
||||
if (this.bookMessage.isSale == 0) {
|
||||
this.useCouponAmount = this.bookMessage.price - this.youhuiContent.coupons.couponAmount
|
||||
} else {
|
||||
this.useCouponAmount = this.bookMessage.salePrice - this.youhuiContent.coupons.couponAmount
|
||||
}
|
||||
this.buysignContent = '您确定要花费' + this.useCouponAmount + '疯币购买' + this.bokMesDet.bookName + '吗？'
|
||||
// this.getData()
|
||||
this.youhuiShow = false
|
||||
this.buyShow = true // 隐藏购买弹窗
|
||||
|
||||
},
|
||||
// 获取优惠券列表
|
||||
getCourpe() {
|
||||
let bookJiage = 0
|
||||
if (this.bookMessage.isSale == 0) {
|
||||
bookJiage = this.bookMessage.price
|
||||
} else {
|
||||
bookJiage = this.bookMessage.salePrice
|
||||
}
|
||||
this.bookJiageA = bookJiage
|
||||
this.$http
|
||||
.post('book/couponhistory/appGetUserCoupon?userId=' + this.userInfo.id + '&amount=' + this.bookJiageA + '&type=1' )
|
||||
.then(res => {
|
||||
this.youhuiList = res.userCoupons
|
||||
});
|
||||
},
|
||||
// 跳转
|
||||
onPageJump(url) {
|
||||
uni.navigateTo({
|
||||
url: url
|
||||
});
|
||||
|
||||
|
||||
},
|
||||
|
||||
// 电子书阅读跳转
|
||||
onBokReadJump(e) {
|
||||
const that = this;
|
||||
|
||||
// 加入阅读记录
|
||||
$http.request({
|
||||
// 存数据
|
||||
url: "book/bookbrowserecords/save",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: that.bokMesDet,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(function(res) {
|
||||
if (res.code == 0) {
|
||||
console.log(res,'========');
|
||||
if (res.browseRecordsId) {
|
||||
$http.request({
|
||||
// 更新
|
||||
url: "book/bookbrowserecords/update",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: {
|
||||
'bookShelfId': res.browseRecordsId
|
||||
},
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(function(res) {
|
||||
if (res.code == 0) {
|
||||
uni.navigateTo({
|
||||
url: '../yRead/angbook?Id=' + that.bookId + '&cha=' + e
|
||||
});
|
||||
}
|
||||
}).catch(function(error) {
|
||||
//这里只会在接口是失败状态返回，不需要去处理错误提示
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
uni.navigateTo({
|
||||
url: '../yRead/angbook?Id=' + that.bookId + '&cha=' + e
|
||||
});
|
||||
}
|
||||
}
|
||||
}).catch(function(error) {
|
||||
//这里只会在接口是失败状态返回，不需要去处理错误提示
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
// 信息介绍跳转
|
||||
onAuCHJump(id, e) {
|
||||
uni.navigateTo({
|
||||
url: './bookMessage?Id=' + id + '&typ=' + e
|
||||
});
|
||||
},
|
||||
|
||||
// 提示购买
|
||||
collectFee() {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '请购买本书'
|
||||
})
|
||||
},
|
||||
|
||||
// 充值疯币
|
||||
buPoint() {
|
||||
uni.navigateTo({
|
||||
url: '../../peanut/reCharge'
|
||||
});
|
||||
},
|
||||
|
||||
// 选择vip还是直接购买
|
||||
chBuyType(e) {
|
||||
let that = this
|
||||
that.typeFen = e
|
||||
},
|
||||
|
||||
// 开通VIP
|
||||
buyVip() {
|
||||
uni.navigateTo({
|
||||
url: '../peanut/opeVip'
|
||||
});
|
||||
},
|
||||
|
||||
// 购买本书
|
||||
buyMoneTip() {
|
||||
let bookJiage = 0
|
||||
if (this.bookMessage.isSale == 0) {
|
||||
bookJiage = this.bookMessage.price
|
||||
} else {
|
||||
bookJiage = this.bookMessage.salePrice
|
||||
}
|
||||
// this.bookJiageA = bookJiage
|
||||
if (bookJiage > this.userMes.peanutCoin) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: '余额不足，请充值'
|
||||
})
|
||||
} else {
|
||||
this.buysignShow = true
|
||||
this.buyShow = false
|
||||
}
|
||||
|
||||
},
|
||||
buyMoney() {
|
||||
let couponId = ''
|
||||
if(this.youhuiContent.coupons.id != 0){ // 使用了优惠券
|
||||
couponId = this.youhuiContent.coupons.id
|
||||
}else{ // 未使用
|
||||
couponId = '0'
|
||||
}
|
||||
console.log(this.youhuiIndex, this.youhuiContent.coupons.id, couponId)
|
||||
this.$http
|
||||
.post('book/user/buyEbook?bookId=' + this.bokMesDet.bookId + '&userId=' + this.userInfo.id + '&couponId=' + couponId)
|
||||
.then(res => {
|
||||
if (res.code == 0) {
|
||||
if (res.status == 'error') {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: res.msg
|
||||
})
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '购买成功'
|
||||
})
|
||||
this.buyShow = false
|
||||
this.buysignShow = false
|
||||
this.getData();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
cancelMoney() {
|
||||
this.buysignShow = false
|
||||
this.buyShow = true
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
.yq_youhui {
|
||||
.yqLeft {
|
||||
display: inline-block;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
.yqRight {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.dagnqian {
|
||||
float: right;
|
||||
font-size: 22rpx;
|
||||
background-color: #dd1919;
|
||||
color: #fff;
|
||||
border-radius: 20rpx;
|
||||
padding: 5rpx 10rpx;
|
||||
}
|
||||
}
|
||||
.yq_yunfei {
|
||||
.yqLeft {
|
||||
display: inline-block;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
|
||||
text {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
.book_neir {
|
||||
margin: 20rpx 0 0 0;
|
||||
position: relative;
|
||||
|
||||
|
||||
.bn_img {
|
||||
float: left;
|
||||
width: 250upx;
|
||||
height: 320upx;
|
||||
}
|
||||
|
||||
.bn_nes {
|
||||
float: left;
|
||||
font-size: 36rpx;
|
||||
margin-left: 40rpx;
|
||||
|
||||
view {
|
||||
margin: 20rpx 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.leiXing {
|
||||
display: block;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: #27b386;
|
||||
position: absolute;
|
||||
left: -15upx;
|
||||
top: 10upx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.book_dredge {
|
||||
font-size: 26rpx;
|
||||
color: #e4b58a;
|
||||
margin: 40rpx 0 0 0;
|
||||
padding: 20rpx 30rpx 25rpx 30rpx;
|
||||
background-image: url('../../static/icon/mine_back.png');
|
||||
background-size: 100% auto;
|
||||
|
||||
image {
|
||||
width: 46rpx;
|
||||
height: 40rpx;
|
||||
display: inline-block;
|
||||
vertical-align: text-bottom;
|
||||
margin: 0 10rpx 0 0;
|
||||
}
|
||||
|
||||
b {
|
||||
float: right;
|
||||
font-size: 35rpx;
|
||||
font-weight: bold;
|
||||
line-height: 40rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.book_vip{
|
||||
background: url('../../static/icon/mine_card.png') top center no-repeat;
|
||||
color: #87510d;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.book_tab {
|
||||
margin: 20rpx 0 0 0;
|
||||
|
||||
.bt_cont {
|
||||
font-size: 26rpx;
|
||||
line-height: 42rpx;
|
||||
color: #666;
|
||||
padding: 0 10rpx;
|
||||
|
||||
.bt_jian {
|
||||
padding-top: 30rpx;
|
||||
margin-bottom: 15rpx;
|
||||
}
|
||||
|
||||
.bt_nulu {
|
||||
border-bottom: 1px solid #eee;
|
||||
padding: 20rpx 0;
|
||||
|
||||
font {
|
||||
color: #54a966;
|
||||
float: right;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.book_caozuo {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background-color: #fff;
|
||||
|
||||
view {
|
||||
display: inline-block;
|
||||
width: 33.3%;
|
||||
text-align: center;
|
||||
padding: 28rpx 0;
|
||||
font-size: 35rpx;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
view:nth-child(3) {
|
||||
background-color: #54a966;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.tanchu {
|
||||
padding: 30rpx 50rpx 60rpx 50rpx;
|
||||
|
||||
.by_title {
|
||||
font-size: 32rpx;
|
||||
margin: 0 0 80rpx 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.by_package {
|
||||
font-size: 28rpx;
|
||||
|
||||
.by_fen {
|
||||
box-shadow: 0 0 20rpx 0 #0000001a;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.biao {
|
||||
font-weight: bold;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.wenz {
|
||||
color: #b1b1b1;
|
||||
margin-top: 20rpx;
|
||||
|
||||
text {
|
||||
color: #fe6e09;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.benl {
|
||||
margin-top: 20rpx;
|
||||
color: #d75f54;
|
||||
font-size: 31rpx;
|
||||
|
||||
text {
|
||||
font-size: 30rpx;
|
||||
text-decoration: line-through;
|
||||
color: #c1c1c1;
|
||||
margin-left: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.Tab_by {
|
||||
box-shadow: 0 0 20rpx 0 #fe700bcc;
|
||||
color: #7b4c0a;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.by_btn {
|
||||
background-image: linear-gradient(90deg, #ed7161 0%, #efa574 100%);
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
margin: 50rpx auto 0 auto;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
padding: 20rpx 0;
|
||||
border-radius: 50rpx;
|
||||
}
|
||||
|
||||
.chongBtn {
|
||||
background-color: #54a966;
|
||||
color: #fff;
|
||||
margin-left: 20rpx;
|
||||
border-radius: 10rpx;
|
||||
padding: 2rpx 10rpx;
|
||||
font-size: 20rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
.youhuiItem {
|
||||
border: 1px solid #d9d9d9;
|
||||
border-radius: 10rpx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding: 20rpx 10rpx;
|
||||
margin: 25rpx 0 0 0;
|
||||
align-items: center;
|
||||
background-color: #fff;
|
||||
font-size: 30rpx;
|
||||
}
|
||||
|
||||
.youhuiItem>view {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.youhuiItem.youItem_style {
|
||||
border-color: #fd6004;
|
||||
}
|
||||
</style>
|
||||
269
pages/eBook/bookList.vue
Normal file
269
pages/eBook/bookList.vue
Normal file
@@ -0,0 +1,269 @@
|
||||
<template>
|
||||
<view>
|
||||
<z-nav-bar title="电子书列表"></z-nav-bar>
|
||||
|
||||
<view class="book_class">
|
||||
<view class="bc_list">
|
||||
<view class="bc_con" v-for="(item,index) in classFen" @click="FenBook(item)"
|
||||
:class="bookScreen.type == item.id ? 'bc_con bc_con_style' : 'bc_con'">{{item.sort}}</view>
|
||||
</view>
|
||||
<view class="bc_list">
|
||||
<view class="bc_con" v-for="(item,index) in classMian" @click="MianBook(item)"
|
||||
:class="bookScreen.is_charge == item.id ? 'bc_con bc_con_style' : 'bc_con'">{{item.sort}}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="book_list">
|
||||
<view class="bl_tioa" v-for="(item,index) in bookList" @click="onBookJump(item)">
|
||||
<image :src="item.images"></image>
|
||||
<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
|
||||
<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
|
||||
<view>
|
||||
<text class="bok_name">{{item.name}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>作者：<text style="color: #333;">{{item.authorName}}</text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text>出版商：<text style="color: #333;">{{item.publisherName}}</text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text style="line-height: 20rpx;">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 1px;"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<view>
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<view v-if="status==1">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="padding-bottom: 20rpx;">
|
||||
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
status: 3,
|
||||
classFen: [{
|
||||
sort: '全部',
|
||||
id: ''
|
||||
}, {
|
||||
sort: '医学',
|
||||
id: 1
|
||||
}, {
|
||||
sort: '国学',
|
||||
id: 2
|
||||
}, {
|
||||
sort: '文学',
|
||||
id: 3
|
||||
}, {
|
||||
sort: '古籍',
|
||||
id: 4
|
||||
}],
|
||||
classMian: [{
|
||||
sort: '免费',
|
||||
id: 1
|
||||
}, {
|
||||
sort: 'VIP',
|
||||
id: 0
|
||||
}],
|
||||
bookScreen: {
|
||||
authorName: '', //作者
|
||||
publisherName: '', //出版社
|
||||
type: '', //电子书类型
|
||||
bookName: '', //关键词
|
||||
is_charge: 1, //是否收费（0收费1免费）,
|
||||
state: 1,
|
||||
page: 1, //当前页码数
|
||||
limit: 5, //单页数据数量
|
||||
},
|
||||
totalPage: 0,
|
||||
totalCount: 0,
|
||||
bookList: [],
|
||||
bgiStyle: {
|
||||
background: '#2ab58833'
|
||||
},
|
||||
iconStyle: {
|
||||
fontSize: '40rpx',
|
||||
fontWeight: 'bold',
|
||||
color: '#54a966',
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
// 返回顶部
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onReachBottom() {
|
||||
this.status = 0
|
||||
if (this.bookScreen.page < this.totalPage) {
|
||||
this.bookScreen.page = this.bookScreen.page + 1
|
||||
setTimeout(() => {
|
||||
this.$http
|
||||
.post('book/book/list', this.bookScreen)
|
||||
.then(res => {
|
||||
this.totalPage = res.page.totalPage
|
||||
this.totalCount = res.page.totalCount
|
||||
for (let i in res.page.list) {
|
||||
this.bookList.push(res.page.list[i])
|
||||
}
|
||||
});
|
||||
}, 1000)
|
||||
} else {
|
||||
this.status = 1
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
if (e.id) {
|
||||
this.bookScreen.type = e.id
|
||||
}
|
||||
this.getData();
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
// this.getData();
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.getData()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取列表数据
|
||||
getData() {
|
||||
this.bookList = []
|
||||
this.$http
|
||||
.post('book/book/list', this.bookScreen)
|
||||
.then(res => {
|
||||
this.bookList = res.page.list
|
||||
this.totalPage = res.page.totalPage
|
||||
this.status = 3
|
||||
});
|
||||
},
|
||||
|
||||
// 分类选择
|
||||
FenBook(e) {
|
||||
if (e.id == 0) {
|
||||
this.bookScreen.type = ''
|
||||
} else {
|
||||
this.bookScreen.type = e.id
|
||||
}
|
||||
this.bookScreen.page = 1
|
||||
this.getData();
|
||||
},
|
||||
MianBook(e) {
|
||||
this.bookScreen.is_charge = e.id
|
||||
this.bookScreen.page = 1
|
||||
this.getData();
|
||||
},
|
||||
|
||||
// 电子书内容跳转
|
||||
onBookJump(e) {
|
||||
uni.navigateTo({
|
||||
url: './bookContent?Id=' + e.id
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
|
||||
.book_class {
|
||||
margin: 20rpx 30rpx 60rpx 30rpx;
|
||||
|
||||
.bc_list {
|
||||
|
||||
margin-bottom: 10rpx;
|
||||
|
||||
.bc_con {
|
||||
display: inline-block;
|
||||
font-size: 28rpx;
|
||||
margin-right: 20rpx;
|
||||
border-radius: 20rpx;
|
||||
padding: 6rpx 12rpx;
|
||||
}
|
||||
|
||||
.bc_con_style {
|
||||
color: #27b386;
|
||||
background-color: #2ab58833;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.book_list {
|
||||
margin: 50rpx 30rpx 0 30rpx;
|
||||
|
||||
.bl_tioa {
|
||||
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
padding: 0 25upx 10upx 220upx;
|
||||
margin: 0 0 60rpx 0;
|
||||
border-radius: 15rpx;
|
||||
min-height: 250rpx;
|
||||
|
||||
view {
|
||||
// margin: 0 0 10rpx 0;
|
||||
|
||||
text {
|
||||
color: #9b9b9b;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.bok_name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
left: 30upx;
|
||||
top: -20upx;
|
||||
width: 160upx;
|
||||
height: 240upx;
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: #27b386;
|
||||
position: absolute;
|
||||
left: -1upx;
|
||||
top: -10upx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
306
pages/eBook/bookMessage.vue
Normal file
306
pages/eBook/bookMessage.vue
Normal file
@@ -0,0 +1,306 @@
|
||||
<template>
|
||||
<view style="padding: 30rpx;">
|
||||
<z-nav-bar title=""></z-nav-bar>
|
||||
<view class="author_mess" v-if="shouTyp==1">
|
||||
<h4>
|
||||
{{authorMess.authorName}}
|
||||
<span>作者</span>
|
||||
</h4>
|
||||
<p>{{authorMess.introduction}}</p>
|
||||
<!-- <u-line color="#e7e7e7" style="margin: 35rpx 0"></u-line> -->
|
||||
<!-- <p>免责声明：123111111111111111111111566666666666666666666666666</p> -->
|
||||
</view>
|
||||
|
||||
<view class="publish_mess" v-if="shouTyp==2">
|
||||
<h4>
|
||||
{{publishMess.publisherName}}
|
||||
<span>出版社</span>
|
||||
</h4>
|
||||
<p>{{publishMess.introduction}}</p>
|
||||
</view>
|
||||
|
||||
|
||||
<view class="bupuberList">
|
||||
<h4 v-if="shouTyp==1">Ta的作品 ({{this.bupuList.totalCount}})</h4>
|
||||
<h4 v-if="shouTyp==2">全部图书 ({{this.bupuList.totalCount}})</h4>
|
||||
|
||||
|
||||
<view class="book_list">
|
||||
<view class="bl_tioa" v-for="(item,index) in this.bupuList.list" @click="onBookJump(item)">
|
||||
<image :src="item.images"></image>
|
||||
<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
|
||||
<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
|
||||
<view class="bl_list">
|
||||
<view>
|
||||
<text class="bok_name">{{item.name}}</text>
|
||||
</view>
|
||||
<view v-if="shouTyp==2">
|
||||
<text>作者：<text style="color: #333;">{{item.authorName}}</text></text>
|
||||
</view>
|
||||
<view v-if="shouTyp==1">
|
||||
<text>出版商：<text style="color: #333;">{{item.publisherName}}</text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text style="line-height: 20rpx;">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<br clear='both'>
|
||||
</view>
|
||||
<view style="height: 1px;"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<view v-if="status==1">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="padding-bottom: 20rpx;">
|
||||
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
AuPluid: '',
|
||||
shouTyp: '',
|
||||
authorMess: {},
|
||||
publishMess: {},
|
||||
bupuList: {},
|
||||
bupuTotal: 1,
|
||||
status: 3,
|
||||
scrollTop: 0,
|
||||
bgiStyle: {
|
||||
background: '#2ab58833'
|
||||
},
|
||||
iconStyle: {
|
||||
fontSize: '40rpx',
|
||||
fontWeight: 'bold',
|
||||
color: '#54a966',
|
||||
},
|
||||
};
|
||||
},
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
this.AuPluid = e.Id
|
||||
this.shouTyp = e.typ
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
this.getData();
|
||||
},
|
||||
// 下拉刷新
|
||||
onReachBottom() {
|
||||
this.status = 0
|
||||
if (this.bupuTotal < this.bupuList.totalPage) {
|
||||
this.bupuTotal = this.bupuTotal + 1
|
||||
setTimeout(() => {
|
||||
if (this.shouTyp == 1) {
|
||||
this.$http
|
||||
.post('book/author/appGetInfo/' + this.AuPluid + '/2/' + this.bupuTotal)
|
||||
.then(res => {
|
||||
this.totalPage = res.authorBooks.currPage
|
||||
for (let i in res.authorBooks.list) {
|
||||
this.bupuList.list.push(res.authorBooks.list[i])
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$http
|
||||
.post('book/publisher/appGetInfo/' + this.AuPluid + '/2/' + this.bupuTotal)
|
||||
.then(res => {
|
||||
this.totalPage = res.publisherBooks.currPage
|
||||
for (let i in res.publisherBooks.list) {
|
||||
this.bupuList.list.push(res.publisherBooks.list[i])
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 1000)
|
||||
} else {
|
||||
this.status = 1
|
||||
}
|
||||
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取作者或者出版社信息
|
||||
getData() {
|
||||
this.bupuList = []
|
||||
if (this.shouTyp == 1) {
|
||||
this.$http
|
||||
.post('book/author/appGetInfo/' + this.AuPluid + '/5/' + this.bupuTotal)
|
||||
.then(res => {
|
||||
this.authorMess = res.authorInfo
|
||||
this.bupuList = res.authorBooks
|
||||
this.status = 3
|
||||
});
|
||||
} else {
|
||||
this.$http
|
||||
.post('book/publisher/appGetInfo/' + this.AuPluid + '/5/' + this.bupuTotal)
|
||||
.then(res => {
|
||||
this.publishMess = res.publisherInfo
|
||||
this.bupuList = res.publisherBooks
|
||||
this.status = 3
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
},
|
||||
|
||||
// 电子书内容跳转
|
||||
onBookJump(e) {
|
||||
uni.navigateTo({
|
||||
url: './bookContent?Id=' + e.id
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
.author_mess {
|
||||
padding: 30rpx 30rpx;
|
||||
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||
background-color: #fff;
|
||||
border-radius: 15rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 40rpx 0;
|
||||
color: #333;
|
||||
font-size: 40rpx;
|
||||
|
||||
span {
|
||||
color: #54a966;
|
||||
border: 1px solid #54a966;
|
||||
border-radius: 20rpx;
|
||||
font-size: 10rpx;
|
||||
font-weight: normal;
|
||||
padding: 2rpx 10rpx;
|
||||
margin-left: 20rpx;
|
||||
display: inline-block;
|
||||
vertical-align: super;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 20rpx 0;
|
||||
color: #666;
|
||||
font-size: 30rpx;
|
||||
word-break: break-all;
|
||||
line-height: 45rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.publish_mess {
|
||||
padding: 30rpx 30rpx;
|
||||
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||
background-color: #fff;
|
||||
border-radius: 15rpx;
|
||||
margin-bottom: 40rpx;
|
||||
|
||||
h4 {
|
||||
margin: 0 0 40rpx 0;
|
||||
color: #333;
|
||||
font-size: 40rpx;
|
||||
|
||||
span {
|
||||
color: #54a966;
|
||||
border: 1px solid #54a966;
|
||||
border-radius: 20rpx;
|
||||
font-size: 10rpx;
|
||||
font-weight: normal;
|
||||
padding: 2rpx 10rpx;
|
||||
margin-left: 20rpx;
|
||||
display: inline-block;
|
||||
vertical-align: super;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 20rpx 0;
|
||||
color: #666;
|
||||
font-size: 30rpx;
|
||||
word-break: break-all;
|
||||
line-height: 45rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.bupuberList {
|
||||
|
||||
|
||||
h4 {
|
||||
padding: 0 8rpx;
|
||||
margin: 0 0 40rpx 0;
|
||||
color: #333;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.book_list {
|
||||
margin: 50rpx 0 0 0;
|
||||
|
||||
.bl_tioa {
|
||||
// box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
padding: 30rpx;
|
||||
margin: 0 0 30rpx 0;
|
||||
border-radius: 15rpx;
|
||||
min-height: 300rpx;
|
||||
|
||||
image {
|
||||
float: left;
|
||||
width: 160upx;
|
||||
height: 240upx;
|
||||
margin-right: 25rpx;
|
||||
}
|
||||
|
||||
.bl_list {
|
||||
float: left;
|
||||
max-width: 420rpx;
|
||||
|
||||
text {
|
||||
color: #9b9b9b;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.bok_name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: #27b386;
|
||||
position: absolute;
|
||||
left: 5upx;
|
||||
top: 40upx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
222
pages/eBook/bookRecord.vue
Normal file
222
pages/eBook/bookRecord.vue
Normal file
@@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view>
|
||||
<z-nav-bar title="阅读记录"></z-nav-bar>
|
||||
|
||||
<view class="book_list">
|
||||
<view class="bl_tioa" v-for="(item,index) in bookList" @click="onBookJump(index)">
|
||||
<image :src="item.images"></image>
|
||||
<view>
|
||||
<text class="bok_name" style="line-height: 30rpx;">{{item.bookName}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 1px;"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<view>
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<view v-if="status==1">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="padding-bottom: 20rpx;">
|
||||
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $http from '@/config/requestConfig.js';
|
||||
import {
|
||||
mapState
|
||||
} from 'vuex';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
status: 3,
|
||||
bookScreen: {
|
||||
page: 1, //当前页码数
|
||||
limit: 5, //单页数据数量
|
||||
},
|
||||
totalPage: 0,
|
||||
totalCount: 0,
|
||||
bookList: [],
|
||||
bgiStyle: {
|
||||
background: '#2ab58833'
|
||||
},
|
||||
iconStyle: {
|
||||
fontSize: '40rpx',
|
||||
fontWeight: 'bold',
|
||||
color: '#54a966',
|
||||
},
|
||||
bokMesDet: {}
|
||||
}
|
||||
},
|
||||
|
||||
// 返回顶部
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onReachBottom() {
|
||||
this.status = 0
|
||||
if (this.bookScreen.page < this.totalPage) {
|
||||
this.bookScreen.page = this.bookScreen.page + 1
|
||||
setTimeout(() => {
|
||||
this.$http
|
||||
.post('book/bookbrowserecords/userList?userId=' + this.userInfo.id + '&page=' + this
|
||||
.bookScreen.page + '&limit=' + this.bookScreen.limit)
|
||||
.then(res => {
|
||||
this.totalPage = res.page.totalPage
|
||||
this.totalCount = res.page.totalCount
|
||||
for (let i in res.page.list) {
|
||||
this.bookList.push(res.page.list[i])
|
||||
}
|
||||
});
|
||||
}, 1000)
|
||||
} else {
|
||||
this.status = 1
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
//第一次加载
|
||||
onLoad(e) {},
|
||||
computed: {
|
||||
...mapState(['userInfo'])
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
this.getData();
|
||||
},
|
||||
|
||||
//方法
|
||||
methods: {
|
||||
// 获取列表数据
|
||||
getData() {
|
||||
this.bokMesDet.userId = this.userInfo.id
|
||||
this.bookList = []
|
||||
this.$http
|
||||
.post('book/bookbrowserecords/userList?userId=' + this.userInfo.id + '&page=' + this.bookScreen.page +
|
||||
'&limit=' + this.bookScreen.limit)
|
||||
.then(res => {
|
||||
this.totalPage = res.page.totalPage
|
||||
this.totalCount = res.page.totalCount
|
||||
for (let i in res.page.list) {
|
||||
this.bookList.push(res.page.list[i])
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
||||
// 电子书内容跳转
|
||||
onBookJump(e) {
|
||||
const that = this;
|
||||
that.bokMesDet.bookId = that.bookList[e].bookId
|
||||
that.bokMesDet.bookName = that.bookList[e].bookName
|
||||
// 加入阅读记录
|
||||
$http.request({
|
||||
url: "book/bookbrowserecords/save",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: that.bokMesDet,
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(function(res) {
|
||||
if (res.code == 0) {
|
||||
if (res.browseRecordsId) {
|
||||
$http.request({
|
||||
url: "book/bookbrowserecords/update",
|
||||
method: "POST", // POST、GET、PUT、DELETE，具体说明查看官方文档
|
||||
data: {
|
||||
'id': res.browseRecordsId
|
||||
},
|
||||
header: { //默认 无 说明：请求头
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
}).then(function(res) {
|
||||
if (res.code == 0) {
|
||||
// 跳转页面
|
||||
let chaId = 0
|
||||
if (that.bookList[e].chapterNum != null) {
|
||||
chaId = that.bookList[e].chapterNum - 1
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '../yRead/angbook?Id=' + that.bookList[e].bookId +
|
||||
'&cha=' + chaId
|
||||
});
|
||||
}
|
||||
}).catch(function(error) {
|
||||
//这里只会在接口是失败状态返回，不需要去处理错误提示
|
||||
console.log(error);
|
||||
});
|
||||
} else {
|
||||
// 跳转页面
|
||||
let chaId = 0
|
||||
if (that.bookList[e].chapterNum != null) {
|
||||
chaId = that.bookList[e].chapterNum - 1
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '../yRead/angbook?Id=' + that.bookList[e].bookId + '&cha=' + chaId
|
||||
});
|
||||
}
|
||||
}
|
||||
}).catch(function(error) {
|
||||
//这里只会在接口是失败状态返回，不需要去处理错误提示
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
|
||||
.book_list {
|
||||
margin: 50rpx 30rpx 0 30rpx;
|
||||
|
||||
.bl_tioa {
|
||||
padding: 0 25upx;
|
||||
margin: 0 0 60rpx 0;
|
||||
border-radius: 15rpx;
|
||||
min-height: 250rpx;
|
||||
width: 33%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
height: 400rpx;
|
||||
vertical-align: bottom;
|
||||
|
||||
view {
|
||||
// margin: 0 0 10rpx 0;
|
||||
|
||||
text {
|
||||
color: #9b9b9b;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.bok_name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
width: 98%;
|
||||
height: 260upx;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
229
pages/eBook/bookType.vue
Normal file
229
pages/eBook/bookType.vue
Normal file
@@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view>
|
||||
<z-nav-bar :title="title"></z-nav-bar>
|
||||
|
||||
|
||||
<view class="book_list">
|
||||
<view class="bl_tioa" v-for="(item,index) in bookList" @click="onBookJump(item)">
|
||||
<image :src="item.images"></image>
|
||||
<b v-if="item.isVip==1" style="background: #c79119;">VIP</b>
|
||||
<b v-if="item.isVip==2" style="background: #c74119;">付费</b>
|
||||
<view>
|
||||
<text class="bok_name">{{item.name}}</text>
|
||||
</view>
|
||||
<view>
|
||||
<text>作者：<text style="color: #333;">{{item.authorName}}</text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text>出版商：<text style="color: #333;">{{item.publisherName}}</text></text>
|
||||
</view>
|
||||
<view>
|
||||
<text style="line-height: 20rpx;">{{item.title}}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view style="height: 1px;"></view>
|
||||
</view>
|
||||
|
||||
|
||||
<view>
|
||||
<view v-if="status==0" style="text-align: center;">
|
||||
<u-loading-icon style="display: inline-block;"></u-loading-icon>
|
||||
<font style='vertical-align: super;margin-left: 10px;font-size: 26rpx;color: #909399;'>努力加载中</font>
|
||||
</view>
|
||||
<view v-if="status==1">
|
||||
<u-divider text="全部加载完成"></u-divider>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view style="padding-bottom: 20rpx;">
|
||||
<u-back-top :scroll-top="scrollTop" bottom="60" :customStyle='bgiStyle' :iconStyle="iconStyle"></u-back-top>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
status: 3,
|
||||
bookScreen: {
|
||||
type: '',
|
||||
page: 1, //当前页码数
|
||||
limit: 5, //单页数据数量
|
||||
},
|
||||
totalPage: 0,
|
||||
totalCount: 0,
|
||||
bookList: [],
|
||||
bgiStyle: {
|
||||
background: '#2ab58833'
|
||||
},
|
||||
iconStyle: {
|
||||
fontSize: '40rpx',
|
||||
fontWeight: 'bold',
|
||||
color: '#54a966',
|
||||
},
|
||||
urList: '',
|
||||
title: '',
|
||||
}
|
||||
},
|
||||
|
||||
// 返回顶部
|
||||
onPageScroll(e) {
|
||||
this.scrollTop = e.scrollTop;
|
||||
},
|
||||
|
||||
// 下拉刷新
|
||||
onReachBottom() {
|
||||
this.status = 0
|
||||
if (this.bookScreen.page < this.totalPage) {
|
||||
this.bookScreen.page = this.bookScreen.page + 1
|
||||
setTimeout(() => {
|
||||
if (this.bookScreen.type == 'Sale') {
|
||||
this.$http
|
||||
.post(this.urList + '?page=' + this.bookScreen.page + '&limit=' + this.bookScreen
|
||||
.limit)
|
||||
.then(res => {
|
||||
this.totalPage = res.page.totalPage
|
||||
this.totalCount = res.page.totalCount
|
||||
for (let i in res.page.list) {
|
||||
this.bookList.push(res.page.list[i])
|
||||
}
|
||||
});
|
||||
} else {
|
||||
this.$http
|
||||
.post(this.urList, this.bookScreen)
|
||||
.then(res => {
|
||||
this.totalPage = res.page.totalPage
|
||||
this.totalCount = res.page.totalCount
|
||||
for (let i in res.page.list) {
|
||||
this.bookList.push(res.page.list[i])
|
||||
}
|
||||
});
|
||||
}
|
||||
}, 1000)
|
||||
} else {
|
||||
this.status = 1
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
//第一次加载
|
||||
onLoad(e) {
|
||||
this.bookScreen.type = e.Type
|
||||
if (this.bookScreen.type == 'New') {
|
||||
this.urList = 'book/book/getSaleBook'
|
||||
this.title = '新书上架'
|
||||
} else if (this.bookScreen.type == 'Sale') {
|
||||
this.urList = 'book/book/getNewBook'
|
||||
this.title = '限时特价'
|
||||
} else if (this.bookScreen.type == 'Best') {
|
||||
this.urList = 'book/book/getBestBook'
|
||||
this.title = '精选书单'
|
||||
}
|
||||
|
||||
this.getData();
|
||||
},
|
||||
//页面显示
|
||||
onShow() {
|
||||
// this.getData();
|
||||
},
|
||||
// 下拉刷新
|
||||
onPullDownRefresh() {
|
||||
this.getData()
|
||||
uni.stopPullDownRefresh()
|
||||
},
|
||||
//方法
|
||||
methods: {
|
||||
// 获取列表数据
|
||||
getData() {
|
||||
console.log(this.urList)
|
||||
this.bookList = []
|
||||
if (this.bookScreen.type == 'Sale') {
|
||||
this.$http
|
||||
.post(this.urList + '?page=' + this.bookScreen.page + '&limit=' + this.bookScreen.limit)
|
||||
.then(res => {
|
||||
this.bookList = res.page.list
|
||||
this.totalPage = res.page.totalPage
|
||||
this.status = 3
|
||||
});
|
||||
} else {
|
||||
this.$http
|
||||
.post(this.urList, this.bookScreen)
|
||||
.then(res => {
|
||||
this.bookList = res.page.list
|
||||
this.totalPage = res.page.totalPage
|
||||
this.status = 3
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// 电子书内容跳转
|
||||
onBookJump(e) {
|
||||
uni.navigateTo({
|
||||
url: './bookContent?Id=' + e.id
|
||||
});
|
||||
},
|
||||
},
|
||||
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import '@/style/mixin.scss';
|
||||
|
||||
|
||||
|
||||
|
||||
.book_list {
|
||||
margin: 50rpx 30rpx 0 30rpx;
|
||||
|
||||
.bl_tioa {
|
||||
box-shadow: 0 0px 10px 1px #d3d1d133;
|
||||
background-color: #fff;
|
||||
position: relative;
|
||||
padding: 0 25upx 10upx 220upx;
|
||||
margin: 0 0 60rpx 0;
|
||||
border-radius: 15rpx;
|
||||
min-height: 250rpx;
|
||||
|
||||
view {
|
||||
// margin: 0 0 10rpx 0;
|
||||
|
||||
text {
|
||||
color: #9b9b9b;
|
||||
font-size: 24rpx;
|
||||
line-height: 36rpx;
|
||||
}
|
||||
|
||||
.bok_name {
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
}
|
||||
|
||||
image {
|
||||
position: absolute;
|
||||
left: 30upx;
|
||||
top: -20upx;
|
||||
width: 160upx;
|
||||
height: 240upx;
|
||||
}
|
||||
|
||||
b {
|
||||
display: block;
|
||||
padding: 5rpx 10rpx;
|
||||
border-radius: 10rpx;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
font-weight: normal;
|
||||
background: #27b386;
|
||||
position: absolute;
|
||||
left: -1upx;
|
||||
top: -10upx;
|
||||
font-size: 16rpx;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user