351 lines
9.3 KiB
XML
351 lines
9.3 KiB
XML
<template>
|
||
<div class="container">
|
||
<text class="words-preview" >{{ words }}</text>
|
||
<div class="container-row-candidate">
|
||
<swiper class="wrapper" edit="true" index="{{currentIndexKey}}" id="mySwiper">
|
||
<div class="swiper-item" for="{{ count }}">
|
||
<text onclick="displayMean($idx)" class="letter-text">{{ $item }}</text>
|
||
</div>
|
||
</swiper>
|
||
</div>
|
||
<!-- 滑动键盘区域 -->
|
||
<!-- 第一行 -->
|
||
<div class="keyboard-row-scroll" scroll-x="true" if="show">
|
||
<div class="keyboard-row" for="{{row1Letters}}">
|
||
<input
|
||
type="button"
|
||
class="input-button"
|
||
value="{{$item}}"
|
||
onclick="input($item)"
|
||
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 第二行 -->
|
||
<div class="keyboard-row-scroll" scroll-x="true" if="show">
|
||
<div class="keyboard-row" for="{{row2Letters}}">
|
||
<input
|
||
type="button"
|
||
class="input-button"
|
||
value="{{$item}}"
|
||
onclick="input($item)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- 第三行 -->
|
||
<div class="keyboard-row-scroll" scroll-x="true" if="show">
|
||
<div class="keyboard-row" for="{{row3Letters}}">
|
||
<input
|
||
type="button"
|
||
class="input-button"
|
||
value="{{$item}}"
|
||
onclick="input($item)"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div class="function-row">
|
||
|
||
<input type="button" value="空格" class="space-button" onclick="input(' ')"></input>
|
||
<input type="button" value="←" class="backspace-button" onclick="backspace"></input>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import file from '@blueos.storage.file'
|
||
import prompt from '@blueos.window.prompt';
|
||
export default {
|
||
data: {
|
||
fromPage: "", //转跳输入法前的页面的Uri
|
||
fromPageData: null, //转跳输入法前的页面的要保存的数据（转跳页面时传过来一个对象，输入完成后传回去）
|
||
letters: "", //键盘页输入的拼音
|
||
words: " ", //键盘页中，提供编辑框后8个字符的预览
|
||
inputWords: "", //编辑框中的文字，点确定即带上此数据转跳回原页面
|
||
sindex: 0, //键盘滑动位置，实现从候选页返回时可以返回到原页面
|
||
mode: "en", //输入模式标记，中文cn，英文en，符号数字标记
|
||
caps: -1, //大小写标记
|
||
row1Letters: ["q", "w", "e", "r", "t", "y", "u", "i", "o", "p"],
|
||
row2Letters: ["a", "s", "d", "f", "g", "h", "j", "k", "l"],
|
||
row3Letters: ["z", "x", "c", "v", "b", "n", "m"],
|
||
jsonDataList: ['a.json', 'b.json', 'c.json', 'd.json', 'e.json', 'f.json', 'g.json', 'h.json', 'i.json', 'j.json', 'k.json', 'l.json', 'm.json', 'n.json', 'o.json', 'p.json', 'q.json', 'r.json', 's.json', 't.json', 'u.json', 'v.json', 'w.json', 'x.json', 'y.json', 'z.json'],
|
||
currentIndex: null,
|
||
index: -1,
|
||
count: [],
|
||
show: true,
|
||
wordJsonDataList: [
|
||
'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'
|
||
],
|
||
results: {},
|
||
currentIndexKey:0,
|
||
},
|
||
onInit() {
|
||
|
||
},
|
||
async loadWordData(chapter) {
|
||
const num = this.wordJsonDataList[chapter];
|
||
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(chapter,id) {
|
||
try {
|
||
|
||
let wordList = await this.loadWordData(chapter);
|
||
const keys = Object.keys(wordList);
|
||
const firstValue = wordList[keys[0]].id;
|
||
let num = id-firstValue;
|
||
let currentWord = wordList[num];
|
||
console.log(currentWord);
|
||
prompt.showToast({message:currentWord.translation});
|
||
} catch (e) {
|
||
prompt.showToast({ message: '请先下载数据' });
|
||
}
|
||
},
|
||
displayMean($idx){
|
||
const keys = Object.keys(this.results);
|
||
console.log(keys.length);
|
||
if ($idx >= 0 && $idx < keys.length) {
|
||
const key = keys[$idx];
|
||
const value = this.results[key];
|
||
console.log(`第 ${$idx} 个键:`, key);
|
||
console.log(`第 ${$idx} 个值:`, value);
|
||
this.loadCurrentChapter(value.chapter,value.id);
|
||
} else {
|
||
console.log("索引超出范围！");
|
||
}
|
||
},
|
||
hideInput(){
|
||
this.show = !this.show;
|
||
},
|
||
async searchWord() {
|
||
//this.currentIndexKey = 0;
|
||
const swiper = this.$element('mySwiper');
|
||
if (swiper && swiper.swipeTo) {
|
||
swiper.swipeTo({
|
||
index: 0,
|
||
behavior: 'smooth' // 添加过渡动画
|
||
});
|
||
}
|
||
if (!this.words || this.words.length === 0) {
|
||
console.log("Error: 'this.words' is empty or undefined.");
|
||
return;
|
||
}
|
||
let searchIndex = this.words[0];
|
||
if (searchIndex >= 'a' && searchIndex <= 'z') {
|
||
let fileNameIndex = searchIndex.charCodeAt(0) - 'a'.charCodeAt(0);
|
||
try {
|
||
if (this.index !== fileNameIndex) {
|
||
this.index = fileNameIndex;
|
||
this.currentIndex = await this.loadData(fileNameIndex);
|
||
}
|
||
|
||
// 保存符合条件的 key 和 value
|
||
this.results = {};
|
||
let count = 0;
|
||
|
||
for (let key in this.currentIndex) {
|
||
if (key.startsWith(this.words) && count < 5) {
|
||
this.results[key] = this.currentIndex[key]; // 保存 key 和 value
|
||
count++;
|
||
}
|
||
}
|
||
|
||
// 输出匹配的结果
|
||
if (Object.keys(this.results).length > 0) {
|
||
//console.log(`Matched keys and values starting with '${this.words}':`, this.results);
|
||
this.count = Object.keys(this.results).slice(0, 5);
|
||
} else {
|
||
console.log(`No keys starting with '${this.words}' found.`);
|
||
prompt.showToast({message:`'${this.words}' not found.`});
|
||
}
|
||
} catch (error) {
|
||
console.error(`Error loading data from ${fileNameIndex}:`, error);
|
||
}
|
||
} else {
|
||
console.error("Error: 'searchIndex' is not a valid lowercase letter.");
|
||
}
|
||
},
|
||
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}`);
|
||
}
|
||
});
|
||
});
|
||
},
|
||
// 修改输入方法
|
||
input(symbol) {
|
||
|
||
this.inputWords += symbol;
|
||
this.words = this.inputWords.slice(-8);
|
||
if (this.words.length > 0) {
|
||
this.searchWord();
|
||
}
|
||
},
|
||
backspace() {
|
||
|
||
var that = this;
|
||
this.wordsBackspace();
|
||
that.words = that.inputWords.substring(that.inputWords.length - 8)
|
||
if (this.words.length > 0) {
|
||
this.searchWord();
|
||
}
|
||
},
|
||
|
||
wordsBackspace() {
|
||
var that = this;
|
||
if (that.inputWords.length <= 1) {
|
||
that.inputWords = "";
|
||
} else {
|
||
that.inputWords = that.inputWords.substring(0, that.inputWords.length - 1);
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.container {
|
||
flex-direction: column;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
left: 0px;
|
||
top: 0px;
|
||
width: 466px;
|
||
height: 100%;
|
||
background-color: #000000;
|
||
}
|
||
.keyboard-row-scroll {
|
||
width: 466px;
|
||
height: 60px;
|
||
margin: 5px 0;
|
||
}
|
||
.keyboard-row {
|
||
flex-direction: row;
|
||
height: 60px;
|
||
}
|
||
|
||
.input-button {
|
||
width: 70px;
|
||
height: 60px;
|
||
min-width: 60px;
|
||
margin: 0 3px;
|
||
font-size: 24px;
|
||
border-radius: 5px;
|
||
background-color: #444;
|
||
color: white;
|
||
}
|
||
.function-row {
|
||
position:absolute;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
width: 466px;
|
||
margin-top: 10px;
|
||
top:450px;
|
||
}
|
||
.mode-button {
|
||
width: 150px;
|
||
height: 60px;
|
||
background-color: #666;
|
||
border-radius: 30px;
|
||
}
|
||
|
||
.space-button {
|
||
margin: 0 5px;
|
||
height: 60px;
|
||
color: #f0f8ff;
|
||
background-color: #9f83fb;
|
||
width: 50%;
|
||
border-radius: 30px;
|
||
}
|
||
|
||
.backspace-button {
|
||
width: 50%;
|
||
height: 60px;
|
||
background-color: #f44336;
|
||
border-radius: 30px;
|
||
}
|
||
|
||
|
||
.container-row-candidate {
|
||
flex-direction: row;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
left: 0px;
|
||
top: 0px;
|
||
width: 466px;
|
||
height: 180px;
|
||
}
|
||
|
||
|
||
.words-preview {
|
||
/* 居中定位方案 */
|
||
width: 100%;
|
||
margin: 5px 0;
|
||
font-size: 40px;
|
||
height: 60px;
|
||
|
||
/* 弹性盒子居中 */
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
/* 文本样式 */
|
||
color: #f0f8ff;
|
||
text-align: center;
|
||
|
||
/* 移除冗余属性 */
|
||
position: absolute;
|
||
/* margin-left: 50px */
|
||
}
|
||
.wrapper {
|
||
width: 466px;
|
||
height: 200px;
|
||
}
|
||
.swiper-item {
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
.letter-text {
|
||
font-size: 40px;
|
||
text-align: center;
|
||
color: #f0f8ff;
|
||
}
|
||
</style>
|