diff --git a/src/components/mobile/main/ChipList.vue b/src/components/mobile/main/ChipList.vue index c84013c..015896f 100644 --- a/src/components/mobile/main/ChipList.vue +++ b/src/components/mobile/main/ChipList.vue @@ -6,7 +6,7 @@ @click="showTip(chip)" :key="i" > -
+
-
+
-
+
Amount
-
+
cunout
{{ cunout }}
@@ -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.cunout--; - } + this.$emit("handReduce") + }, + handPlus() { + this.$emit("handPlus") }, formatPriceShow(price, decimals, fixed = 2) { return formatPrice(price, decimals, fixed); }, - handPlus() { - if (this.cunout < this.data.balance) { - this.cunout++; - } - }, + }, }; diff --git a/src/components/mobile/main/TheBuyDialog.vue b/src/components/mobile/main/TheBuyDialog.vue index ff55b11..2083002 100644 --- a/src/components/mobile/main/TheBuyDialog.vue +++ b/src/components/mobile/main/TheBuyDialog.vue @@ -49,7 +49,7 @@
-
PEBDING ORDER
+
CONFIRM
CONFIRM
@@ -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; diff --git a/src/components/mobile/main/TheSellDialog.vue b/src/components/mobile/main/TheSellDialog.vue index 7e3ce5d..917f9f4 100644 --- a/src/components/mobile/main/TheSellDialog.vue +++ b/src/components/mobile/main/TheSellDialog.vue @@ -8,17 +8,20 @@ v-if="type == 'weapon'" :data="piece" > - + - +
Sellers pay 5% fee to platform for completing
the transaction.
@@ -38,10 +41,14 @@
- + + +
-
PEBDING ORDER
+
CONFIRM
CONFIRM
@@ -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"); }, - - async handMessage() { - // console.log(this.piece, "this.price======"); - 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(); - } + handReduce() { + if (this.cunout > 1) { + this.cunout--; } }, + 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)", diff --git a/src/components/mobile/main/WeaponList.vue b/src/components/mobile/main/WeaponList.vue index 669abd6..7edc365 100644 --- a/src/components/mobile/main/WeaponList.vue +++ b/src/components/mobile/main/WeaponList.vue @@ -6,7 +6,7 @@ @click="showTip(weapon)" :key="i" > -
+
0) { diff --git a/src/views/mobile/Market.vue b/src/views/mobile/Market.vue index b748673..f88dd61 100644 --- a/src/views/mobile/Market.vue +++ b/src/views/mobile/Market.vue @@ -39,10 +39,30 @@ @handSortSelect="handSortSelect" >
- - - - + + + +
@@ -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 = { - 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) { - let list = res.nfts; - this.nftList = list.filter((item) => { - return item.details !== null; - }); - if (res) { + if (res.nfts) { + this.nftList = res.nfts; 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.currentPage = page.start / page.page_size + 1; + this.hideLoading(); } + } 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) + } }; diff --git a/src/views/mobile/MyNft.vue b/src/views/mobile/MyNft.vue index 08ca125..b85b2eb 100644 --- a/src/views/mobile/MyNft.vue +++ b/src/views/mobile/MyNft.vue @@ -34,38 +34,30 @@ @handSortSelect="handSortSelect" >
- - - - - - - - - - - - + + + +
@@ -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 = { - 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, - }; + try { + this.showLoading(); + 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) { - let list = res.nfts; - this.nftList = list.filter((item) => { - return item.details !== null; - }); - if (res) { + const res = await queryMyNftList(reqData); + if (res.nfts) { + + this.nftList = res.nfts; 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.currentPage = page.start / page.page_size + 1; + this.hideLoading(); + // 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); }, };