抽卡

src/App.vue

@@ -23,7 +23,7 @@ body {
   .btn {
     border-radius: 4px;
     border: none;
-    padding: 5px 15px;
+    padding: 7px 15px;
     font-size: 12px;
     &.btn-primary {
       color: #FFF;

src/views/Guide.vue

@@ -3,7 +3,7 @@
   <div class="text-wrapper center" :class="{hide: hideText}">
     <div class="text" v-for="(item,index) in guideText[guideIndex]" :key="index" v-text="item"></div>
   </div>
-  <div class="btn-wrapper center">
+  <div class="btn-wrapper">
     <button class="btn" @click="nextStep(-1)" v-if="guideIndex > 1" style="margin-right: 45px">上一步</button>
     <button class="btn btn-primary" @click="nextStep(1)" v-text="btnText"></button>
     <div class="tip" v-show="guideIndex > 0">准备好后，点击"下一步"</div>
@@ -25,10 +25,6 @@ export default {
       hideText: false
     }
   },
-  // async created() {
-  //   const result = await this.$http.get('/api/rainbow_card/card/types')
-  //   console.log(result)
-  // },
   computed: {
     btnText() {
       return this.guideIndex === 0 ? '了解，开始指引' : '下一步'

src/views/Introduce.vue

@@ -1,8 +1,18 @@
 <template>
-<div>
-  <div class="card-list show">
-    <div class="card-item" :style="{backgroundColor: cardType.rgb}" v-for="cardType in cardTypes" :key="cardType.code"></div>
-  </div>
+<div class="container">
+  <template v-if="isShowCard">
+    <div class="card-show" :style="{backgroundColor: currentCard.rgb}">
+      <div class="card-content">{{ currentCard.content }}</div>
+    </div>
+  </template>
+  <template v-else>
+    <div class="card-list card-show">
+      <div class="card-item" :style="{backgroundColor: cardType.rgb}" v-for="cardType in cardTypes" :key="cardType.code"></div>
+    </div>
+    <div class="btn-wrapper">
+      <button class="btn btn-primary" @click="showCard" >查收今天卡片</button>
+    </div>
+  </template>
   <div class="center tip">
     <span @click="showIntroduce = !showIntroduce">{{ showIntroduce ? '收起介绍' : '查看介绍' }}</span>
   </div>
@@ -27,17 +37,39 @@
 export default {
   data() {
     return {
-      showIntroduce: false,
-      cardTypes: []
+      showIntroduce: false, // 显示介绍
+      cardTypes: [], // 所有的卡片类型
+      isShowCard: false, // 展示当前抽到的卡片
+      questions: [ // 心灵问句
+        '看到这段文字，收到了什么？',
+        '在这个过程中，感受到什么？',
+        '给你带来什么样的新思考？',
+        '你将采取怎样的行动？'
+      ],
+      currentCard: null
     }
   },
   async created() {
     this.cardTypes = await this.$http.get('/api/rainbow_card/card/types')
+  },
+  methods: {
+    async showCard() {
+      this.currentCard = await this.$http.post('/api/rainbow_card/card/random')
+      this.cardTypes.forEach(item => {
+        if(item.code === this.currentCard.typeCode) {
+          this.currentCard.rgb = item.rgb
+        }
+      })
+      this.isShowCard = true
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
+.container {
+  padding-top: 50px;
+}
 .tip {
   color: #858585;
   font-size: 14px;
@@ -51,14 +83,33 @@ export default {
   font-size: 14px;
   color: #FFF;
   text-shadow: 1px 1px 6px black;
-  &.show {
-    margin: auto;
-    width: 75%;
-    border-radius: 30px;
-  }
   > .card-item {
     padding: 0 5px;
     min-height: 26px;
   }
 }
+.card-show {
+  margin: auto;
+  width: 75%;
+  border-radius: 30px;
+  overflow: hidden;
+  border-radius: 12px;
+  height: 182px;
+  position: relative;
+  > .card-content {
+    position: absolute;
+    width: 100%;
+    padding: 0 5px;
+    top: 50%;
+    transform: translateY(-50%);
+    box-sizing: border-box;
+    text-shadow: 1px 1px #000;
+    text-align: center;
+  }
+}
+.btn-wrapper {
+  position: absolute;
+  top: 154px;
+  width: 100%;
+}
 </style>