Commit 6401c10b authored by jyx's avatar jyx

代码优化

parent b033da5a
<template> <template>
<view class="detail-bottom" :style="[bottomStyle]"> <view class="detail-bottom" :style="[bottomStyle]">
<view class="fixed-bottom" :style="[fixedBottomStyle]"> <view class="fixed-bottom" :style="[fixedBottomStyle,{backgroundColor:backgroundColor}]">
<!-- <view class="bottom-item" @click="tapItem('like')"> <!-- <view class="bottom-item" @click="tapItem('like')">
<uni-icons :type='likeIcon.type' customPrefix="readiconfont" :color='likeIcon.color' <uni-icons :type='likeIcon.type' customPrefix="readiconfont" :color='likeIcon.color'
size='20'></uni-icons> size='20'></uni-icons>
<view class="title" :style="{color: likeIcon.color}"> <view class="title" :style="{color: likeIcon.color}">
</view> </view>
</view> --> </view> -->
<!-- <view class="bottom-item" @click="tapItem('diss')"> <!-- <view class="bottom-item" @click="tapItem('diss')">
<uni-icons :type='dissIcon.type' customPrefix="readiconfont" :color='dissIcon.color' <uni-icons :type='dissIcon.type' customPrefix="readiconfont" :color='dissIcon.color'
size='20'></uni-icons> size='20'></uni-icons>
<view class="title" :style="{color: dissIcon.color}"> <view class="title" :style="{color: dissIcon.color}">
</view> </view>
</view> --> </view> -->
<view class="bottom-item" @click="tapItem('collection')"> <view class="bottom-item" @click="tapItem('collection')">
<uni-icons :type='collectionIcon.type' customPrefix="readiconfont" :color='collectionIcon.color' <uni-icons :type='collectionIcon.type' customPrefix="readiconfont" :color='collectionIcon.color'
size='20'></uni-icons> size='20'></uni-icons>
<view class="title" :style="{color: collectionIcon.color}"> <view class="title" :style="{color: collectionIcon.color}">
{{collectionIcon.title}} {{collectionIcon.title}}
</view> </view>
</view> </view>
<view class="bottom-item" @click="tapItem('setting')"> <view class="bottom-item" @click="tapItem('setting')">
<uni-icons type='icon-setting' customPrefix="readiconfont" color='#333' size='20'></uni-icons> <uni-icons type='icon-setting' customPrefix="readiconfont" color='#333' size='20'></uni-icons>
<view class="title" :style="{color: '#333'}"> <view class="title" :style="{color: '#333'}">
设置 设置
</view> </view>
</view> </view>
<view class="bottom-item"> <view class="bottom-item">
<uni-icons type='icon-share' customPrefix="readiconfont" color='#333' size='20'></uni-icons> <uni-icons type='icon-share' customPrefix="readiconfont" color='#333' size='20'></uni-icons>
<view class="title" :style="{color: '#333'}"> <view class="title" :style="{color: '#333'}">
分享 分享
</view> </view>
<button class="c-button_clear cover-button" open-type="share"></button> <button class="c-button_clear cover-button" open-type="share"></button>
</view> </view>
</view> </view>
<view class="safe-placeholder" :style="[safePlaceholderStyle]"></view> <view class="safe-placeholder" :style="[safePlaceholderStyle]"></view>
</view> </view>
</template> </template>
<script> <script>
import SystemInfoMixin from "../../../../common/mixins/system-info-mixin.js" import {
import { watchContentFormatChange,
px2rpx removeContentFormatChangeWatch
} from "../../../../common/utils/util.js"; } from "../services/index.js"
import { import SystemInfoMixin from "../../../../common/mixins/system-info-mixin.js"
showLoginView import {
} from "../../../../common/services/userServices.js" px2rpx
export default { } from "../../../../common/utils/util.js";
mixins: [SystemInfoMixin], import {
props: { showLoginView
detail: { } from "../../../../common/services/userServices.js"
type: Object, export default {
default: function() { mixins: [SystemInfoMixin],
return {} props: {
} detail: {
}, type: Object,
userInfo: { default: function() {
type: Object, return {}
default: function() { }
return null },
} userInfo: {
} type: Object,
}, default: function() {
data: function() { return null
return { }
height: `100` }
} },
}, data: function() {
computed: { return {
fixedBottomStyle: function() { height: `100`,
let height = 0; backgroundColor: `#fff`
if (this.bottomSafeHeight) { }
height = height + px2rpx(this.bottomSafeHeight) },
} mounted() {
return { // 监听样式变动
bottom: `${height}rpx` watchContentFormatChange((data) => {
} let result = data.getFormatValue();
}, if (this.backgroundColor != result.backgroundColor) {
safePlaceholderStyle: function() { this.backgroundColor = result.backgroundColor
let height = 0; }
if (this.bottomSafeHeight) { }, this)
height = height + px2rpx(this.bottomSafeHeight) },
} destroyed() {
return { removeContentFormatChangeWatch(this);
height: `${height}rpx` },
} computed: {
}, fixedBottomStyle: function() {
bottomStyle: function() { let height = 0;
let height = 100; if (this.bottomSafeHeight) {
if (this.bottomSafeHeight) { height = height + px2rpx(this.bottomSafeHeight)
height = height + px2rpx(this.bottomSafeHeight) }
} return {
return { bottom: `${height}rpx`
height: `${height}rpx` }
} },
}, safePlaceholderStyle: function() {
likeIcon: function() { let height = 0;
return { if (this.bottomSafeHeight) {
type: this.detail.isLike ? 'icon-like' : 'icon-unlike', height = height + px2rpx(this.bottomSafeHeight)
color: this.detail.isLike ? '#FECF02' : "#333" }
} return {
}, height: `${height}rpx`
dissIcon: function() { }
return { },
type: this.detail.isDiss ? 'icon-diss' : 'icon-undiss', bottomStyle: function() {
color: this.detail.isDiss ? '#FECF02' : "#333" let height = 100;
} if (this.bottomSafeHeight) {
}, height = height + px2rpx(this.bottomSafeHeight)
collectionIcon: function() { }
return { return {
type: this.detail.isCollect ? 'icon-collection' : 'icon-uncollection', height: `${height}rpx`
color: this.detail.isCollect ? '#FECF02' : "#333", }
title: this.detail.isCollect ? "已收藏": "收藏" },
} likeIcon: function() {
} return {
}, type: this.detail.isLike ? 'icon-like' : 'icon-unlike',
methods: { color: this.detail.isLike ? '#FECF02' : "#333"
tapItem(flag) { }
if (flag == 'collection' && !this.userInfo) { },
showLoginView(); dissIcon: function() {
return; return {
} type: this.detail.isDiss ? 'icon-diss' : 'icon-undiss',
this.$emit("tapBottomItem", { color: this.detail.isDiss ? '#FECF02' : "#333"
detail: { }
flag, },
item: this.detail collectionIcon: function() {
} return {
}) type: this.detail.isCollect ? 'icon-collection' : 'icon-uncollection',
} color: this.detail.isCollect ? '#FECF02' : "#333",
} title: this.detail.isCollect ? "已收藏" : "收藏"
} }
</script> }
},
<style lang="scss" scoped> methods: {
.detail-bottom { tapItem(flag) {
position: relative; if (flag == 'collection' && !this.userInfo) {
height: 100rpx; showLoginView();
return;
.fixed-bottom { }
position: fixed; this.$emit("tapBottomItem", {
background: #fff; detail: {
bottom: 0; flag,
left: 0; item: this.detail
right: 0; }
height: 100rpx; })
display: flex; }
flex-direction: row; }
align-items: center; }
</script>
.bottom-item {
position: relative; <style lang="scss" scoped>
display: flex; .detail-bottom {
flex-direction: column; position: relative;
align-items: center; height: 100rpx;
justify-content: center;
height: 100%; .fixed-bottom {
// width: 33.3333333333%; position: fixed;
flex: 1; background: #fff;
bottom: 0;
.title { left: 0;
font-size: 24rpx; right: 0;
margin-top: 10rpx; height: 100rpx;
} display: flex;
flex-direction: row;
.cover-button { align-items: center;
position: absolute;
top: 0; .bottom-item {
left: 0; position: relative;
right: 0; display: flex;
bottom: 0; flex-direction: column;
background: transparent; align-items: center;
z-index: 2; justify-content: center;
} height: 100%;
} // width: 33.3333333333%;
} flex: 1;
.safe-placeholder { .title {
position: fixed; font-size: 24rpx;
left: 0; margin-top: 10rpx;
right: 0; }
bottom: 0;
background: #fff; .cover-button {
} position: absolute;
} top: 0;
left: 0;
right: 0;
bottom: 0;
background: transparent;
z-index: 2;
}
}
}
.safe-placeholder {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: #fff;
}
}
</style> </style>
\ No newline at end of file
<template>
<view class="detail-content">
<template v-if='showVIPContent'>
<!-- <view class="content-paragraph" :style="[contentStyle]" v-for='(item, index) in contentSources'
:key='index'>
{{item}}
</view> -->
<yingbing-flip type="cover" :data="contentSources" style="height: 100vh;">
<!-- #ifndef MP -->
<template v-slot="{item, index}">
<!-- #endif -->
<!-- #ifdef MP -->
<template v-for="(item, index) in contentSources" :slot="index">
<!-- #endif -->
<view style="height: 100%">
<text style="font-size: 28rpx;color: #fff;">{{item}}</text>
</view>
</template>
</yingbing-flip>
</template>
<template v-else>
<yingbing-flip :data="preContentSources" style="height: 100vh;">
<!-- #ifndef MP -->
<template v-slot="{item, index}">
<!-- #endif -->
<!-- #ifdef MP -->
<template v-for="(item, index) in list" :slot="index">
<!-- #endif -->
<view style="height: 100%">
<text style="font-size: 50px;font-weight: bold;color: #fff;">{{item}}</text>
</view>
</template>
</yingbing-flip>
<!-- <view class="content-paragraph" :style="[contentStyle]" v-for='(item, index) in preContentSources'
:key="index">
{{item}}
</view> -->
<view class="limit-button-box" @click="tapLimitButton">
{{limitButtonTitle}}
</view>
</template>
</view>
</template>
<script>
import {
watchContentFormatChange,
removeContentFormatChangeWatch
} from "../services/index.js"
import {
showLoginView
} from "../../../../common/services/userServices.js"
import {
gotoVIPApplyPage
} from "../../../../common/services/page-route.js"
import User from "../../../../common/models/User.js";
const PRECENT_VALUE = 40;
export default {
props: {
userInfo: {
type: Object,
default: function() {
return null
}
},
detail: {
type: Object,
default: function() {
return {}
}
}
},
data: function() {
return {
user: null,
fontSize: `18px`,
}
},
mounted() {
watchContentFormatChange((data) => {
let result = data.getFormatValue();
if (this.fontSize != result.fontSize) {
this.fontSize = result.fontSize
}
}, this)
},
destroyed() {
removeContentFormatChangeWatch(this);
},
watch: {
userInfo: {
handler: function(n) {
if (n) {
this.user = new User(n)
} else {
this.user = null
}
},
deep: true,
immediate: true
}
},
computed: {
contentSources: function() {
return this.detail && this.detail.content ? this.detail.content : [];
},
preContentSources: function() {
let result = this.detail && this.detail.content ? [...this.detail.content] : [];
let length = result.length;
if (length >= 2) {
let precent = PRECENT_VALUE / 100;
let preLength = Math.floor(length * precent);
return result.splice(0, preLength);
} else {
return result;
}
},
limitButtonTitle: function() {
let result = `~剩余${100-PRECENT_VALUE}%内容`;
if (!this.user) {
result = `${result},点击登录后继续阅读`;
} else if (!this.user.isVip()) {
result = `${result}为会员章节内容,请前往购买会员`
}
result = `${result}~`;
return result;
},
contentStyle: function() {
return {
fontSize: this.fontSize
}
},
showVIPContent: function() {
return (this.user && this.user.isVip()) || this.detail.isUnlock
}
},
methods: {
tapLimitButton() {
if (!this.user) {
showLoginView()
} else if (!this.user.isVip()) {
let isIOS = wx.getSystemInfoSync().platform;
if (isIOS === 'ios') {
uni.showToast({
title: '暂不支持IOS系统',
icon: 'none'
})
return
}
gotoVIPApplyPage()
}
}
}
}
</script>
<style lang="scss" scoped>
.detail-content {
paading: 20rpx 30rpx;
margin: 20rpx 30rpx;
display: flex;
flex-direction: column;
.content-paragraph {
text-indent: 1em;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
line-height: 1.5em;
margin-bottom: 1em;
color: #333;
}
.content-paragraph:last-child {
margin-bottom: 0;
}
.limit-button-box {
text-indent: 0;
height: 120rpx;
line-height: 120rpx;
text-align: center;
color: goldenrod;
font-size: 28rpx;
}
}
</style>
\ No newline at end of file
...@@ -30,8 +30,8 @@ ...@@ -30,8 +30,8 @@
} from "../../../../common/utils/util.js"; } from "../../../../common/utils/util.js";
import CatalogueList from "../models/CatalogueList.js"; import CatalogueList from "../models/CatalogueList.js";
import { import {
saveContentFormat, saveCatalogueFormat,
readContentFormat readCatalogueFormat
} from "../services/index.js" } from "../services/index.js"
export default { export default {
mixins: [SystemInfoMixin], mixins: [SystemInfoMixin],
...@@ -78,13 +78,13 @@ ...@@ -78,13 +78,13 @@
}, },
mounted() { mounted() {
this.initColorList(); this.initColorList();
this.currentContentFormat = readContentFormat() this.currentContentFormat = readCatalogueFormat()
for (let i in this.currentContentFormat.catalogueList) { for (let i in this.currentContentFormat.catalogueList) {
if (this.currentContentFormat.catalogueList[i].id == this.detail.id) { if (this.currentContentFormat.catalogueList[i].id == this.detail.id) {
// 处理特殊情况,下标错误 // 处理特殊情况,下标错误
let current_e = this.currentContentFormat.catalogueList[i].catalogue let current_e = this.currentContentFormat.catalogueList[i].catalogue
if (!this.detail.isUnlock && current_e > this.detail.freeNum) { if (!this.detail.isUnlock && current_e > this.detail.freeNum) {
this.currentCatalogue = this.detail.freeNum this.currentCatalogue = this.detail.freeNum
return return
} }
this.currentCatalogue = current_e this.currentCatalogue = current_e
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
this.currentCatalogue = e this.currentCatalogue = e
saveContentFormat(this.currentContentFormat); saveCatalogueFormat(this.currentContentFormat);
this.close() this.close()
}, },
tabVip() { tabVip() {
......
...@@ -72,6 +72,8 @@ ...@@ -72,6 +72,8 @@
import { import {
watchContentFormatChange, watchContentFormatChange,
removeContentFormatChangeWatch, removeContentFormatChangeWatch,
watchCatalogueFormatChange,
removeCatalogueFormatChangeWatch,
getChapterinfoData getChapterinfoData
} from "../services/index.js" } from "../services/index.js"
...@@ -126,6 +128,7 @@ ...@@ -126,6 +128,7 @@
}, },
destroyed() { destroyed() {
removeContentFormatChangeWatch(this); removeContentFormatChangeWatch(this);
removeCatalogueFormatChangeWatch(this);
}, },
mounted() { mounted() {
let _this = this let _this = this
...@@ -138,14 +141,8 @@ ...@@ -138,14 +141,8 @@
}) })
// 监听样式变动 // 监听样式变动
watchContentFormatChange((data) => { watchCatalogueFormatChange((data) => {
let result = data.getFormatValue(); let result = data.getFormatValue();
if (this.fontSize != result.fontSize) {
this.fontSize = parseInt(result.fontSize.substring(0, 2))
}
if (this.background != result.backgroundColor) {
this.background = result.backgroundColor
}
let resultCatalogue = this.catalogue let resultCatalogue = this.catalogue
for (let i in result.catalogueList) { for (let i in result.catalogueList) {
...@@ -167,8 +164,19 @@ ...@@ -167,8 +164,19 @@
this.isFisrt = false this.isFisrt = false
this.refreshChapterinfoData() this.refreshChapterinfoData()
} }
}, this)
// 监听样式变动
watchContentFormatChange((data) => {
let result = data.getFormatValue();
if (this.fontSize != result.fontSize) {
this.fontSize = parseInt(result.fontSize.substring(0, 2))
}
if (this.background != result.backgroundColor) {
this.background = result.backgroundColor
}
}, this) }, this)
}, },
methods: { methods: {
reloadChapterinfoData() { reloadChapterinfoData() {
...@@ -263,7 +271,7 @@ ...@@ -263,7 +271,7 @@
_this.isClick = true _this.isClick = true
}, 300) }, 300)
} else { } else {
let max = this.detail.isUnlock ? (this.detail.articleChapterList.length - 1) : let max = this.detail.isUnlock ? (this.detail.articleChapterList.length) :
(this.detail.freeNum + 1) (this.detail.freeNum + 1)
if (this.catalogue < max) { if (this.catalogue < max) {
...@@ -391,7 +399,6 @@ ...@@ -391,7 +399,6 @@
.content { .content {
padding: 0; padding: 0;
background-color: #DCBD3B;
box-sizing: border-box; box-sizing: border-box;
font-weight: 400; font-weight: 400;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif; font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
......
export default class CatalogueFormat {
constructor(param) {
const {
catalogueList,
} = param || {}
this.catalogueList = catalogueList;
}
getFormatValue() {
return {
catalogueList: this.catalogueList
}
}
}
\ No newline at end of file
...@@ -8,8 +8,9 @@ import { ...@@ -8,8 +8,9 @@ import {
saveStorage saveStorage
} from "../../../../common/utils/storageUtil"; } from "../../../../common/utils/storageUtil";
import ContentFormat from "../models/ContentFormat"; import ContentFormat from "../models/ContentFormat";
import CatalogueFormat from "../models/CatalogueFormat";
import { import {
apiGET, apiGET,
apiPOST apiPOST
} from "../../../../common/utils/apiRequest.js" } from "../../../../common/utils/apiRequest.js"
import CatalogueList from "../models/CatalogueList"; import CatalogueList from "../models/CatalogueList";
...@@ -20,9 +21,9 @@ import CatalogueList from "../models/CatalogueList"; ...@@ -20,9 +21,9 @@ import CatalogueList from "../models/CatalogueList";
*/ */
function getBookDetailData(bookId, callback) { function getBookDetailData(bookId, callback) {
apiPOST({ apiPOST({
url: `/book/info`, url: `/book/info`,
data: { data: {
id: bookId id: bookId
}, },
callback callback
}) })
...@@ -35,10 +36,10 @@ function getBookDetailData(bookId, callback) { ...@@ -35,10 +36,10 @@ function getBookDetailData(bookId, callback) {
*/ */
function getChapterinfoData(bookId, chapterId, callback) { function getChapterinfoData(bookId, chapterId, callback) {
apiPOST({ apiPOST({
url: `/book/chapterinfo`, url: `/book/chapterinfo`,
data: { data: {
articleId: bookId, articleId: bookId,
chapterId: chapterId, chapterId: chapterId,
}, },
callback callback
}) })
...@@ -50,9 +51,9 @@ function getChapterinfoData(bookId, chapterId, callback) { ...@@ -50,9 +51,9 @@ function getChapterinfoData(bookId, chapterId, callback) {
*/ */
function getBookRecommendData(bookId, callback) { function getBookRecommendData(bookId, callback) {
apiPOST({ apiPOST({
url: `/book/recommend`, url: `/book/recommend`,
data: { data: {
id: bookId id: bookId
}, },
callback callback
}) })
...@@ -63,9 +64,9 @@ function getBookRecommendData(bookId, callback) { ...@@ -63,9 +64,9 @@ function getBookRecommendData(bookId, callback) {
*/ */
function addReadRecord(bookId, callback) { function addReadRecord(bookId, callback) {
apiPOST({ apiPOST({
url: `/book/addReadRecord`, url: `/book/addReadRecord`,
data: { data: {
articleId: bookId articleId: bookId
}, },
callback callback
}) })
...@@ -114,6 +115,48 @@ function removeContentFormatChangeWatch(observer) { ...@@ -114,6 +115,48 @@ function removeContentFormatChangeWatch(observer) {
removeNotificationObserver(KEY_NOTIFICATION_LONG_CONTENT_FORMAT_CHANGE, observer); removeNotificationObserver(KEY_NOTIFICATION_LONG_CONTENT_FORMAT_CHANGE, observer);
} }
function saveCatalogueFormat(format) {
let result = readCatalogueFormat();
Object.keys(format).forEach(key => {
let value = format[key];
result[key] = value || result[key];
})
saveStorage(KEY_STORAGE_CATALOGUE_FORMAT, result);
notifyCatalogueFormatChange(new CatalogueFormat(result));
}
function readCatalogueFormat(id) {
let result = readStorage(KEY_STORAGE_CATALOGUE_FORMAT);
if (result) {
result = new CatalogueFormat(result);
} else {
result = new CatalogueFormat({
catalogueList: [] // 章节列表
})
}
return result;
}
function notifyCatalogueFormatChange(format) {
postNotification(KEY_NOTIFICATION_CATALOGUE_FORMAT_CHANGE, format);
}
function watchCatalogueFormatChange(fn, observer) {
if (typeof fn == 'function') fn.call(observer, readCatalogueFormat());
addNormalNotificationObserver(KEY_NOTIFICATION_CATALOGUE_FORMAT_CHANGE, (data) => {
if (typeof fn == 'function') fn.call(observer, data);
}, observer)
}
function removeCatalogueFormatChangeWatch(observer) {
removeNotificationObserver(KEY_NOTIFICATION_CATALOGUE_FORMAT_CHANGE, observer);
}
// 样式设置
const KEY_STORAGE_CATALOGUE_FORMAT = "KEY_STORAGE_CATALOGUE_FORMAT";
const KEY_NOTIFICATION_CATALOGUE_FORMAT_CHANGE = "KEY_NOTIFICATION_CATALOGUE_FORMAT_CHANGE";
module.exports = { module.exports = {
getBookDetailData, getBookDetailData,
getBookRecommendData, getBookRecommendData,
...@@ -126,5 +169,12 @@ module.exports = { ...@@ -126,5 +169,12 @@ module.exports = {
readContentFormat, readContentFormat,
notifyContentFormatChange, notifyContentFormatChange,
watchContentFormatChange, watchContentFormatChange,
removeContentFormatChangeWatch removeContentFormatChangeWatch,
saveCatalogueFormat,
readCatalogueFormat,
notifyCatalogueFormatChange,
watchCatalogueFormatChange,
removeCatalogueFormatChangeWatch,
} }
\ No newline at end of file
...@@ -44,6 +44,10 @@ ...@@ -44,6 +44,10 @@
openUrl openUrl
} from '@/utils/app+.js'; } from '@/utils/app+.js';
import {
gotoBookContentPage
} from '../../common/services/page-route';
const app = getApp(); const app = getApp();
export default { export default {
...@@ -77,14 +81,7 @@ ...@@ -77,14 +81,7 @@
}, },
handleInfo(item) { handleInfo(item) {
var bookId = item.id; var bookId = item.id;
uni.navigateTo({ gotoBookContentPage(item.id, item.shortis)
url: `/page-subs/sub_A/book-content/book-content`,
success: (res) => {
res.eventChannel.emit("openBookContentPage", {
bookId
})
}
})
}, },
handleXing(item) { handleXing(item) {
var that = this; var that = this;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment