预售尚未开始时, 点击购买按钮后提示

src/components/main/GamePlaySection.vue

@@ -34,7 +34,6 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { ISpineData } from '@/utils/SpineRender'
 import SpineView from '@/components/main/SpineView.vue'
-import 'videojs-contrib-hls'
 import { getBrowser } from '@/utils/browser.util'
 
 @Component({

src/components/main/NftSection.vue

@@ -169,9 +169,10 @@ export default class extends Vue {
       this.presaleStatus = res.presale_info.state || 0
       this.presaleTitle = res.presale_info.title
       this.countdown = res.presale_info.countdown
-      if (this.presaleStatus === 2 && this.countdown > 0) {
+      if (this.presaleStatus === 1 && this.countdown > 0) {
         this.beginCountdown()
       }
+      AppModule.updatePresaleStat(this.presaleStatus)
       AppModule.updateCanBuy(this.presaleStatus === 2 &&
         this.numberRest > 0 &&
         !this.buyed

src/components/main/VideoSection.vue

@@ -14,7 +14,6 @@
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
-import 'videojs-contrib-hls'
 
 @Component({
   name: 'VideoSection',

src/components/market/NftItem.vue

@@ -4,7 +4,7 @@
     <div v-if="data.id" class="anim-border">
       <img class="card-main-img" :src="require(`@/assets/main/card/${data.skelName}.png`)"  alt=""/>
       <div class="name-label" :class="{'bottom': !data.showBuy}">{{data.name}}</div>
-      <div class="info-div" v-if="data.showBuy" @click="buyItem" :class="{'gray': data.stopBuy}">
+      <div class="info-div" v-if="data.showBuy" @click="buyItem" :class="{'gray': !canBuy}">
         <img class='buy-icon' src="@/assets/main/card/icon_buy.png" alt=""/>
         <div class="price-label">
           <span :class="{'price': data.price !== data.priceDiscount}">{{priceDiscountShow}} {{data.currency}}</span>
@@ -46,6 +46,10 @@ export default class extends Vue {
     return AppModule.walletConnected
   }
 
+  get canBuy() {
+    return !this.data.showBuy && AppModule.presaleStatus === 2
+  }
+
   get priceDiscountShow() {
     const v = Math.pow(10, this.data.decimals!)
     return (this.data.priceDiscount! / v).toFixed(3)
@@ -61,6 +65,14 @@ export default class extends Vue {
   }
 
   async buyItem() {
+    if (!this.canBuy) {
+      Message({
+        message: 'Can`t buy current time',
+        type: 'warning',
+        duration: 5 * 1000
+      })
+      return
+    }
     if (!this.accountId) {
       return await this.bc.connect()
     }

src/store/modules/app.ts

@@ -24,6 +24,7 @@ class App extends VuexModule implements IAppState {
   public walletConnected = false;
   public accountId = ''
   public chainId = 0
+  public presaleStatus = 0
   public canBuy = false
 
   @Action
@@ -56,6 +57,11 @@ class App extends VuexModule implements IAppState {
     this.UPDATE_CANBUY(val)
   }
 
+  @Action
+  public updatePresaleStat(val: number) {
+    this.UPDATE_PRESALE_STAT(val)
+  }
+
   @Mutation
   private TOGGLE_DEVICE(device: DeviceType) {
     this.device = device
@@ -87,6 +93,11 @@ class App extends VuexModule implements IAppState {
     this.canBuy = val
   }
 
+  @Mutation
+  private UPDATE_PRESALE_STAT(val: number) {
+    this.presaleStatus = val
+  }
+
   public get hexChainId() {
     return '0x' + this.chainId.toString(16)
   }