settingMenu.vue 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. <template>
  2. <view>
  3. <uni-popup @touchstart="maskStart" @touchmove="maskTouch" :animation="false" mask-background-color="rgba(0,0,0,0)" ref="menu" background-color="#fff" @change="change">
  4. <view v-if="showSettingFontSizeMode==false" class="selects-box">
  5. <view @click="emit('clickPreChapter')">上一章</view>
  6. <view @click="emit('clickNextChapter')">下一章</view>
  7. </view>
  8. <view v-if="showSettingFontSizeMode==false" class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
  9. <view class="items-box">
  10. <view class="item-box" @click="emit('clickCatalog')">
  11. 目录
  12. </view>
  13. <view class="item-box" v-if="mode === config.read_config.readMode.Bright" @click="emit('clickMode',config.read_config.readMode.Dark)">
  14. 夜间
  15. </view>
  16. <view class="item-box" v-if="mode === config.read_config.readMode.Dark" @click="emit('clickMode',config.read_config.readMode.Bright)">
  17. 日间
  18. </view>
  19. <view class="item-box" @click="emit('clickOpenSetting')">
  20. 设置
  21. </view>
  22. </view>
  23. </view>
  24. <view v-if="showSettingFontSizeMode==true" class="fontSelect" >
  25. <view>字号</view>
  26. <view @touchstart="emit('changeFontSize',-1)">小</view>
  27. <view>{{showFontSize}}</view>
  28. <view @touchstart="emit('changeFontSize',+1)">大</view>
  29. </view>
  30. <view v-if="showSettingFontSizeMode==true" style="height: 10rpx;"></view>
  31. <view v-if="showSettingFontSizeMode==true" style="display: flex;justify-content: space-between;" >
  32. <view style="margin-left: 50rpx;">颜色</view>
  33. <image src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
  34. <image src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
  35. <image src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
  36. <image src="../../static/logo.png" style="width: 50rpx;height: 50rpx;"></image>
  37. <image src="../../static/logo.png" style="width: 50rpx;height: 50rpx; margin-right: 50rpx;"></image>
  38. </view>
  39. <view v-if="showSettingFontSizeMode==true" style="height: 30rpx;"></view>
  40. <view v-if="showSettingFontSizeMode==true" style="display: flex;justify-content: center; align-items: center; ">
  41. <checkbox> 自动购买下一章 </checkbox>
  42. </view>
  43. <view v-if="showSettingFontSizeMode==true" style="height: 50rpx;"></view>
  44. </uni-popup>
  45. </view>
  46. </template>
  47. <script setup lang="ts">
  48. import {ref, onMounted,defineProps,defineEmits, watch} from 'vue'
  49. import { config } from '../../config/config';
  50. import { ReadSetting } from '../../stores/readSetting';
  51. const emit = defineEmits(['clickCatalog','clickPreChapter','clickNextChapter','clickMode','clickOpenSetting','Close','changeFontSize','changeBgColor'])
  52. // const { windowWidth, windowHeight, statusBarHeight, platform, pixelRatio } = uni.getSystemInfoSync();
  53. let menu = ref(null)
  54. function change(e){
  55. if(e.show==false){
  56. emit('Close')
  57. }
  58. // console.log('当前模式:' + e.type + ',状态:' + e.show);
  59. }
  60. let type = 'bottom'
  61. onMounted(()=>{
  62. // open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
  63. menu.value.open(type)
  64. })
  65. let mode = ref(ReadSetting().getReadSetting().readMode)
  66. let startPosY = ref(-1)
  67. function maskTouch(e){
  68. if(Math.abs(e.changedTouches[0].pageY-startPosY.value)>10){
  69. startPosY.value = -1
  70. emit('Close')
  71. }
  72. }
  73. function maskStart(e){
  74. startPosY.value = e.changedTouches[0].pageY
  75. }
  76. let showSettingFontSizeMode = ref(false)
  77. function showSettingFont(){
  78. showSettingFontSizeMode.value = true
  79. }
  80. let showFontSize = ref(config.read_config.fontSizeList[ReadSetting().getReadSetting().fontSizeIndex])
  81. watch(
  82. () => ReadSetting().data.fontSizeIndex, // 监听的数据源
  83. (newVal, oldVal) => {
  84. console.log(`Count changed from ${oldVal} to ${newVal}`);
  85. showFontSize.value = config.read_config.fontSizeList[ReadSetting().getReadSetting().fontSizeIndex]
  86. // 可以在这里执行一些操作,比如更新其他状态或触发其他函数
  87. }
  88. );
  89. defineExpose({showSettingFont})
  90. </script>
  91. <style lang="scss" scoped>
  92. .selects-box{
  93. display: flex;
  94. justify-content: space-around;
  95. align-items: center;
  96. height: 80px;
  97. width: 100%;
  98. .item-box {
  99. display: flex;
  100. flex-flow: column;
  101. justify-content: center;
  102. align-items: center;
  103. height: 100%;
  104. }
  105. }
  106. .items-box {
  107. display: flex;
  108. justify-content: space-around;
  109. align-items: center;
  110. height: 80px;
  111. width: 100%;
  112. margin-bottom: 5%;
  113. .item-box {
  114. display: flex;
  115. flex-flow: column;
  116. justify-content: center;
  117. align-items: center;
  118. height: 100%;
  119. }
  120. }
  121. .fontSelect {
  122. display: flex;
  123. justify-content: space-around;
  124. align-items: center;
  125. height: 80px;
  126. width: 100%;
  127. }
  128. </style>