rainbow-card-web/src/views/Introduce.vue

<template>
<div class="dark">
  <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" style="position: absolute;top: 154px;width: 100%;">
      <van-button type="success" @click="showCard" >查收今天卡片</van-button>
    </div>
  </template>
  <div class="btn-wrapper" :style="{visibility: isShowCard ? 'visible' : 'hidden'}" style="margin: 20px 0 50px 0">
    <van-button type="danger" >保存</van-button>
    <van-button type="default" @click="treeHoleShow = true" style="margin: 0 30px">树洞</van-button>
    <van-button type="success" @click="nextQuestion">心灵问句({{ questionIndex + 1 }}/{{ questions.length }})</van-button>
  </div>
  <div class="question center" v-if="questionIndex !== -1">{{ questions[questionIndex] }}</div>
  <div class="center tip" v-show="questionIndex === -1">
    <span @click="showIntroduce = !showIntroduce">{{ showIntroduce ? '收起介绍' : '查看介绍' }}</span>
  </div>
  <div class="introduce" v-show="showIntroduce && questionIndex === -1">
    <p>彩虹卡全部都是智慧和肯定的话语。</p>
    <p>彩虹卡是你人生的灵性陪伴者。它们提供你思想、 希望、安慰、确定和爱的想法。</p>
    <p>这些卡片由七种不同颜色的卡片所组成，每种颜色卡片有35个不同的想法。</p>
    <p>彩虹卡总共提供了 245则像彩虹般充满智慧的话语。 当你抽卡时最好闭上眼睛，并以左手来抽卡。</p>
    <p class="center">********</p>
    <p>你所抽到的每张卡片都反映出你当下最关心的问题，你的心情以及你内在的需要。</p>
    <p class="center">********</p>
    <div class="card-list">
      <div class="card-item" :style="{backgroundColor: cardType.rgb}" v-for="cardType in cardTypes" :key="cardType.code">
        {{ cardType.name }}（{{ cardType.chakra }}）{{ cardType.describe }}
      </div>
    </div>
  </div>
  <van-dialog v-model:show="treeHoleShow" title="记录心·晴" confirm-button-text="存进树洞" cancel-button-text="算了" show-cancel-button @confirm="saveToTreeHole" @closed="treeHoleClosed">
    <template #default>
      <van-cell-group inset>
        <van-field
          v-model="treeHoleContent"
          rows="5"
          autosize
          type="textarea"
          maxlength="100"
          placeholder="只能保存一条呦"
          show-word-limit
        />
      </van-cell-group>
    </template>
  </van-dialog>
</div>
</template>

<script>
import dayjs from 'dayjs'

export default {
  data() {
    return {
      showIntroduce: false, // 显示介绍
      cardTypes: [], // 所有的卡片类型
      isShowCard: false, // 展示当前抽到的卡片
      questions: [ // 心灵问句
        '看到这段文字，收到了什么？',
        '在这个过程中，感受到什么？',
        '给你带来什么样的新思考？',
        '你将采取怎样的行动？'
      ],
      questionIndex: -1, // 展示的心灵问句
      currentCard: null, // 当前卡片信息
      treeHoleShow: false, // 树洞
      treeHoleContent: localStorage.getItem('tree_hole')
    }
  },
  async created() {
    this.cardTypes = await this.$http.get('/api/rainbow_card/card/types')
  },
  methods: {
    async showCard() {
      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
        }
      })
      this.isShowCard = true
    },
    nextQuestion() {
      if(this.questionIndex === this.questions.length - 1) {
        this.questionIndex = -1
      } else {
        this.questionIndex++
      }
    },
    saveToTreeHole() {
      localStorage.setItem('tree_hole', this.treeHoleContent)
    },
    treeHoleClosed() {
      this.treeHoleContent = localStorage.getItem('tree_hole')
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  padding-top: 50px;
}
.tip {
  color: #858585;
  font-size: 14px;
}
.introduce {
  padding: 20px;
  line-height: 26px;
}
.card-list {
  font-size: 14px;
  color: #FFF;
  text-shadow: 1px 1px 6px black;
  > .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 10px;
    top: 50%;
    transform: translateY(-50%);
    box-sizing: border-box;
    text-shadow: 1px 1px #000;
    line-height: 22px;
  }
}
.question {
  margin-top: 50px;
}
</style>