first commit
This commit is contained in:
chorblack
350
pages/search/index.ux
Normal file
350
pages/search/index.ux
Normal file
@@ -0,0 +1,350 @@
|
||||
<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>
|
||||
Reference in New Issue
Block a user