tag1

src/views/ViewNote.vue

@@ -52,7 +52,7 @@
 <style>
 #noteText {
   color: black;
-  padding: 10px;
+  padding: 15px;
   vertical-align: top;
   width: 100%;
   height: auto;
@@ -86,8 +86,10 @@
   color: white;
 }
 
-
-
+button span {
+  font-size: 18px;
+  margin-left: -1px !important;
+}
 </style>
 <template>
   <div class="layout" onkeydown="keydown">
@@ -98,39 +100,38 @@
         <Header class="header">
           <div>
             <Row>
-              <Col :xs="{ span: 24, offset: 0}" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+              <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
                 :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
 
 
               <div style="background: white;width:100%;height:40px;">
                 <img style="height:40px;float:left;" src="favicon.png">
+                <div style="float:left;width:auto;">
+
+                  <Button-group size="large">
+
+                    <Button type="error"
+                      style="margin-left:5px; border-radius: 0px;font-size: 24px; font-family: Arial, sans-serif"
+                      icon="md-cloud-done">{{ this.noteForm.ttlDesc }}</Button>
+
+                  </Button-group>
 
-                <div style="height: 40px;float: left;padding-top: 15px;padding-left: 20px;">
-                  <Icon type="md-cloud-done" style="font-size: 22px;color:red" /><a class="noteKey">{{ noteForm.key
-                  }}</a>
                 </div>
 
 
                 <div style="float:right;width:auto;">
                   <Button-group size="large">
-                    <Button type="error" style="margin-left:5px; border-radius: 0px;font-size: 24px;"
-                      @click="deleteNote()" icon="md-trash"></Button>
-                    <Button type="error" style="margin-left:5px; border-radius: 0px;font-size: 24px;"
+                    <Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
                       @click="createNote()" icon="md-add"></Button>
+                    <Button type="error" style="margin-left:0px; border-radius: 0px;font-size: 24px;"
+                      @click="dropNote()" icon="md-trash"></Button>
                   </Button-group>
                 </div>
 
 
 
-                <!--
-              <div style="float:right;width:auto;">
-                <Button-group size="default">
-                  <Button type="error" @click="unLockNote()" icon="md-eye"></Button>
-                  <Button type="error" @click="lockNote()" icon="md-eye-off"></Button>
-                </Button-group>
 
-              </div>
-              -->
+
 
 
                 <!--
@@ -160,10 +161,10 @@
       <Content class="content">
         <div style="min-height: 650px;">
           <Row>
-            <Col :xs="{ span: 24, offset: 0}" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
+            <Col :xs="{ span: 24, offset: 0 }" :sm="{ span: 22, offset: 1 }" :md="{ span: 20, offset: 2 }"
               :lg="{ span: 18, offset: 3 }" :xl="{ span: 16, offset: 4 }" :xxl="{ span: 16, offset: 4 }">
             <Card :padding="0">
-              <div style="border-left: 3px solid #FF3366;">
+              <div style="border-left: 0px solid #FF3366;">
                 <div id="noteText" style="text-align: left;min-height: 650px;" class="monoFt"
                   v-html="this.noteForm.escapeText">
                   view2
@@ -177,7 +178,7 @@
       </Content>
 
 
-
+      <Footer class="layout-footer-center">2022 &copy; flagnote.com</Footer>
 
     </Layout>
 
@@ -190,6 +191,7 @@
 import { aesDecrypt, md5, unzip } from "@/libs/secret";
 import Jquery from "jquery";
 import { getSecretKey, getStoreKey } from "@/api/lock";
+import { deleteNote } from "@/api/note";
 import storage from "@/libs/storage";
 import { getEscapeText } from "@/libs/noteStorage";
 
@@ -206,6 +208,8 @@ export default {
         key: '',
         md5: '',
         lock: '0',
+        ttl: 3600,
+        ttlDesc: '',
       },
       secret: {
         storeKey: '',
@@ -228,12 +232,42 @@ export default {
       this.state.lock = noteMeta.lock;
       this.secret.cipher = noteMeta.cipher;
       this.noteForm.md5 = noteMeta.md5;
+      this.noteForm.ttl = noteMeta.ttl;
+      this.startClock();
+
       this.loadText();
     }
 
     this.bindEvent();
   },
   methods: {
+    startClock() {
+      let that = this;
+      window.setInterval(function () {
+        let ittl = parseInt(that.noteForm.ttl / 1000);
+        let mins = parseInt(ittl / 60);
+        if (mins < 10) {
+          mins = "0" + mins;
+        }
+        if (mins < 0) {
+          mins = "00";
+        }
+        let seds = parseInt(ittl % 60);
+        if (seds < 10) {
+          seds = "0" + seds;
+        }
+        if (seds < 0) {
+          seds = "00";
+        }
+        that.noteForm.ttlDesc = mins + ":" + seds;
+        that.noteForm.ttl -= 1000;
+        if (that.noteForm.ttl <= 0) {
+          that.storage.local.delete(that.secret.storeKey + '.text');
+          that.storage.session.delete(that.secret.storeKey + '.keyMeta');
+          location.reload();
+        }
+      }, 1000)
+    },
     decryptNote() {
       // let password = "123456";
       // let secretKey = getSecretKey(this.noteForm.key, password);
@@ -243,6 +277,15 @@ export default {
     createNote() {
       window.open("/");
     },
+    dropNote() {
+      deleteNote(this.noteForm.key).then(res => {
+        if (res) {
+          storage.local.delete(this.secret.storeKey + '.text');
+          storage.session.delete(this.secret.storeKey + '.keyMeta');
+          location.reload();
+        }
+      });
+    },
     loadText() {
 
       let password;