This commit is contained in:
huangjinming 2022-12-29 13:59:23 +08:00
parent 778006ad69
commit d3efb47e33
10 changed files with 125 additions and 113 deletions

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="container"> <div class="container">
<Herofilter <HeroFilter
v-if="nftType - 1 == 0" v-if="nftType - 1 == 0"
@heroLevelChange="heroLevelChange" @heroLevelChange="heroLevelChange"
@heroQuilityChange="heroQuilityChange" @heroQuilityChange="heroQuilityChange"
@ -19,8 +19,8 @@
:isType="isType" :isType="isType"
:priceMax="priceMax" :priceMax="priceMax"
:priceMin="priceMin" :priceMin="priceMin"
></Herofilter> ></HeroFilter>
<Weaponfilter <WeaponFilter
v-else-if="nftType - 1 == 1" v-else-if="nftType - 1 == 1"
@weaponSearch="weaponSearch" @weaponSearch="weaponSearch"
@handWeaponSelect="handWeaponSelect" @handWeaponSelect="handWeaponSelect"
@ -35,8 +35,8 @@
:isType="isType" :isType="isType"
:priceMax="priceMax" :priceMax="priceMax"
:priceMin="priceMin" :priceMin="priceMin"
></Weaponfilter> ></WeaponFilter>
<Chipfilter <ChipFilter
v-else-if="nftType - 1 == 2" v-else-if="nftType - 1 == 2"
@chipSearch="chipSearch" @chipSearch="chipSearch"
@handChipSelect="handChipSelect" @handChipSelect="handChipSelect"
@ -51,8 +51,8 @@
:isType="isType" :isType="isType"
:priceMax="priceMax" :priceMax="priceMax"
:priceMin="priceMin" :priceMin="priceMin"
></Chipfilter> ></ChipFilter>
<Piecefilter <PieceFilter
v-else-if="nftType - 1 == 3" v-else-if="nftType - 1 == 3"
@pieceSearch="pieceSearch" @pieceSearch="pieceSearch"
@handPieceSelect="handPieceSelect" @handPieceSelect="handPieceSelect"
@ -66,15 +66,15 @@
:isType="isType" :isType="isType"
:priceMax="priceMax" :priceMax="priceMax"
:priceMin="priceMin" :priceMin="priceMin"
></Piecefilter> ></PieceFilter>
</div> </div>
</template> </template>
<script> <script>
import Herofilter from "@/components/market/filters/Herofilter"; import HeroFilter from "@/components/market/filters/HeroFilter";
import Weaponfilter from "@/components/market/filters/Weaponfilter"; import WeaponFilter from "@/components/market/filters/WeaponFilter";
import Chipfilter from "@/components/market/filters/Chipfilter"; import ChipFilter from "@/components/market/filters/ChipFilter";
import Piecefilter from "@/components/market/filters/Piecefilter"; import PieceFilter from "@/components/market/filters/PieceFilter";
export default { export default {
props: [ props: [
'priceMax', 'priceMax',
@ -93,10 +93,10 @@ export default {
"weaponOptions", "weaponOptions",
], ],
components: { components: {
Herofilter, HeroFilter,
Chipfilter, ChipFilter,
Weaponfilter, WeaponFilter,
Piecefilter, PieceFilter,
}, },
methods: { methods: {
sliderChange(value) { sliderChange(value) {

View File

@ -45,7 +45,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator"; import { Component, Vue, Prop } from "vue-property-decorator";
import SortSelect from "@/components/market/SortSelect.vue"; import SortSelect from "@/components/market/SortSelect.vue";
import CardList from "@/components/market/CardList.vue"; import CardList from "@/components/market/HeroCardList.vue";
import DunList from "@/components/market/DunList.vue"; import DunList from "@/components/market/DunList.vue";
import ChipList from "@/components/market/ChipCardList.vue"; import ChipList from "@/components/market/ChipCardList.vue";
import PieceList from "@/components/market/nft/PieceNft.vue"; import PieceList from "@/components/market/nft/PieceNft.vue";

View File

@ -80,8 +80,8 @@ import WeaponSellTop from "./WeaponSellTop.vue";
import PieceSellTop from "./PieceSellTop.vue"; import PieceSellTop from "./PieceSellTop.vue";
import HeroSellTop from "./HeroSellTop.vue"; import HeroSellTop from "./HeroSellTop.vue";
import ChipSellTop from "./ChipSellTop.vue"; import ChipSellTop from "./ChipSellTop.vue";
import { getSupportedCurrenTypes } from "@/api/Market";
import { AppModule } from "@/store/modules/app"; import { AppModule } from "@/store/modules/app";
import { sellMyNft } from "@/api/Market";
import { CONTRACT_ADDRESS } from "@/configs/config_chain"; import { CONTRACT_ADDRESS } from "@/configs/config_chain";
import ChainManager from "@/chain/ChainManager"; import ChainManager from "@/chain/ChainManager";
@ -107,13 +107,13 @@ export default {
}; };
}, },
created() { created() {
// if (this.options.length > 0) { // console.log(this.currencyTypeList.length,'this.currencyTypeList');
// return; if (this.currencyTypeList.length > 0 && this.currencyTypeList) {
// } else { this.value = this.currencyTypeList[0].address;
// this.getOption(); }else{
// } return false
this.value = this.currencyTypeList[0].address; }
console.log(this.options, "87887"); // this.value = this.currencyTypeList[0].address;
}, },
methods: { methods: {
closeTip() { closeTip() {
@ -121,62 +121,57 @@ export default {
}, },
async handMessage() { async handMessage() {
// this.$emit("handMessage"); // this.$emit("handMessage");
// const data = { const data = {
// nft_token: this.piece nft_token: this.piece
// ? this.piece.detail.token_id ? this.piece.detail.token_id
// : this.data.detail.token_id, : this.data.detail.token_id,
// s_price: this.price, s_price: this.price,
// amount: this.piece ? this.cunout : null, amount: this.piece ? this.cunout : 1,
// }; };
// const res = await sellMyNft(data); const res = await sellMyNft(data);
switch (this.type) { // switch (this.type) {
case "hero": // case "hero":
console.log(this.type, "-=-", AppModule.chainId); // console.log(this.type, "-=-", AppModule.chainId);
"1338"; // "1338";
console.log(CONTRACT_ADDRESS[AppModule.chainId]); // console.log(CONTRACT_ADDRESS[AppModule.chainId]);
this.nft_Token = CONTRACT_ADDRESS["1338"].hero; // this.nft_Token = CONTRACT_ADDRESS["1338"].hero;
break; // break;
case "weapon": // case "weapon":
this.nft_Token = CONTRACT_ADDRESS["1338"].weapon; // this.nft_Token = CONTRACT_ADDRESS["1338"].weapon;
break; // break;
case "chip": // case "chip":
this.nft_Token = CONTRACT_ADDRESS["1338"].chip; // this.nft_Token = CONTRACT_ADDRESS["1338"].chip;
break; // break;
case "piece": // case "piece":
this.nft_Token = CONTRACT_ADDRESS["1338"].piece; // this.nft_Token = CONTRACT_ADDRESS["1338"].piece;
break; // break;
} // }
try { // try {
const shellData = { // const shellData = {
nftToken: this.nft_Token, // nftToken: this.nft_Token,
currency: this.value, // currency: this.value,
tokenId: this.piece // tokenId: this.piece
? this.piece.detail.token_id // ? this.piece.detail.token_id
: this.data.detail.token_id, // : this.data.detail.token_id,
amount: this.piece ? this.cunout : 1, // amount: this.piece ? this.cunout : 1,
price: this.price, // price: this.price,
marketAddress: CONTRACT_ADDRESS["1338"].address, // marketAddress: CONTRACT_ADDRESS["1338"].address,
}; // };
console.log(shellData, "shellData"); // console.log(shellData, "shellData");
const nftres = await this.chainManager.bc.beginNftSell( // const nftres = await this.chainManager.bc.beginNftSell(
this.nft_Token, // this.nft_Token,
this.value, // this.value,
this.piece ? this.piece.detail.token_id : this.data.detail.token_id, // this.piece ? this.piece.detail.token_id : this.data.detail.token_id,
this.piece ? this.cunout : 1, // this.piece ? this.cunout : 1,
this.price, // this.price,
CONTRACT_ADDRESS["1338"].address // CONTRACT_ADDRESS["1338"].address
); // );
console.log(nftres, "beginSell"); // console.log(nftres, "beginSell");
} catch (err) { // } catch (err) {
console.log("query order status error", err); // console.log("query order status error", err);
} // }
},
async getOption() {
const res = await getSupportedCurrenTypes();
this.options = res.list;
this.value = this.options[0].address;
}, },
init(data) { init(data) {
this.dialogVisible = true; this.dialogVisible = true;

View File

@ -49,7 +49,7 @@
</div> </div>
</div> </div>
</div> </div>
<Chipdialog <ChipDialog
:dialogVisible="dialogVisible" :dialogVisible="dialogVisible"
@on-close="chipDialoghide" @on-close="chipDialoghide"
@on-click="chipDialog" @on-click="chipDialog"
@ -62,7 +62,7 @@
:data="chip" :data="chip"
:isType="isType" :isType="isType"
:isPiecePut="isPiecePut" :isPiecePut="isPiecePut"
></Chipdialog> ></ChipDialog>
<ChipBuyDialog <ChipBuyDialog
:type="type" :type="type"
:isBuy="isBuy" :isBuy="isBuy"
@ -70,9 +70,10 @@
@handBuyShow="handBuyShow" @handBuyShow="handBuyShow"
@handBuyHide="handBuyHide" @handBuyHide="handBuyHide"
></ChipBuyDialog> ></ChipBuyDialog>
<PriceSetting <TheSellDialog
:type="type" :type="type"
:data="chip" :data="chip"
v-if="currencyTypeList"
:currencyTypeList="currencyTypeList" :currencyTypeList="currencyTypeList"
:isPiecePut="isPiecePut" :isPiecePut="isPiecePut"
@handPutShow="handPutShow" @handPutShow="handPutShow"
@ -82,14 +83,14 @@
</template> </template>
<script> <script>
import Chipdialog from "../Chipdialog.vue"; import ChipDialog from "../ChipDialog.vue";
import ChipBuyDialog from "../ChipBuyDialog.vue"; import ChipBuyDialog from "../ChipBuyDialog.vue";
import PriceSetting from "../TheSellDialog.vue"; import TheSellDialog from "../TheSellDialog.vue";
export default { export default {
props: ["chip", "isType",'currencyTypeList'], props: ["chip", "isType",'currencyTypeList'],
components: { components: {
Chipdialog, ChipDialog,
PriceSetting, TheSellDialog,
ChipBuyDialog, ChipBuyDialog,
}, },
data() { data() {

View File

@ -1,6 +1,6 @@
<template> <template>
<div> <div>
<div class="container" @click="HeroDialog(data)"> <div class="container" @click="heroDialog(data)">
<!-- <div class="no-sale"> <!-- <div class="no-sale">
<div class="for-rent"> <div class="for-rent">
<div class="for-rent-img"> <div class="for-rent-img">
@ -55,7 +55,7 @@
</div> </div>
<div class="info"> <div class="info">
<div class="info-level"> <div class="info-level">
Lv: <span></span> <span>Lv:</span>
<span class="level"> {{ fillZero(levelNumber) }}</span> <span class="level"> {{ fillZero(levelNumber) }}</span>
</div> </div>
@ -88,9 +88,9 @@
</div> </div>
</div> </div>
</div> </div>
<Herodialog <HeroDialog
:dialogVisible="dialogVisible" :dialogVisible="dialogVisible"
@on-close="HeroDialoghide" @on-close="heroDialoghide"
:isTab="isTab" :isTab="isTab"
:isType="isType" :isType="isType"
:type="type" :type="type"
@ -99,16 +99,17 @@
@handBuyHide="handBuyHide" @handBuyHide="handBuyHide"
@closeTip="closeTip" @closeTip="closeTip"
@showTip="showTip" @showTip="showTip"
@on-click="HeroDialog" @on-click="heroDialog"
:isPiecePut="isPiecePut" :isPiecePut="isPiecePut"
@handPutShow="handPutShow" @handPutShow="handPutShow"
@handPutHide="handPutHide" @handPutHide="handPutHide"
:hero="data" :hero="data"
></Herodialog> ></HeroDialog>
<TheSellDialog <TheSellDialog
:type="type" :type="type"
:isPiecePut="isPiecePut" :isPiecePut="isPiecePut"
:data="data" :data="data"
v-if="currencyTypeList"
:currencyTypeList="currencyTypeList" :currencyTypeList="currencyTypeList"
@handPutShow="handPutShow" @handPutShow="handPutShow"
@handPutHide="handPutHide" @handPutHide="handPutHide"
@ -123,15 +124,15 @@
</div> </div>
</template> </template>
<script lang="ts"> <script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator"; import { Component, Vue, Watch } from "vue-property-decorator";
import Herodialog from "../Herodialog.vue"; import HeroDialog from "../HeroDialog.vue";
import HeroBuyDialog from "../HeroBuyDialog.vue"; import HeroBuyDialog from "../HeroBuyDialog.vue";
import TheSellDialog from "../TheSellDialog.vue"; import TheSellDialog from "../TheSellDialog.vue";
@Component({ @Component({
name: "HeroNft", name: "HeroNft",
components: { components: {
Herodialog, HeroDialog,
TheSellDialog, TheSellDialog,
HeroBuyDialog, HeroBuyDialog,
}, },
@ -208,11 +209,11 @@ export default class HeroNft extends Vue {
get qualityNumber() { get qualityNumber() {
return this.data.detail.quality; return this.data.detail.quality;
} }
HeroDialog(data: void) { heroDialog(data: void) {
this.dialogVisible = true; this.dialogVisible = true;
} }
HeroDialoghide(data: boolean) { heroDialoghide(data: boolean) {
this.dialogVisible = data; this.dialogVisible = data;
} }
handPutShow() { handPutShow() {
@ -297,7 +298,7 @@ export default class HeroNft extends Vue {
background: url("../../../assets/market/hero/name-bg.png") no-repeat; background: url("../../../assets/market/hero/name-bg.png") no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: absolute; position: absolute;
right: 24px; right: 23px;
text-align: center; text-align: center;
color: #fff; color: #fff;
bottom: 5px; bottom: 5px;
@ -314,6 +315,7 @@ export default class HeroNft extends Vue {
} }
.info-level { .info-level {
color: #454545; color: #454545;
font-size: 16px;
font-style: italic; font-style: italic;
margin-left: 20px; margin-left: 20px;
} }

View File

@ -81,6 +81,7 @@
ref="selldialog" ref="selldialog"
:type="type" :type="type"
:isPiecePut="isPiecePut" :isPiecePut="isPiecePut"
v-if="currencyTypeList"
:currencyTypeList="currencyTypeList" :currencyTypeList="currencyTypeList"
@handMessage="handMessage" @handMessage="handMessage"
@handPutShow="handPutShow" @handPutShow="handPutShow"
@ -98,7 +99,7 @@
</template> </template>
<script> <script>
import Piecedialog from "../Piecedialog.vue"; import PieceDialog from "../PieceDialog";
import TheSell from "../TheSellDialog.vue"; import TheSell from "../TheSellDialog.vue";
import ChipBuyDialog from "../ChipBuyDialog.vue"; import ChipBuyDialog from "../ChipBuyDialog.vue";
import MessageBox from "../MessageBox.vue"; import MessageBox from "../MessageBox.vue";
@ -106,7 +107,7 @@ import WeaponBuyDialog from "../WeaponBuyDialog.vue";
export default { export default {
props: ["isType", "nftList",'currencyTypeList'], props: ["isType", "nftList",'currencyTypeList'],
components: { components: {
Piecedialog, PieceDialog,
TheSell, TheSell,
WeaponBuyDialog, WeaponBuyDialog,
ChipBuyDialog, ChipBuyDialog,

View File

@ -61,7 +61,7 @@
</div> </div>
</div> </div>
</div> </div>
<Dundialog <DunDialog
:dialogVisible="dialogVisible" :dialogVisible="dialogVisible"
@on-close="chipDialogHide" @on-close="chipDialogHide"
@on-click="chipDialog" @on-click="chipDialog"
@ -77,10 +77,11 @@
@handBuyHide="handBuyHide" @handBuyHide="handBuyHide"
@handPutShow="handPutShow" @handPutShow="handPutShow"
@handPutHide="handPutHide" @handPutHide="handPutHide"
></Dundialog> ></DunDialog>
<TheSellDialog <TheSellDialog
:type="type" :type="type"
:data="weapon" :data="weapon"
v-if="currencyTypeList"
:currencyTypeList="currencyTypeList" :currencyTypeList="currencyTypeList"
:isPiecePut="isPiecePut" :isPiecePut="isPiecePut"
@handPutShow="handPutShow" @handPutShow="handPutShow"
@ -97,14 +98,14 @@
</template> </template>
<script> <script>
import Dundialog from "../Dundialog.vue"; import DunDialog from "../DunDialog";
import TheSellDialog from "../TheSellDialog.vue"; import TheSellDialog from "../TheSellDialog.vue";
import TheBuyDialog from "../WeaponBuyDialog.vue"; import TheBuyDialog from "../WeaponBuyDialog.vue";
export default { export default {
props: ["weapon", "isType",'currencyTypeList'], props: ["weapon", "isType",'currencyTypeList'],
components: { components: {
Dundialog, DunDialog,
TheSellDialog, TheSellDialog,
TheBuyDialog, TheBuyDialog,
}, },

View File

@ -75,6 +75,7 @@
<script lang="ts"> <script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator"; import { Component, Vue, Watch } from "vue-property-decorator";
import { ElLoadingComponent } from "element-ui/types/loading";
import SearchPanel from "@/components/market/SearchPanel.vue"; import SearchPanel from "@/components/market/SearchPanel.vue";
import ResultNo from "@/components/market/ResultNo.vue"; import ResultNo from "@/components/market/ResultNo.vue";
import Pagination from "@/components/market/Pagination.vue"; import Pagination from "@/components/market/Pagination.vue";
@ -107,6 +108,7 @@ export default class Market extends Vue {
nftType = 1; nftType = 1;
nftList = []; nftList = [];
debounce: any = null; debounce: any = null;
loadingInstance: ElLoadingComponent;
private totalPage = 1; private totalPage = 1;
private pageSize = 10; private pageSize = 10;
private currentPage = 1; private currentPage = 1;
@ -493,7 +495,7 @@ export default class Market extends Vue {
} }
pieceStatus(item: any) { pieceStatus(item: any) {
this.pieceList[item.id].jobType = !this.pieceList[item.id].jobType; this.pieceList[item.id].jobType = !this.pieceList[item.id].jobType;
let list = this.pieceList.filter((item) => { let list = this.pieceList.filter((item) => {
return item.jobType == true; return item.jobType == true;
}); });
@ -595,6 +597,7 @@ export default class Market extends Vue {
if (!AppModule.accountId) { if (!AppModule.accountId) {
return; return;
} }
this.showLoading();
const reqData: any = { const reqData: any = {
page_size: this.pageSize, page_size: this.pageSize,
start: this.starts, start: this.starts,
@ -615,16 +618,15 @@ export default class Market extends Vue {
this.nftList = list.filter((item: any) => { this.nftList = list.filter((item: any) => {
return item.details !== null; return item.details !== null;
}); });
if (res) { if (res) {
const page = res; const page = res;
this.totalPage = parseInt(page.total) || 1; this.totalPage = parseInt(page.total) || 1;
this.pageSize = page.page_size || 10; this.pageSize = page.page_size || 10;
this.starts = page.start; this.starts = page.start;
this.currentPage = page.start / page.page_size + 1; this.currentPage = page.start / page.page_size + 1;
} }
this.hideLoading();
} }
} }
@Watch("isLogin") @Watch("isLogin")
@ -662,7 +664,13 @@ export default class Market extends Vue {
this.searchFilters = null; this.searchFilters = null;
this.getHeroNftList(this.starts); this.getHeroNftList(this.starts);
} }
showLoading() {
this.loadingInstance = this.$loading({ background: "rgba(0, 0, 0, 0.8)" });
}
hideLoading() {
this.loadingInstance?.close();
}
// this.isValue // this.isValue
sliderChange() {} sliderChange() {}
} }

View File

@ -632,6 +632,7 @@ export default class MyNft extends Vue {
if (!AppModule.accountId) { if (!AppModule.accountId) {
return; return;
} }
this.showLoading();
const reqData: any = { const reqData: any = {
page_size: this.pageSize, page_size: this.pageSize,
start: this.starts, start: this.starts,
@ -651,7 +652,7 @@ export default class MyNft extends Vue {
this.nftList = list.filter((item: any) => { this.nftList = list.filter((item: any) => {
return item.details !== null; return item.details !== null;
}); });
console.log(this.nftList, "-=========================="); // console.log(this.nftList, "-==========================");
if (res) { if (res) {
const page = res; const page = res;
@ -666,7 +667,10 @@ export default class MyNft extends Vue {
} }
} }
async getCurrencyType() { async getCurrencyType() {
const res:any = await getSupportedCurrenTypes(); if (this.currencyTypeList.length > 0) {
return false;
}
const res: any = await getSupportedCurrenTypes();
this.currencyTypeList = res.list; this.currencyTypeList = res.list;
// this.value = this.options[0].address; // this.value = this.options[0].address;
} }
@ -694,7 +698,7 @@ export default class MyNft extends Vue {
// this.fetchDatas(1); // this.fetchDatas(1);
this.getHeroNftList(this.starts); this.getHeroNftList(this.starts);
} }
this.getCurrencyType() this.getCurrencyType();
} }
sliderChange() {} sliderChange() {}
filterChange(id: number) { filterChange(id: number) {
@ -719,7 +723,7 @@ export default class MyNft extends Vue {
// this.fetchDatas(this.pageSize); // this.fetchDatas(this.pageSize);
this.checkOrderHistory(); this.checkOrderHistory();
this.getHeroNftList(this.starts); this.getHeroNftList(this.starts);
this.getCurrencyType() this.getCurrencyType();
} else { } else {
this.resetData(); this.resetData();
} }