163 lines
3.1 KiB
XML
163 lines
3.1 KiB
XML
<template>
|
|
<div class="demo-page">
|
|
<div class="header">
|
|
<img src="/common/title.png" class="title" />
|
|
</div>
|
|
<list class="list" if="!no_note">
|
|
<list-item
|
|
type="noteItem"
|
|
class="item"
|
|
for="{{notes}}"
|
|
@click="checkNote($idx)"
|
|
>
|
|
<text class="item-title">{{ $item.title }}</text>
|
|
<text class="item-text">{{ $item.text }}</text>
|
|
<text class="date">{{ $item.date }}</text>
|
|
</list-item>
|
|
</list>
|
|
|
|
<input type="button" class="add-button" @click="routeAdd" value="+" />
|
|
<div if="no_note" class="tip">
|
|
<text>————————</text>
|
|
<text>我本应劫惹神愤</text>
|
|
<text>孤绝一生流离人</text>
|
|
<text>如有因果尽加吾身</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: {
|
|
count: 0,
|
|
no_note: true,
|
|
notes: []
|
|
},
|
|
routeAdd() {
|
|
router.push({
|
|
uri: '/pages/edit-note',
|
|
params: {
|
|
add_note: "true",
|
|
newnote: "true"
|
|
}
|
|
});
|
|
},
|
|
onInit() {
|
|
storage.get({
|
|
key: 'notes',
|
|
default: '0',
|
|
success: data => {
|
|
if (data == '0') {
|
|
this.no_note = true;
|
|
prompt.showToast({ message: "欢迎使用笔记" });
|
|
} else {
|
|
this.notes = JSON.parse(data);
|
|
this.no_note = false;
|
|
}
|
|
},
|
|
fail: (_, code) => console.log('读取失败，错误码', code)
|
|
});
|
|
|
|
},
|
|
checkNote(note_id) {
|
|
const note = this.notes[note_id];
|
|
router.push({
|
|
uri: '/pages/edit-note',
|
|
params: {
|
|
add_note: "flase",
|
|
id: note_id,
|
|
title: note.title,
|
|
text: note.text,
|
|
edit_date: note.date,
|
|
edit_time: note.time
|
|
}
|
|
});
|
|
},
|
|
onRefresh() {
|
|
router.clear();
|
|
}
|
|
};
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
@import './../../assets/styles/style.scss';
|
|
|
|
.demo-page {
|
|
height: 100%;
|
|
width: 100%;
|
|
background-color: #f7f7f7;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 50px;
|
|
}
|
|
.header {
|
|
width: 100%;
|
|
height: 25%;
|
|
display: flex;
|
|
border-radius: 50px 50px 0 0;
|
|
}
|
|
|
|
.title {
|
|
display: flex;
|
|
font-size: 100px;
|
|
margin-top: 30px;
|
|
margin-left: 40px;
|
|
}
|
|
|
|
.list {
|
|
height: 75%;
|
|
display: flex;
|
|
flex-wrap: wrap-reverse;
|
|
}
|
|
.item {
|
|
margin-left: 15px;
|
|
margin-bottom: 15px;
|
|
border-radius: 30px;
|
|
padding: 15px;
|
|
width: 430px;
|
|
height: auto;
|
|
background-color: white;
|
|
color: black;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.item-title {
|
|
font-size: 35px;
|
|
height: 50px;
|
|
}
|
|
.item-text {
|
|
font-size: 25px;
|
|
color: #6d7878;
|
|
max-height: 110px;
|
|
}
|
|
.date {
|
|
width: 100%;
|
|
background-color: #ffffff;
|
|
color: #999999;
|
|
font-size: 20px;
|
|
bottom: 15px;
|
|
}
|
|
.tip {
|
|
position: absolute;
|
|
width: 80%;
|
|
bottom: 190px;
|
|
margin-left: 100px;
|
|
color: #999999;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.add-button {
|
|
height: 100px;
|
|
width: 100px;
|
|
font-size: 100px;
|
|
color: white;
|
|
position: absolute;
|
|
background-color: #ffb21e;
|
|
right: 50px;
|
|
bottom: 50px;
|
|
border-radius: 50px;
|
|
}
|
|
</style> |