englishread-front/uni_modules/yingbing-ReadPage/components/yingbing-html-reader/app-nvue/computed.vue

<template>
	<view class="yingbing-computed" :style="[computedStyle]">
		<reader-header :text="chapter.title || ''" v-if="headerShowSync"></reader-header>
		<web-view ref="webview" style="flex:1" src="/uni_modules/yingbing-ReadPage/hybrid/html/computed.html" @onPostMessage="onPostMessage"></web-view>
		<reader-footer v-if="footerShowSync"></reader-footer>
	</view>
</template>

<script>
	import ReaderHeader from '../../header/header.vue'
	import ReaderFooter from '../../footer/footer.vue'
	export default {
		inject: ['fontSize', 'fontFamily', 'lineHeight', 'topGap', 'bottomGap', 'slide', 'headerShow', 'footerShow', 'totalChapter'],
		components: {
			ReaderHeader,
			ReaderFooter
		},
		computed: {
			computedStyle () {
				return {
					'padding-top': this.topGap + 'px',
					'padding-bottom': this.bottomGap + 'px',
					'padding-left': this.slide + 'px',
					'padding-right': this.slide + 'px'
				}
			}
		},
		data () {
			return {
				chapter: {},//章节内容临时存储
				success: null,//成功回调
				fail: null,//失败回调,
				headerShowSync: false,//展示头部
				footerShowSync: false//展示底部
			}
		},
		beforeDestroy() {
			this.$refs.webview && this.$refs.webview.evalJS("destroyHandleTimer()")
		},
		methods: {
			start ({chapter, success, fail}) {
				this.chapter = chapter
				this.success = success
				this.fail = fail
				this.headerShowSync = typeof chapter.headerShow == 'boolean' ? chapter.headerShow : this.headerShow//判断是否显示头部
				this.footerShowSync = typeof chapter.footerShow == 'boolean' ? chapter.footerShow : this.footerShow//判断是否显示底部
				const style = {fontSize: this.fontSize, fontFamily: this.fontFamily, lineHeight: this.lineHeight, totalChapter: this.totalChapter}
				this.$nextTick(function () {
					setTimeout(() => {
						this.$refs.webview && this.$refs.webview.evalJS("start(" + encodeURIComponent(JSON.stringify(chapter)) + ', ' + encodeURIComponent(JSON.stringify(style)) + ")")
					}, 100)
				})
			},
			onPostMessage (e) {
				e.detail.data.forEach(item => {
					if ( item.handleSuccess ) {
						this.success && this.success(item.handleSuccess)
						this.success = null
						this.fail = null
						this.chapter = {}
					}
				})
			}
		}
	}
</script>

<style scoped>
	.yingbing-computed {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		transform: translateX(-1000px);
	}
</style>