417 lines
8.3 KiB
XML
417 lines
8.3 KiB
XML
<template>
|
|
<div class="demo-page" >
|
|
<div class="header" onclick="gotokeyboard(0)">
|
|
<div>
|
|
<text class="title" if="{{isreadonly}}">{{ title }}</text>
|
|
<input
|
|
else
|
|
type="text"
|
|
class="title"
|
|
style="color: black"
|
|
value="{{ title }}"
|
|
readonly="{{isreadonly?'isreadonly':''}}"
|
|
placeholder="请输入标题"
|
|
onchange="titleChange"
|
|
|
|
/>
|
|
|
|
</div>
|
|
<text if="title" class="subtitle"
|
|
>{{ edit_date }} {{ edit_time }} | {{ words_number }}字</text
|
|
>
|
|
<text else class="subtitle"
|
|
>{{ date }} {{ time }} | {{ words_number }}字</text
|
|
>
|
|
</div>
|
|
<div>
|
|
<scroll class="content-scroll" onclick="gotokeyboard(1)">
|
|
<text class="content" if="{{isreadonly}}">{{ text }}</text>
|
|
<input
|
|
else
|
|
type="text"
|
|
readonly="{{isreadonly?'isreadonly':''}}"
|
|
class="content"
|
|
value="{{ text }}"
|
|
placeholder="点击开始书写"
|
|
onchange="textChange"
|
|
/>
|
|
</scroll>
|
|
</div>
|
|
<div class="footer"></div>
|
|
<text
|
|
if="text"
|
|
type="text"
|
|
style="font-size: 40px;text-align:center;"
|
|
onclick="changemode"
|
|
>{{ isreadonly ? '只读模式' : '编辑模式' }}</text
|
|
>
|
|
<image
|
|
src="/common/close.png"
|
|
class="close-button"
|
|
@click="backIndex"
|
|
/>
|
|
<image
|
|
src="/common/delete-button.png"
|
|
class="delete-button"
|
|
@click="deleteNote"
|
|
/>
|
|
<image
|
|
src="/common/save-button.png"
|
|
class="save-button"
|
|
@click="routeSave"
|
|
/>
|
|
</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: {
|
|
title: '',
|
|
text: '',
|
|
date: '',
|
|
time: '',
|
|
edit_date: '',
|
|
edit_time: '',
|
|
words_number: 0,
|
|
add_note: false,
|
|
count_choose: 0,
|
|
notes: [],
|
|
isreadonly:true,
|
|
},
|
|
onInit() {
|
|
this.add_note = this.add_note == "true" ? true : false;
|
|
this.isreadonly = this.newnote == "true" ? false : true;
|
|
this.words_number = this.text.length;
|
|
},
|
|
titleChange({ value }) {
|
|
this.title = value;
|
|
this.words_number = this.title.length;
|
|
},
|
|
backIndex() {
|
|
router.replace({
|
|
uri: '/pages/index',
|
|
});
|
|
},
|
|
changemode(){
|
|
this.isreadonly = !this.isreadonly;
|
|
},
|
|
textChange({ value }) {
|
|
this.text = value;
|
|
},
|
|
gotokeyboard(key) {
|
|
if (key == 0) {
|
|
router.replace({
|
|
uri: '/pages/keyboard',
|
|
params: {
|
|
inputWords: this.title || ' ', // 添加空值保护
|
|
type: "title",
|
|
text: this.text || ' ',
|
|
},
|
|
});
|
|
}else{
|
|
router.replace({
|
|
uri: '/pages/keyboard',
|
|
params: {
|
|
inputWords: this.text || ' ', // 添加空值保护
|
|
type: "text",
|
|
title: this.title || ' ',
|
|
},
|
|
});
|
|
}
|
|
},
|
|
onReady() {
|
|
// 清除缓存
|
|
router.clear();
|
|
// 时间
|
|
const date = new Date();
|
|
const month = (date.getMonth() + 1).toString();
|
|
const day = date.getDate().toString();
|
|
const hourNumber = date.getHours(); // 先获取数字型小时
|
|
const minute = date.getMinutes().toString().padStart(2, "0");
|
|
|
|
// 判断时段并转换为12小时制
|
|
const period = hourNumber >= 12 ? '下午' : '上午';
|
|
const hour12 = (hourNumber % 12 || 12).toString(); // 处理0点转为12的特殊情况
|
|
|
|
this.date = month + "月" + day + "日";
|
|
this.time = period + hour12 + ":" + minute;
|
|
this.count_choose = 0;
|
|
|
|
|
|
|
|
},
|
|
async routeSave() {
|
|
this.count_choose = 0;
|
|
if (this.title == "") {
|
|
this.showToast("标题不能为空");
|
|
return;
|
|
}
|
|
|
|
const data = storage.getSync({ key: 'notes' });
|
|
if (typeof data != 'string') {
|
|
console.error('存储数据格式错误，期望字符串，实际得到:', typeof data)
|
|
return []
|
|
}
|
|
let notes = data ? JSON.parse(data) : [];
|
|
const _note = {
|
|
title: this.title,
|
|
text: this.text,
|
|
date: this.date,
|
|
time: this.time,
|
|
words_number: this.words_number
|
|
};
|
|
if (this.add_note === true) {
|
|
notes.push(_note);
|
|
} else {
|
|
notes[Number(this.id)] = _note;
|
|
}
|
|
console.log(this.add_note,notes)
|
|
await storage.set({
|
|
key: 'notes',
|
|
value: JSON.stringify(notes),
|
|
})
|
|
this.showToast("笔记保存成功！");
|
|
router.replace({
|
|
uri: '/pages/index',
|
|
});
|
|
},
|
|
deleteNote() {
|
|
this.count_choose += 1;
|
|
if (this.count_choose === 1) {
|
|
this.showToast("再次点击以确认删除笔记");
|
|
} else if (this.count_choose === 2) {
|
|
storage.get({
|
|
key: 'notes',
|
|
default: '0',
|
|
success: (data) => {
|
|
let notes = data != '0' ? JSON.parse(data) : [];
|
|
if (notes.length > 0) {
|
|
notes.splice(Number(this.id), 1);
|
|
storage.set({
|
|
key: 'notes',
|
|
value: JSON.stringify(notes),
|
|
success: () => {
|
|
this.replacePage('/pages/index');
|
|
this.showToast("笔记删除成功！");
|
|
},
|
|
fail: (_, code) => {
|
|
this.showToast("笔记删除失败，错误码: " + code);
|
|
},
|
|
})
|
|
} else {
|
|
this.showToast("笔记为空！");
|
|
}
|
|
router.replace({
|
|
uri: '/pages/index',
|
|
});
|
|
},
|
|
})
|
|
}
|
|
},
|
|
showToast(msg) {
|
|
prompt.showToast({ message: msg });
|
|
},
|
|
replacePage(uri) {
|
|
router.replace({
|
|
uri: uri
|
|
})
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './../../assets/styles/style.scss';
|
|
.demo-page {
|
|
height: 514px;
|
|
width: 466px;
|
|
background-color: #f7f7f7;
|
|
display: flex;
|
|
border-radius: 50px;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.header {
|
|
width: 100%;
|
|
height: 150px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 50px 50px 0 0;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
width: 70%;
|
|
margin-top: 50px;
|
|
margin-left: 40px;
|
|
font-weight: bold;
|
|
}
|
|
.content-scroll {
|
|
margin-top: 10px;
|
|
left: 40px;
|
|
margin-right: 40px;
|
|
display: flex;
|
|
width: 390px;
|
|
height: 270px;
|
|
flex-direction: column;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.subtitle {
|
|
margin-top: 10px;
|
|
left: 40px;
|
|
color: #999999;
|
|
font-size: 30px;
|
|
}
|
|
|
|
.content {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.input-area {
|
|
background-color: gray;
|
|
margin-top: 15px;
|
|
margin-right: 15px;
|
|
margin-bottom: 15px;
|
|
margin-left: 15px;
|
|
width: 90%;
|
|
height: 80px;
|
|
justify-self: center;
|
|
border-radius: 15px;
|
|
}
|
|
|
|
.input-text {
|
|
width: inherit;
|
|
height: inherit;
|
|
background-color: white;
|
|
color: black;
|
|
font-size: 50px;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.candidate-area {
|
|
width: 100%;
|
|
height: 60px;
|
|
background-color: white;
|
|
}
|
|
|
|
.input-cache-area {
|
|
border-radius: 10px 10px 0 0;
|
|
margin-left: 7px;
|
|
width: auto;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
background-color: white;
|
|
}
|
|
|
|
.input-cache-text {
|
|
font-size: 25px;
|
|
color: black;
|
|
}
|
|
|
|
.candidate-words {
|
|
font-size: 30px;
|
|
width: 60px;
|
|
height: 60px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.keyboard {
|
|
display: flex;
|
|
}
|
|
|
|
.open-keyborad {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: absolute;
|
|
bottom: 0;
|
|
}
|
|
|
|
#keyboard-root {
|
|
background-color: #e8eaf7;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.symbol-line {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 3px;
|
|
}
|
|
|
|
.number-line {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 3px;
|
|
}
|
|
|
|
#input-bar-scroll {
|
|
width: 88%;
|
|
height: 60px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.close-keyboard {
|
|
width: 50px;
|
|
height: 40px;
|
|
}
|
|
|
|
.key {
|
|
box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.3);
|
|
background-color: white;
|
|
width: 40px;
|
|
height: 60px;
|
|
margin-top: 3px;
|
|
margin-right: 3px;
|
|
margin-bottom: 3px;
|
|
margin-left: 3px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.key text {
|
|
font-size: 30px;
|
|
color: black;
|
|
}
|
|
|
|
.footer {
|
|
display: flex;
|
|
height: 10px;
|
|
background-color: #e8eaf8;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.save-button {
|
|
height: 50px;
|
|
width: 50px;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
right: 40px;
|
|
top: 470px;
|
|
}
|
|
|
|
.delete-button {
|
|
height: 50px;
|
|
width: 50px;
|
|
position: absolute;
|
|
right: 40px;
|
|
top: 50px;
|
|
}
|
|
|
|
.close-button {
|
|
height: 48px;
|
|
width: 48px;
|
|
position: absolute;
|
|
left: 40px;
|
|
top: 470px;
|
|
}
|
|
</style>
|
|
|