fic
This commit is contained in:
huangjinming
parent
209ec9b0ab
commit
b9f5ee9745
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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.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++;
|
||||
}
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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-form :rules="FormRules" ref="deptForm" :model="shell">
|
||||
<el-form-item label="" prop="price">
|
||||
<el-input
|
||||
placeholder="Input your price"
|
||||
v-model="prices"
|
||||
></el-input>
|
||||
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,18 +167,44 @@ export default {
|
||||
this.piece = data;
|
||||
// console.log(data, "dfgdg");
|
||||
},
|
||||
|
||||
async handMessage() {
|
||||
// console.log(this.piece, "this.price======");
|
||||
if (this.piece.selling > 0) {
|
||||
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.orderId,
|
||||
this.prices,
|
||||
this.piece.o_link,
|
||||
this.shell.price,
|
||||
CONTRACT_ADDRESS[AppModule.chainId].marketDddress
|
||||
);
|
||||
// console.log(nftres, "beginSell");
|
||||
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 {
|
||||
@ -172,35 +222,78 @@ export default {
|
||||
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");
|
||||
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.prices,
|
||||
this.shell.price,
|
||||
CONTRACT_ADDRESS[AppModule.chainId].marketDddress
|
||||
);
|
||||
if (nftres.status == true) {
|
||||
this.showLoading();
|
||||
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);
|
||||
}
|
||||
// console.log(nftres, "beginSell");
|
||||
} catch (err) {
|
||||
this.hideLoading();
|
||||
this.$emit("handMessage", 0);
|
||||
console.log("query order status error", err);
|
||||
this.showLoading();
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
showLoading() {
|
||||
this.loadingInstance = this.$loading({
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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() {
|
||||
|
||||
@ -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) {
|
||||
|
||||
@ -39,10 +39,30 @@
|
||||
@handSortSelect="handSortSelect"
|
||||
></NftTypeBar>
|
||||
<div class="content-list">
|
||||
<hero-list v-show="nftType == 1" :nftList="nftList" :currencyTypeList="currencyTypeList"></hero-list>
|
||||
<weapon-list v-show="nftType == 2" :nftList="nftList" :currencyTypeList="currencyTypeList"></weapon-list>
|
||||
<chip-list v-show="nftType == 3" :nftList="nftList" :currencyTypeList="currencyTypeList"></chip-list>
|
||||
<piece-list v-show="nftType == 4" :nftList="nftList" :currencyTypeList="currencyTypeList"></piece-list>
|
||||
<hero-list
|
||||
v-show="nftType == 1"
|
||||
:nftList="nftList"
|
||||
: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,7 +587,7 @@ export default {
|
||||
if (!AppModule.accountId) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const reqData = {
|
||||
page_size: this.pageSize,
|
||||
start: this.starts,
|
||||
@ -578,24 +601,78 @@ export default {
|
||||
order_method: this.orderMethod,
|
||||
price_filter: this.priceFilter,
|
||||
};
|
||||
|
||||
this.showLoading();
|
||||
const res = await queryMarketNftList(reqData);
|
||||
|
||||
if (res.nfts) {
|
||||
let list = res.nfts;
|
||||
this.nftList = list.filter((item) => {
|
||||
return item.details !== null;
|
||||
});
|
||||
if (res) {
|
||||
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)
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
@ -34,38 +34,30 @@
|
||||
@handSortSelect="handSortSelect"
|
||||
></NftTypeBar>
|
||||
<div class="content-list">
|
||||
<Transition>
|
||||
<hero-list
|
||||
:isType="isType"
|
||||
v-show="nftType == 1"
|
||||
:nftList="nftList"
|
||||
:currencyTypeList="currencyTypeList"
|
||||
></hero-list>
|
||||
</Transition>
|
||||
<Transition>
|
||||
<weapon-list
|
||||
:isType="isType"
|
||||
v-show="nftType == 2"
|
||||
:nftList="nftList"
|
||||
:currencyTypeList="currencyTypeList"
|
||||
></weapon-list>
|
||||
</Transition>
|
||||
<Transition>
|
||||
<chip-list
|
||||
:isType="isType"
|
||||
v-show="nftType == 3"
|
||||
:nftList="nftList"
|
||||
:currencyTypeList="currencyTypeList"
|
||||
></chip-list>
|
||||
</Transition>
|
||||
<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,6 +589,8 @@ export default {
|
||||
if (!AppModule.accountId) {
|
||||
return;
|
||||
}
|
||||
try {
|
||||
this.showLoading();
|
||||
const reqData = {
|
||||
page_size: this.pageSize,
|
||||
start: this.starts,
|
||||
@ -607,20 +606,86 @@ export default {
|
||||
|
||||
const res = await queryMyNftList(reqData);
|
||||
if (res.nfts) {
|
||||
let list = res.nfts;
|
||||
this.nftList = list.filter((item) => {
|
||||
return item.details !== null;
|
||||
});
|
||||
if (res) {
|
||||
|
||||
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);
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user