fic

src/components/mobile/main/ChipList.vue

@@ -6,7 +6,7 @@
       @click="showTip(chip)"
       :key="i"
     >
-      <div class="no-sale" v-if="chip.selling > 0">
+      <div class="no-sale" v-if="chip.o_link > 0 &&isType=='mynft'">
         <div class="for-rent">
           <div class="for-rent-img">
             <img

src/components/mobile/main/HeroList.vue

@@ -6,7 +6,7 @@
       @click="showTip(hero)"
       :key="i"
     >
-      <div class="no-sale" v-if="hero.selling > 0">
+      <div class="no-sale" v-if="hero.o_link > 0 &&isType=='mynft'">
         <div class="for-rent">
           <div class="for-rent-img">
             <img

src/components/mobile/main/PieceList.vue

@@ -6,7 +6,7 @@
       @click="showTip(piece)"
       :key="i"
     >
-      <div class="no-sale" v-if="piece.selling > 0">
+      <div class="no-sale" v-if="piece.o_link > 0 &&isType=='mynft'">
         <div class="for-rent">
           <div class="for-rent-img">
             <img

src/components/mobile/main/PieceSellTop.vue

@@ -31,7 +31,7 @@
 
         <div v-if="isBuy == true">
           <div class="amount">Amount</div>
-          <div class="count-content">
+          <div class="count-content">cunout
             <div class="count">
               <div class="left" @click="handReduce"></div>
               <div class="conunt-number">{{ cunout }}</div>
@@ -57,26 +57,22 @@
 import { formatPrice } from "@/utils/chain.util";
  
 export default {
-  props: ["data", "isBuy"],
+  props: ["data", "isBuy",'cunout'],
   data() {
     return {
-      cunout: 1,
     };
   },
   methods: {
     handReduce() {
-      if (this.cunout > 0) {
+      this.$emit("handReduce")
-        this.cunout--;
+    },
-      }
+    handPlus() {
+        this.$emit("handPlus")
     },
     formatPriceShow(price, decimals, fixed = 2) {
       return formatPrice(price, decimals, fixed);
     },
-    handPlus() {
+    
-      if (this.cunout < this.data.balance) {
-        this.cunout++;
-      }
-    },
   },
 };
 </script>

src/components/mobile/main/TheBuyDialog.vue

@@ -49,7 +49,7 @@
         </div>
       </div>
       <div class="pending">
-        <div class="pending-order" @click="handMessage">PEBDING ORDER</div>
+        <div class="pending-order" @click="haldBuy">CONFIRM</div>
         <div class="confirm">CONFIRM</div>
       </div>
       <span @click="closeTip" class="close">
@@ -65,7 +65,9 @@ import ChipSellTop from "./ChipSellTop.vue";
 import PieceSellTop from "./PieceSellTop.vue";
 import WeaponSellTop from "./WeaponSellTop.vue";
 import { formatPrice } from "@/utils/chain.util";
- 
+ import { AppModule } from "@/store/modules/app";
+import { CONTRACT_ADDRESS } from "@/configs/config_chain";
+import ChainManager from "@/chain/ChainManager";
 export default {
   components: {
     HeroBuyTop,
@@ -78,8 +80,11 @@ export default {
   data() {
     return {
       detailVisible: false,
+      chainManager: new ChainManager(),
+      loadingInstance: "",
       piece: "",
       prices: "",
+      isApprove:false,
       value: "",
       isBuy: false,
       currencyTypeList: [],
@@ -93,6 +98,65 @@ export default {
       // 分发自定义事件(事件名: closeTip)
       // this.$emit("closeTip");
       this.detailVisible = false;
+    },
+      async haldBuy() {
+      
+      try {
+        this.showLoading();
+        const nftres = await this.chainManager.bc.beginApproveBuy(
+          this.piece.s_currency,
+          this.piece.s_price,
+          CONTRACT_ADDRESS[AppModule.chainId].marketDddress
+        );
+        if (nftres.status == true) {
+          this.isApprove = true;
+          this.hideLoading();
+          this.handBeginBuy();
+        }
+      } catch (err) {
+        this.isApprove = false;
+        this.$emit("handMessage", 0);
+        this.hideLoading();
+        console.log("query order status error", err);
+      }
+    },
+    async handBeginBuy() {
+     
+      try {
+        this.showLoading();
+        const nftres = await this.chainManager.bc.beginBuy(
+          this.piece.o_link,
+          CONTRACT_ADDRESS[AppModule.chainId].marketDddress
+        );
+        if (nftres.status == true) {
+          this.hideLoading();
+          this.$emit("handMessage", 1);
+          setTimeout(() => {
+            this.$emit("handMessageHide");
+            this.closeTip();
+            this.$emit("on-close");
+            setTimeout(()=>{
+              this.$emit("getMarketNftList");
+            },1000)
+          }, 1000);
+        }
+      } catch (err) {
+        this.hideLoading();
+        this.$emit("handMessage", 0);
+        console.log("query order status error", err);
+      }
+    },
+    formatPriceShow(price, decimals, fixed = 2) {
+      return formatPrice(price, decimals, fixed);
+    },
+    showLoading() {
+      this.loadingInstance = this.$loading({
+        background: "rgba(0, 0, 0, 0.8)",
+      });
+    },
+
+    hideLoading() {
+      this.loadingInstance?.close();
     },
     init(data) {
       this.detailVisible = true;

src/components/mobile/main/TheSellDialog.vue

@@ -8,17 +8,20 @@
         v-if="type == 'weapon'"
         :data="piece"
       ></WeaponSellTop>
-      <PieceSellTop
+
-        :isBuy="isBuy"
-        v-if="type == 'piece'"
-        :data="piece"
-      ></PieceSellTop>
       <ChipSellTop
         :isBuy="isBuy"
         v-if="type == 'chip'"
         :data="piece"
       ></ChipSellTop>
-
+      <PieceSellTop
+        :isBuy="isBuy"
+        v-if="type == 'piece'"
+        :data="piece"
+        :cunout="cunout"
+        @handReduce="handReduce"
+        @handPlus="handPlus"
+      ></PieceSellTop>
       <div class="sellers">
         Sellers pay 5% fee to platform for completing<br />the transaction.
       </div>
@@ -38,10 +41,14 @@
       <div class="piece-bottom">
         <div class="piece-bottom-top">
           <div class="price-input">
-            <el-input
+            <el-form :rules="FormRules" ref="deptForm" :model="shell">
-              placeholder="Input your price"
+              <el-form-item label="" prop="price">
-              v-model="prices"
+                <el-input
-            ></el-input>
+                  placeholder="Input your price"
+                  v-model="shell.price"
+                  type="number"
+                ></el-input> </el-form-item
+            ></el-form>
           </div>
           <div class="attributes">
             <el-select
@@ -85,7 +92,7 @@
           </div>
         </div>
         <div class="pending">
-          <div class="pending-order" @click="handMessage">PEBDING ORDER</div>
+          <div class="pending-order" @click="handConfirm">CONFIRM</div>
           <div class="confirm">CONFIRM</div>
         </div>
       </div>
@@ -120,9 +127,26 @@ export default {
       loadingInstance: "",
       piece: "",
       prices: "",
+      cunout: 1,
       value: "",
       orderId: 6,
       isBuy: true,
+      shell: { price: "" },
+      FormRules: {
+        price: [
+          {
+            required: true,
+            message: "Please enter nft price",
+            trigger: "blur",
+          },
+          {
+            pattern:
+              /^0\.([1-9]|\d[1-9])$|^[1-9]\d{0,5}\.\d{0,2}$|^[1-9]\d{0,5}$/,
+            message: "Please enter the correct price",
+            trigger: ["blur", "change"],
+          },
+        ],
+      },
     };
   },
   created() {
@@ -143,65 +167,134 @@ export default {
       this.piece = data;
       // console.log(data, "dfgdg");
     },
-
+    handReduce() {
-    async handMessage() {
+      if (this.cunout > 1) {
-      // console.log(this.piece, "this.price======");
+        this.cunout--;
-      if (this.piece.selling > 0) {
-        try {
-          const nftres = await this.chainManager.bc.beginUpdatePrice(
-            this.orderId,
-            this.prices,
-            CONTRACT_ADDRESS[AppModule.chainId].marketDddress
-          );
-          // console.log(nftres, "beginSell");
-        } catch (err) {
-          console.log("query order status error", err);
-        }
-      } else {
-        switch (this.type) {
-          case "hero":
-            this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].hero;
-            break;
-          case "weapon":
-            this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].weapon;
-            break;
-          case "chip":
-            this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].chip;
-            break;
-          case "piece":
-            this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].piece;
-            break;
-        }
-        try {
-          const shellData = {
-            nftToken: this.nft_Token,
-            currency: this.value,
-            tokenId: this.piece.detail.token_id,
-            amount: this.type == "piece" ? this.cunout : 1,
-            price: this.prices,
-            marketAddress: CONTRACT_ADDRESS[AppModule.chainId].address,
-          };
-          
-          // console.log(shellData, "shellData");
-          this.showLoading();
-          const nftres = await this.chainManager.bc.beginNftSell(
-            this.nft_Token,
-            this.value,
-            this.piece.detail.token_id,
-            this.type == "piece" ? this.cunout : 1,
-            this.prices,
-            CONTRACT_ADDRESS[AppModule.chainId].marketDddress
-          );
-          if (nftres.status == true) {
-            this.showLoading();
-          }
-          // console.log(nftres, "beginSell");
-        } catch (err) {
-          console.log("query order status error", err);
-          this.showLoading();
-        }
       }
     },
+    handPlus() {
+      if (this.cunout < this.piece.balance) {
+        this.cunout++;
+      }
+    },
+    async handConfirm() {
+      this.$refs.deptForm.validate(async (valid) => {
+        if (valid) {
+          if (this.piece.o_link) {
+            try {
+              this.showLoading();
+              const nftres = await this.chainManager.bc.beginUpdatePrice(
+                this.piece.o_link,
+                this.shell.price,
+                CONTRACT_ADDRESS[AppModule.chainId].marketDddress
+              );
+              if (nftres.status == true) {
+                this.hideLoading();
+                this.$emit("handMessage", 1);
+                setTimeout(() => {
+                  this.$emit("handMessageHide");
+                  this.closeTip();
+                  this.type == "piece"
+                    ? this.$emit("closeTip", false)
+                    : this.$emit("on-close");
+                  setTimeout(() => {
+                    this.$emit("getMarketNftList");
+                  }, 1000);
+                }, 1000);
+              }
+            } catch (err) {
+              this.hideLoading();
+              this.$emit("handMessage", 0);
+              console.log("query order status error", err);
+            }
+          } else {
+            switch (this.type) {
+              case "hero":
+                this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].hero;
+                break;
+              case "weapon":
+                this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].weapon;
+                break;
+              case "chip":
+                this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].chip;
+                break;
+              case "piece":
+                this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].piece;
+                break;
+            }
+
+            try {
+              this.showLoading();
+              const nftres = await this.chainManager.bc.beginApproveSell(
+                this.piece.detail.token_id,
+                this.nft_Token,
+                this.type == "hero" || this.type == "weapon" ? false : true,
+                CONTRACT_ADDRESS[AppModule.chainId].marketDddress
+              );
+              if (nftres.status == true) {
+                this.isApprove = true;
+                this.hideLoading();
+                this.handBeginNftSell();
+              }
+            } catch (err) {
+              this.hideLoading();
+              this.isApprove = false;
+              this.$emit("handMessage", 0);
+            }
+          }
+        }
+      });
+    },
+    async handBeginNftSell() {
+      this.$refs.deptForm.validate(async (valid) => {
+        if (valid) {
+          switch (this.type) {
+            case "hero":
+              this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].hero;
+              break;
+            case "weapon":
+              this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].weapon;
+              break;
+            case "chip":
+              this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].chip;
+              break;
+            case "piece":
+              this.nft_Token = CONTRACT_ADDRESS[AppModule.chainId].piece;
+              break;
+          }
+          try {
+            this.showLoading();
+            const nftres = await this.chainManager.bc.beginNftSell(
+              this.nft_Token,
+              this.value,
+              this.piece.detail.token_id,
+              this.type == "piece" ? this.cunout : 1,
+              this.shell.price,
+              CONTRACT_ADDRESS[AppModule.chainId].marketDddress
+            );
+            if (nftres.status == true) {
+              this.hideLoading();
+              this.$emit("handMessage", 1);
+
+              setTimeout(() => {
+                this.$emit("handMessageHide");
+                this.closeTip();
+                this.type == "piece"
+                  ? this.$emit("closeTip", false)
+                  : this.$emit("on-close");
+                setTimeout(() => {
+                  this.$emit("getMarketNftList");
+                }, 1000);
+              }, 1000);
+            }
+          } catch (err) {
+            this.hideLoading();
+            this.$emit("handMessage", 0);
+            console.log("query order status error", err);
+          }
+        }
+      });
+    },
     showLoading() {
       this.loadingInstance = this.$loading({
         background: "rgba(0, 0, 0, 0.8)",

src/components/mobile/main/WeaponList.vue

@@ -6,7 +6,7 @@
       @click="showTip(weapon)"
       :key="i"
     >
-      <div class="no-sale" v-if="weapon.selling > 0">
+      <div class="no-sale" v-if="weapon.o_link > 0 &&isType=='mynft'">
         <div class="for-rent">
           <div class="for-rent-img">
             <img

src/views/desktop/Market.vue

@@ -601,6 +601,7 @@ export default class Market extends Vue {
     if (!AppModule.accountId) {
       return;
     }
+    try{
     this.showLoading();
     const reqData: any = {
       page_size: this.pageSize,
@@ -630,13 +631,12 @@ export default class Market extends Vue {
         this.pageSize = page.page_size || 10;
         this.starts = page.start;
         this.currentPage = page.start / page.page_size + 1;
-      }
-      if (res.errcode == 0) {
-        this.hideLoading();
-      }else{
          this.hideLoading();
       }
     }
+    }catch(err){
+       this.hideLoading()
+    }
   }
   @Watch("isLogin")
   private accountChange() {

src/views/desktop/MyNft.vue

@@ -631,6 +631,9 @@ export default class MyNft extends Vue {
     if (!AppModule.accountId) {
       return;
     }
+    try{
+
+   
     this.showLoading();
     const reqData: any = {
       page_size: this.pageSize,
@@ -666,6 +669,9 @@ export default class MyNft extends Vue {
          this.hideLoading();
       }
     }
+     }catch(err){
+      this.hideLoading()
+     }
   }
   async getCurrencyType() {
     if (this.currencyTypeList.length > 0) {

src/views/mobile/Market.vue

@@ -39,10 +39,30 @@
       @handSortSelect="handSortSelect"
     ></NftTypeBar>
     <div class="content-list">
-      <hero-list v-show="nftType == 1" :nftList="nftList" :currencyTypeList="currencyTypeList"></hero-list>
+      <hero-list
-      <weapon-list v-show="nftType == 2" :nftList="nftList" :currencyTypeList="currencyTypeList"></weapon-list>
+        v-show="nftType == 1"
-      <chip-list v-show="nftType == 3" :nftList="nftList" :currencyTypeList="currencyTypeList"></chip-list>
+        :nftList="nftList"
-      <piece-list v-show="nftType == 4" :nftList="nftList" :currencyTypeList="currencyTypeList"></piece-list>
+        :isType="isType"
+        :currencyTypeList="currencyTypeList"
+      ></hero-list>
+      <weapon-list
+        v-show="nftType == 2"
+        :nftList="nftList"
+        :isType="isType"
+        :currencyTypeList="currencyTypeList"
+      ></weapon-list>
+      <chip-list
+        v-show="nftType == 3"
+        :nftList="nftList"
+        :isType="isType"
+        :currencyTypeList="currencyTypeList"
+      ></chip-list>
+      <piece-list
+        v-show="nftType == 4"
+        :nftList="nftList"
+        :isType="isType"
+        :currencyTypeList="currencyTypeList"
+      ></piece-list>
     </div>
     <MobileFooter></MobileFooter>
   </div>
@@ -79,7 +99,7 @@ export default {
       hero: "",
       isType: "market",
       nftList: [],
-      currencyTypeList:[],
+      currencyTypeList: [],
       debounce: null,
       priceFilter: "0|999999990000000000000000",
       priceMin: 0,
@@ -95,7 +115,9 @@ export default {
       durabilityFilter: null,
       orderMethod: 0,
       starts: 0,
+      isShow:false,
       currentPage: 1,
+      loadingInstance: null,
       types: [
         { id: 1, name: "HERO" },
         { id: 2, name: "WEAPON" },
@@ -446,6 +468,7 @@ export default {
   methods: {
     onClickItem(s) {
       this.nftType = s.id;
+      this.nftList=[]
       this.getMarketNftList();
     },
     handSortSelect(value) {
@@ -564,38 +587,92 @@ export default {
       if (!AppModule.accountId) {
         return;
       }
+      try {
+        const reqData = {
+          page_size: this.pageSize,
+          start: this.starts,
+          type: this.nftType == 4 ? 5 : this.nftType,
+          job_filters: this.nftType == 2 ? null : this.jobFilters,
+          search_filters: this.searchFilters,
+          quality_filter: this.qualityFilter,
+          durability_filter: this.durabilityFilter,
+          lv_filter: this.lvFilter,
+          order_asc: this.orderAsc,
+          order_method: this.orderMethod,
+          price_filter: this.priceFilter,
+        };
+        this.showLoading();
+        const res = await queryMarketNftList(reqData);
 
-      const reqData = {
+        if (res.nfts) {
-        page_size: this.pageSize,
+          this.nftList = res.nfts;
-        start: this.starts,
-        type: this.nftType == 4 ? 5 : this.nftType,
-        job_filters: this.nftType == 2 ? null : this.jobFilters,
-        search_filters: this.searchFilters,
-        quality_filter: this.qualityFilter,
-        durability_filter: this.durabilityFilter,
-        lv_filter: this.lvFilter,
-        order_asc: this.orderAsc,
-        order_method: this.orderMethod,
-        price_filter: this.priceFilter,
-      };
-
-      const res = await queryMarketNftList(reqData);
-      if (res.nfts) {
-        let list = res.nfts;
-        this.nftList = list.filter((item) => {
-          return item.details !== null;
-        });
-        if (res) {
           const page = res;
           this.totalPage = page.total || 1;
-          console.log(this.totalPage, "this.totalPage");
           this.pageSize = page.page_size || 10;
-          this.starts = page.start;
+          this.hideLoading();
-          this.currentPage = page.start / page.page_size + 1;
         }
+      } catch (err) {
+        this.hideLoading();
       }
     },
+   async listenBottomOut() {
+      const scrollTop =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      const clientHeight = document.documentElement.clientHeight;
+      const scrollHeight = document.documentElement.scrollHeight;
+      console.log();
+      if (scrollTop + clientHeight >= scrollHeight) {
+        // 没有数据后，不触发请求
+        if (!this.isShow && this.starts < this.totalPage) {
+          // debugger
+          this.showLoading(); 
+          this.starts += 10;
+          const reqData = {
+            page_size: this.pageSize,
+          start: this.starts,
+          type: this.nftType == 4 ? 5 : this.nftType,
+          job_filters: this.nftType == 2 ? null : this.jobFilters,
+          search_filters: this.searchFilters,
+          quality_filter: this.qualityFilter,
+          durability_filter: this.durabilityFilter,
+          lv_filter: this.lvFilter,
+          order_asc: this.orderAsc,
+          order_method: this.orderMethod,
+          price_filter: this.priceFilter,
+          };
+          const res = await queryMarketNftList(reqData);
+          if (res.nfts) {
+      
+          this.nftList = [...this.nftList,...res.nfts];
+          const page = res;
+          this.totalPage = page.total || 1;
+          this.pageSize = page.page_size || 10;
+          this.hideLoading();
+          // this.isShow = false;
+        }
+         
+          console.log("this.getMyNftList();");
+        }
+        return;
+      }
+    },
+    showLoading() {
+      this.loadingInstance = this.$loading({
+        background: "rgba(0, 0, 0, 0.8)",
+      });
+    },
+    hideLoading() {
+      this.loadingInstance?.close();
+    },
   },
+    mounted () {
+  	// 事件监听
+    window.addEventListener('scroll', this.listenBottomOut)
+  },
+  destroyed () {
+    // 离开页面取消监听
+    window.removeEventListener('scroll', this.listenBottomOut, false)
+  }
 };
 </script>
 

src/views/mobile/MyNft.vue

@@ -34,38 +34,30 @@
       @handSortSelect="handSortSelect"
     ></NftTypeBar>
     <div class="content-list">
-      <Transition>
+      <hero-list
-        <hero-list
+        :isType="isType"
-          :isType="isType"
+        v-show="nftType == 1"
-          v-show="nftType == 1"
+        :nftList="nftList"
-          :nftList="nftList"
+        :currencyTypeList="currencyTypeList"
-          :currencyTypeList="currencyTypeList"
+      ></hero-list>
-        ></hero-list>
+      <weapon-list
-      </Transition>
+        :isType="isType"
-      <Transition>
+        v-show="nftType == 2"
-        <weapon-list
+        :nftList="nftList"
-          :isType="isType"
+        :currencyTypeList="currencyTypeList"
-          v-show="nftType == 2"
+      ></weapon-list>
-          :nftList="nftList"
+      <chip-list
-          :currencyTypeList="currencyTypeList"
+        :isType="isType"
-        ></weapon-list>
+        v-show="nftType == 3"
-      </Transition>
+        :nftList="nftList"
-      <Transition>
+        :currencyTypeList="currencyTypeList"
-        <chip-list
+      ></chip-list>
-          :isType="isType"
+      <piece-list
-          v-show="nftType == 3"
+        :isType="isType"
-          :nftList="nftList"
+        v-show="nftType == 4"
-          :currencyTypeList="currencyTypeList"
+        :nftList="nftList"
-        ></chip-list>
+        :currencyTypeList="currencyTypeList"
-      </Transition>
+      ></piece-list>
-      <Transition>
-        <piece-list
-          :isType="isType"
-          v-show="nftType == 4"
-          :nftList="nftList"
-          :currencyTypeList="currencyTypeList"
-        ></piece-list>
-      </Transition>
     </div>
     <MobileFooter></MobileFooter>
   </div>
@@ -101,6 +93,7 @@ export default {
     return {
       nftType: 1,
       hero: "",
+
       isType: "mynft",
       nftList: [],
       isFiters: false,
@@ -113,8 +106,10 @@ export default {
       qualityFilter: 1,
       durabilityFilter: null,
       orderMethod: 0,
+      isShow: false,
       starts: 0,
       currentPage: 1,
+      loadingInstance: null,
       types: [
         { id: 1, name: "HERO" },
         { id: 2, name: "WEAPON" },
@@ -455,7 +450,7 @@ export default {
     isLogin() {
       if (this.isLogin) {
         this.getMyNftList();
-        this.getCurrencyType()
+        this.getCurrencyType();
       }
     },
   },
@@ -467,6 +462,8 @@ export default {
   methods: {
     onClickItem(s) {
       this.nftType = s.id;
+      this.nftList = [];
+      this.starts = 0;
       this.getMyNftList();
     },
     handSortSelect(value) {
@@ -592,35 +589,103 @@ export default {
       if (!AppModule.accountId) {
         return;
       }
-      const reqData = {
+      try {
-        page_size: this.pageSize,
+        this.showLoading();
-        start: this.starts,
+        const reqData = {
-        type: this.nftType == 4 ? 5 : this.nftType,
+          page_size: this.pageSize,
-        job_filters: this.jobFilters,
+          start: this.starts,
-        search_filters: this.searchFilters,
+          type: this.nftType == 4 ? 5 : this.nftType,
-        quality_filter: this.qualityFilter,
+          job_filters: this.jobFilters,
-        durability_filter: this.durabilityFilter,
+          search_filters: this.searchFilters,
-        lv_filter: this.lvFilter,
+          quality_filter: this.qualityFilter,
-        order_asc: this.orderAsc,
+          durability_filter: this.durabilityFilter,
-        order_method: this.orderMethod,
+          lv_filter: this.lvFilter,
-      };
+          order_asc: this.orderAsc,
+          order_method: this.orderMethod,
+        };
 
-      const res = await queryMyNftList(reqData);
+        const res = await queryMyNftList(reqData);
-      if (res.nfts) {
+        if (res.nfts) {
-        let list = res.nfts;
+      
-        this.nftList = list.filter((item) => {
+          this.nftList = res.nfts;
-          return item.details !== null;
-        });
-        if (res) {
           const page = res;
           this.totalPage = page.total || 1;
-          // console.log(this.totalPage, "this.totalPage");
           this.pageSize = page.page_size || 10;
-          this.starts = page.start;
+          this.hideLoading();
-          this.currentPage = page.start / page.page_size + 1;
+          // this.isShow = false;
         }
+      } catch (err) {
+        this.hideLoading();
+        this.nftList = [];
+        this.totalPage = 0;
       }
     },
+    // 触底触发函数
+   async listenBottomOut() {
+      const scrollTop =
+        document.documentElement.scrollTop || document.body.scrollTop;
+      const clientHeight = document.documentElement.clientHeight;
+      const scrollHeight = document.documentElement.scrollHeight;
+      console.log();
+      if (scrollTop + clientHeight >= scrollHeight) {
+        // 没有数据后，不触发请求
+        if (!this.isShow && this.starts < this.totalPage) {
+          // debugger
+          this.showLoading(); 
+          this.starts += 10;
+          const reqData = {
+            page_size: this.pageSize,
+            start: this.starts,
+            type: this.nftType == 4 ? 5 : this.nftType,
+            job_filters: this.jobFilters,
+            search_filters: this.searchFilters,
+            quality_filter: this.qualityFilter,
+            durability_filter: this.durabilityFilter,
+            lv_filter: this.lvFilter,
+            order_asc: this.orderAsc,
+            order_method: this.orderMethod,
+          };
+          const res = await queryMyNftList(reqData);
+          if (res.nfts) {
+      
+          this.nftList = [...this.nftList,...res.nfts];
+          const page = res;
+          this.totalPage = page.total || 1;
+          this.pageSize = page.page_size || 10;
+          this.hideLoading();
+          // this.isShow = false;
+        }
+         
+          console.log("this.getMyNftList();");
+        }
+        return;
+      }
+    },
+    showLoading() {
+      this.loadingInstance = this.$loading({
+        background: "rgba(0, 0, 0, 0.8)",
+      });
+    },
+    hideLoading() {
+      this.loadingInstance?.close();
+    },
+  },
+
+  mounted() {
+    // 事件监听
+    window.addEventListener("scroll", this.listenBottomOut);
+    let windowHeight =
+      document.documentElement.clientHeight || document.body.clientHeight; //变量windowHeight是 可视区的高度
+    let scrollHeight =
+      document.documentElement.scrollHeight || document.body.scrollHeight; //变量scrollHeight是 滚动条的总高度 /可视化的高度与溢出的距离（总高度）
+
+    if (windowHeight < scrollHeight) {
+      this.isShow = false;
+    }
+  },
+  destroyed() {
+    // 离开页面取消监听
+    window.removeEventListener("scroll", this.listenBottomOut, false);
   },
 };
 </script>