123

xs-app/components/read/chapterCatalog.vue

@@ -1,7 +1,7 @@
 <template>
 	<uni-popup @maskClick="emits('Close')" :animation="false" mask-background-color="rgba(0,0,0,0)" ref="catalog"  background-color="#fff"  @change="onChange">
 		<view
-			:class="{ container0: background === 1, container1: background === 2 }"
+			:style="{'backgroundColor':db_color}"
 			@touchend.stop>
 			<view>
 			<!-- 	<movable-area>
@@ -35,7 +35,7 @@
 					>
 					<view class="item-wrap" v-for="(item, index) in visibleData" :key="item.id">
 						<!-- <slot :item="item" :active="active"></slot> -->
-						<view class="directory-listItem" @click="clickChar(item)">{{ item.name }}</view>
+						<view :style="{'color':font_color}" class="directory-listItem" @click="clickChar(item)">{{ item.name }}</view>
 					</view>
 					</view>
 				</scroll-view>
@@ -48,6 +48,8 @@
 
 <script setup lang="ts">
 	import { ref,onMounted,computed} from 'vue';
+	import { ReadSetting } from '../../stores/readSetting';
+import { tools } from '../../framework/tools';
 	// const {items,remain,size,active,scrollHeight} = defineProps(['items','remain','size','active','scrollHeight'])
 	const {items,remain,size,scrollHeight} =defineProps({
 		  items: {
@@ -83,7 +85,7 @@
 	let scrollTop = ref(0)
 	let y = ref(0)
 	
-	let background = ref(1)
+	let mode = ref(ReadSetting().getReadSetting().readMode)
 	
 	const catalog = ref(null)
 	onMounted(()=>{
@@ -142,6 +144,11 @@
 			emits('Close')
 		}
 	}
+	
+	let font_color = ref(tools.getFontColorByMode(ReadSetting().data.readMode))
+	let db_color = ref(tools.getDbColorByMode(ReadSetting().data.readMode))
+	
+	
 </script>
 
 <style scoped>
@@ -177,14 +184,6 @@
 	.active {
 		color: red;
 	}
-	.container0 {
-		background: url('../../static/imgs/read/background1.jpg');
-		background-color: #fff;
-		background-size: 100% 100%;
-	}
-	.container1 {
-		background-color: #000;
-	}
 /* 	.directory {
 		position: fixed;
 		display: flex;
@@ -192,9 +191,6 @@
 		width: 100%;
 		height: 30%;
 	} */
-	.active {
-		color: red;
-	}
 	.scroll-view {
 	  scrollbar-width: none; /* 对于微信小程序等平台，可以使用scrollbar-width设置为none */
 	}

xs-app/components/read/readPage.vue

@@ -2,6 +2,7 @@
 	<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"
@@ -9,7 +10,7 @@
 			: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: `${config.read_config.colorList[0]}`, -->
+				color:`${font_color}`
 		}"></view>
 		<!-- <image src="../../static/logo.png"></image> -->
 	</view>
@@ -20,17 +21,26 @@
 	import { ReadSetting } from '../../stores/readSetting';
 	import { config } from '../../config/config';
 	import { log } from '../../framework/log';
+	import { tools } from '../../framework/tools';
 	
 	let  {text_content,book_title} =  defineProps(['text_content','book_title'])
 	
 	let read_setting_data = ReadSetting().getReadSetting()
 	
+	let font_color = ref(tools.getFontColorByMode(read_setting_data.readMode))
+	
 	function showTopLoading(){
 	}
 	
 	function showBottomLoading(){
 			
 	}
+	
+	watch(async () => ReadSetting().data.readMode, // 监听的数据源
+		(newVal, oldVal) => {
+			 font_color.value = tools.getFontColorByMode(ReadSetting().data.readMode)
+		}
+	);
 	defineExpose({ showBottomLoading,showTopLoading });
 </script>
 

xs-app/components/read/settingMenu.vue

@@ -1,48 +1,51 @@
 <template>
 	<view>
-		<uni-popup  @touchstart="maskStart" @touchmove="maskTouch" :animation="false" mask-background-color="rgba(0,0,0,0)" ref="menu"  background-color="#fff"  @change="change">
+		<uni-popup  @touchstart="maskStart" @touchmove="maskTouch" :animation="false" mask-background-color="rgba(0,0,0,0)" ref="menu"  :background-color="db_color"  @change="change">
 			<view v-if="showSettingFontSizeMode==false" class="selects-box">
-				<view @click="emit('clickPreChapter')">上一章</view>
-				<view @click="emit('clickKeep')">加入书架</view>
-				<view @click="emit('clickNextChapter')">下一章</view>
+				<view @click="emit('clickPreChapter')" :style="{'color':font_color}">上一章</view>
+				<view @click="emit('clickKeep')" style="align-items: center; display: flex;">
+					<image src="../../static/logo.png" style="width: 40rpx;height: 40rpx; margin-right: 10px;"></image>
+					<view :style="{'color':font_color}">加入书架</view>
+				</view>
+				<view @click="emit('clickNextChapter')" :style="{'color':font_color}">下一章</view>
 			</view>
 			
 			<view v-if="showSettingFontSizeMode==false" class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
 				<view class="items-box">
-					<view class="item-box" @click="emit('clickCatalog')">
+					<view class="item-box" @click="emit('clickCatalog')" :style="{'color':font_color}">
 						目录
 					</view>
-					<view class="item-box" v-if="mode === config.read_config.readMode.Bright" @click="emit('clickMode',config.read_config.readMode.Dark)">
+					<view class="item-box" v-if="mode === config.read_config.readMode.Bright" @click="emit('clickMode',config.read_config.readMode.Dark)" :style="{'color':font_color}">
 						夜间
 					</view>
-					<view class="item-box" v-if="mode === config.read_config.readMode.Dark" @click="emit('clickMode',config.read_config.readMode.Bright)">
+					<view class="item-box" v-if="mode === config.read_config.readMode.Dark" @click="emit('clickMode',config.read_config.readMode.Bright)" :style="{'color':font_color}">
 						日间
 					</view>
-					<view class="item-box" @click="emit('clickOpenSetting')">
+					<view class="item-box" @click="emit('clickOpenSetting')" :style="{'color':font_color}">
 						设置
 					</view>
 				</view>	
 			</view>
 			
 			<view v-if="showSettingFontSizeMode==true" class="fontSelect" >
-				<view>字号</view>
-				<view @touchstart="emit('changeFontSize',-1)">小</view>
-				<view>{{showFontSize}}</view>
-				<view @touchstart="emit('changeFontSize',+1)">大</view>
+				<view :style="{'color':font_color}">字号</view>
+				<view @touchstart="emit('changeFontSize',-1)" :style="{'color':font_color}">小</view>
+				<view :style="{'color':font_color}">{{showFontSize}}</view>
+				<view @touchstart="emit('changeFontSize',+1)" :style="{'color':font_color}">大</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>
+				<view style="margin-left: 50rpx;" :style="{'color':font_color}">颜色</view>
 				<image @touchstart="emit('changeBgColor',0)" src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
 				<image @touchstart="emit('changeBgColor',1)" src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
 				<image @touchstart="emit('changeBgColor',2)" src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
 				<image @touchstart="emit('changeBgColor',3)" src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
 				<image @touchstart="emit('changeBgColor',4)" 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="height: 30rpx;" ></view>
 			<view v-if="showSettingFontSizeMode==true" style="display: flex;justify-content: center; align-items: center;	">
 				<checkbox-group @change="emit('selectAutoBuy',!isAutoBuy)">
-					<checkbox :checked="isAutoBuy" value="cb"> 自动购买下一章 </checkbox>
+					<checkbox :checked="isAutoBuy" value="cb" :style="{'color':font_color}"> 自动购买下一章 </checkbox>
 				</checkbox-group>
 			</view>
 			<view v-if="showSettingFontSizeMode==true" style="height: 50rpx;"></view>
@@ -54,6 +57,7 @@
 	import {ref, onMounted,defineProps,defineEmits, watch} from 'vue'
 	import { config } from '../../config/config';
 	import { ReadSetting } from '../../stores/readSetting';
+	import { tools } from '../../framework/tools';
 	const emit = defineEmits(['clickCatalog','clickPreChapter','clickNextChapter','clickMode','clickOpenSetting','Close','changeFontSize','changeBgColor','selectAutoBuy','clickKeep'])
 	// const { windowWidth, windowHeight, statusBarHeight, platform, pixelRatio } = uni.getSystemInfoSync();
 	let menu = ref(null)
@@ -101,12 +105,20 @@
 		(newVal, oldVal) => {
 			isAutoBuy.value = newVal
    		}
-      );
-	// watch(() => ReadSetting().data.colorBgIndex, // 监听的数据源
-	// 		(newVal, oldVal) => {
-	// 	}
- //    );
+	);
+	
+	watch(() => ReadSetting().data.readMode, // 监听的数据源
+		(newVal, oldVal) => {
+			mode.value = ReadSetting().data.readMode
+			font_color.value = tools.getFontColorByMode(ReadSetting().data.readMode)
+			db_color.value = tools.getDbColorByMode(ReadSetting().data.readMode)
+		}
+    );
+	
+	let font_color = ref(tools.getFontColorByMode(ReadSetting().data.readMode))
+	let db_color = ref(tools.getDbColorByMode(ReadSetting().data.readMode))
 	defineExpose({showSettingFont})
+	
 </script>
 
 <style lang="scss" scoped>

xs-app/config/config.ts

@@ -91,6 +91,10 @@ export class config {
 		readMode:{
 			Bright:1,
 			Dark:2
-		}
+		},
+		BrightFontColor:'#000000', //光亮模式下的字体颜色
+		DarkFontColor:`#ffffff`, //黑暗模式下的字体颜色
+		BrightDbColor:`#ffffff`, //光亮模式下的底板颜色
+		DarkDbColor:`#000000` //黑暗模式下的底板颜色
 	}
 }

xs-app/framework/tools.ts

@@ -149,4 +149,20 @@ export class tools {
 	public static getCurChapterIndex(chapter_id:number,list:chapter_item_data[]){
 		return list.findIndex(chapter_data=>chapter_id==chapter_data.id)
 	}
+	
+	public static getFontColorByMode(mode:number){
+		if(mode==config.read_config.readMode.Bright){
+			return config.read_config.BrightFontColor
+		}else{
+			return config.read_config.DarkFontColor
+		}
+	}
+	
+	public static getDbColorByMode(mode:number){
+		if(mode==config.read_config.readMode.Bright){
+			return config.read_config.BrightDbColor
+		}else{
+			return config.read_config.DarkDbColor
+		}
+	}
 }

xs-app/pages/readbook/read.vue

@@ -1,5 +1,5 @@
 <template>
-	<view class="color-bg" :style="{'background-color': config.read_config.colorList[read_setting_data.colorBgIndex],'height':book_text_list_view.length<=0?'100vh':'100%'}">
+	<view class="color-bg" :style="{'background-color': read_setting_data.readMode==config.read_config.readMode.Bright?config.read_config.colorList[read_setting_data.colorBgIndex]:DarkBg,'height':book_text_list_view.length<=0?'100vh':'100%'}">
 		<readPage class="content" ref="readPages" @touchstart="onStartClickView"
 		@touchend="onEndClickView" @touchmove="hideSetting" v-for="(book_read_data_item,index) in book_text_list_view" :key="book_read_data_item.book_chapter_id" 
 		:text_content="book_read_data_item.book_content" :book_title="book_read_data_item.book_title">
@@ -147,10 +147,6 @@
 		showChapterList.value = false
 	}
 	
-	function onClickMode(){
-		console.log("点了模式")
-	}
-	
 	function onClickOpenSetting(){
 		console.log("点了设置")
 		showSetting()
@@ -221,6 +217,7 @@
 	}
 	
 	function onChangeBgColor(index:number){
+		ReadSetting().changeReadMode(config.read_config.readMode.Bright)
 		ReadSetting().changeBgColor(index)
 	}
 	
@@ -231,6 +228,20 @@
 	function onClickKeep(){
 		log.Debug("收藏",book_data.book_name)
 	}
+	
+	let DarkBg = ref(tools.getDbColorByMode(read_setting_data.readMode))
+	
+	function onClickMode(mode:number){
+		ReadSetting().changeReadMode(mode)
+	}
+
+	watch(async () => ReadSetting().data.readMode, // 监听的数据源
+		(newVal, oldVal) => {
+			DarkBg.value = tools.getDbColorByMode(read_setting_data.readMode)
+			updateNavigation()
+		}
+	);
+	
 	//设置end
 	
 	//章节列表 start
@@ -257,9 +268,13 @@
 	);
 	
 	function updateNavigation(){
+		let showbgColor  = bgColor
+		if(read_setting_data.readMode==config.read_config.readMode.Dark){
+			showbgColor = tools.getDbColorByMode(read_setting_data.readMode)
+		}
 		uni.setNavigationBarColor({
 		    frontColor: '#ffffff',
-		    backgroundColor: bgColor,
+		    backgroundColor: showbgColor,
 		    animation: {
 		        duration: 400,
 		        timingFunc: 'easeIn'

xs-app/stores/readSetting.ts

@@ -21,6 +21,11 @@ export const ReadSetting = defineStore('read-setting',()=>{
 	async function changeAutoBuyNextChapter(isAuto:boolean){
 		data.autoBuyNextChpater = isAuto
 	}
+	
+	async function changeReadMode(mode:number){
+		data.readMode = mode
+	}
+	
 	function getReadSetting():read_setting_data{
 		if(data==null||data.colorBgIndex==undefined){
 			data.colorBgIndex = 0;
@@ -30,5 +35,5 @@ export const ReadSetting = defineStore('read-setting',()=>{
 		}
 		return data
 	}
-	return {data,updateReadSetting,getReadSetting,changeFontSize,changeBgColor,changeAutoBuyNextChapter}
+	return {data,updateReadSetting,getReadSetting,changeFontSize,changeBgColor,changeAutoBuyNextChapter,changeReadMode}
 })