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++;
      setTimeout(() => { this.zhuzi() }, this.settings.textSpeed)
    }
    else {
      if (this.settingsPage) {
        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>