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

<template>
	<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>
			
			<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}">
						<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>
		</uni-popup>
	</view>
</template>

<script setup lang="ts">
	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();
	const {book_id} = defineProps(['book_id'])
	let menu = ref(null)
	function change(e){
		if(e.show==false){
			emit('Close')
		}
		// console.log('当前模式：' + e.type + ',状态：' + e.show);
	}
	let type = 'bottom'
	onMounted(()=>{
		tools.checkBookOnBookshelf(book_id,(is_on)=>{
			if(is_on){
				BookshelfStatusTitle.value = '已添加书架'
				BookshelfStatusImg.value = getRemoveBookShelfRes()
			}else{
				BookshelfStatusTitle.value = '加入书架'
				BookshelfStatusImg.value =  getAddBookShelfRes()
			}
		})
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		menu.value.open(type)
	})
	let mode = ref(ReadSetting().data.readMode)
	let startPosY = ref(-1)
	function maskTouch(e){
		if(Math.abs(e.changedTouches[0].pageY-startPosY.value)>10){
			startPosY.value = -1
			emit('Close')
		}
	}
	function maskStart(e){
		startPosY.value = e.changedTouches[0].pageY
	}
	let showSettingFontSizeMode = ref(false)
	
	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)
	watch(
	     () => ReadSetting().data.fontSizeIndex, // 监听的数据源
	     (newVal, oldVal) => {
	       // console.log(`Count changed from ${oldVal} to ${newVal}`);
		   showFontSize.value = config.read_config.fontSizeList[ReadSetting().data.fontSizeIndex]
	       // 可以在这里执行一些操作，比如更新其他状态或触发其他函数
	     }
    );
	
	watch(() => ReadSetting().data.colorBgIndex,()=>{
		bgColorIndex.value = ReadSetting().data.colorBgIndex
	})
	
	watch(() => ReadSetting().data.autoBuyNextChpater, // 监听的数据源
		(newVal, oldVal) => {
			isAutoBuy.value = newVal
   		}
	);
	
	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))
	
	let BookshelfStatusTitle = ref('加入书架')
	
	function updateBookshelfStatus(){
		tools.checkBookOnBookshelf(book_id,(is_on)=>{
			if(is_on){
				BookshelfStatusTitle.value = '已添加书架'
				BookshelfStatusImg.value = getRemoveBookShelfRes()
			}else{
				BookshelfStatusTitle.value = '加入书架'
				BookshelfStatusImg.value =  getAddBookShelfRes()
			}
		})
	}
	
	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>

<style lang="scss" scoped>
	.selects-box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80px;
		width: 100%;
		border-bottom: #eee solid 1px;
		.item-box {
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
	}
	.items-box {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80px;
		width: 100%;
		margin-bottom: 5%;
		.item-box {
			display: flex;
			flex-flow: column;
			justify-content: center;
			align-items: center;
			height: 100%;
		}
	}
	
	.fontSelect {
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80px;
		width: 100%;
	}
	
	.mypopup {
		border-top-left-radius: 45rpx;
		border-top-right-radius: 45rpx;
		position: absolute;
		bottom: 0;
		width: 100vw;
	}

</style>