tnbapp/src/views/user/vip.vue

<template>
  <v-container fill-height>
    <v-row v-if="this.$store.state.user.userInfo == null || this.$store.state.user.userInfo.vip === false" justify="center" align="center">
      <v-col>
        <v-card
          class="mx-auto"
          max-width="500"
        >
          <v-row justify="center">
            <v-col cols="10" style="text-align: center">
              <h3>开启VIP，享受无限观看次数。获取专属VIP标记！</h3>
            </v-col>
          </v-row>
          <v-row justify="center">
            <v-col cols="10" style="text-align: center">
              <v-btn x-large outlined color="indigo" @click="()=>this.$router.push('/vip/plan')">开启</v-btn>
            </v-col>
          </v-row>

        </v-card>
      </v-col>
    </v-row>
    <v-row v-else justify="center" align="center">
      <v-col>
        <v-card
          class="mx-auto"
          max-width="400"
        >
          <v-img
            class="white--text align-end"
            height="200px"
            src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"
          >
            <v-card-title>你好，尊贵的 VIP: {{ this.$store.state.user.userInfo.username }}</v-card-title>
          </v-img>

          <v-card-text class="text--primary">
            <div>VIP 到期时间： <strong>{{ this.$store.state.user.userInfo.expiredAt }}</strong></div>
          </v-card-text>

          <v-card-actions>
            <v-btn
              color="orange"
              text
              @click="()=>this.$router.push('/vip/plan')"
            >
              续费
            </v-btn>
          </v-card-actions>
        </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

<script>
import checkPower from '@/utils/check-power.vue'
import TimeUtil from '@/utils/time-util.vue'
export default {
  name: 'UserVip',
  data() {
    return {
      checkPower,
      TimeUtil
    }
  },
  created() {
    console.log(this.$store.state.user.userInfo.vip)
  }
}
</script>

<style>
</style>