123

xs-app/components/read/chapterCatalog.vue

@@ -136,10 +136,8 @@
 		const t_offset = scrollTop - (scrollTop % size) - preCount.value * size;
 		offset.value = t_offset < 0 ? 0 : t_offset;
 	}
-	
 	//
 	function onChange(e){
-				console.log("show",e)
 		if(e.show==false){
 			emits('Close')
 		}

xs-app/components/read/readPage.vue

@@ -10,13 +10,13 @@
 				fontSize: `${config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
 				lineHeight: `${config.read_config.lineHeight * config.read_config.fontSizeList[read_setting_data.fontSizeIndex]}px`,
 		}"></view>
-		<image src="../../static/logo.png"></image>
+		<!-- <image src="../../static/logo.png"></image> -->
 	</view>
 	
 </template>
-
+	
 <script setup lang="ts">
-	import {defineProps} from 'vue'
+	import {defineProps, watch} from 'vue'
 	import { ReadSetting } from '../../stores/readSetting';
 	import { config } from '../../config/config';
 	import { log } from '../../framework/log';

xs-app/components/read/settingMenu.vue

@@ -24,29 +24,44 @@
 			</view>
 			
 			<view v-if="showSettingFontSizeMode==true" class="fontSelect" >
-				<view>字体大小</view>
-				<view> ｜</view>
-				<view></view>
+				<view>字号</view>
+				<view @touchstart="emit('changeFontSize',-1)">小</view>
+				<view>{{showFontSize}}</view>
+				<view @touchstart="emit('changeFontSize',+1)">大</view>
 			</view>
+			<view v-if="showSettingFontSizeMode==true" style="height: 10rpx;"></view>
+			<view v-if="showSettingFontSizeMode==true" style="display: flex;justify-content: space-between;" >
+				<view style="margin-left: 50rpx;">颜色</view>
+				<image src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
+				<image src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
+				<image src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
+				<image src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
+				<image src="../../static/logo.png" style="width: 50rpx;height: 50rpx; margin-right: 50rpx;"></image>
+			</view>
+			<view v-if="showSettingFontSizeMode==true" style="height: 30rpx;"></view>
+			<view v-if="showSettingFontSizeMode==true" style="display: flex;justify-content: center; align-items: center;	">
+				<checkbox> 自动购买下一章 </checkbox>
+			</view>
+			<view v-if="showSettingFontSizeMode==true" style="height: 50rpx;"></view>
 		</uni-popup>
 	</view>
 </template>
 
 <script setup lang="ts">
-	import {ref, onMounted,defineProps,defineEmits} from 'vue'
+	import {ref, onMounted,defineProps,defineEmits, watch} from 'vue'
 	import { config } from '../../config/config';
 	import { ReadSetting } from '../../stores/readSetting';
-	const emit = defineEmits(['clickCatalog','clickPreChapter','clickNextChapter','clickMode','clickOpenSetting','Close'])
+	const emit = defineEmits(['clickCatalog','clickPreChapter','clickNextChapter','clickMode','clickOpenSetting','Close','changeFontSize','changeBgColor'])
 	// const { windowWidth, windowHeight, statusBarHeight, platform, pixelRatio } = uni.getSystemInfoSync();
 	let menu = ref(null)
 	function change(e){
 		if(e.show==false){
 			emit('Close')
 		}
-		console.log('当前模式：' + e.type + ',状态：' + e.show);
+		// console.log('当前模式：' + e.type + ',状态：' + e.show);
 	}
+	let type = 'bottom'
 	onMounted(()=>{
-		const type = 'bottom'
 		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
 		menu.value.open(type)
 	})
@@ -66,6 +81,17 @@
 	function showSettingFont(){
 		showSettingFontSizeMode.value = true
 	}
+	
+	let showFontSize = ref(config.read_config.fontSizeList[ReadSetting().getReadSetting().fontSizeIndex])
+	
+	watch(
+	     () => ReadSetting().data.fontSizeIndex, // 监听的数据源
+	     (newVal, oldVal) => {
+	       console.log(`Count changed from ${oldVal} to ${newVal}`);
+		   showFontSize.value = config.read_config.fontSizeList[ReadSetting().getReadSetting().fontSizeIndex]
+	       // 可以在这里执行一些操作，比如更新其他状态或触发其他函数
+	     }
+	   );
 	defineExpose({showSettingFont})
 </script>
 

xs-app/pages.json

@@ -33,7 +33,7 @@
 		{
 			"path": "pages/readbook/read",
 			"style": {
-				"navigationStyle": "custom",
+				"navigationStyle": "default",
 				"navigationBarTitleText": "",
 				"enablePullDownRefresh": true,
 				"onReachBottomDistance": 10

xs-app/pages/readbook/read.vue

@@ -6,7 +6,7 @@
 	<settingMenu ref="Menu" v-if="menuShow" @clickCatalog="onClickCatalog" 
 	@clickPreChapter="onClickPreChapter" @clickNextChapter="onClickNextChapter" 
 	@clickMode="onClickMode" @clickOpenSetting="onClickOpenSetting"
-	@Close="closeMenu">
+	@Close="closeMenu" @changeFontSize="onChangeFontSize" @changeBgColor="onChangeBgColor">
 	</settingMenu>
 	<chapterCatalog v-if="showChapterList" :items="directoryList" :size="40" :remain="16"
 	 :scrollHeight="windowHeight*0.6" @clickChar="goToChapter" @Close="showChapterList=false">
@@ -146,11 +146,13 @@
 	}
 	
 	function onClickPreChapter(){
-		console.log("点了上一章")
+		goToChapter(tools.getPreChapterData(cur_read_chapter_index.value,directoryList))
+		hideSetting()
 	}
 	
 	function onClickNextChapter(){
-		console.log("点了下一章")
+		goToChapter(tools.getNextChapterData(cur_read_chapter_index.value,directoryList))
+		hideSetting()
 	}
 	
 	function onStartClickView(e){
@@ -187,12 +189,35 @@
 	function closeMenu(){
 		hideSetting()
 	}
+	
+	function onChangeFontSize(index:number){
+		let new_index = -1;
+		if(index>0){
+			new_index = ReadSetting().getReadSetting().fontSizeIndex + 1
+			if(new_index>=config.read_config.fontSizeList.length){
+				
+			}else{
+				ReadSetting().changeFontSize(new_index)
+			}
+		}else{
+			new_index = ReadSetting().getReadSetting().fontSizeIndex - 1
+			if(new_index<0){
+				
+			}else{
+				ReadSetting().changeFontSize(new_index)
+			}
+		}
+	}
+	
+	function onChangeBgColor(index:number){
+		
+	}
 	//设置end
 	
 	//章节列表 start
 	let showChapterList = ref(false)
 	function goToChapter(chapter_list_item_data:chapter_item_data){
-		console.log("想看",chapter_list_item_data)
+		// console.log("想看",chapter_list_item_data)
 		cur_read_chapter_index.value = tools.getCurChapterIndex(chapter_list_item_data.id,directoryList)
 		book_text_list_view.value = []
 		draw()

xs-app/stores/readSetting.ts

@@ -8,6 +8,14 @@ export const ReadSetting = defineStore('read-setting',()=>{
 		data.fontSizeIndex=d.fontSizeIndex;
 		data.colorBgIndex = d.colorBgIndex;
 	}
+	
+	async function changeFontSize(index:number){
+		data.fontSizeIndex=index;
+	}
+	
+	async function changeBgColor(index:number){
+		data.colorBgIndex=index;
+	}
 	function getReadSetting():read_setting_data{
 		if(data==null||data.colorBgIndex==undefined){
 			data.colorBgIndex = 0;
@@ -16,5 +24,5 @@ export const ReadSetting = defineStore('read-setting',()=>{
 		}
 		return data
 	}
-	return {data,updateReadSetting,getReadSetting}
+	return {data,updateReadSetting,getReadSetting,changeFontSize,changeBgColor}
 })