抽卡历史记录

package.json

@@ -9,6 +9,7 @@
   "dependencies": {
     "axios": "^0.22.0",
     "core-js": "^3.6.5",
+    "dayjs": "^1.10.7",
     "vue": "^3.2.16",
     "vue-axios": "^3.3.7",
     "vue-router": "^4.0.11",

src/App.vue

@@ -1,15 +1,38 @@
 <template>
   <router-view class="dark"></router-view>
+  <div class="menu-wrapper">
+    <span class="iconfont icon-settings" :class="{active: menuShow}" @click="menuShow = !menuShow"></span>
+    <div class="menu-list" :style="{width: menuShow ? '180px' : 0}">
+      <div class="menu-item">
+        <span class="iconfont icon-home"></span>
+        <div>首页</div>
+      </div>
+      <div class="menu-item">
+        <span class="iconfont icon-compass"></span>
+        <div>视迹</div>
+      </div>
+      <div class="menu-item">
+        <span class="iconfont icon-record"></span>
+        <div>观呼吸</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
 export default {
   name: 'App',
+  data() {
+    return {
+      menuShow: false
+    }
+  }
 }
 </script>
 
 <style lang="less">
-@import url('./assets/reset.less');
+@import url('./assets/css/reset.less');
+@import url('./assets/css/iconfont.less');
 html, body, #app {
   height: 100%;
 }
@@ -49,4 +72,48 @@ body {
 .center {
   text-align: center;
 }
+.menu-wrapper {
+  position: fixed;
+  bottom: 30px;
+  left: 10%;
+  .icon-settings {
+    font-size: 50px;
+    display: inline-block;
+    background-color: #000;
+    border-radius: 25px;
+    transition: transform 0.6s;
+    transition-timing-function: ease-out;
+    transform: rotate(0deg);
+    position: relative;
+    z-index: 2;
+    &.active {
+      transform: rotate(180deg);
+    }
+  }
+  .menu-list {
+    display: flex;
+    overflow: hidden;
+    position: absolute;
+    left: 0;
+    top: 0;
+    padding-left: 50px;
+    padding-bottom: 6px;
+    padding-top: 4px;
+    background-color: #FFF;
+    color: #000;
+    z-index: 1;
+    width: 180px;
+    font-size: 12px;
+    border-radius: 25px;
+    transition: width 0.6s;
+    transition-timing-function: ease-out;
+    .iconfont {
+      font-size: 28px;
+    }
+  }
+  .menu-item {
+    text-align: center;
+    flex: 0 0 60px;
+  }
+}
 </style>

src/assets/css/iconfont.less

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3041072 */
+  src: url('../icon/iconfont.woff2?t=1640071019366') format('woff2'),
+       url('../icon/iconfont.woff?t=1640071019366') format('woff'),
+       url('../icon/iconfont.ttf?t=1640071019366') format('truetype');
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-compass:before {
+  content: "\eb70";
+}
+
+.icon-settings:before {
+  content: "\e699";
+}
+
+.icon-home:before {
+  content: "\e69b";
+}
+
+.icon-record:before {
+  content: "\e6ed";
+}
+

src/views/Introduce.vue

@@ -40,6 +40,8 @@
 </template>
 
 <script>
+import dayjs from 'dayjs'
+
 export default {
   data() {
     return {
@@ -61,7 +63,25 @@ export default {
   },
   methods: {
     async showCard() {
-      this.currentCard = await this.$http.post('/api/rainbow_card/card/random')
+      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)
+      if(lastCard) {
+        this.currentCard = await this.$http.get('/api/rainbow_card/card/get', {params: {cardNum: lastCard.num}})
+      } else {
+        this.currentCard = await this.$http.post('/api/rainbow_card/card/random')
+        history.push({
+          date: today,
+          num: this.currentCard.num,
+          typeCode: this.currentCard.typeCode
+        })
+        localStorage.setItem('card_history', JSON.stringify(history))
+      }
       this.cardTypes.forEach(item => {
         if(item.code === this.currentCard.typeCode) {
           this.currentCard.rgb = item.rgb

yarn.lock

@@ -3011,6 +3011,11 @@ dashdash@^1.12.0:
   dependencies:
     assert-plus "^1.0.0"
 
+dayjs@^1.10.7:
+  version "1.10.7"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.10.7.tgz#2cf5f91add28116748440866a0a1d26f3a6ce468"
+  integrity sha512-P6twpd70BcPK34K26uJ1KT3wlhpuOAPoMwJzpsIWUxHZ7wpmbdZL/hQqBDfz7hGurYSa5PhzdhDHtt319hL3ig==
+
 debug@2.6.9, debug@^2.2.0, debug@^2.3.3:
   version "2.6.9"
   resolved "https://registry.yarnpkg.com/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"