atri/pages/index/index.ux

<template>
  <div class="page" @swipe="ban">
    <image src="/common/bg.png"></image>
    <image
      style="position: absolute; top: 0; left: 0"
      if="{{trueEnd}}"
      src="/common/ATRI_TrueEnding.png"></image>
    <text
      class="btn"
      style="top: 150px"
      if="{{trueEnd}}"
      @click="loadRecoveryData('TE')">
      TRUE END
    </text>
    <text class="btn" style="top: 200px" @click="toPage('detail')">START</text>
    <text class="btn" style="top: 250px" @click="toRecovery()">LOAD</text>
    <text class="btn" style="top: 300px" @click="toSettings()">SYSTEM</text>
    <text class="btn" style="top: 350px" @click="exit">EXIT</text>

    <div
      class="page"
      style="position: absolute; background-color: #ffffff"
      if="{{recovery}}"
      @swipe="back()">
      <scroll scroll-y="true" bounces="true" class="scroll1 page">
        <text
          class="menu-btn"
          for="{{recoveryData}}"
          style="font-size: 30px"
          @click="loadRecoveryData($idx)">
          存档{{ $idx + 1 }}
        </text>
      </scroll>
    </div>
    <div
      class="page"
      style="
        position: absolute;
        background-color: #ffffff;
        flex-wrap: nowrap;
        flex-direction: column;
        align-items: center;
        justify-content: center;
      "
      if="{{tips}}"
      @swipe="ban()">
      <text class="font24">在"SYSTEM"中调整显示速度和文字大小</text>
      <text class="font24">游戏中左滑进入菜单，右滑返回</text>
      <text class="font24" style="color: #ff0000">
        请先到SYSTEM界面下载文本和图像资源！！
      </text>
      <text class="font24">---------------</text>
      <text class="font24">移植：@chorblack</text>
      <text class="font24">感谢：@Wxz226@liuyuze61</text>
      <text class="font24">---------------</text>
      <text class="font24" style="color: #00a2ff" @click="closeTips()">
        确定
      </text>
    </div>
  </div>
</template>

<script>
  import router from '@blueos.app.appmanager.router'
  import storage from '@blueos.storage.storage'
  import prompt from '@blueos.window.prompt'
  export default {
    data: {
      recovery: false,
      recoveryData: [],
      settingsPage: false,
      settings: {
        textSpeed: 40,
        textSize: 22,
      },
      showText: '',
      index: 0,
      tips: false,
      trueEnd: false,
    },
    onInit() {
      storage.get({
        key: 'recoveryData',
        success: (data) => {
          if (data) {
            this.recoveryData = JSON.parse(data)
          }
        },
        fail: () => {},
      })
      storage.get({
        key: 'settings',
        success: (data) => {
          if (data) {
            this.settings = JSON.parse(data)
          }
        },
        fail: () => {},
      })
      storage.get({
        key: 'tips',
        success: (data) => {
          if (data) {
            if (JSON.parse(data) !== 61) {
              this.tips = true
            }
          } else {
            this.tips = true
          }
        },
        fail: () => {},
      })
      storage.get({
        key: 'fin',
        success: (data) => {
          if (data) {
            const fin = JSON.parse(data)
            console.log(fin)
            if (fin.HE === true && fin.BE === true) {
              this.trueEnd = true
            }
          }
        },
        fail: () => {},
      })
    },
    toPage(page) {
      router.push({ uri: `pages/${page}` })
    },
    exit() {
      this.$app.exit()
    },
    ban() {
      console.log('ban')
    },
    toRecovery() {
      if (this.recoveryData.length > 0) {
        router.push({
          uri: `pages/recovery`,
        })
        this.recovery = true
      } else {
        prompt.showToast({
          message: '无存档',
        })
      }
    },
    toSettings() {
      router.replace({
        uri: 'pages/settings',
      })
      //this.settingsPage = true;
      //this.zhuzi();
    },
    back(a) {
      if (a.direction == 'right' && this.recovery) {
        this.recovery = false
      } else if (this.settingsPage) {
        this.settingsPage = false
      }
    },
    loadRecoveryData(idx) {
      router.push({
        uri: `pages/detail`,
        params: {
          load: idx,
        },
      })
    },
    changeTextSize(e) {
      this.settings.textSize = e.progress
    },
    changeTextSpeed(e) {
      this.settings.textSpeed = e.progress
    },
    /*
    zhuzi() {
      const text = `Atri -My Dear Moments-\n文字显示样本`
      if (this.index < text.length) {
        this.showText += text.charAt(this.index)
        this.index++
        this.a = setTimeout(() => {
          this.zhuzi()
        }, this.settings.textSpeed)
      } else {
        if (this.settingsPage) {
          this.b = setTimeout(() => {
            this.index = 0
            this.showText = ''
            this.zhuzi()
          }, 2000)
        }
      }
    },
    */
    saveSettings() {
      storage.set({
        key: 'settings',
        value: JSON.stringify(this.settings),
        success: () => {
          prompt.showToast({ message: '保存成功' })
        },
        fail: () => {},
      })
    },
    closeTips() {
      this.tips = false
      storage.set({
        key: 'tips',
        value: JSON.stringify(61),
        success: () => {},
        fail: () => {},
      })
    },
  }
</script>

<style>
  .page {
    width: 390px;
    height: 450px;
  }
  .btn {
    position: absolute;
    font-size: 36px;
    left: 32px;
    height: 50px; /* 新增高度限制 */
    font-weight: bold;
    color: #0a55bc;
  }

  .scroll1 {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    text-overflow: ellipsis;
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: center;
  }
  .menu-btn {
    width: 250px;
    height: 61px;
    background-color: rgba(80, 192, 231, 0.7);
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    text-align: center;
    margin-bottom: 20px;
  }
  .scroll {
    position: absolute;
    bottom: 0;
    top: 325px;
    left: 8px;
    right: 0;
    width: 328px;
    height: 155px;
    text-overflow: ellipsis;
  }
  .slider {
    position: absolute;
    width: 230px;
    top: 125px;
    left: 53px;
  }
  .text {
    position: absolute;
    font-size: 24px;
    color: #ffffff;
    top: 71px;
    left: 18px;
    font-weight: bold;
  }
  .font24 {
    font-size: 23px;
    color: #000000;
    font-weight: bold;
    text-align: center;
  }
</style>