From ca6277e6bf526942f2d385501a5d41c4490e4252 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=BB=93=E5=8F=91=E5=8F=97=E9=95=BF=E7=94=9F?=
 <colorfulsweet@icloud.com>
Date: Wed, 22 Dec 2021 14:13:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E5=8D=A1=E5=8E=86=E5=8F=B2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/History.vue | 49 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/src/views/History.vue b/src/views/History.vue
index a8510af..01ff217 100644
--- a/src/views/History.vue
+++ b/src/views/History.vue
@@ -4,6 +4,16 @@
     <div class="line"></div>
     <div class="text">视迹</div>
   </div>
+  <div>
+    <div class="card-item" v-for="(item,index) in historyCardList" :key="index">
+      <div class="date">{{ dateSplit(dateList[index]) }}</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>
+    </div>
+  </div>
 </div>
 </template>
 
@@ -11,6 +21,7 @@
 export default {
   data() {
     return {
+      cardTypes: [],
       historyCardList: [],
       dateList: []
     }
@@ -18,9 +29,15 @@ export default {
   async created() {
     const history = JSON.parse(localStorage.getItem('card_history') || '[]')
     if(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)
     }
+  },
+  methods: {
+    dateSplit(val) {
+      return val.substring(5)
+    }
   }
 }
 </script>
@@ -47,4 +64,36 @@ export default {
     font-size: 18px;
   }
 }
+.card-item {
+  display: flex;
+  margin-bottom: 10px;
+  padding: 0 5px;
+  > .date {
+    padding: 10px 0;
+  }
+  > .circle {
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+    margin: 12px 8px;
+  }
+  > .content {
+    padding: 10px;
+    flex: 1;
+    color: #FFF;
+    border-radius: 6px;
+    position: relative;
+    > .triangle {
+      position: absolute;
+      width: 0;
+      height: 0;
+      border-left: 5px solid transparent;
+      border-right: 5px solid transparent;
+      border-top: 5px solid transparent;
+      border-bottom: 5px solid transparent;
+      left: -10px;
+      top: 12px;
+    }
+  }
+}
 </style>
\ No newline at end of file