抽卡历史

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>