Skip to content

U
uniapp_vedio
Commit 93df8d24 authored by mengcuiguang's avatar mengcuiguang
Browse files
Options

修改小说内容分段展示

parent f9bc5529
Hide whitespace changes
Inline Side-by-side
Showing with 186 additions and 197 deletions
vedio/common/models/Book.js
View file @ 93df8d24
...@@ -25,6 +25,8 @@ export default class Book { ...@@ -25,6 +25,8 @@ export default class Book {
createTime, createTime,
tagList, tagList,
isUnlock, isUnlock,
free,
charge,
bookLegumes, bookLegumes,
lockRate lockRate
} = param || {} } = param || {}
...@@ -54,6 +56,8 @@ export default class Book { ...@@ -54,6 +56,8 @@ export default class Book {
this.categoryId = categoryId; this.categoryId = categoryId;
this.createTime = createTime; this.createTime = createTime;
this.isUnlock = isUnlock; this.isUnlock = isUnlock;
this.charge = charge;
this.free = free;
this.bookLegumes = bookLegumes; this.bookLegumes = bookLegumes;
this.lockRate = lockRate; this.lockRate = lockRate;
} }
......
vedio/components/coin-popup/coin-popup.vue
View file @ 93df8d24
...@@ -25,31 +25,9 @@ ...@@ -25,31 +25,9 @@
src="@/static/index/ic_quit_white.png"></image> src="@/static/index/ic_quit_white.png"></image>
</view> </view>
</view> </view>
<!-- <view style="display: flex;flex-direction: column;align-items: center;margin-bottom: 20rpx;">
<view style="font-size: 38rpx;color: black;">{{titleText}}</view>
<view class="flex">
<view v-if="point>0" style="display: flex;flex-direction: row;margin-top: 10rpx;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">解锁本部：</view>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{point}}</view>
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">
书豆
</view>
</view>
<view v-if="point>0" style="width: 60rpx;"></view>
<view style="display: flex;flex-direction: row;margin-top: 10rpx;">
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;">账户余额：</view>
<view style="font-size: 42rpx;color: red;font-weight: 777;">{{userBean.point}}
</view>
<view style="font-size: 28rpx;color: #644238;margin-top: 12rpx;margin-left: 6rpx;">
书豆
</view>
</view>
</view>
</view> -->
<view class="section"> <view class="section">
<view class="pack-box"> <view class="pack-box">
<view class="pack-item" <view class="pack-item"
:style="item.largeType !=='vip' ?'background: #f4c98b;':'background: #f5f5f5;'"
:class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList' :class="[{active: index==selectedIndex}]" v-for='(item, index) in vipList'
:key='index' @click="choosePack(item, index)"> :key='index' @click="choosePack(item, index)">
<view style="display: flex;flex-direction: column;align-items: center;"> <view style="display: flex;flex-direction: column;align-items: center;">
...@@ -331,7 +309,8 @@ ...@@ -331,7 +309,8 @@
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
.active { .active {
background-color: #f4c98b !important;
border: 6rpx solid #fd5350 !important; border: 6rpx solid #fd5350 !important;
} }
...@@ -343,7 +322,7 @@ ...@@ -343,7 +322,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
// background: #f5f5f5; background: #f5f5f5;
border: 6rpx solid #f5f5f5; border: 6rpx solid #f5f5f5;
border-radius: 10rpx; border-radius: 10rpx;
position: relative; position: relative;
......
vedio/page-subs/sub_A/book-content/components/detail-content.vue
View file @ 93df8d24
<template> <template>
<view class="detail-content"> <view class="detail-content">
<template v-if='showVIPContent'> <template v-if='showVIPContent'>
<view class="content-paragraph" :style="[contentStyle]" v-for='(item, index) in contentSources' <view class="content-paragraph" :style="[contentStyle]" v-for='(item, index) in contentSources'
:key='index'> :key='index'>
{{item}} {{item}}
</view> </view>
</template> </template>
<template v-else> <template v-else>
<view class="content-paragraph" :style="[contentStyle]" v-for='(item, index) in preContentSources' <view class="content-paragraph" :style="[contentStyle]" v-for='(item, index) in preContentSources'
:key="index"> :key="index">
{{item}} {{item}}
</view> </view>
<view class="limit-button-box" @click="tapVip"> <view class="limit-button-box" @click="tapVip">
{{limitButtonTitle}} {{limitButtonTitle}}
</view> </view>
</template> </template>
</view> </view>
</template> </template>
<script> <script>
import { import {
watchContentFormatChange, watchContentFormatChange,
removeContentFormatChangeWatch removeContentFormatChangeWatch
} from "../services/index.js" } from "../services/index.js"
import { import {
showLoginView showLoginView
} from "../../../../common/services/userServices.js" } from "../../../../common/services/userServices.js"
import { import {
gotoVIPApplyPage gotoVIPApplyPage
} from "../../../../common/services/page-route.js" } from "../../../../common/services/page-route.js"
import User from "../../../../common/models/User.js"; import User from "../../../../common/models/User.js";
export default { export default {
props: { props: {
userInfo: { userInfo: {
type: Object, type: Object,
default: function() { default: function() {
return null return null
} }
}, },
detail: { detail: {
type: Object, type: Object,
default: function() { default: function() {
return {} return {}
} }
} }
}, },
data: function() { data: function() {
return { return {
user: null, user: null,
fontSize: `18px`, fontSize: `18px`,
PRECENT_VALUE:40 PRECENT_VALUE: 40
} }
}, },
mounted() { mounted() {
watchContentFormatChange((data) => { watchContentFormatChange((data) => {
let result = data.getFormatValue(); let result = data.getFormatValue();
if (this.fontSize != result.fontSize) { if (this.fontSize != result.fontSize) {
this.fontSize = result.fontSize this.fontSize = result.fontSize
} }
}, this) }, this)
}, },
destroyed() { destroyed() {
removeContentFormatChangeWatch(this); removeContentFormatChangeWatch(this);
}, },
watch: { watch: {
userInfo: { userInfo: {
handler: function(n) { handler: function(n) {
if (n) { if (n) {
this.user = new User(n) this.user = new User(n)
} else { } else {
this.user = null this.user = null
} }
}, },
deep: true, deep: true,
immediate: true immediate: true
} }
}, },
computed: { computed: {
contentSources: function() { contentSources: function() {
return this.detail && this.detail.content ? this.detail.content : []; return [...this.detail.free , ...this.detail.charge];
}, },
preContentSources: function() { preContentSources: function() {
let result = this.detail && this.detail.content ? [...this.detail.content] : []; return this.detail && this.detail.free ? [...this.detail.free] : [];
let length = result.length; },
if (length >= 2) { limitButtonTitle: function() {
if(this.detail.lockRate!=null&&this.detail.lockRate>0){ let result = `后续内容更精彩`;
this.PRECENT_VALUE=this.detail.lockRate; if (!this.user) {
} result = `${result}，点击登录后继续阅读`;
console.log('this.PRECENT_VALUE='+this.PRECENT_VALUE); } else if (!this.user.isVip()) {
let precent = this.PRECENT_VALUE / 100; result = `${result}，充值后继续阅读`
let preLength = Math.floor(length * precent); }
return result.splice(0, preLength); result = `${result}~`;
} else { return result;
return result; },
} contentStyle: function() {
}, return {
limitButtonTitle: function() { fontSize: this.fontSize
let result = `~剩余${100-this.PRECENT_VALUE}%内容`; }
if (!this.user) { },
result = `${result}，点击登录后继续阅读`; showVIPContent: function() {
} else if (!this.user.isVip()) { return (this.user && this.user.isVip()) || this.detail.isUnlock
result = `${result}为会员章节内容，请前往购买会员` }
} },
result = `${result}~`; methods: {
return result; tapLimitButton() {
}, if (!this.user) {
contentStyle: function() { showLoginView()
return { } else if (!this.user.isVip()) {
fontSize: this.fontSize gotoVIPApplyPage()
} }
}, },
showVIPContent: function() { tapVip() {
return (this.user && this.user.isVip()) || this.detail.isUnlock let isIOS = wx.getSystemInfoSync().platform;
} if (isIOS === 'ios') {
}, uni.showToast({
methods: { title: '暂不支持IOS系统',
tapLimitButton() { icon: 'none'
if (!this.user) { })
showLoginView()
} else if (!this.user.isVip()) { return
gotoVIPApplyPage() }
} // 展示充值VIP弹框
}, this.$emit('tapVip')
tapVip() { }
let isIOS = wx.getSystemInfoSync().platform; }
if (isIOS === 'ios') { }
uni.showToast({ </script>
title: '暂不支持IOS系统',
icon: 'none' <style lang="scss" scoped>
}) .detail-content {
paading: 20rpx 30rpx;
return margin: 20rpx 30rpx;
} display: flex;
// 展示充值VIP弹框 flex-direction: column;
this.$emit('tapVip')
} .content-paragraph {
} text-indent: 1em;
} word-wrap: break-word;
</script> word-break: break-all;
white-space: normal;
<style lang="scss" scoped> line-height: 1.5em;
.detail-content { margin-bottom: 1em;
paading: 20rpx 30rpx; color: #333;
margin: 20rpx 30rpx; }
display: flex;
flex-direction: column; .content-paragraph:last-child {
margin-bottom: 0;
.content-paragraph { }
text-indent: 1em;
word-wrap: break-word; .limit-button-box {
word-break: break-all; text-indent: 0;
white-space: normal; height: 120rpx;
line-height: 1.5em; line-height: 120rpx;
margin-bottom: 1em; text-align: center;
color: #333; color: goldenrod;
} font-size: 28rpx;
}
.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> </style>
\ No newline at end of file
vedio/page-subs/sub_A/book-content/models/BookDetail.js
View file @ 93df8d24
...@@ -4,13 +4,31 @@ export default class BookDetail extends Book { ...@@ -4,13 +4,31 @@ export default class BookDetail extends Book {
constructor(param) { constructor(param) {
super(param); super(param);
const { const {
contentMd contentMd,
freeMd,
chargeMd,
} = param || {} } = param || {}
this.contentMd = contentMd; this.contentMd = contentMd;
this.freeMd = freeMd;
this.chargeMd = chargeMd;
let result = contentMd ? contentMd.replace(/<[^>]+>/g, "") : ""; let result = contentMd ? contentMd.replace(/<[^>]+>/g, "") : "";
result = result.split("\n"); result = result.split("\n");
this.content = result.filter(item => { this.content = result.filter(item => {
return item.split(/[\t\r\f\n\s]*/g).join(""); return item.split(/[\t\r\f\n\s]*/g).join("");
}); });
let result2 = freeMd ? freeMd.replace(/<[^>]+>/g, "") : "";
result2 = result2.split("\n");
this.free = result2.filter(item => {
return item.split(/[\t\r\f\n\s]*/g).join("");
});
let result3 = chargeMd ? chargeMd.replace(/<[^>]+>/g, "") : "";
result3 = result3.split("\n");
this.charge = result3.filter(item => {
return item.split(/[\t\r\f\n\s]*/g).join("");
});
console.log('param------',param)
} }
} }
\ No newline at end of file
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