first commit

pages/index/index.ux

@@ -0,0 +1,163 @@
+<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>