use data from web api

.env.development

@@ -1,3 +1,4 @@
 VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
 VUE_APP_CHAIN_ID=97
 VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545/'
+VUE_APP_BASE_API='https://game2006api-test.kingsome.cn'

.env.production

@@ -1,3 +1,4 @@
 VUE_APP_WALLET_INFURAID='e7743d46923911fa8850619b7a7f6d9d'
 VUE_APP_CHAIN_ID=97
 VUE_APP_CHAIN_RPC='https://data-seed-prebsc-1-s1.binance.org:8545/'
+VUE_APP_BASE_API='https://game2006api.kingsome.cn'

src/api/Mall.ts

@@ -0,0 +1,29 @@
+import request from '@/utils/request'
+
+export const searchBox = (data: any) =>
+  request({
+    url: '/webapp/index.php?c=Market&a=searchBox',
+    method: 'get',
+    data
+  })
+
+export const getNftList = (data: any) =>
+  request({
+    url: '/webapp/index.php?c=Market&a=getMyNftList',
+    method: 'get',
+    data
+  })
+
+export const getNftDetail = (data: any) =>
+  request({
+    url: '/webapp/index.php?c=Market&a=getNftDetail',
+    method: 'get',
+    data
+  })
+
+export const buyBox = (data: any) =>
+  request({
+    url: '/webapp/index.php?c=Market&a=buyBox',
+    method: 'get',
+    data
+  })

src/components/main/CardScroller.vue

@@ -7,7 +7,6 @@
         <div v-for="(datas, index) in cardDatas" :key="index"
              class="card-container"
         >
-<!--          <card v-for="data in datas" :data="data" :key="data.id"></card>-->
           <nft-item v-for="c in datas" :key="c.id" :data="c" class="card"></nft-item>
         </div>
       </div>
@@ -26,125 +25,25 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator'
+import { Component, Vue, Watch } from 'vue-property-decorator'
 import Card from '@/components/main/Card.vue'
 import NftItem from '@/components/market/NftItem.vue'
 import { ISpineData } from '@/utils/SpineRender'
+declare module 'vue/types/vue' {
+  interface Vue {
+    heros?: ISpineData[]
+  }
+}
 
 @Component({
   name: 'CardScroller',
-  props: ['datas'],
+  props: ['heros'],
   components: {
     Card,
     NftItem
   }
 })
 export default class extends Vue {
-  private heros: ISpineData[] = [
-    {
-      id: 'card_0',
-      price: '200 USDT',
-      name: 'aoi',
-      skelName: 'n_aoi',
-      type: 1,
-      class: 0,
-      repeat: true,
-      scale: 2
-    },
-    {
-      id: 'card_1',
-      price: '200 USDT',
-      name: 'yamada',
-      skelName: 'n_yamada',
-      type: 1,
-      class: 0,
-      repeat: true,
-      scale: 2
-    },
-    {
-      id: 'card_2',
-      price: '200 USDT',
-      name: 'lazar',
-      skelName: 'n_lazar',
-      type: 1,
-      class: 1,
-      repeat: true,
-      scale: 2
-    },
-    {
-      id: 'card_3',
-      price: '200 USDT',
-      name: 'hill',
-      skelName: 'n_hill',
-      type: 1,
-      class: 2,
-      repeat: true,
-      scale: 2
-    },
-    {
-      id: 'card_4',
-      price: '200 USDT',
-      name: 'kurosawa',
-      skelName: 'n_kurosawa',
-      type: 1,
-      class: 1,
-      repeat: true,
-      scale: 2
-    },
-    {
-      id: 'card_5',
-      price: '200 USDT',
-      name: 'canoe',
-      skelName: 'n_canoe',
-      type: 0,
-      class: 0,
-      repeat: true,
-      scale: 1.4
-    },
-    {
-      id: 'card_6',
-      price: '200 USDT',
-      name: 'miffy',
-      skelName: 'n_miffy',
-      type: 0,
-      class: 0,
-      repeat: true,
-      scale: 1.4
-    },
-    {
-      id: 'card_7',
-      price: '200 USDT',
-      name: 'dragonscale',
-      skelName: 'n_dragonscale',
-      type: 0,
-      class: 2,
-      repeat: true,
-      scale: 1.4
-    },
-    {
-      id: 'card_8',
-      price: '200 USDT',
-      name: 'astral',
-      skelName: 'n_astral',
-      type: 0,
-      class: 2,
-      repeat: true,
-      scale: 1.4
-    },
-    {
-      id: 'card_9',
-      price: '200 USDT',
-      name: 'mariana',
-      skelName: 'n_mariana',
-      type: 0,
-      class: 2,
-      repeat: true,
-      scale: 1.4
-    },
-    {},
-    {}
-  ];
-
   $refs!: {
     listContainer: HTMLFormElement
   }
@@ -158,8 +57,10 @@ export default class extends Vue {
   private scrolling = false;
   private scrollTime = 1;
 
-  created() {
+  @Watch('heros')
+  private onHerosChange() {
     let count = 0
+    this.heros = this.heros || []
     // this.scrollWidth = window.getComputedStyle(this.$refs.listContainer).width
     this.totalPage = Math.ceil(this.heros.length / this.pageSize)
     let datas: ISpineData[] = []
@@ -173,7 +74,15 @@ export default class extends Vue {
         datas.push(this.heros[i])
       }
     }
+    if (datas.length < this.pageSize) {
+      for (let i = datas.length; i < this.pageSize; i++) {
+        datas.push({})
+      }
+    }
     this.cardDatas.push(datas)
+  }
+
+  created() {
     const self = this
     Vue.nextTick(function() {
       self.scrollWidth = self.$refs.listContainer?.offsetWidth
@@ -316,7 +225,7 @@ export default class extends Vue {
     justify-content: space-between;
   }
   .action-bar {
-    bottom: 30vh;
+    bottom: 40vh;
   }
   .list-container {
     height: 100%;
@@ -343,7 +252,7 @@ export default class extends Vue {
     bottom: 0;
   }
   .action-bar {
-    bottom: 30vh;
+    bottom: 40vh;
   }
   .list-container {
     height: 100%;

src/components/main/HomeSection.vue

@@ -15,7 +15,7 @@
     </div>
     <div class="home_right_panel">
       <div class="spine-list" :style="'transform:scale('+mainScale+')'">
-        <home-hero class="hero-von" v-for="hero in heros" :data="hero" :key="hero.id"></home-hero>
+        <home-hero class="hero-von" v-for="hero in heroDatas" :data="hero" :key="hero.id"></home-hero>
       </div>
     </div>
   </section>
@@ -38,7 +38,7 @@ export default class extends Vue {
   private mainScale = 1
   private widthDesign = 1920
   private widthSmall = 767
-  private heros: ISpineData[] = [
+  private heroDatas: ISpineData[] = [
     { id: 'hero1', skelName: 'pic_hero2', animName: 'animation', repeat: true, scale: 1.1 },
     { id: 'hero2', skelName: 'pic_hero3', animName: 'animation', repeat: true, scale: 1.1 },
     { id: 'hero3', skelName: 'pic_hero9', animName: 'animation', repeat: true, scale: 1.1 },
@@ -73,7 +73,7 @@ export default class extends Vue {
 
 <style lang="scss" scoped>
 #home_section {
-  background-image: url('~@/assets/main/p1/bg_p1.png');
+  background-image: url('../../assets/main/p1/bg_p1.png');
   display: flex;
   flex-direction: row;
   justify-content: space-between;

src/components/main/MainFooter.vue

@@ -16,9 +16,6 @@
     <div class="rightPart">
       <span class="community-title">JOIN OUR COMMUNITY</span>
       <div class="community-list">
-<!--        <a href="">-->
-<!--          <img src="@/assets/main/footer/fb.png">-->
-<!--        </a>-->
         <a href="https://twitter.com/CebgGame">
           <img src="@/assets/main/footer/twitter.png">
         </a>
@@ -103,6 +100,7 @@ export default class extends Vue {
     .footer{
       flex-direction: column;
       align-items: center;
+      height: 580px;
     }
     .centerPart{
       width: 80vw;

src/components/main/NftSection.vue

@@ -5,19 +5,19 @@
         <div class="time">20:59:59</div>
         <div class="title">Countdown</div>
       </div>
-      <div class="text">
+      <div class="text" v-html="hint">
-        February 2, UTC19:05 0.321USDT/HERO
-        Each NFT has only 100
       </div>
     </div>
-    <card-scroller class="card-scroller"></card-scroller>
+    <card-scroller :heros="heroDatas" class="card-scroller"></card-scroller>
-    <div class="count-label">35/100</div>
+    <div class="count-label">{{numberRest}}/{{numberTotal}}</div>
   </section>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import CardScroller from '@/components/main/CardScroller.vue'
+import { searchBox } from '@/api/Mall'
+import { ISpineData } from '@/utils/SpineRender'
 
 @Component({
   name: 'NftSection',
@@ -27,7 +27,53 @@ import CardScroller from '@/components/main/CardScroller.vue'
   }
 })
 export default class extends Vue {
+  heroDatas: ISpineData[] = []
+  hint = ''
+  numberTotal = 0
+  numberRest = 0
+  buyed = false
+  created() {
+    this.fetchData()
+  }
 
+  async fetchData() {
+    await this.queryPresale()
+  }
+
+  async queryPresale() {
+    const res: any = await searchBox({ account: '', page: 0 })
+    console.log(res)
+    if (!res.errcode) {
+      this.heroDatas.length = 0
+      if (res.presale_info) {
+        this.numberTotal = res.presale_info.total_num || 0
+        this.numberRest = this.numberTotal - (res.presale_info.sold_num || 0)
+        this.numberRest = this.numberRest < 0 ? 0 : this.numberRest
+        this.hint = res.presale_info.hint.replace(/\\n/g, '<br/>')
+        this.buyed = !!res.presale_info.buyed
+      }
+      for (const data of res.rows) {
+        const heroData: any = {
+          name: data.name,
+          class: data.job.toLowerCase(),
+          recordId: data.box_id,
+          id: data.box_id,
+          skelName: `n_${data.name.toLowerCase()}`,
+          directBuy: true,
+          stopBuy: this.buyed
+        }
+        if (data.currency_list && data.currency_list.length > 0) {
+          const priceData: any = data.currency_list[0]
+          heroData.discount = priceData.discount_rate
+          heroData.price = priceData.original_price
+          heroData.priceDiscount = priceData.discount_price
+          heroData.currency = priceData.name
+          heroData.coinAddress = priceData.contract_address
+        }
+        this.heroDatas.push(heroData)
+      }
+    }
+  }
 }
 </script>
 
@@ -67,6 +113,7 @@ export default class extends Vue {
     font-family: "zitic",serif;
     font-size: 20px;
     margin-top: 20px;
+    white-space: pre-wrap;
   }
 }
 .count-label {
@@ -88,10 +135,55 @@ export default class extends Vue {
   }
   .card-scroller {
     height: 70vh;
+    font-size: 11px;
   }
   .title .text{
     font-size: 14px;
   }
 }
+@media (max-width: 415px) {
+  .card-scroller {
+    height: 70vh;
+    font-size: 10px;
+    bottom: 30px;
+  }
+  .count-label {
+    bottom: 10px;
+  }
+  .info {
+    top: 40px;
+    padding: 0 8px;
+    .text{
+      font-size: 15px;
+    }
+    .count-down{
+      .time {
+        font-size: 30px;
+      }
+      .title {
+        font-size: 20px;
+      }
+    }
+  }
+}
+
+@media (min-width: 321px) and (max-width: 375px) {
+  .info {
+    top: 40px;
+    padding: 0 8px;
+    .text{
+      font-size: 12px;
+      margin-top: 1px;
+    }
+    .count-down{
+      .time {
+        font-size: 30px;
+      }
+      .title {
+        font-size: 20px;
+      }
+    }
+  }
+}
 
 </style>

src/components/market/CardList.vue

@@ -24,7 +24,7 @@ export default class extends Vue {
 
   created() {
     for (let i = 0; i < 10; i++) {
-      this.cardList.push({ id: 'hero2_10' + i, type: 0, skelName: 'n_aoi', name: 'miffy', price: '10', class: 0, repeat: false })
+      this.cardList.push({ id: 'hero2_10' + i, type: 0, skelName: 'n_aoi', name: 'miffy', price: 10, class: 0, repeat: false })
     }
   }
 }

src/components/market/NftItem.vue

@@ -1,15 +1,18 @@
 <template>
   <div class="card" >
-    <img v-if="data.id" class="bg-img" src="@/assets/main/card/card_border.png">
+    <img v-if="data.id" class="bg-img" src="@/assets/main/card/card_border.png" alt="">
     <div v-if="data.id" class="anim-border">
-      <img class="card-main-img" :src="require(`@/assets/main/card/${data.skelName}.png`)" />
+      <img class="card-main-img" :src="require(`@/assets/main/card/${data.skelName}.png`)"  alt=""/>
-      <img class="name-img" :src="require('@/assets/main/card/'+data.name+'.png')">
+      <div class="name-label">{{data.name}}</div>
-      <div class="info-div">
+      <div class="info-div" @click="buyItem" :class="{'gray': data.stopBuy}">
-        <img class='buy-icon' src="@/assets/main/card/icon_buy.png"/>
+        <img class='buy-icon' src="@/assets/main/card/icon_buy.png" alt=""/>
-        <div class="price-label"><span>{{data.price}}</span></div>
+        <div class="price-label">
+          <span :class="{'price': data.price !== data.priceDiscount}">{{data.priceDiscount || data.price}} {{data.currency}}</span>
+          <span v-if="data.price!==data.priceDiscount" class="price-old">{{data.price}} {{data.currency}}</span>
+        </div>
       </div>
       <div class="class-div">
-        <img :src="require('@/assets/main/card/class_'+data.class+'.png')">
+        <img :src="require('@/assets/main/card/class_'+data.class+'.png')" alt="">
       </div>
     </div>
   </div>
@@ -18,6 +21,9 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
 import { ISpineData } from '@/utils/SpineRender'
+import { BlockChain } from '@/utils/blockchain'
+import { AppModule } from '@/store/modules/app'
+import { buyBox } from '@/api/Mall'
 
 declare module 'vue/types/vue' {
   interface Vue {
@@ -32,7 +38,27 @@ declare module 'vue/types/vue' {
   props: ['data']
 })
 export default class extends Vue {
+  bc = new BlockChain()
 
+  get walletCollected() {
+    return AppModule.walletConnected
+  }
+
+  async buyItem() {
+    if (!this.data.directBuy) {
+      return
+    }
+    if (this.data.stopBuy) {
+      return
+    }
+    if (!this.walletCollected) {
+      await this.bc.connect()
+    }
+
+    const buyData = { account: AppModule.accountId, box_id: this.data.recordId }
+    const res = await buyBox(buyData)
+    console.log('buy nft: ', res)
+  }
 }
 </script>
 
@@ -77,6 +103,7 @@ $height: 18.33em;
   background-repeat: no-repeat;
   justify-content: space-between;
 }
+
 .class-div{
   position: absolute;
   top: 8px;
@@ -94,6 +121,15 @@ $height: 18.33em;
   right: $width * 9 / 297;
   bottom: $height * 100 / 389;
 }
+.name-label {
+  font-family: 'title',serif;
+  color: white;
+  text-transform:capitalize;
+  font-size: $width * 40 / 390;
+  position: absolute;
+  right: $width * 20 / 297;
+  bottom: $height * 70 / 389;
+}
 .price-label {
   color: black;
   height: $height * 29 / 389;
@@ -105,12 +141,24 @@ $height: 18.33em;
   display: flex;
   align-items: center;
   justify-content: center;
+  flex-direction: column;
   margin-right: $width * 40 / 297;
   margin-bottom: $width * 10 / 297;
 }
 .price-label span {
   font-size: $width * 20 / 297;
 }
+.price-label .price{
+  color: red;
+  margin-top: 9px;
+  text-shadow: black 0.1em 0.1em 0.2em
+}
+.price-label .price-old{
+  text-decoration:line-through;
+  font-size: $width * 15 / 297;
+  color: white;
+  text-shadow: black 0.1em 0.1em 0.2em
+}
 .buy-icon {
   width: $width * 44 / 297;
   height: $height * 52 / 389;
@@ -118,4 +166,14 @@ $height: 18.33em;
   margin-bottom: $height * 12 / 389;
 }
 
+.gray {
+  -webkit-filter: grayscale(100%);
+  -moz-filter: grayscale(100%);
+  -ms-filter: grayscale(100%);
+  -o-filter: grayscale(100%);
+
+  filter: grayscale(100%);
+
+}
+
 </style>

src/components/market/NftList.vue

@@ -25,7 +25,7 @@ export default class extends Vue {
 
   created() {
     for (let i = 0; i < 10; i++) {
-      this.cardList.push({ id: 'hero2_10' + i, type: 0, skelName: 'n_aoi', name: 'miffy', price: '10', class: 0, repeat: false })
+      this.cardList.push({ id: 'hero2_10' + i, type: 0, skelName: 'n_aoi', name: 'miffy', price: 10, class: 0, repeat: false })
     }
   }
 }

src/components/market/TopUserInfo.vue

@@ -39,7 +39,6 @@
 import { Component, Vue } from 'vue-property-decorator'
 import { BlockChain } from '@/utils/blockchain'
 import { AppModule } from '@/store/modules/app'
-import { UserModule } from '@/store/modules/user'
 import { Message } from 'element-ui'
 
 @Component({
@@ -58,11 +57,11 @@ export default class extends Vue {
   }
 
   get showAccount() {
-    return UserModule.accountShow
+    return AppModule.accountShow
   }
 
   get account() {
-    return UserModule.account
+    return AppModule.accountId
   }
 
   async disconnectWallet() {

src/store/modules/app.ts

@@ -11,6 +11,8 @@ export interface IAppState {
   device: DeviceType
   size: string
   walletConnected: boolean
+  accountId?: string
+  chainId?: number
 }
 
 @Module({ dynamic: true, store, name: 'app' })
@@ -18,6 +20,8 @@ class App extends VuexModule implements IAppState {
   public device = DeviceType.Desktop;
   public size = getSize() || 'medium'
   public walletConnected = false;
+  public accountId = ''
+  public chainId = 0
 
   @Action
   public ToggleDevice(device: DeviceType) {
@@ -34,6 +38,16 @@ class App extends VuexModule implements IAppState {
     this.SET_WALLETSTATUS(val)
   }
 
+  @Action
+  public updateAccount(val: string) {
+    this.UPDATE_ACCOUNT(val)
+  }
+
+  @Action
+  public updateChainID(val: number) {
+    this.UPDATE_CHAINID(val)
+  }
+
   @Mutation
   private TOGGLE_DEVICE(device: DeviceType) {
     this.device = device
@@ -49,6 +63,26 @@ class App extends VuexModule implements IAppState {
   private SET_WALLETSTATUS(val: boolean) {
     this.walletConnected = val
   }
+
+  @Mutation
+  private UPDATE_ACCOUNT(val: string) {
+    this.accountId = val
+  }
+
+  @Mutation
+  private UPDATE_CHAINID(val: number) {
+    this.chainId = val
+  }
+
+  public get accountShow() {
+    if (this.accountId.length >= 10) {
+      return this.accountId.substring(0, 8) + '...' + this.accountId.substring(this.accountId.length - 8)
+    } else if (this.accountId.length > 0 && this.accountId.length < 10) {
+      return this.accountId
+    } else {
+      return ''
+    }
+  }
 }
 
 export const AppModule = getModule(App)

src/store/modules/user.ts

@@ -146,14 +146,6 @@ class User extends VuexModule implements IUserState {
     }
     this.permissions = results
   }
-
-  public get accountShow() {
-    if (this.account.length > 0) {
-      return this.account.substring(0, 8) + '...' + this.account.substring(this.account.length - 8)
-    } else {
-      return ''
-    }
-  }
 }
 
 export const UserModule = getModule(User)

src/utils/SpineRender.ts

@@ -5,9 +5,16 @@ export interface ISpineData {
   name?: string
   repeat?: boolean
   scale?: number
-  price?: string
+  class?: number|string
-  class?: number
   type?: number
+  price?: number
+  priceDiscount?: number
+  currency?: string
+  discount?: number
+  recordId?: string
+  coinAddress?: string
+  directBuy?: boolean
+  stopBuy?: boolean
 }
 
 export class SpineRender {

src/utils/blockchain.ts

@@ -2,7 +2,6 @@ import { singleton } from '@/decorators/singleton.decorator'
 import WalletConnectProvider from '@walletconnect/web3-provider'
 import Web3Modal, { isMobile } from 'web3modal'
 import { AppModule } from '@/store/modules/app'
-import { UserModule } from '@/store/modules/user'
 import Web3 from 'web3'
 
 @singleton
@@ -51,9 +50,11 @@ export class BlockChain {
       this.subscribeToEvents()
       this.web3 = new Web3(<any> this.provider)
       const accounts = await this.web3.eth.getAccounts()
+      const chainId = await this.web3.eth.getChainId()
+      console.log('chainId: ', chainId)
       console.log('accountsLogin: ', accounts)
       if (accounts && accounts.length > 0) {
-        UserModule.updateAccount(accounts[0])
+        AppModule.updateAccount(accounts[0])
       }
       AppModule.updateWalletStatus(true)
     } catch (err) {
@@ -66,7 +67,8 @@ export class BlockChain {
     } catch (err) {
     }
     this.web3Modal.clearCachedProvider()
-    UserModule.updateAccount('')
+    AppModule.updateAccount('')
+    AppModule.updateChainID(0)
     AppModule.updateWalletStatus(false)
   }
 
@@ -75,7 +77,7 @@ export class BlockChain {
     this.provider.on('accountsChanged', (accounts: string[]) => {
       console.log('accountsChanged: ', accounts)
       if (accounts && accounts.length > 0) {
-        UserModule.updateAccount(accounts[0])
+        AppModule.updateAccount(accounts[0])
       }
     })