更新nft的显示

src/components/market/NftDetail.vue

@@ -16,6 +16,10 @@
           LV.{{nftData.level}}
         </div>
         <level-star :level="nftQuality"></level-star>
+        <div class="lock-comp" v-if="timeStr">
+          <svg-icon name="lock_s" class="circle"></svg-icon>
+          <div class="lock-time">{{timeStr}}</div>
+        </div>
         <div class="owner-container">
           <div class="owner-border"></div>
           <div class="owner-info">
@@ -61,12 +65,6 @@
                 <div class="info-val">{{attr('def')}}</div>
               </div>
             </div>
-            <div class="one-col-info">
-              <div class="one-info">
-                <div class="info-title">Advanced Count</div>
-                <div class="info-val">{{attr('advanced_count')}}</div>
-              </div>
-            </div>
           </div>
         </div>
         <div class="top-left"></div>
@@ -109,12 +107,6 @@
                 <div class="info-val">{{attr('range')}}</div>
               </div>
             </div>
-            <div class="one-col-info" v-if="hasAttr('advanced_count')">
-              <div class="one-info">
-                <div class="info-title">Advanced Count</div>
-                <div class="info-val">{{attr('advanced_count')}}</div>
-              </div>
-            </div>
           </div>
         </div>
         <div class="top-left"></div>
@@ -130,12 +122,12 @@
           <div class="info">
             <div class="two-col-info">
               <div class="one-info">
-                <div class="info-title">Lucky</div>
-                <div class="info-val">{{attr('lucky')}}</div>
+                <div class="info-title">Advanced</div>
+                <div class="info-val">{{attr('advanced_count') || 0}}</div>
               </div>
               <div class="one-info">
-                <div class="info-title font14">Success Rate</div>
-                <div class="info-val">{{attr('success_rate')}}</div>
+                <div class="info-title">Lucky</div>
+                <div class="info-val">{{attr('lucky')}}</div>
               </div>
             </div>
           </div>
@@ -144,7 +136,7 @@
         <div class="top-right"></div>
       </div>
 
-      <div class="card-container" v-if="nftData.extAttrList.length>0">
+      <div class="card-container" v-if="false && nftData.extAttrList.length>0">
         <div class="card-border"></div>
         <div class="border special-data">
           <div class="title">
@@ -190,14 +182,16 @@
     </div>
   </div>
   <div class="center-part">
-    <img v-if="nftData.image" class="main-img" :src="nftData.image" alt="">
+    <img class="icon-gen" src="@/assets/market/icon_gen.png" alt="gen" v-if="false && nftData.isGenesis">
+    <img v-if="nftData.image" class="main-img" :src="nftData.imageBig || nftData.image" alt="">
   </div>
   </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator'
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator'
 import LevelStar from '@/components/market/LevelStar.vue'
 import { INftData } from '@/types/Nft'
+import { secs2str } from '@/utils/time.util'
 
 @Component({
   name: 'NftDetail',
@@ -206,6 +200,15 @@ import { INftData } from '@/types/Nft'
 export default class extends Vue {
   @Prop() private nftData:INftData
   canBuy = true
+  countdown = 0
+  timer: any = null
+
+  @Watch('nftData')
+  private onDataChange() {
+    console.log('nft data change: ', this.nftData)
+    this.countdown = this.nftData.lockTime || 0
+    this.beginCountdown()
+  }
 
   get nftQuality() {
     return this.nftData.quality
@@ -231,6 +234,30 @@ export default class extends Vue {
     }
   }
 
+  get timeStr() {
+    if (this.countdown > 0) {
+      return secs2str(this.countdown)
+    } else {
+      return ''
+    }
+  }
+
+  beginCountdown() {
+    this.clearTimer()
+    this.timer = setInterval(() => {
+      if (this.countdown <= 0) {
+        this.clearTimer()
+      } else {
+        this.countdown--
+      }
+    }, 1000)
+  }
+
+  clearTimer() {
+    clearInterval(this.timer)
+    this.timer = null
+  }
+
   back() {
     this.$router.go(-1)
   }
@@ -286,6 +313,22 @@ export default class extends Vue {
         font-size: 21px;
         color: #FFCF49;
       }
+      .lock-comp{
+        display: flex;
+        flex-direction: row;
+        .circle {
+          width: toEm(57px);
+          height: toEm(57px);
+          fill: #FFCF49;
+          stroke: none;
+          margin-left: toEm(-18px);
+        }
+        .lock-time{
+          color: red;
+          font-size: toEm(18px);
+          line-height: toEm(57px);
+        }
+      }
     }
     .owner-container{
       width:  448px;
@@ -348,9 +391,10 @@ export default class extends Vue {
     z-index: 2;
     display: flex;
     flex-direction: column;
-    justify-content: end;
+    justify-content: start;
     padding-bottom: 60px;
     margin-right: 20px;
+    margin-top: 50px;
     .nft-id-desktop{
       color: #46E0F4;
       font-size: 26px;
@@ -507,11 +551,19 @@ export default class extends Vue {
   margin-left: auto;
   margin-right: auto;
   width: 40%;
+  height: 100%;
   overflow: hidden;
-  img{
+  .icon-gen{
+    position: absolute;
+    top: 50px;
+    left: 0;
+    width: 10%;
+  }
+  .main-img{
     width: 90%;
-    margin-bottom: -120px;
     z-index: 1;
+    position: absolute;
+    bottom: 0;
   }
 }
 @media (max-width: 767px) {
@@ -571,6 +623,7 @@ export default class extends Vue {
       align-items: center;
       display: flex;
       flex-direction: column;
+      margin-top: 0;
       .nft-id-desktop{
         display: none;
       }
@@ -611,11 +664,17 @@ export default class extends Vue {
     width: 40%;
     overflow: hidden;
     top: 76px;
+    height: unset;
     margin-right: 0;
-    img{
+    .icon-gen{
+      top: 0;
+    }
+    .main-img{
       width: 90%;
       margin-bottom: -120px;
       z-index: 3;
+      position: unset;
+      bottom: unset;
     }
   }
 }

src/components/market/NftInfo.vue

@@ -3,11 +3,12 @@
   <a class="card-root" :href="!nftData.hideAttr? `/item/${nftData.id}`: 'javascript:void(0)'">
     <hero-nft :nft-data="nftData" class="item"></hero-nft>
     <div class="attr-div" v-if="!nftData.hideAttr && nftData.type === 1">
-      <div class="one-col-info">
+      <div class="two-col-info">
         <div class="one-info">
           <div class="info-title">Level</div>
           <div class="info-val">{{nftData.level}}</div>
         </div>
+        <div class="one-info"></div>
       </div>
       <div class="two-col-info">
         <div class="one-info">
@@ -29,22 +30,24 @@
           <div class="info-val">{{attr('def')}}</div>
         </div>
       </div>
-      <div class="one-col-info">
+      <div class="two-col-info">
         <div class="one-info">
-          <div class="info-title">Advanced Count</div>
+          <div class="info-title">Advanced</div>
           <div class="info-val">{{attr('advanced_count')}}</div>
         </div>
+        <div class="one-info">
+          <div class="info-title">Lucky</div>
+          <div class="info-val">{{attr('lucky')}}</div>
+        </div>
       </div>
     </div>
-    <div class="attr-div" v-if="!nftData.hideAttr && nftData.type === 2">
+    <div class="attr-div weapon" v-if="!nftData.hideAttr && nftData.type === 2">
       <div class="two-col-info">
         <div class="one-info">
           <div class="info-title">Level</div>
           <div class="info-val">{{nftData.level}}</div>
         </div>
         <div class="one-info">
-          <div class="info-title">Lucky</div>
-          <div class="info-val">{{attr('lucky')}}</div>
         </div>
       </div>
       <div class="two-col-info">
@@ -77,10 +80,14 @@
           <div class="info-val">{{attr('range')}}</div>
         </div>
       </div>
-      <div class="one-col-info" v-if="hasAttr('advanced_count')">
+      <div class="two-col-info">
         <div class="one-info">
-          <div class="info-title">Advanced Count</div>
-          <div class="info-val">{{attr('advanced_count')}}</div>
+          <div class="info-title">Advanced</div>
+          <div class="info-val">{{attr('advanced_count') || 0}}</div>
+        </div>
+        <div class="one-info">
+          <div class="info-title">Lucky</div>
+          <div class="info-val">{{attr('lucky')}}</div>
         </div>
       </div>
     </div>
@@ -199,6 +206,8 @@ export default class extends Vue {
         .info-val {
           color: #3CF562;
           width: 40%;
+          text-align: right;
+          padding-right: 14px;
         }
       }
       .all-col-info {
@@ -285,9 +294,9 @@ export default class extends Vue {
           display: flex;
           flex-direction: row;
           justify-content: space-between;
-          margin-bottom: 8px;
           .info-title {
             width: 40%;
+            margin-bottom: 8px
           }
           .info-val {
             color: #3CF562;
@@ -295,6 +304,13 @@ export default class extends Vue {
             padding-left: 5px;
           }
         }
+        &.weapon{
+          .one-info {
+            .info-title{
+              margin-bottom: 6px;
+            }
+          }
+        }
       }
     }
     .token-color{

src/components/market/nft/HeroNft.vue

@@ -7,7 +7,7 @@
         <img class="card-main-img" :src="nftData.image"  alt=""/>
         <div class="info-bar" :class="{'bottom': !nftData.showBuy}">
           <div class="name-label">{{nftData.name}}</div>
-          <div class="level-label">Lvl {{nftData.level || 1}}</div>
+<!--          <div class="level-label">Lvl {{nftData.level || 1}}</div>-->
 <!--          <div class="info-div" v-if="nftData.showBuy" @click="buyItem" :class="{'gray': !showLight}">-->
 <!--            <img class='buy-icon' src="@/assets/main/card/icon_buy.png" alt=""/>-->
 <!--            <div class="price-label">-->

src/icons/components/index.ts

@@ -6,8 +6,10 @@ import './clock'
 import './copy'
 import './inventory'
 import './kcc'
+import './lock_s'
 import './lock'
 import './metamask'
+import './no_data'
 import './normal_bg'
 import './setting'
 import './wallet'

src/icons/components/lock_s.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'lock_s': {
+    width: 52,
+    height: 52,
+    viewBox: '0 0 52 52',
+    data: '<g clip-path="url(#clip0_2459_1131)"><path pid="0" d="M19.896 21.15v3.024h-1.297a1.728 1.728 0 00-1.728 1.729v8.641a1.728 1.728 0 001.728 1.728h13.826a1.728 1.728 0 001.729-1.728v-8.641a1.728 1.728 0 00-1.729-1.729H31.13V21.15a5.617 5.617 0 10-11.233 0zm2.16 3.024V21.15a3.456 3.456 0 116.913 0v3.024h-6.913zm1.728 4.753a1.729 1.729 0 112.672 1.448l-.007.005s.169 1.02.359 2.22v.002a.648.648 0 01-.648.647h-1.297a.648.648 0 01-.648-.648l.359-2.221a1.73 1.73 0 01-.792-1.452h.002z" _fill="#fff"/></g><defs><clipPath id="clip0_2459_1131"><path pid="1" _fill="#fff" transform="translate(16.871 15.533)" d="M0 0h17.283v20.739H0z"/></clipPath></defs>'
+  }
+})

src/icons/components/no_data.ts

@@ -0,0 +1,12 @@
+/* eslint-disable */
+/* tslint:disable */
+// @ts-ignore
+import icon from 'vue-svgicon'
+icon.register({
+  'no_data': {
+    width: 218,
+    height: 208,
+    viewBox: '0 0 218 208',
+    data: '<g clip-path="url(#clip0)"><path pid="0" d="M103.944 207.922c57.406 0 103.943-46.545 103.943-103.961S161.35 0 103.944 0C46.537 0 0 46.545 0 103.961s46.537 103.961 103.944 103.961z" _fill="#27114F"/><path pid="1" d="M189.285 58.944v115.417h-123.5a14.367 14.367 0 01-10.157-4.201c-2.591-2.607-4.2-6.182-4.2-10.159V50.096h49.552l7.402 8.834h80.903v.014z" _fill="#4E2A8B"/><path pid="2" d="M55.54 115.774c20.415 0 36.965-16.553 36.965-36.973 0-20.42-16.55-36.972-36.966-36.972S18.573 58.382 18.573 78.8c0 20.42 16.55 36.973 36.966 36.973z" _fill="#B09BD7"/><path pid="3" d="M28.12 103.589s14.923 20.214 38.857 22.359c0 0-4.453-1.341-6.598-10.487-2.16-9.161-28.968-16.013-32.26-11.872z" _fill="#B09BD7"/><path pid="4" d="M59.545 78.801L70.94 67.406a2.841 2.841 0 000-4.008 2.84 2.84 0 00-4.006 0L55.539 74.794 44.145 63.398a2.84 2.84 0 00-4.006 0 2.842 2.842 0 000 4.008L51.532 78.8 40.14 90.197a2.842 2.842 0 000 4.007c.55.551 1.28.834 1.995.834.715 0 1.445-.283 1.996-.834l11.394-11.396 11.394 11.396c.55.551 1.28.834 1.995.834.73 0 1.445-.283 1.996-.834a2.841 2.841 0 000-4.007L59.545 78.8z" _fill="#6736BA"/><path pid="5" d="M218 76.448v83.538c0 7.925-6.434 14.36-14.357 14.36H65.801c7.923 0 14.357-6.435 14.357-14.36V76.448H218z" _fill="#8663C7"/><path pid="6" d="M131.486 132.237a7.15 7.15 0 10-10.111 0 7.148 7.148 0 0010.111 0zM115.099 114.94a1.808 1.808 0 01-1.713-1.192 1.82 1.82 0 011.073-2.354l18.021-6.763a1.824 1.824 0 012.353 1.073 1.819 1.819 0 01-1.072 2.354l-18.022 6.762c-.208.075-.431.12-.64.12zM172.547 134.242a7.15 7.15 0 10-2.294-14.116 7.15 7.15 0 002.294 14.116zM182.732 114.94c-.209 0-.432-.045-.641-.12l-18.021-6.762a1.825 1.825 0 01-1.072-2.354c.357-.939 1.414-1.43 2.353-1.073l18.021 6.763a1.825 1.825 0 011.073 2.354 1.809 1.809 0 01-1.713 1.192zM153.331 154.087h-8.832a1.831 1.831 0 110-3.664h8.832a1.83 1.83 0 011.832 1.832 1.83 1.83 0 01-1.832 1.832z" _fill="#6736BA"/></g><defs><clipPath id="clip0"><path pid="7" _fill="#fff" d="M0 0h218v207.908H0z"/></clipPath></defs>'
+  }
+})

src/icons/svg/lock_s.svg

@@ -0,0 +1,11 @@
+<svg width='52' height='52' viewBox='0 0 52 52' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <g clip-path='url(#clip0_2459_1131)'>
+        <path d='M19.8956 21.1501V24.1745H18.5994C18.141 24.1745 17.7014 24.3566 17.3773 24.6807C17.0532 25.0048 16.8711 25.4444 16.8711 25.9028V34.5441C16.8711 35.0024 17.0532 35.442 17.3773 35.7661C17.7014 36.0902 18.141 36.2723 18.5994 36.2723H32.4254C32.8838 36.2723 33.3234 36.0902 33.6475 35.7661C33.9716 35.442 34.1537 35.0024 34.1537 34.5441V25.9028C34.1537 25.4444 33.9716 25.0048 33.6475 24.6807C33.3234 24.3566 32.8838 24.1745 32.4254 24.1745H31.1292V21.1501C31.1292 19.6604 30.5375 18.2317 29.4841 17.1783C28.4307 16.125 27.0021 15.5332 25.5124 15.5332C24.0227 15.5332 22.594 16.125 21.5407 17.1783C20.4873 18.2317 19.8956 19.6604 19.8956 21.1501ZM22.0559 24.1745V21.1501C22.0559 20.2333 22.42 19.3541 23.0683 18.7059C23.7165 18.0577 24.5957 17.6935 25.5124 17.6935C26.4291 17.6935 27.3083 18.0577 27.9565 18.7059C28.6048 19.3541 28.9689 20.2333 28.9689 21.1501V24.1745H22.0559ZM23.7841 28.9272C23.7842 28.6278 23.862 28.3336 24.01 28.0733C24.158 27.813 24.3711 27.5957 24.6284 27.4425C24.8857 27.2894 25.1783 27.2057 25.4776 27.1997C25.777 27.1937 26.0728 27.2655 26.336 27.4082C26.5992 27.5509 26.8208 27.7595 26.9792 28.0136C27.1375 28.2677 27.2271 28.5586 27.2392 28.8577C27.2513 29.1569 27.1855 29.4541 27.0482 29.7201C26.9109 29.9862 26.7069 30.212 26.456 30.3755L26.4491 30.3798C26.4491 30.3798 26.6176 31.3995 26.8077 32.6006V32.6015C26.8077 32.7732 26.7395 32.9378 26.6182 33.0592C26.4968 33.1805 26.3322 33.2487 26.1605 33.2487H24.8626C24.6909 33.2487 24.5263 33.1805 24.4049 33.0592C24.2835 32.9378 24.2153 32.7732 24.2153 32.6015V32.6006L24.574 30.3798C24.3313 30.2232 24.1318 30.0082 23.9935 29.7546C23.8552 29.5011 23.7827 29.2169 23.7824 28.9281L23.7841 28.9272Z'
+              fill='white'/>
+    </g>
+    <defs>
+        <clipPath id='clip0_2459_1131'>
+            <rect width='17.2826' height='20.7391' fill='white' transform='translate(16.8711 15.5332)'/>
+        </clipPath>
+    </defs>
+</svg>

src/types/Nft.ts

@@ -30,6 +30,7 @@ export interface INftData{
   tokenId: string
   name: string
   image: string
+  imageBig: string
   type: NftType
   level: number
   job?: string
@@ -37,6 +38,7 @@ export interface INftData{
   owner?: string
   state: NftState
   mintTime: number
+  lockTime: number
   priceInfo?: IPriceData
   attrMap: Map<string, string>
   extAttrList: KeyValuePair[]
@@ -50,11 +52,13 @@ export const defaultINftData = () => {
     tokenId: '',
     name: '',
     image: '',
+    imageBig: '',
     type: NftType.HERO,
     level: 0,
     quality: 0,
     state: NftState.NORMAL,
     mintTime: 0,
+    lockTime: 0,
     attrMap: new Map<string, string>(),
     extAttrList: []
   }
@@ -81,12 +85,14 @@ export function parseNftData(data: any) {
     tokenId: data.token_id,
     name: info?.name || '',
     image: data.image,
+    imageBig: data.full_image,
     type: parseInt(data.type),
     level: info?.level || 0,
     quality: info?.quality || 0,
     owner: data.owner_address,
     state: data.state,
     mintTime: data.mint_time,
+    lockTime: data.lock_time,
     job: info.job,
     hideAttr: data.hide_attr,
     isGenesis: data.is_genesis,