树洞

src/views/History.vue

@@ -6,11 +6,12 @@
   </div>
   <div>
     <div class="card-item" v-for="(item,index) in historyCardList" :key="index">
-      <div class="date">{{ dateSplit(dateList[index]) }}</div>
+      <div class="date">{{ dateSplit(history[index].date) }}</div>
       <div class="circle" :style="{backgroundColor: cardTypes[item.typeCode-1].rgb}"></div>
       <div class="content" :style="{backgroundColor: cardTypes[item.typeCode-1].rgb}">
         {{ item.content }}
         <div class="triangle" :style="{borderRightColor: cardTypes[item.typeCode-1].rgb}"></div>
+        <div class="tree-hole" v-if="history[index].treeHole">{{ history[index].treeHole }}</div>
       </div>
     </div>
   </div>
@@ -23,15 +24,14 @@ export default {
     return {
       cardTypes: [],
       historyCardList: [],
-      dateList: []
+      history: []
     }
   },
   async created() {
-    const history = JSON.parse(localStorage.getItem('card_history') || '[]')
-    if(history.length) {
+    this.history = JSON.parse(localStorage.getItem('card_history') || '[]')
+    if(this.history.length) {
       this.cardTypes = await this.$http.get('/api/rainbow_card/card/types')
-      this.historyCardList = await this.$http.post('/api/rainbow_card/card/list', history.map(item => item.num))
-      this.dateList = history.map(item => item.date)
+      this.historyCardList = await this.$http.post('/api/rainbow_card/card/list', this.history.map(item => item.num))
     }
   },
   methods: {
@@ -94,6 +94,11 @@ export default {
       left: -10px;
       top: 12px;
     }
+    > .tree-hole {
+      border-top: 1px dashed #FFF;
+      margin-top: 5px;
+      padding-top: 5px;
+    }
   }
 }
 </style>

src/views/Introduce.vue

@@ -36,7 +36,7 @@
       </div>
     </div>
   </div>
-  <van-dialog v-model:show="treeHoleShow" title="记录心·晴" confirm-button-text="存进树洞" cancel-button-text="算了" show-cancel-button @confirm="saveToTreeHole" @closed="treeHoleClosed">
+  <van-dialog v-model:show="treeHoleShow" title="记录心·晴" confirm-button-text="存进树洞" cancel-button-text="算了" show-cancel-button @confirm="saveToTreeHole" @open="treeHoleOpen">
     <template #default>
       <van-cell-group inset>
         <van-field
@@ -57,6 +57,15 @@
 <script>
 import dayjs from 'dayjs'
 
+let history = [] // date num typeCode treeHole
+const historyJson = localStorage.getItem('card_history')
+if(historyJson) {
+  history = JSON.parse(historyJson)
+}
+function findLastCard() { // 今天已经抽过的卡片
+  const today = dayjs().format('YYYY-MM-DD')
+  return history.find(item => item.date === today)
+}
 export default {
   data() {
     return {
@@ -72,7 +81,7 @@ export default {
       questionIndex: -1, // 展示的心灵问句
       currentCard: null, // 当前卡片信息
       treeHoleShow: false, // 树洞
-      treeHoleContent: localStorage.getItem('tree_hole')
+      treeHoleContent: null
     }
   },
   async created() {
@@ -80,14 +89,7 @@ export default {
   },
   methods: {
     async showCard() {
-      const today = dayjs().format('YYYY-MM-DD')
-      const historyJson = localStorage.getItem('card_history')
-      let history = [] // date num typeCode
-      if(historyJson) {
-        history = JSON.parse(historyJson)
-      }
-      // 今天已经抽过的卡片
-      let lastCard = history.find(item => item.date === today)
+      let lastCard = findLastCard()
       if(lastCard) {
         this.currentCard = await this.$http.get('/api/rainbow_card/card/get', {params: {cardNum: lastCard.num}})
       } else {
@@ -114,10 +116,13 @@ export default {
       }
     },
     saveToTreeHole() {
-      localStorage.setItem('tree_hole', this.treeHoleContent)
+      let lastCard = findLastCard()
+      lastCard.treeHole = this.treeHoleContent
+      localStorage.setItem('card_history', JSON.stringify(history))
     },
-    treeHoleClosed() {
-      this.treeHoleContent = localStorage.getItem('tree_hole')
+    treeHoleOpen() {
+      let lastCard = findLastCard()
+      this.treeHoleContent = lastCard.treeHole
     }
   }
 }