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="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')" 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">
				<view class="items-box">
					<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)" :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)" :style="{'color':font_color}">
						日间
					</view>
					<view class="item-box" @click="emit('clickOpenSetting')" :style="{'color':font_color}">
						设置
					</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>
		</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();
	let menu = ref(null)
	function change(e){
		if(e.show==false){
			emit('Close')
		}
		// console.log('当前模式：' + e.type + ',状态：' + e.show);
	}
	let type = 'bottom'
	onMounted(()=>{
		// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
		menu.value.open(type)
	})
	let mode = ref(ReadSetting().getReadSetting().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
	}
	
	let showFontSize = ref(config.read_config.fontSizeList[ReadSetting().getReadSetting().fontSizeIndex])
	let bgColorIndex = ref(ReadSetting().getReadSetting().colorBgIndex)
	let isAutoBuy = ref(ReadSetting().getReadSetting().autoBuyNextChpater)
	watch(
	     () => ReadSetting().data.fontSizeIndex, // 监听的数据源
	     (newVal, oldVal) => {
	       // console.log(`Count changed from ${oldVal} to ${newVal}`);
		   showFontSize.value = config.read_config.fontSizeList[ReadSetting().getReadSetting().fontSizeIndex]
	       // 可以在这里执行一些操作，比如更新其他状态或触发其他函数
	     }
    );
   
	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))
	defineExpose({showSettingFont})
	
</script>

<style lang="scss" scoped>
	.selects-box{
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 80px;
		width: 100%;
		.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%;
	}

</style>