Skip to content

U
uniapp_vedio
Commit 6401c10b authored by jyx's avatar jyx
Browse files
Options

代码优化

parent b033da5a
Hide whitespace changes
Inline Side-by-side
Showing with 309 additions and 415 deletions
vedio/page-subs/sub_A/book-content/components/detail-bottom.vue
View file @ 6401c10b
<template>
<view class="detail-bottom" :style="[bottomStyle]">
<view class="fixed-bottom" :style="[fixedBottomStyle]">
<!-- <view class="bottom-item" @click="tapItem('like')">
<uni-icons :type='likeIcon.type' customPrefix="readiconfont" :color='likeIcon.color'
size='20'></uni-icons>
<view class="title" :style="{color: likeIcon.color}">
赞
</view>
</view> -->
<!-- <view class="bottom-item" @click="tapItem('diss')">
<uni-icons :type='dissIcon.type' customPrefix="readiconfont" :color='dissIcon.color'
size='20'></uni-icons>
<view class="title" :style="{color: dissIcon.color}">
踩
</view>
</view> -->
<view class="bottom-item" @click="tapItem('collection')">
<uni-icons :type='collectionIcon.type' customPrefix="readiconfont" :color='collectionIcon.color'
size='20'></uni-icons>
<view class="title" :style="{color: collectionIcon.color}">
{{collectionIcon.title}}
</view>
</view>
<view class="bottom-item" @click="tapItem('setting')">
<uni-icons type='icon-setting' customPrefix="readiconfont" color='#333' size='20'></uni-icons>
<view class="title" :style="{color: '#333'}">
设置
</view>
</view>
<view class="bottom-item">
<uni-icons type='icon-share' customPrefix="readiconfont" color='#333' size='20'></uni-icons>
<view class="title" :style="{color: '#333'}">
分享
</view>
<button class="c-button_clear cover-button" open-type="share"></button>
</view>
</view>
<view class="safe-placeholder" :style="[safePlaceholderStyle]"></view>
</view>
</template>
<script>
import SystemInfoMixin from "../../../../common/mixins/system-info-mixin.js"
import {
px2rpx
} from "../../../../common/utils/util.js";
import {
showLoginView
} from "../../../../common/services/userServices.js"
export default {
mixins: [SystemInfoMixin],
props: {
detail: {
type: Object,
default: function() {
return {}
}
},
userInfo: {
type: Object,
default: function() {
return null
}
}
},
data: function() {
return {
height: `100`
}
},
computed: {
fixedBottomStyle: function() {
let height = 0;
if (this.bottomSafeHeight) {
height = height + px2rpx(this.bottomSafeHeight)
}
return {
bottom: `${height}rpx`
}
},
safePlaceholderStyle: function() {
let height = 0;
if (this.bottomSafeHeight) {
height = height + px2rpx(this.bottomSafeHeight)
}
return {
height: `${height}rpx`
}
},
bottomStyle: function() {
let height = 100;
if (this.bottomSafeHeight) {
height = height + px2rpx(this.bottomSafeHeight)
}
return {
height: `${height}rpx`
}
},
likeIcon: function() {
return {
type: this.detail.isLike ? 'icon-like' : 'icon-unlike',
color: this.detail.isLike ? '#FECF02' : "#333"
}
},
dissIcon: function() {
return {
type: this.detail.isDiss ? 'icon-diss' : 'icon-undiss',
color: this.detail.isDiss ? '#FECF02' : "#333"
}
},
collectionIcon: function() {
return {
type: this.detail.isCollect ? 'icon-collection' : 'icon-uncollection',
color: this.detail.isCollect ? '#FECF02' : "#333",
title: this.detail.isCollect ? "已收藏": "收藏"
}
}
},
methods: {
tapItem(flag) {
if (flag == 'collection' && !this.userInfo) {
showLoginView();
return;
}
this.$emit("tapBottomItem", {
detail: {
flag,
item: this.detail
}
})
}
}
}
</script>
<style lang="scss" scoped>
.detail-bottom {
position: relative;
height: 100rpx;
.fixed-bottom {
position: fixed;
background: #fff;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
display: flex;
flex-direction: row;
align-items: center;
.bottom-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
// width: 33.3333333333%;
flex: 1;
.title {
font-size: 24rpx;
margin-top: 10rpx;
}
.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;
}
}
<template>
<view class="detail-bottom" :style="[bottomStyle]">
<view class="fixed-bottom" :style="[fixedBottomStyle,{backgroundColor:backgroundColor}]">
<!-- <view class="bottom-item" @click="tapItem('like')">
<uni-icons :type='likeIcon.type' customPrefix="readiconfont" :color='likeIcon.color'
size='20'></uni-icons>
<view class="title" :style="{color: likeIcon.color}">
赞
</view>
</view> -->
<!-- <view class="bottom-item" @click="tapItem('diss')">
<uni-icons :type='dissIcon.type' customPrefix="readiconfont" :color='dissIcon.color'
size='20'></uni-icons>
<view class="title" :style="{color: dissIcon.color}">
踩
</view>
</view> -->
<view class="bottom-item" @click="tapItem('collection')">
<uni-icons :type='collectionIcon.type' customPrefix="readiconfont" :color='collectionIcon.color'
size='20'></uni-icons>
<view class="title" :style="{color: collectionIcon.color}">
{{collectionIcon.title}}
</view>
</view>
<view class="bottom-item" @click="tapItem('setting')">
<uni-icons type='icon-setting' customPrefix="readiconfont" color='#333' size='20'></uni-icons>
<view class="title" :style="{color: '#333'}">
设置
</view>
</view>
<view class="bottom-item">
<uni-icons type='icon-share' customPrefix="readiconfont" color='#333' size='20'></uni-icons>
<view class="title" :style="{color: '#333'}">
分享
</view>
<button class="c-button_clear cover-button" open-type="share"></button>
</view>
</view>
<view class="safe-placeholder" :style="[safePlaceholderStyle]"></view>
</view>
</template>
<script>
import {
watchContentFormatChange,
removeContentFormatChangeWatch
} from "../services/index.js"
import SystemInfoMixin from "../../../../common/mixins/system-info-mixin.js"
import {
px2rpx
} from "../../../../common/utils/util.js";
import {
showLoginView
} from "../../../../common/services/userServices.js"
export default {
mixins: [SystemInfoMixin],
props: {
detail: {
type: Object,
default: function() {
return {}
}
},
userInfo: {
type: Object,
default: function() {
return null
}
}
},
data: function() {
return {
height: `100`,
backgroundColor: `#fff`
}
},
mounted() {
// 监听样式变动
watchContentFormatChange((data) => {
let result = data.getFormatValue();
if (this.backgroundColor != result.backgroundColor) {
this.backgroundColor = result.backgroundColor
}
}, this)
},
destroyed() {
removeContentFormatChangeWatch(this);
},
computed: {
fixedBottomStyle: function() {
let height = 0;
if (this.bottomSafeHeight) {
height = height + px2rpx(this.bottomSafeHeight)
}
return {
bottom: `${height}rpx`
}
},
safePlaceholderStyle: function() {
let height = 0;
if (this.bottomSafeHeight) {
height = height + px2rpx(this.bottomSafeHeight)
}
return {
height: `${height}rpx`
}
},
bottomStyle: function() {
let height = 100;
if (this.bottomSafeHeight) {
height = height + px2rpx(this.bottomSafeHeight)
}
return {
height: `${height}rpx`
}
},
likeIcon: function() {
return {
type: this.detail.isLike ? 'icon-like' : 'icon-unlike',
color: this.detail.isLike ? '#FECF02' : "#333"
}
},
dissIcon: function() {
return {
type: this.detail.isDiss ? 'icon-diss' : 'icon-undiss',
color: this.detail.isDiss ? '#FECF02' : "#333"
}
},
collectionIcon: function() {
return {
type: this.detail.isCollect ? 'icon-collection' : 'icon-uncollection',
color: this.detail.isCollect ? '#FECF02' : "#333",
title: this.detail.isCollect ? "已收藏" : "收藏"
}
}
},
methods: {
tapItem(flag) {
if (flag == 'collection' && !this.userInfo) {
showLoginView();
return;
}
this.$emit("tapBottomItem", {
detail: {
flag,
item: this.detail
}
})
}
}
}
</script>
<style lang="scss" scoped>
.detail-bottom {
position: relative;
height: 100rpx;
.fixed-bottom {
position: fixed;
background: #fff;
bottom: 0;
left: 0;
right: 0;
height: 100rpx;
display: flex;
flex-direction: row;
align-items: center;
.bottom-item {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
// width: 33.3333333333%;
flex: 1;
.title {
font-size: 24rpx;
margin-top: 10rpx;
}
.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>
\ No newline at end of file
vedio/page-subs/sub_A/book-content/components/detail-content-flip.vue deleted 100644 → 0
View file @ b033da5a
<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
vedio/page-subs/sub_A/book-long-content/components/catalogue-pop.vue
View file @ 6401c10b
......@@ -30,8 +30,8 @@
} from "../../../../common/utils/util.js";
import CatalogueList from "../models/CatalogueList.js";
import {
saveContentFormat,
readContentFormat
saveCatalogueFormat,
readCatalogueFormat
} from "../services/index.js"
export default {
mixins: [SystemInfoMixin],
......@@ -78,13 +78,13 @@
},
mounted() {
this.initColorList();
this.currentContentFormat = readContentFormat()
this.currentContentFormat = readCatalogueFormat()
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
if (!this.detail.isUnlock && current_e > this.detail.freeNum) {
this.currentCatalogue = this.detail.freeNum
this.currentCatalogue = this.detail.freeNum
return
}
this.currentCatalogue = current_e
......@@ -129,7 +129,7 @@
this.currentCatalogue = e
saveContentFormat(this.currentContentFormat);
saveCatalogueFormat(this.currentContentFormat);
this.close()
},
tabVip() {
......
vedio/page-subs/sub_A/book-long-content/components/detail-content.vue
View file @ 6401c10b
......@@ -72,6 +72,8 @@
import {
watchContentFormatChange,
removeContentFormatChangeWatch,
watchCatalogueFormatChange,
removeCatalogueFormatChangeWatch,
getChapterinfoData
} from "../services/index.js"
......@@ -126,6 +128,7 @@
},
destroyed() {
removeContentFormatChangeWatch(this);
removeCatalogueFormatChangeWatch(this);
},
mounted() {
let _this = this
......@@ -138,14 +141,8 @@
})
// 监听样式变动
watchContentFormatChange((data) => {
watchCatalogueFormatChange((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
}
let resultCatalogue = this.catalogue
for (let i in result.catalogueList) {
......@@ -167,8 +164,19 @@
this.isFisrt = false
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)
},
methods: {
reloadChapterinfoData() {
......@@ -263,7 +271,7 @@
_this.isClick = true
}, 300)
} else {
let max = this.detail.isUnlock ? (this.detail.articleChapterList.length - 1) :
let max = this.detail.isUnlock ? (this.detail.articleChapterList.length) :
(this.detail.freeNum + 1)
if (this.catalogue < max) {
......@@ -391,7 +399,6 @@
.content {
padding: 0;
background-color: #DCBD3B;
box-sizing: border-box;
font-weight: 400;
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
......
vedio/page-subs/sub_A/book-long-content/models/CatalogueFormat.js 0 → 100644
View file @ 6401c10b
export default class CatalogueFormat {
constructor(param) {
const {
catalogueList,
} = param || {}
this.catalogueList = catalogueList;
}
getFormatValue() {
return {
catalogueList: this.catalogueList
}
}
}
\ No newline at end of file
vedio/page-subs/sub_A/book-long-content/services/index.js
View file @ 6401c10b
......@@ -8,8 +8,9 @@ import {
saveStorage
} from "../../../../common/utils/storageUtil";
import ContentFormat from "../models/ContentFormat";
import CatalogueFormat from "../models/CatalogueFormat";
import {
apiGET,
apiGET,
apiPOST
} from "../../../../common/utils/apiRequest.js"
import CatalogueList from "../models/CatalogueList";
......@@ -20,9 +21,9 @@ import CatalogueList from "../models/CatalogueList";
*/
function getBookDetailData(bookId, callback) {
apiPOST({
url: `/book/info`,
data: {
id: bookId
url: `/book/info`,
data: {
id: bookId
},
callback
})
......@@ -35,10 +36,10 @@ function getBookDetailData(bookId, callback) {
*/
function getChapterinfoData(bookId, chapterId, callback) {
apiPOST({
url: `/book/chapterinfo`,
data: {
articleId: bookId,
chapterId: chapterId,
url: `/book/chapterinfo`,
data: {
articleId: bookId,
chapterId: chapterId,
},
callback
})
......@@ -50,9 +51,9 @@ function getChapterinfoData(bookId, chapterId, callback) {
*/
function getBookRecommendData(bookId, callback) {
apiPOST({
url: `/book/recommend`,
data: {
id: bookId
url: `/book/recommend`,
data: {
id: bookId
},
callback
})
......@@ -63,9 +64,9 @@ function getBookRecommendData(bookId, callback) {
*/
function addReadRecord(bookId, callback) {
apiPOST({
url: `/book/addReadRecord`,
data: {
articleId: bookId
url: `/book/addReadRecord`,
data: {
articleId: bookId
},
callback
})
......@@ -114,6 +115,48 @@ function removeContentFormatChangeWatch(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 = {
getBookDetailData,
getBookRecommendData,
......@@ -126,5 +169,12 @@ module.exports = {
readContentFormat,
notifyContentFormatChange,
watchContentFormatChange,
removeContentFormatChangeWatch
removeContentFormatChangeWatch,
saveCatalogueFormat,
readCatalogueFormat,
notifyCatalogueFormatChange,
watchCatalogueFormatChange,
removeCatalogueFormatChangeWatch,
}
\ No newline at end of file
vedio/pagesD/readerRecord/readerRecord.vue
View file @ 6401c10b
......@@ -44,6 +44,10 @@
openUrl
} from '@/utils/app+.js';
import {
gotoBookContentPage
} from '../../common/services/page-route';
const app = getApp();
export default {
......@@ -77,14 +81,7 @@
},
handleInfo(item) {
var bookId = item.id;
uni.navigateTo({
url: `/page-subs/sub_A/book-content/book-content`,
success: (res) => {
res.eventChannel.emit("openBookContentPage", {
bookId
})
}
})
gotoBookContentPage(item.id, item.shortis)
},
handleXing(item) {
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