xs/xs-app/components/read/readPage.vue

<template>
	<view :style="{height:'100vh'}">
		<view v-html="book_title" :style="{
			fontSize:`${config.read_config.fontSizeList[read_setting_data.fontSizeIndex]*1.5}px`,
			lineHeight:`${config.read_config.lineHeight * config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
			color:`${font_color}`
		}"></view>
		<view class="inner-box">
			<view class="book-inner"
				v-html="getText()"
				:style="{
					fontSize: `${config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
					lineHeight: `${config.read_config.lineHeight * config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
					color:`${font_color}`
			}" @touchstart="(event)=>{emits('onTouchstart',event)}"
			@touchend="(event)=>{emits('onTouchend',event)}"
			@touchmove="(event)=>{emits('onTouchmove',event)}">
			</view>
			<view v-if="isLock==false" style="display: flex;justify-content: space-around;justify-items: center;margin-bottom: 5%;margin-top: 3%;">
				<image :src="getLogoIconRes()" style="width: 1013rpx;height: 40rpx;"></image>
			</view>
			<view v-if="isLock==false" style="display: flex;justify-content: space-around;justify-items: center;margin-bottom: 3%;margin-top: 3%;">
				<view @tap="emits('clickPreChapter')" :style="{color:ReadSetting().getReadSetting().readMode==config.read_config.readMode.Dark?'#868686':'#000000'}">上一章</view>
				<!-- <view @tap="emits('clickCatalog')">目录</view> -->
				<image :src="getMlIconRes()" style="width: 142rpx;height: 56rpx;" @tap="emits('clickCatalog')"></image>
				<view @tap="emits('clickNextChapter')" :style="{color:ReadSetting().getReadSetting().readMode==config.read_config.readMode.Dark?'#868686':'#000000'}">下一章</view>
			</view>
		</view>
		<view v-if="isLock" style="position: absolute;bottom: -1%;">
			<view @touchend="(event)=>{emits('onTouchend',event)}" @touchstart="(event)=>{emits('onTouchstart',event)}"  style="width: 100vw;height: 100vh;position: absolute;bottom: 0;top: 0;"></view>
			<image :src="ReadSetting().getReadSetting().readMode==config.read_config.readMode.Dark?bgDarkModeRes:bgModeRes" style="width: 100vw;height: 100vh;"></image>
			<view style="position: absolute;bottom: 20%;">
				<view style="display: flex;
							  flex-wrap: wrap;
							  justify-content: space-between;">
					<recharge-item ref="Items" class="product-item" v-for="(item,index) in rechargeList" :key="item.goods_id" :recharge_item_data="item" @itemClick="onItemSelect"></recharge-item>
				</view>
			</view>
			<view style="position: absolute;bottom: 12%;left: -20%;">
				<image :src="ReadSetting().getReadSetting().readMode==config.read_config.readMode.Dark?shuBiDarkModeRes:shuBiModeRes" mode="aspectFit" style="height: 50rpx;"></image>
			</view>
			<view style="position: absolute;bottom: 13%;left: 30%;">
				<view style="height: 50rpx;" :style="{color:ReadSetting().getReadSetting().readMode==config.read_config.readMode.Dark?'#868686':'#000000'}">{{user_coin}}</view>
			</view>
			
			<view style="position: absolute;bottom: 12%;right: -25%;">
				<image @click="onAutoClick()" :src="getAutoImgStyle()" mode="aspectFit" style="height: 50rpx;"></image>
			</view>
			<view style="position: absolute;bottom: 12.5%;right: 22%;">
				<view style="height: 55rpx;font-size: 33rpx;" :style="{color:ReadSetting().getReadSetting().readMode==config.read_config.readMode.Dark?'#868686':'#000000'}">自动购买下一章</view>
			</view>
			
			<view style="position: absolute;bottom: 2%;">
				<image src="../../static/imgs/read/btn_buy_chapter.png" style="width: 90vw;height: 8vh;margin-left: 5%;"></image>
			</view>
			<view @tap="emits('BuyChapter')" style="position: absolute;bottom: 3%;width: 100%;height: 6vh;display: flex;justify-content: space-around;justify-items: center;">
				解锁本章需要{{coin}}书币
			</view>
			
		</view>
	</view>
	
</template>
	
<script setup lang="ts">
	import {defineProps, onMounted, ref, watch} from 'vue'
	import { ReadSetting } from '../../stores/readSetting';
	import { config } from '../../config/config';
	import { log } from '../../framework/log';
	import { tools } from '../../framework/tools';
	import rechargeItem from './rechargeItem.vue';
	import { recharge_list_data } from '../../data/data';
	import { UserData } from '../../stores/userDataManager';
	
	const {windowHeight,windowWidth} = uni.getSystemInfoSync()
	
	let rechargeList= ref<Array<recharge_list_data>>(null)
	
	let lock_content = ref('')
	
	let ml_icon_res = ref('')
	
	function getMlIconRes(){
		return ReadSetting().getReadSetting().readMode==config.read_config.readMode.Dark?'../../static/imgs/read/img_read_dark_ml.png':'../../static/imgs/read/img_read_ml.png'
	}
	let logo_icon_res = ref('')
	
	function getLogoIconRes(){
		return ReadSetting().getReadSetting().readMode==config.read_config.readMode.Dark?'../../static/imgs/read/img_read_dark_logo.png':'../../static/imgs/read/img_read_logo.png'
	}
	let  {text_content,book_title,coin} =  defineProps(['text_content','book_title','coin'])
	
	function test(){
		console.log("fuck")
	}
	// setLockContent()
	
	let bgModeRes = '../../static/imgs/read/img_unlock_bg.png'
	let bgDarkModeRes = '../../static/imgs/read/img_dark_unlock_bg.png'
	
	let shuBiModeRes = '../../static/imgs/read/img_shu_bi.png'
	let shuBiDarkModeRes = '../../static/imgs/read/img_drak_shu_bi.png'
	
	onMounted(()=>{
		ReadSetting().getRechargeList(config.recharge_stype.CHAPTER_PAGE,(d)=>{
			rechargeList.value = d
		})
	})
	
	let  emits = defineEmits(['onTouchstart','onTouchend','onTouchmove','clickCatalog','clickPreChapter','clickNextChapter','BuyChapter','onClickBuy'])
	
	let read_setting_data = ReadSetting().getReadSetting()
	
	let font_color = ref(tools.getFontColorByMode(read_setting_data.readMode))
	
	function showTopLoading(){
	}
	
	function showBottomLoading(){
			
	}
	
	watch(async () => ReadSetting().getReadSetting().readMode, // 监听的数据源
		(newVal, oldVal) => {
			 font_color.value = tools.getFontColorByMode(ReadSetting().getReadSetting().readMode)
		}
	);
	
	function setLockContent(){
		let len = text_content.length
		let temp_list = text_content.split('<br><br>')
		if(temp_list.length>=7){
			for(let i=0;i<7;i++){
				lock_content.value += (temp_list[i]+"<br><br>"+"<br><br>")
			}
		}else{
			lock_content.value = '请使用书币解锁内容，或者成为vip！'
		}
	}
	function getText(){
		// return isLock.value?lock_content:text_content
		return text_content
	}
	
	let isLock = ref(false)
	function LockChapter(){
		isLock.value = true
	}
	
	function UnLockChapter(){
		isLock.value = false
	}
	
	let Items = ref(null)
	let curSelectGoodsId = ref(0)
	let curSelectGoodsIsVip = ref(true)
	function onItemSelect(goods_id:number,isVip:boolean,is_default:boolean){
		curSelectGoodsIsVip.value = isVip
		curSelectGoodsId.value = goods_id
		Items.value.find((child,index)=>{
			child.updateSelectStatus(goods_id)
		})
		if(!is_default){
			emits('onClickBuy',curSelectGoodsId.value,curSelectGoodsId.value)
		}
	}
	let user_coin = ref(UserData().getData().coin)
	watch(()=>UserData().getData().coin,()=>{
		user_coin.value = UserData().getData().coin
	})
		
	function getAutoImgStyle(){
		return read_setting_data.autoBuyNextChpater?'../../static/imgs/read/setting/img_auto_on.png':'../../static/imgs/read/setting/img_auto_off.png'
	}
	
	function onAutoClick(){
		ReadSetting().changeAutoBuyNextChapter(!read_setting_data.autoBuyNextChpater)
	}
	defineExpose({ showBottomLoading,showTopLoading ,LockChapter,UnLockChapter });
</script>

<style lang="scss" scoped>
	.inner-box {
		flex: 1 1 auto;
		overflow: hidden;
		.book-inner {
			text-indent: 2em;
			text-align: justify;
		}
		padding: 5%;
	}
	.product-item {
	  box-sizing: border-box;
	  width: calc(50%); /* 减去一些空间作为间隔 */
	  margin-bottom: 0px; /* 商品之间的垂直间距 */
	  padding-left: 0px;
	  padding-right: 0px;
	  // border: 1px solid #ddd; /* 可选：给商品添加边框 */
	}
</style>