From 77b155f58b4722090f694fa61535c17dd4c1c97d 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: Sat, 11 Dec 2021 22:28:53 +0800
Subject: [PATCH] =?UTF-8?q?=E6=8A=BD=E5=8D=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.vue             |  2 +-
 src/views/Guide.vue     |  6 +---
 src/views/Introduce.vue | 73 ++++++++++++++++++++++++++++++++++-------
 3 files changed, 64 insertions(+), 17 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index c9b2570..5d994dc 100644
--- a/src/App.vue
+++ b/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;
diff --git a/src/views/Guide.vue b/src/views/Guide.vue
index f5e8fa0..26f99e0 100644
--- a/src/views/Guide.vue
+++ b/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 ? '了解，开始指引' : '下一步'
diff --git a/src/views/Introduce.vue b/src/views/Introduce.vue
index c3e7f06..589f820 100644
--- a/src/views/Introduce.vue
+++ b/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>
\ No newline at end of file