From 588e135ba9a5f5c3563f1a52286d55453508b77f Mon Sep 17 00:00:00 2001
From: cebgcontract <99630598+cebgcontract@users.noreply.github.com>
Date: Sun, 24 Apr 2022 20:05:35 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0nft=E7=9A=84=E6=98=BE?=
 =?UTF-8?q?=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/market/icon_gen.png        | Bin 0 -> 6833 bytes
 src/components/market/NftDetail.vue   | 105 ++++++++++++++++++++------
 src/components/market/NftInfo.vue     |  36 ++++++---
 src/components/market/nft/HeroNft.vue |   2 +-
 src/icons/components/index.ts         |   2 +
 src/icons/components/lock_s.ts        |  12 +++
 src/icons/components/no_data.ts       |  12 +++
 src/icons/svg/lock_s.svg              |  11 +++
 src/types/Nft.ts                      |   6 ++
 9 files changed, 152 insertions(+), 34 deletions(-)
 create mode 100755 src/assets/market/icon_gen.png
 create mode 100644 src/icons/components/lock_s.ts
 create mode 100644 src/icons/components/no_data.ts
 create mode 100644 src/icons/svg/lock_s.svg

diff --git a/src/assets/market/icon_gen.png b/src/assets/market/icon_gen.png
new file mode 100755
index 0000000000000000000000000000000000000000..2a4c6f6ff6c19e73fd9c7eb3e4bb154d6fe68675
GIT binary patch
literal 6833
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
PpGcbbbk)jL?8E;DsY|I9

literal 0
HcmV?d00001

diff --git a/src/components/market/NftDetail.vue b/src/components/market/NftDetail.vue
index a1ea72f..db68607 100644
--- a/src/components/market/NftDetail.vue
+++ b/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;
     }
   }
 }
diff --git a/src/components/market/NftInfo.vue b/src/components/market/NftInfo.vue
index e9cfc23..44e2714 100644
--- a/src/components/market/NftInfo.vue
+++ b/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{
diff --git a/src/components/market/nft/HeroNft.vue b/src/components/market/nft/HeroNft.vue
index 01d601e..eec4fb7 100644
--- a/src/components/market/nft/HeroNft.vue
+++ b/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">-->
diff --git a/src/icons/components/index.ts b/src/icons/components/index.ts
index fc78270..93150bf 100644
--- a/src/icons/components/index.ts
+++ b/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'
diff --git a/src/icons/components/lock_s.ts b/src/icons/components/lock_s.ts
new file mode 100644
index 0000000..bf971f1
--- /dev/null
+++ b/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>'
+  }
+})
diff --git a/src/icons/components/no_data.ts b/src/icons/components/no_data.ts
new file mode 100644
index 0000000..b11e0d7
--- /dev/null
+++ b/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>'
+  }
+})
diff --git a/src/icons/svg/lock_s.svg b/src/icons/svg/lock_s.svg
new file mode 100644
index 0000000..fa385f0
--- /dev/null
+++ b/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>
diff --git a/src/types/Nft.ts b/src/types/Nft.ts
index cb1e8cb..a1bfcd1 100644
--- a/src/types/Nft.ts
+++ b/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,