dictionary/pages/index/index.ux

<template>
  <div class="wrapper">
    <text class="title">{{ currentWord.word }}</text>
    <input
      class="btn"
      if="{{!showTranslation}}"
      type="button"
      value="我会了"
      onclick="handleKnow()"
    />
    <input
      class="btn"
      type="button"
      value="不会"
      onclick="handleNotKnow()"
      if="{{!showTranslation}}"
    />
    <text if="{{showTranslation}}" class="translation">{{
      currentWord.translation
    }}</text>
    <input
      class="btn"
      if="{{showTranslation}}"
      type="button"
      onclick="getNextWord()"
      value="下一个"
    />

    <!-- 新增底部按钮 -->
    <div class="bottom-buttons">
      <input
        class="btn error-btn"
        type="button"
        value="错题本"
        onclick="handleErrorBook()"
      />
      <input class="btn circle-btn" type="button" value="去下载" onclick="handleDownload()" if="{{showDownloadBtn}}"/>
      <input
        class="btn search-btn"
        type="button"
        value="搜索"
        onclick="handleSearch()"
        
      />
    </div>
  </div>
</template>

<script>
import router from '@blueos.app.appmanager.router'
import storage from '@blueos.storage.storage';
import prompt from '@blueos.window.prompt';
import file from '@blueos.storage.file'
export default {
  data: {
    currentWord: {},
    learnedList: [],
    noLearnList: [],
    showDownloadBtn:true,
    showTranslation: false,
    chapter: 0,
    globalIndex: 0,  // 全局索引
    totalCount: 0,
    jsonDataList: [
      'output_part_1.json',
      'output_part_2.json',
      'output_part_3.json',
      'output_part_4.json',
      'output_part_5.json',
      'output_part_6.json',
      'output_part_7.json',
      'output_part_8.json',
      'output_part_9.json',
      'output_part_10.json'
    ],
    idMap: {},
    wordList: []
  },
  onInit() {
    storage.get({
      key: 'isFinish',
      success: (data) => data == '1' ? this.showDownloadBtn = false : 0
    });
    storage.get({
      key: 'chapter',
      success: (data) => this.chapter = data ? parseInt(data) : 0
    });
    storage.get({
      key: 'globalIndex',
      success: (data) => this.globalIndex = data ? parseInt(data) : 0
    });
    storage.get({
      key: 'noLearnList',
      success: (data) => {
        if (data) {
          this.noLearnList = JSON.parse(data);
          // 构建初始id哈希表
          this.noLearnList.forEach(item => {
            this.idMap[item.id] = true;
          });
        }
      }
    });
    this.loadCurrentChapter();
  },
  handleDownload() {
    router.push({
      uri: 'pages/list' // 请确认实际页面路径
    });
  },
  async loadData(chapter) {
    const num = this.jsonDataList[chapter];

    // 将回调转换为Promise
    return new Promise((resolve, reject) => {
      file.readText({
        uri: `internal://files/${num}`,
        success: (data) => {
          try {
            const parsedData = JSON.parse(data.text);
            resolve(parsedData); // 正确传递解析后的数据
          } catch (e) {
            reject("JSON解析失败");
          }
        },
        fail: (_, code) => {
          reject(`文件读取失败，错误码：${code}`);
        }
      });
    });
  },
  async loadCurrentChapter() {
    try {
      this.wordList = await this.loadData(this.chapter);
      this.totalCount = this.wordList.length;

      // 处理越界情况
      if (this.globalIndex >= this.totalCount) {
        this.handleChapterEnd();
        return;
      }

      this.currentWord = this.wordList[this.globalIndex];
    } catch (e) {
      prompt.showToast({ message: '请先下载数据' });
    }
  },
  getNextWord() {
    this.globalIndex++;

    // 章节切换检查
    if (this.globalIndex >= this.totalCount) {
      this.handleChapterEnd();
    } else {
      this.currentWord = this.wordList[this.globalIndex];
    }

    this.showTranslation = false;
    this.saveProgress();
  },
  handleChapterEnd() {
    this.chapter++;
    this.globalIndex = 0;

    // 所有章节完成处理
    if (this.chapter >= this.jsonDataList.length) {
      prompt.showToast({ message: '所有章节已完成！' });
      this.chapter = 0;  // 循环到第一章
    }

    this.loadCurrentChapter();
  },

  saveProgress() {
    storage.set({ key: 'chapter', value: this.chapter.toString() });
    storage.set({ key: 'globalIndex', value: this.globalIndex.toString() });
  },

  handleKnow() {
    this.currentWord.mastered = true;
    this.getNextWord();
  },


  handleNotKnow() {
    this.showTranslation = true;

    if (!this.idMap[this.currentWord.id]) {
      this.idMap[this.currentWord.id] = true;
      this.noLearnList.push({ ...this.currentWord });
      storage.set({ key: 'noLearnList', value: JSON.stringify(this.noLearnList) });
    }
  },


  handleErrorBook() {
    router.push({
      uri: 'pages/mistakes'
    });
  },

  handleSearch() {
    router.push({
      uri: 'pages/search'
    });
  }
};
</script>

<style lang="scss">
@import './../../assets/styles/style.scss';

.wrapper {
  @include flex-box-mixins(column, center, center);
  position: relative;
  height: 100%;
  padding-bottom: 120px;

  .title {
    font-size: 7 * $size-factor;
    text-align: center;
    color: $black;
    margin-bottom: 40px;
  }

  .btn {
    width: 55 * $size-factor;
    height: 12 * $size-factor;
    border-radius: 7 * $size-factor;
    background-color: $brand;
    color: $white;
    font-size: 5 * $size-factor;
    margin-top: 7 * $size-factor;
  }

  .translation {
    text-align: center;
    margin: 10px 0;
    font-size: 5 * $size-factor;
    color: #666;
  }

  .bottom-buttons {
    position: fixed;
    bottom: 30px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;

    .btn {
      width: 35%;
      height: 14 * $size-factor;
      border-radius: 10 * $size-factor;
      font-size: 5 * $size-factor;

      .error-btn {
        background-color: #ff4d4f;
        margin-left: 10px;
      }

      .search-btn {
        background-color: #1890ff;
        margin-right: 10px;
      }

      .circle-btn {
        width: 25%;
        border-radius: 50%;
      }
    }
  }
}
</style>