Merge branch 'new-CounterFire' of http://git.kingsome.cn/huangjinming/CounterFireGames into new-CounterFire

src/components/assets/card.vue

@@ -3,7 +3,7 @@
     <div class="card-top" v-if="nftData">
       <!-- @click="toDetail" -->
       <div class="card-img" @click="toDetail">
-        <img :src="nftData.image" alt="图片">
+        <LazyLoadImg :src="nftData.image" :src-placeholder="placeholderImg" alt="图片"/>
       </div>
       <div class="card-name">
         <div>Cotnesford park</div>
@@ -35,6 +35,8 @@ import SellDialog from "@/components/Dialogs/sellDialog.vue"
 import {PassportWallet} from "@/wallet/passPort.js"
 import { useDetailStore } from "@/store/detail"
 import { apiGetPrice } from "@/utils/marketplace"
+import LazyLoadImg from "@/components/lazyloadimg"
+import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
 // import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 
 import {

src/components/chain/BlockChain.js

@@ -45,8 +45,10 @@ export class BlockChain {
 
   async restoreWallet(walletType) {
     this.wallet = new allProviders[walletType]();
-    const { provider } = await this.wallet.web3Provider();
+    const { provider, token } = await this.wallet.web3Provider();
     this.provider = provider
+    this.token = token
+    this.store.$persist();
     this.market.updateProvider(provider);
     return provider;
   }
@@ -56,11 +58,12 @@ export class BlockChain {
     if (ALL_PROVIDERS.length === 1) {
       const walletType = ALL_PROVIDERS[0].id
       this.wallet = new allProviders[walletType]();
-      const { provider, accounts } = await this.wallet.web3Provider();
+      const { provider, accounts, token } = await this.wallet.web3Provider();
       this.provider = provider
       this.market.updateProvider(provider);
       this.store.walletType = walletType;
       this.store.address = accounts[0];
+      this.token = token
       this.store.$persist();
       return
     }
@@ -72,6 +75,7 @@ export class BlockChain {
       this.wallet = new allProviders[result.wallet]();
       this.store.walletType = result.wallet;
       this.store.address = result.accounts[0];
+      this.token = token
       this.store.$persist();
     } else {
       console.log(`select result : ${result.errmsg}`);
@@ -80,6 +84,7 @@ export class BlockChain {
   }
 
   async logout() {
+    this.token = '';
     this.store.reset();
     this.store.$persist();
     await this.wallet.logout();

src/components/chain/wallet/PassportWallet.js

@@ -62,9 +62,9 @@ export class PassportWallet {
     const passportProvider = this.passportInstance.connectEvm();
     const accounts = await passportProvider.request({ method: "eth_requestAccounts" });
     const provider = new providers.Web3Provider(passportProvider);
-    let accessToken = await this.passportInstance.getAccessToken()
-    console.log(`accesstoken`, accessToken)
-    return { provider, accounts };
+    const token = await this.passportInstance.getAccessToken()
+    console.log(`accesstoken`, token)
+    return { provider, accounts, token };
   }
   
 

src/components/common/card.vue

@@ -2,7 +2,7 @@
   <div class="cards">
     <div class="card-top" v-if="nftData" @click="toDetail">
       <div class="card-img">
-        <img :src="nftData.nft.image" alt="图片">
+        <LazyLoadImg :src="nftData.nft.image" :src-placeholder="placeholderImg" alt="图片" />
       </div>
       <div class="card-name">
         <div>Cotnesford park</div>
@@ -34,6 +34,8 @@ import BuyDialog from "@/components/Dialogs/buyDialog.vue"
 import {priceCalculated} from "@/configs/priceCalculate.js"
 import { useDetailStore } from "@/store/detail"
 import { useImmutableStore } from "@/store/immutable"
+import LazyLoadImg from "@/components/lazyloadimg"
+import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
 import {
   useMarketplaceStore
 } from "@/store/marketplace"

src/components/lazyloadimg/index.js

@@ -0,0 +1,101 @@
+import { reactive, h, computed, ref, onMounted, onBeforeUnmount } from "vue";
+
+export default {
+  props: {
+    src: {
+      type: String,
+      required: true
+    },
+    srcPlaceholder: {
+      type: String,
+      default:
+        "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+    },
+    srcset: {
+      type: String
+    },
+    intersectionOptions: {
+      type: Object,
+      default: () => ({})
+    },
+    usePicture: {
+      type: Boolean,
+      default: false
+    }
+  },
+  inheritAttrs: false,
+  setup(props, { attrs, slots, emit }) {
+    const root = ref(null);
+    const state = reactive({
+      observer: null,
+      intersected: false,
+      loaded: false
+    });
+
+    // Computed
+    const srcImage = computed(() =>
+      state.intersected && props.src ? props.src : props.srcPlaceholder
+    );
+    const srcsetImage = computed(() =>
+      state.intersected && props.srcset ? props.srcset : false
+    );
+
+    // Methods
+    const load = () => {
+      if (
+        root.value &&
+        root.value.getAttribute("src") !== props.srcPlaceholder
+      ) {
+        state.loaded = true;
+        emit("load", root.value);
+      }
+    };
+    const error = () => emit("error", root.value);
+
+    // Hooks
+    onMounted(() => {
+      if ("IntersectionObserver" in window) {
+        state.observer = new IntersectionObserver((entries) => {
+          const image = entries[0];
+          if (image.isIntersecting) {
+            state.intersected = true;
+            state.observer.disconnect();
+            emit("intersect");
+          }
+        }, props.intersectionOptions);
+
+        state.observer.observe(root.value);
+      }
+    });
+
+    onBeforeUnmount(() => {
+      if ("IntersectionObserver" in window && state.observer) {
+        state.observer.disconnect();
+      }
+    });
+
+    return () => {
+      const img = h("img", {
+        ref: root,
+        src: srcImage.value,
+        srcset: srcsetImage.value || null, // set to null explicitly if falsy
+        ...attrs,
+        class: [
+          attrs.class,
+          "v-lazy-image",
+          { "v-lazy-image-loaded": state.loaded }
+        ],
+        onLoad: load,
+        onError: error
+      });
+
+      return props.usePicture
+        ? h(
+            "picture",
+            { ref: root, onLoad: load },
+            state.intersected ? [slots.default, img] : [img]
+          )
+        : img;
+    };
+  }
+};

src/utils/marketplace.js

@@ -1,4 +1,5 @@
-import axios from 'axios'
+import { BlockChain } from "@/components/chain/BlockChain";
+
 
 
 const API_BASE = import.meta.env.VUE_APP_MKT_API
@@ -7,8 +8,7 @@ const net_id = import.meta.env.VUE_APP_NET_ID
 const toJson = res => res.json();
 
 const httpPost = async (url, data) => {
-  console.log(this.store.tokenId,'---------------------------------------')
-  const token = localStorage.getItem('assessToken');
+  const token = new BlockChain().token;
   let headers = {"Content-Type": "application/json"};
   // let token = token;
   if (token) {
@@ -23,7 +23,7 @@ const httpPost = async (url, data) => {
 
 
 const httpGet = async (url, data) => {
-  const token = localStorage.getItem('assessToken');
+  const token = new BlockChain().token;
   let headers = {"Content-Type": "application/json"};
   if (token) {
     headers['Authorization'] = `Bearer ${token}`;

src/views/DetailView.vue

@@ -5,7 +5,7 @@
       <div class="content">
         <div class="top-left">
           <div class="top-left-img">
-            <img :src="detailData.image" alt="">
+            <LazyLoadImg :src="detailData.image" :src-placeholder="placeholderImg" alt="" />
           </div>
         </div>
         <div class="top-right">
@@ -145,16 +145,18 @@ import { nftDetail } from "@/utils/marketplace"
 import {priceCalculated} from "@/configs/priceCalculate.js"
 import { BlockChain } from "@/components/chain/BlockChain"
 import {walletStore} from "@/store/wallet";
+import LazyLoadImg from "@/components/lazyloadimg"
 const router = useRouter();
 const localWalletStore = walletStore()
 const props = defineProps({
   address: String,
   tokenid: String
 })
+import placeholderImg from '@/assets/img/marketplace/GenesisHeroes_NFT.png'
 const detailData = ref(null)
 // const detailData = window.history.state.nftData
 // console.log(detailData)
-// const myAddress = localWalletStore.address
+const myAddress = localWalletStore.address
 // const nftAbilities = ref(detailData.detail)
 
 // 购买