123

xs-app/components/read/chapterCatalog.vue

@@ -13,8 +13,8 @@
 		align-items: center;padding-top: 5%;" :style="{'backgroundColor':db_color}">
 			<view :style="{'color':font_color,'fontSize':'1.5ex','paddingLeft':'10%','width':'65%'}">{{tools.book_status_title(book_data)}}</view>
 			<view @click="onClickSort" :style="{'color':font_color,'fontSize':'1.5ex'}">
-				<image src="../../static/logo.png" style="width: 25rpx;height: 25rpx;"></image>
-				<text  :style="{'color':font_color,'width':'80%'}">{{ sortName }} </text>
+				<image :src="getSortImgRes()" style="width: 135rpx;height: 54rpx;"></image>
+				<!-- <text  :style="{'color':font_color,'width':'80%'}">{{ sortName }} </text> -->
 			</view>
 		</view>
 		<view :style="{'backgroundColor':db_color,'width':'100%','padding-top': '5%'}">
@@ -34,6 +34,7 @@
 					</movable-view>
 				</movable-area> -->
 				<scroll-view
+					ref="scrollView"
 					scroll-y="true"
 					:style="{
 						height: scrollHeight + 'px',
@@ -59,10 +60,9 @@
 					<view v-for="(item, index) in visibleData" :key="item.id">
 						<!-- <slot :item="item" :active="active"></slot> -->
 						<view :style="{'widows':'100%'}" class="directory-listItem" @click="clickChar(item)">
-							<text  class="ellipsis" :style="{'color':font_color,'width':'80%'}">{{ item.name }} </text>
-							<image src="../../static/logo.png" style="width: 25rpx;height: 25rpx;;"></image>
+							<text  class="ellipsis" :style="{'color':isCurReadChapter(item)?config.read_config.RedColor:font_color,'width':'80%'}">{{ item.name }} </text>
+							<image v-if="isUnLock(item)" src="../../static/imgs/read/img_lock.png" style="width: 25rpx;height: 25rpx;;"></image>
 						</view>
-						
 					</view>
 					</view>
 				</scroll-view>
@@ -78,10 +78,11 @@
 	import { ref,onMounted,computed, nextTick} from 'vue';
 	import { ReadSetting } from '../../stores/readSetting';
 	import { tools } from '../../framework/tools';
-	import { book_item_data } from '../../data/data';
+	import { book_item_data, chapter_list_item } from '../../data/data';
 	import { UserStatus } from '../../stores/userStatusManager';
+	import { config } from '../../config/config';
 	// const {items,remain,size,active,scrollHeight} = defineProps(['items','remain','size','active','scrollHeight'])
-	const {items,remain,size,scrollHeight} =defineProps({
+	const {items,remain,size,scrollHeight,unLockChapterList,active} =defineProps({
 		  items: {
 		    type: Array,
 		    required: true,
@@ -97,30 +98,51 @@
 		    required: true,
 		    default: 0
 		  },
-		  // active: {
-		  //   type: Number,
-		  //   required: true,
-		  //   default: 0
-		  // },
+		  active: {
+		    type: Number,
+		    required: true,
+		    default: 0
+		  },
 		  scrollHeight: {
 		    type: Number,
 		    required: true,
 		    default: 0
 		  },
+		  unLockChapterList:{
+			  type:Array,
+			  required: true,
+			  default: []
+		  }
 		});
 	const emits = defineEmits(['clickChar','Close'])
 	let start = ref(0)
 	let end = ref(0)
 	let offset = ref(0)
-	let scrollTop = ref(0)
 	let y = ref(0)
 	let sortStatus = 1;
 	let sortName = ref('倒序')
+	let sortImg = ref('../../static/imgs/read/img_lock.png')
 	let mode = ref(ReadSetting().getReadSetting().readMode)
 	let sortItems = ref(items)
 	const catalog = ref(null)
 	let first_join = ref(true)
 	let first_chapter_num = ref(100)
+	
+	function getSortImgRes(){
+		if(sortStatus==1){
+			if(mode.value == config.read_config.readMode.Dark){
+				return '../../static/imgs/read/setting/img_read_dark_dx.png'
+			}
+			return '../../static/imgs/read/setting/img_read_dx.png'
+		}else{
+			if(mode.value == config.read_config.readMode.Dark){
+				return '../../static/imgs/read/setting/img_read_dark_zx.png'
+			}
+			return '../../static/imgs/read/setting/img_read_zx.png'
+		}
+
+	}
+	
 	onMounted(()=>{
 		const type = 'bottom'
 		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
@@ -139,12 +161,8 @@
 		const t_start = start.value - preCount.value;
 		const t_end = end.value + nextCount.value;
 		// console.log("visibleData",t_start,t_end)
-		// if(first_join.value==true){
-		// 	first_join.value = false
-		// 	return sortItems.value.slice(t_start+first_chapter_num.value, t_end+first_chapter_num.value);
-		// }
-		// return sortItems.value.slice(t_start, t_end);
 		return sortItems.value.slice(t_start, t_end);
+		// return sortItems.value.slice(t_start, t_end);
 	})
 	
 	let localHeight = computed(()=>{
@@ -156,28 +174,31 @@
 	}
 	
 	function change(e){
-		// if (e.detail.source !== 'touch') {
-		// 	return;
-		// }
-		// let y = e.detail.y;
-		// let scroll = (y / (scrollHeight - 40)) * (localHeight.value - scrollHeight);
-		// scroll = scroll < 0 ? 0 : scroll;
-		// scrollTop.value = scroll;
+		if (e.detail.source !== 'touch') {
+			return;
+		}
+		let y = e.detail.y;
+		let scroll = (y / (scrollHeight - 40)) * (localHeight.value - scrollHeight);
+		scroll = scroll < 0 ? 0 : scroll;
+		scrollTop.value = scroll;
 	}
 	
 	let default_scroll = ref(0)
 	
+	let scrollTop = ref(0)
 	function handleScroll(ev){
-		const scrollTop = default_scroll.value+ev.detail.scrollTop;
 		
-		y.value = (scrollTop / (localHeight.value - scrollHeight)) * (scrollHeight - 40);
+		const t_scrollTop = default_scroll.value+ev.detail.scrollTop;
+		
+		y.value = (t_scrollTop / (localHeight.value - scrollHeight)) * (scrollHeight - 40);
 		// 开始位置
-		const t_start = Math.floor(scrollTop / size);
+		const t_start = Math.floor(t_scrollTop / size);
+		// console.log("t_start",t_start)
 		start.value = start.value < 0 ? 0 : t_start;
 		// 结束位置
 		end.value = t_start +remain;
 		// 计算偏移
-		const t_offset = scrollTop - (scrollTop % size) - preCount.value * size;
+		const t_offset = t_scrollTop - (t_scrollTop % size) - preCount.value * size;
 		offset.value = t_offset < 0 ? 0 : t_offset;
 		
 		// console.log('scrollTop',scrollTop,start.value,end.value,offset.value,y.value)
@@ -220,15 +241,44 @@
 			}
 		})
 	}
-	
+	const scrollView = ref(null)
 	function onTest(){
+		// console.log("scroll_view",scrollView)
+		//   if (scrollView.value) {
+		// 		scrollView.value.scrollTop = 100; // 设置滚动位置
+		//   } else {
+		// 		console.error('ScrollView 组件还未准备好，无法设置 scrollTop');
+		//   }
+		 // scroll_view.value.scrollTop = 100;
+			// scrollTop.value = size * 100
+		// let visibleData = computed(()=>{
+		// 	const t_start = start.value - preCount.value;
+		// 	const t_end = end.value + nextCount.value;
+		// 	// console.log("visibleData",t_start,t_end)
+		// 	return sortItems.value.slice(t_start, t_end);
+		// 	// return sortItems.value.slice(t_start, t_end);
+		// })
+		// start.value  = 99;
+		// end.value  = 115
 		let scroll = (first_chapter_num.value*size)-size
-		console.log("scroll",scroll)
-		// handleScroll({detail:{scrollTop:scroll}})
+		// console.log("scroll",scroll)
+		handleScroll({detail:{scrollTop:scroll}})
 		// default_scroll.value = scroll
 		// handleScroll({detail:{scrollTop:500}})
 	}
 	
+	// console.log("unLockChapterList",active)
+	function isUnLock(item:chapter_list_item){
+		if(item.pay_type==config.chapter_pay_type.BU_SHOU_FEI){
+			return false
+		}
+		return !unLockChapterList.includes(item.id)
+	}
+	
+	function isCurReadChapter(item:chapter_list_item){
+		return active==item.id
+	}
+	
 </script>
 
 <style scoped>

xs-app/components/read/readPage.vue

@@ -1,42 +1,96 @@
 <template>
-	<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 :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;background-color: aliceblue;margin-bottom: 3%;margin-top: 3%;">
+				<view @tap="emits('clickPreChapter')">上一章</view>
+				<view @tap="emits('clickCatalog')">目录</view>
+				<view @tap="emits('clickNextChapter')">下一章</view>
+			</view>
 		</view>
-		<view style="display: flex;justify-content: space-around;justify-items: center;background-color: aliceblue;margin-bottom: 3%;margin-top: 3%;">
-			<view @tap="emits('clickPreChapter')">上一章</view>
-			<view @tap="emits('clickCatalog')">目录</view>
-			<view @tap="emits('clickNextChapter')">下一章</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, ref, watch} from 'vue'
+	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  {text_content,book_title} =  defineProps(['text_content','book_title'])
+	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'
 	
-	setLockContent()
+	let shuBiModeRes = '../../static/imgs/read/img_shu_bi.png'
+	let shuBiDarkModeRes = '../../static/imgs/read/img_drak_shu_bi.png'
 	
-	let  emits = defineEmits(['onTouchstart','onTouchend','onTouchmove','clickCatalog','clickPreChapter','clickNextChapter'])
+	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()
 	
@@ -58,8 +112,8 @@
 	function setLockContent(){
 		let len = text_content.length
 		let temp_list = text_content.split('<br><br>')
-		if(temp_list.length>=6){
-			for(let i=0;i<6;i++){
+		if(temp_list.length>=7){
+			for(let i=0;i<7;i++){
 				lock_content.value += (temp_list[i]+"<br><br>"+"<br><br>")
 			}
 		}else{
@@ -67,7 +121,8 @@
 		}
 	}
 	function getText(){
-		return isLock.value?lock_content:text_content
+		// return isLock.value?lock_content:text_content
+		return text_content
 	}
 	
 	let isLock = ref(false)
@@ -78,6 +133,32 @@
 	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>
 
@@ -91,4 +172,12 @@
 		}
 		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>

xs-app/components/read/rechargeItem.vue

@@ -1,12 +1,49 @@
 <template>
 	<!-- :class="{ SelectStatus: isSelectStatus() ,UnSelectStatus: isSelectStatus()==false }" -->
-	<view :style="{'backgroundColor':selectBgColor}" >
-		<view v-if="isVipRecharge()==true" @click="onItemClick">
-			{{recharge_item_data.name}}--VIP{{recharge_item_data.day}}天
+	<view @click="onItemClick" style="position: relative;">
+		<view v-if="isVipRecharge()==true" >
+			<image :src="selectBgColor" style="width: 50vw;height: 250rpx;"></image>
+			<view style="position: absolute;bottom: 13%;left: 10%;">
+				<view>
+					<view style="display: flex; justify-content: center; align-items: center;  height: 50rpx;">
+						<view style="font-size: 60rpx;color: #6D6D82;">{{recharge_item_data.day}}</view>
+						<view style="font-size: 35rpx; color: #6D6D82;margin-left: 4px;">天全场免费</view> <!-- 添加了一些间距 -->
+					</view>
+					<view style="display: flex; justify-content: center; align-items: center; width: 35vw; height: 50rpx;">
+						<image :src="selectCoinIcon"  style="height: 40rpx;width: 40rpx;"></image>
+						<view style="font-size: 1em;" :style="{color:isSelect?'#FF5E00':'#404040'}">{{recharge_item_data.amount}}</view>
+					</view>
+					<view style="font-size: 30rpx; margin-top: 10rpx;display: flex; justify-content: center; align-items: center; width: 35vw; height: 50rpx;color: #6D6D82;">仅需{{}}元/天</view>
+					<!-- {{recharge_item_data.name}}--VIP{{recharge_item_data.day}}天 -->
+				</view>
+			</view>
 		</view>
-		<view v-if="isVipRecharge()==false" @click="onItemClick">
-			充值{{recharge_item_data.coin}} 赠送{{recharge_item_data.give_coin}}
+		
+		<view v-if="isVipRecharge()==false">
+			<image :src="selectBgColorBookCoin" style="width: 50vw;height: 250rpx;"></image>
+			<view style="position: absolute;bottom: 13%;left: 10%;">
+				<view style="display: flex; justify-content: center; align-items: center;  height: 50rpx;margin-bottom: 20rpx;">
+					<image src="../../static/imgs/read/img_coin.png" style="width: 102rpx;height: 80rpx;" :style="{marginLeft: recharge_item_data.give_coin>0? '80rpx': '0rpx'}"></image>
+				</view>
+				<view style="display: flex; justify-content: center; align-items: center; width: 35vw; height: 50rpx;color: #6D6D82;">{{recharge_item_data.coin}}书币</view>
+				
+				<view style="display: flex; justify-content: center; align-items: center;  height: 50rpx;">
+					<image :src="selectCoinIcon"  style="height: 40rpx;width: 40rpx;"></image>
+					<view :style="{color:isSelect?'#FF5E00':'#404040'}">{{recharge_item_data.amount}}</view>
+				</view>
+			</view>
+			<view v-if="recharge_item_data.give_coin>0" style="position: absolute;bottom: 45%;left: 10%;">
+				<image src="../../static/imgs/read/img_song_db.png" style="width: 108rpx;height: 94rpx;"></image>
+			</view>
+			<view v-if="recharge_item_data.give_coin>0" style="position: absolute;bottom: 65%;left: 18%;font-size: 30rpx;color: #FBFBFD;">
+				送
+			</view>
+			<view v-if="recharge_item_data.give_coin>0" style="position: absolute;bottom: 50%;left: 12%;font-size: 35rpx;color: #FBFBFD;">
+				{{recharge_item_data.give_coin}}
+			</view>
 		</view>
+	
+		
 	</view>
 
 </template>
@@ -26,7 +63,7 @@
 	
 	onMounted(()=>{
 		if(recharge_item_data.is_default==1&&isSelect.value==false){
-			onItemClick()
+			emits('itemClick',recharge_item_data.goods_id,recharge_item_data.is_vip==1,true)
 		}
 	})
 	
@@ -34,13 +71,21 @@
 		emits('itemClick',recharge_item_data.goods_id,recharge_item_data.is_vip==1)
 	}
 	
-	let selectBgColor = ref('#ffffff')
+	let selectBgColor = ref('../../static/imgs/read/img_buy_unselect_status.png')
+	
+	let selectBgColorBookCoin = ref('../../static/imgs/read/img_buy_unselect_bi_status.png')
+	
+	let selectCoinIcon = ref('../../static/imgs/read/img_money_0.png')
 	
 	watch(()=>isSelect.value,()=>{
 		if(isSelect.value==true){
-			selectBgColor.value = '#adff2f'
+			selectBgColor.value = '../../static/imgs/read/img_buy_onselect_status.png'
+			selectBgColorBookCoin.value = '../../static/imgs/read/img_buy_onselect_bi_status.png'
+			selectCoinIcon.value = '../../static/imgs/read/img_money_1.png'
 		}else{
-			selectBgColor.value = '#ffffff'
+			selectBgColor.value = '../../static/imgs/read/img_buy_unselect_status.png'
+			selectBgColorBookCoin.value = '../../static/imgs/read/img_buy_unselect_bi_status.png'
+			selectCoinIcon.value = '../../static/imgs/read/img_money_0.png'
 		}
 	})
 	
@@ -52,5 +97,12 @@
 </script>
 
 <style scoped lang="scss">
-
+	.container0 {
+		background: url(../../static/imgs/read/img_buy_onselect_status.png);
+		background-color: #fff;
+		background-size: 100% 100%;
+	}
+	.container1 {
+		background-color: #000;
+	}
 </style>

xs-app/components/read/settingMenu.vue

@@ -1,54 +1,76 @@
 <template>
 	<view>
-		<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')" :style="{'color':font_color}">上一章</view>
-				<view @click="emit('clickKeep',book_id)" 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}">{{BookshelfStatusTitle}}</view>
+		<uni-popup @touchstart="maskStart" @touchmove="maskTouch" :animation="false" mask-background-color="rgba(0,0,0,0)" ref="menu"  background-color="rgba(0,0,0,0)"   @change="change">
+			<view class="mypopup" :style="{'backgroundColor':db_color}">
+				<view v-if="showSettingFontSizeMode==false" class="selects-box">
+						<view @click="emit('clickPreChapter')" :style="{'color':font_color}">上一章</view>
+						<view @click="emit('clickKeep',book_id)" style="align-items: center; display: flex;">
+							<image :src="BookshelfStatusImg" style="height: 48rpx; margin-right: 10px; width: 213rpx;"></image>
+							<!-- <view :style="{'color':font_color}">{{BookshelfStatusTitle}}</view> -->
+						</view>
+						<view @click="emit('clickNextChapter')" :style="{'color':font_color}">下一章</view>
+				</view>
+		
+			<view v-if="showSettingFontSizeMode==true" style="display: flex;justify-content:space-between; align-items: center;padding-left: 5%;padding-right: 5%;margin-top: 5%;">
+				
+				<view :style="{'color':font_color}">自动购买下一章</view>
+				<!-- <checkbox-group @change="emit('selectAutoBuy',!isAutoBuy)">
+					<checkbox :checked="isAutoBuy" value="cb"  >  </checkbox>
+				</checkbox-group> -->
+				<view>
+					<image @click="onAutoClick()" :src="getAutoImgStyle()"  style="height: 50rpx;width: 107rpx;"></image>
 				</view>
-				<view @click="emit('clickNextChapter')" :style="{'color':font_color}">下一章</view>
 			</view>
 			
-			<view v-if="showSettingFontSizeMode==false" class="popup-content">
+			<view v-if="showSettingFontSizeMode==true" class="fontSelect" >
+			<!-- 	<view :style="{'color':font_color}">字号</view> -->
+				<view @touchstart="emit('changeFontSize',-1)" :style="{'color':font_color}">
+					<image src="../../static/imgs/read/setting/img_a_jian.png" style="width: 90rpx;height: 90rpx;"></image>
+				</view>
+				<view :style="{'color':font_color}">{{showFontSize}}</view>
+				<view @touchstart="emit('changeFontSize',+1)" :style="{'color':font_color}">
+					<image src="../../static/imgs/read/setting/img_a_jia.png" style="width: 90rpx;height: 90rpx;"></image>
+				</view>
+			</view>
+			<view v-if="showSettingFontSizeMode==true" style="height: 10rpx;"></view>
+			<view v-if="showSettingFontSizeMode==true" style="display: flex;justify-content: space-between;padding-left: 5%;padding-right: 5%;" >
+				<image @touchstart="emit('changeBgColor',0)" :src="tools.getBgResByIndex(0,bgColorIndex)" style="width: 100rpx;height: 100rpx;"></image>
+				<image @touchstart="emit('changeBgColor',1)" :src="tools.getBgResByIndex(1,bgColorIndex)"  style="width: 100rpx;height: 100rpx;"></image>
+				<image @touchstart="emit('changeBgColor',2)" :src="tools.getBgResByIndex(2,bgColorIndex)"  style="width: 100rpx;height: 100rpx;"></image>
+				<image @touchstart="emit('changeBgColor',3)" :src="tools.getBgResByIndex(3,bgColorIndex)"  style="width: 100rpx;height: 100rpx;"></image>
+				<image @touchstart="emit('changeBgColor',4)" :src="tools.getBgResByIndex(4,bgColorIndex)"  style="width: 100rpx;height: 100rpx;"></image>
+			</view>
+			<view v-if="showSettingFontSizeMode==true" style="height: 30rpx;" ></view>
+	
+			<!-- <view v-if="showSettingFontSizeMode==true" style="height: 50rpx;"></view> -->
+			
+		
+			<view class="popup-content">
 				<view class="items-box">
 					<view class="item-box" @click="emit('clickCatalog')" :style="{'color':font_color}">
-						目录
+						<image :src="getMLRes()" style="width: 95rpx;height: 95rpx;"></image>
 					</view>
+			<!-- 		<view class="item-box" v-if="mode === config.read_config.readMode.Dark" @click="emit('clickCatalog')" :style="{'color':font_color}">
+						<image src="../../static/imgs/read/setting/img_setting_ml1.png" style="width: 95rpx;height: 95rpx;"></image>
+					</view> -->
 					<view class="item-box" v-if="mode === config.read_config.readMode.Bright" @click="emit('clickMode',config.read_config.readMode.Dark)" :style="{'color':font_color}">
-						夜间
+						<image src="../../static/imgs/read/setting/img_setting_mode0.png" style="width: 95rpx;height: 95rpx;"></image>
 					</view>
 					<view class="item-box" v-if="mode === config.read_config.readMode.Dark" @click="emit('clickMode',config.read_config.readMode.Bright)" :style="{'color':font_color}">
-						日间
+						<image src="../../static/imgs/read/setting/img_setting_mode1.png" style="width: 95rpx;height: 95rpx;"></image>
 					</view>
-					<view class="item-box" @click="emit('clickOpenSetting')" :style="{'color':font_color}">
-						设置
+					<view class="item-box"  @click="emit('clickOpenSetting')" :style="{'color':font_color}">
+						<image :src="getSettingRes()" style="width: 95rpx;height: 95rpx;"></image>
 					</view>
+				<!-- 	<view class="item-box" v-if="mode === config.read_config.readMode.Dark" @click="emit('clickOpenSetting')" :style="{'color':font_color}">
+						<image src="../../static/imgs/read/setting/img_setting_btn1.png" style="width: 95rpx;height: 95rpx;"></image>
+					</view> -->
 				</view>	
 			</view>
 			
-			<view v-if="showSettingFontSizeMode==true" class="fontSelect" >
-				<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;" :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="display: flex;justify-content: center; align-items: center;	">
-				<checkbox-group @change="emit('selectAutoBuy',!isAutoBuy)">
-					<checkbox :checked="isAutoBuy" value="cb" :style="{'color':font_color}"> 自动购买下一章 </checkbox>
-				</checkbox-group>
-			</view>
-			<view v-if="showSettingFontSizeMode==true" style="height: 50rpx;"></view>
+			
+		
+		</view>
 		</uni-popup>
 	</view>
 </template>
@@ -73,8 +95,10 @@
 		tools.checkBookOnBookshelf(book_id,(is_on)=>{
 			if(is_on){
 				BookshelfStatusTitle.value = '已添加书架'
+				BookshelfStatusImg.value = getRemoveBookShelfRes()
 			}else{
 				BookshelfStatusTitle.value = '加入书架'
+				BookshelfStatusImg.value =  getAddBookShelfRes()
 			}
 		})
 		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
@@ -96,6 +120,14 @@
 	function showSettingFont(){
 		showSettingFontSizeMode.value = true
 	}
+	
+	function showSettingOther(){
+		showSettingFontSizeMode.value = false
+	}
+	
+	function getSetttingStatus():boolean{
+		return showSettingFontSizeMode.value
+	}
 	let showFontSize = ref(config.read_config.fontSizeList[ReadSetting().getReadSetting().fontSizeIndex])
 	let bgColorIndex = ref(ReadSetting().data.colorBgIndex)
 	let isAutoBuy = ref(ReadSetting().data.autoBuyNextChpater)
@@ -107,7 +139,11 @@
 	       // 可以在这里执行一些操作，比如更新其他状态或触发其他函数
 	     }
     );
-   
+	
+	watch(() => ReadSetting().data.colorBgIndex,()=>{
+		bgColorIndex.value = ReadSetting().data.colorBgIndex
+	})
+	
 	watch(() => ReadSetting().data.autoBuyNextChpater, // 监听的数据源
 		(newVal, oldVal) => {
 			isAutoBuy.value = newVal
@@ -131,12 +167,66 @@
 		tools.checkBookOnBookshelf(book_id,(is_on)=>{
 			if(is_on){
 				BookshelfStatusTitle.value = '已添加书架'
+				BookshelfStatusImg.value = getRemoveBookShelfRes()
 			}else{
 				BookshelfStatusTitle.value = '加入书架'
+				BookshelfStatusImg.value =  getAddBookShelfRes()
 			}
 		})
 	}
-	defineExpose({showSettingFont,updateBookshelfStatus})
+	
+	function getMLRes(){
+		if(mode.value == config.read_config.readMode.Dark){
+			return '../../static/imgs/read/setting/img_setting_ml_dark.png'
+		}
+		return '../../static/imgs/read/setting/img_setting_ml0.png'
+	}
+	
+	function getDarkModeRes(){
+		
+	}
+	
+	function getBrightModeRes(){
+		
+	}
+	
+	function getSettingRes(){
+		if(mode.value == config.read_config.readMode.Dark){
+			if(showSettingFontSizeMode.value==true){
+				return '../../static/imgs/read/setting/img_dark_setting_icon.png'
+			}
+			return '../../static/imgs/read/setting/img_bright_setting_icon.png'
+		}
+		if(showSettingFontSizeMode.value==true){
+			return '../../static/imgs/read/setting/img_setting_btn1.png'
+		}
+		return '../../static/imgs/read/setting/img_setting_btn0.png'
+	}
+	
+	function getAutoImgStyle(){
+		return ReadSetting().getReadSetting().autoBuyNextChpater?'../../static/imgs/read/setting/img_auto_on.png':'../../static/imgs/read/setting/img_auto_off.png'
+	}
+	
+	function onAutoClick(){
+		ReadSetting().changeAutoBuyNextChapter(!ReadSetting().getReadSetting().autoBuyNextChpater)
+	}
+	
+	function getAddBookShelfRes(){
+		if(mode.value == config.read_config.readMode.Dark){
+			return '../../static/imgs/read/setting/img_dark_add_bookshelf.png'
+		}
+		return '../../static/imgs/read/setting/img_add_bookshelf.png'
+	}
+	
+	function getRemoveBookShelfRes(){
+		if(mode.value == config.read_config.readMode.Dark){
+			return '../../static/imgs/read/setting/img_dark_remove_bookshelf.png'
+		}
+		return '../../static/imgs/read/setting/img_remove_bookshelf.png'
+	}
+	
+	let BookshelfStatusImg = ref('../../static/imgs/read/setting/img_add_bookshelf.png')
+	defineExpose({showSettingFont,updateBookshelfStatus,getSetttingStatus,showSettingOther})
 	
 </script>
 
@@ -147,6 +237,7 @@
 		align-items: center;
 		height: 80px;
 		width: 100%;
+		border-bottom: #eee solid 1px;
 		.item-box {
 			display: flex;
 			flex-flow: column;
@@ -178,5 +269,13 @@
 		height: 80px;
 		width: 100%;
 	}
+	
+	.mypopup {
+		border-top-left-radius: 45rpx;
+		border-top-right-radius: 45rpx;
+		position: absolute;
+		bottom: 0;
+		width: 100vw;
+	}
 
 </style>

xs-app/config/config.ts

@@ -131,17 +131,23 @@ export class config {
 	}
 	
 	public static read_config = {
-		colorList:['#f3a73f', '#adff2f','#b0c4de','#cd5c5c','#3B4144'],
+		colorList:['#ffffff', '#e6e1d6','#f5d6d6','#dce5d3','#d7dde3'],
 		lineHeight:1.8,
 		fontSizeList:[12,14,16,18,20,22,24],
 		readMode:{
 			Bright:1,
 			Dark:2
 		},
-		BrightFontColor:'#000000', //光亮模式下的字体颜色
+		BrightFontColor:'#404040', //光亮模式下的字体颜色
 		DarkFontColor:`#ffffff`, //黑暗模式下的字体颜色
 		BrightDbColor:`#ffffff`, //光亮模式下的底板颜色
-		DarkDbColor:`#000000` //黑暗模式下的底板颜色
+		DarkDbColor:`#000000`, //黑暗模式下的底板颜色
+		RedColor:'#FF4252',
+		colorBgResList:[{on_res:'../../static/imgs/read/setting/read_bg/img_bg_bai_1.png',off_res:'../../static/imgs/read/setting/read_bg/img_bg_bai_0.png'},
+		{on_res:'../../static/imgs/read/setting/read_bg/img_bg_he_1.png',off_res:'../../static/imgs/read/setting/read_bg/img_bg_he_0.png'},
+		{on_res:'../../static/imgs/read/setting/read_bg/img_bg_fen_1.png',off_res:'../../static/imgs/read/setting/read_bg/img_bg_fen_0.png'},
+		{on_res:'../../static/imgs/read/setting/read_bg/img_bg_lv_1.png',off_res:'../../static/imgs/read/setting/read_bg/img_bg_lv_0.png'},
+		{on_res:'../../static/imgs/read/setting/read_bg/img_bg_hui_1.png',off_res:'../../static/imgs/read/setting/read_bg/img_bg_hui_0.png'}]
 	}
 	
 	public static recharge_stype = {

xs-app/framework/tools.ts

@@ -2,6 +2,7 @@ import { config } from "../config/config";
 import { book_item_data, chapter_item_data, user_data } from "../data/data";
 import { BookshelfManager } from "../stores/bookshelfManager";
 import { ReadHistoryManager } from "../stores/readHistoryManager";
+import { ReadSetting } from "../stores/readSetting";
 import { UserData } from "../stores/userDataManager";
 import { UserStatus } from "../stores/userStatusManager";
 import { http } from "./http";
@@ -362,6 +363,16 @@ export class tools {
 		})
 	}
 	
+	public static get_book_un_lock_list(book_id:number,cb:Function){
+		http.DynamicRequest(config.url_confg.Dynamic.get_user_chapter_ids,{'book_id':book_id},(err,d)=>{
+			if(d.code==config.url_confg.StatesCode.SUCCESS){
+				cb(d.content)
+			}else{
+				cb(null)
+			}
+		})
+	}
+	
 	public static getCurBuyType(){
 		let type = config.pay_type.NEI_BU;
 		// switch (tools.getCurPlatform()){
@@ -376,4 +387,14 @@ export class tools {
 		// }
 		return type
 	}
+	
+	public static getBgResByIndex(index:number,select_index:number){
+		if(ReadSetting().getReadSetting().readMode==config.read_config.readMode.Dark){
+			return config.read_config.colorBgResList[index].off_res
+		}
+		if(index==select_index){
+			return config.read_config.colorBgResList[index].on_res
+		}
+		return config.read_config.colorBgResList[index].off_res
+	}
 }

xs-app/pages/readbook/read.vue

@@ -1,11 +1,12 @@
 <template>
-	<scroll-view class="scroll-container" :scroll-y="true" bounces="false"  :show-scrollbar="false" :refresher-enabled="false" :style="{'background-color': read_setting_data.readMode==config.read_config.readMode.Bright?config.read_config.colorList[read_setting_data.colorBgIndex]:DarkBg,'height':'100%' }">
+	<scroll-view class="scroll-container" :scroll-y="showRecharge==false" bounces="false"  :show-scrollbar="false" :refresher-enabled="false" :style="{'background-color': read_setting_data.readMode==config.read_config.readMode.Bright?config.read_config.colorList[read_setting_data.colorBgIndex]:DarkBg,'height':'100%' }">
 		<readPage  ref="readPages" @onTouchstart="onStartClickView"
 		@clickCatalog="onClickCatalog"
 		@clickPreChapter="onClickPreChapter"
 		@clickNextChapter="onClickNextChapter" 
 		@onTouchend="onEndClickView" @onTouchmove="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">
+		:text_content="book_read_data_item.book_content" :book_title="book_read_data_item.book_title"
+		:coin="getChapterNeedCoin()"@onClickBuy="onClickBuy" @BuyChapter="onBuyChapter">
 		</readPage>
 	</scroll-view>
 	<settingMenu ref="Menu" v-if="menuShow" :book_id="book_data.book_id" @clickCatalog="onClickCatalog"
@@ -15,9 +16,10 @@
 	@selectAutoBuy="onSelectAutoBuy" @clickKeep="onClickKeep">
 	</settingMenu>
 	<chapterCatalog v-if="showChapterList" :items="directoryList" :size="40" :remain="16"
-	 :scrollHeight="windowHeight*0.6" @clickChar="goToChapter" @Close="showChapterList=false">
+	 :scrollHeight="windowHeight*0.7" @clickChar="goToChapter" @Close="showChapterList=false"
+	 :unLockChapterList="unLockChapterList" :active="getCurChapterId()">
 	</chapterCatalog>
-	<recharge v-if="showRecharge" :coin="getChapterNeedCoin()" @Close="showRecharge=false" @onClickBuy="onClickBuy" @BuyChapter="onBuyChapter"></recharge>
+	<!-- <recharge v-if="showRecharge" :coin="getChapterNeedCoin()" @Close="showRecharge=false" @onClickBuy="onClickBuy" @BuyChapter="onBuyChapter"></recharge> -->
 </template>
 
 <script setup lang="ts">
@@ -132,11 +134,18 @@
 			}else{
 				UnLockChapter()
 			}
+		}else{
+			showRecharge.value = false
 		}
 		
 		
 	}
 	
+	function getCurChapterId(){
+		let data = tools.getCurChapterData(cur_read_chapter_index.value,directoryList)
+		return data.id
+	}
+	
 	let showCode = ref(false)
 	function check_book_chapter_is_buy(chapter_id:number,cb:Function=null){
 		tools.check_book_chapter_is_buy(book_data.book_id,chapter_id,(isBuy)=>{
@@ -179,6 +188,7 @@
 	}
 	
 	function UnLockChapter(){
+		showRecharge.value = false
 		readPages.value.find((child,index)=>{
 			child.UnLockChapter()
 		})
@@ -211,7 +221,7 @@
 	
 	function onClickCatalog(){
 		closeMenu()
-		showChapterList.value = true
+		onShowChapterList()
 	}
 	
 	function hideChapterList(){
@@ -255,7 +265,12 @@
 	}
 	
 	function showSetting(){
-		Menu.value.showSettingFont()
+		if(Menu.value.getSetttingStatus()){
+			Menu.value.showSettingOther()
+		}else{
+			Menu.value.showSettingFont()
+		}
+	
 	}
 	
 	function hideSetting(){
@@ -299,9 +314,16 @@
 	function onClickKeep(book_id:number){
 		tools.checkBookOnBookshelf(book_id,(is_on)=>{
 			if(is_on){
-				uni.showToast({
-					title:'当前书已在书架中了！',
-					icon:'none'
+				// uni.showToast({
+				// 	title:'当前书已在书架中了！',
+				// 	icon:'none'
+				// })
+				tools.deleteBookshelf([book_data.book_id],()=>{
+					Menu.value.updateBookshelfStatus()
+					uni.showToast({
+						title:'已移除书架！',
+						icon:'none'
+					})
 				})
 			}else{
 				tools.addBookshelf(book_data,()=>{
@@ -409,6 +431,9 @@
 								UnLockChapter()
 								showRecharge.value = false
 							}
+							uni.showToast({
+								title:'购买成功'
+							})
 						})
 						
 					})
@@ -471,6 +496,25 @@
 			})
 		},500)
 	}
+	let unLockChapterList = ref(null)
+	function onShowChapterList(){
+		uni.showLoading({
+			title:'...',
+		})
+		unLockChapterList.value =[]
+		tools.get_book_un_lock_list(book_data.book_id,(list)=>{
+			if(list!=null){
+				unLockChapterList.value = list
+				showChapterList.value = true
+			}else{
+				uni.showToast({
+					title:'加载错误',
+					icon:'none'
+				})
+			}
+			uni.hideLoading()
+		})
+	}
 </script>
 
 <style scoped lang="scss">

xs-app/stores/readSetting.ts

@@ -42,7 +42,7 @@ export const ReadSetting = defineStore('read-setting',()=>{
 				Object.assign(data,JSON.parse(obj))
 			}else{
 				data.colorBgIndex = 0;
-				data.fontSizeIndex = 0;
+				data.fontSizeIndex = 4;
 				data.readMode = config.read_config.readMode.Bright
 				data.autoBuyNextChpater = false
 				util.setStorage(config.storage_key.READ_SETTING,JSON.stringify(data))