123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137 |
- <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">
- <view v-if="showSettingFontSizeMode==false" class="selects-box">
- <view @click="emit('clickPreChapter')">上一章</view>
- <view @click="emit('clickNextChapter')">下一章</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>
- <view class="item-box" v-if="mode === config.read_config.readMode.Bright" @click="emit('clickMode',config.read_config.readMode.Dark)">
- 夜间
- </view>
- <view class="item-box" v-if="mode === config.read_config.readMode.Dark" @click="emit('clickMode',config.read_config.readMode.Bright)">
- 日间
- </view>
- <view class="item-box" @click="emit('clickOpenSetting')">
- 设置
- </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>
- <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, watch} from 'vue'
- import { config } from '../../config/config';
- import { ReadSetting } from '../../stores/readSetting';
- 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);
- }
- 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])
-
- 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>
- <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>
|