crypto/bemarket
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix

Browse Source
This commit is contained in:
huangjinming 2023-01-19 11:46:33 +08:00
parent 4eb4742799
commit 94ada755d8
8 changed files with 99 additions and 131 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/market/WeaponSellTop.vue
View File

@ -82,9 +82,7 @@ export default {
margin-left: 17px; margin-left: 17px;
} }
.weapon-name { .weapon-name {
// width: 46px;
height: 15px; height: 15px;
// max-width: 86px;
line-height: 15px; line-height: 15px;
padding-right: 10px; padding-right: 10px;
padding-left: 10px; padding-left: 10px;

6
src/components/mobile/main/HeroBuyTop.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="hero-top"> <div class="hero-top" v-if="data.info">
<div :class="data.info.is_genesis ? 'piece-left' : 'piece-left-gen'"> <div :class="data.info.is_genesis ? 'piece-left' : 'piece-left-gen'">
<div class="hero-img"> <div class="hero-img">
<img <img
@ -8,8 +8,8 @@
alt="" alt=""
/> />
</div> </div>
<div class="gen" v-if="data.info.is_genesis"> <div class="gen" v-if="data.info">
<img width="31px" src="../../../assets/market/hero/gen.png" alt="" /> <img width="31px" v-if="data.info.is_genesis" src="../../../assets/market/hero/gen.png" alt="" />
</div> </div>
</div> </div>
<div class="hero-right"> <div class="hero-right">

30
src/components/mobile/main/HeroItem.vue
View File

@ -1,8 +1,8 @@
<template> <template>
<div> <div>
<div class="type-img"> <div class="type-img" v-if="hero.info">
<img <img
v-if="hero.info.is_genesis == 1" v-if="hero.info.is_genesis"
class="img-item" class="img-item"
src="../../../assets/mobile/market/hero/type-1.png" src="../../../assets/mobile/market/hero/type-1.png"
alt="" alt=""
@ -25,10 +25,10 @@
alt="" alt=""
/> />
</div> </div>
<div class="gen"> <div class="gen" v-if="hero.info">
<img <img
width="42px" width="42px"
v-if="hero.info.is_genesis == 1" v-if="hero.info.is_genesis"
src="../../../assets/market/hero/gen.png" src="../../../assets/market/hero/gen.png"
alt="" alt=""
/> />
@ -48,21 +48,21 @@
</div> </div>
<div class="mynft-btn" v-if="isType == 'mynft'"> <div class="mynft-btn" v-if="isType == 'mynft'">
<!-- <div class="rent-btn">rent</div> --> <!-- <div class="rent-btn">rent</div> -->
<div class="t-icon" v-if="hero.o_link > 0 &&isType=='mynft'"> <div class="t-icon" v-if="hero.o_link > 0 && isType == 'mynft'">
<img src="../../../assets/mobile/market/hero/t-icon.png" alt="" /> <img src="../../../assets/mobile/market/hero/t-icon.png" alt="" />
</div> </div>
<div class="price" v-if="hero.o_link > 0 &&isType=='mynft'">{{formatPriceShow(hero.s_price,18) }}</div> <div class="price" v-if="hero.o_link > 0 && isType == 'mynft'">
{{ formatPriceShow(hero.s_price, 18) }}
</div>
<div class="sell-btn">sell</div> <div class="sell-btn">sell</div>
</div> </div>
<div class="sale" v-else> <div class="sale" v-else>
<div class="t-icon"> <div class="t-icon">
<img src="../../../assets/mobile/market/hero/t-icon.png" alt="" /> <img src="../../../assets/mobile/market/hero/t-icon.png" alt="" />
</div> </div>
<div class="price">{{formatPriceShow(hero.s_price,18) }}</div> <div class="price">{{ formatPriceShow(hero.s_price, 18) }}</div>
<div class="buy"> <div class="buy">
<img src="../../../assets/mobile/market/hero/buy.png" alt="" />
<img src="../../../assets/mobile/market/hero/buy.png" alt=""
/>
</div> </div>
</div> </div>
</div> </div>
@ -118,11 +118,11 @@ export default {
} }
} }
}, },
methods:{ methods: {
formatPriceShow(price, decimals, fixed = 2) { formatPriceShow(price, decimals, fixed = 2) {
return formatPrice(price, decimals, fixed); return formatPrice(price, decimals, fixed);
}, },
} },
}; };
</script> </script>
@ -205,7 +205,7 @@ export default {
color: #ffffff; color: #ffffff;
border-radius: 31px; border-radius: 31px;
} }
.t-icon { .t-icon {
width: 63px; width: 63px;
height: 63px; height: 63px;
img { img {
@ -217,7 +217,7 @@ export default {
.sale { .sale {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
margin-top: 25px; margin-top: 25px;
padding-left: 22px; padding-left: 22px;
padding-right: 22px; padding-right: 22px;
.t-icon { .t-icon {

4
src/components/mobile/main/HeroSellTop.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<div class="piece-top"> <div class="piece-top">
<div :class="data.info.is_genesis ? 'piece-left' : 'piece-left-gen'"> <div v-if="data.info" :class="data.info.is_genesis ? 'piece-left' : 'piece-left-gen'">
<div> <div>
<img <img
class="hero-img" class="hero-img"
@ -29,7 +29,7 @@
<div class="token-id"> <div class="token-id">
<div> <div>
<div>Token id</div> <div>Token id</div>
<div>#{{ data.detail.token_id }}</div> <div v-if="data.detail">#{{ data.detail.token_id }}</div>
</div> </div>
</div> </div>
<div class="amount"> <div class="amount">

5
src/components/mobile/main/PieceSellTop.vue
View File

@ -2,16 +2,15 @@
<div> <div>
<div :class="isBuy ? 'piece-top' : 'piece-active'"> <div :class="isBuy ? 'piece-top' : 'piece-active'">
<div class="piece-left"> <div class="piece-left">
<div class="piece-img"> <div class="piece-img" v-if="data.detail">
<img <img
v-if="data.detail.item_id"
:src=" :src="
require('@/assets/market/piece/' + data.detail.item_id + '.png') require('@/assets/market/piece/' + data.detail.item_id + '.png')
" "
alt="" alt=""
/> />
</div> </div>
<div class="name">{{ data.detail.name }}</div> <div class="name" v-if="data.detail">{{ data.detail.name }}</div>
</div> </div>
<div class="piece-right"> <div class="piece-right">
<div class="userinfo"> <div class="userinfo">

12
src/components/mobile/main/TheSellDialog.vue
View File

@ -8,7 +8,6 @@
v-if="type == 'weapon'" v-if="type == 'weapon'"
:data="piece" :data="piece"
></WeaponSellTop> ></WeaponSellTop>
<ChipSellTop <ChipSellTop
:isBuy="isBuy" :isBuy="isBuy"
v-if="type == 'chip'" v-if="type == 'chip'"
@ -34,9 +33,7 @@
alt="" alt=""
/> />
</div> </div>
<div class="service-usdt"> <div class="service-usdt"><span class="usdt-number"> 0</span> USDT</div>
<span class="usdt-number"> 0</span> USDT
</div>
</div> </div>
<div class="piece-bottom"> <div class="piece-bottom">
<div class="piece-bottom-top"> <div class="piece-bottom-top">
@ -159,7 +156,7 @@ export default {
methods: { methods: {
closeTip() { closeTip() {
this.detailVisible = false; this.detailVisible = false;
this.shell.price ='' this.shell.price = "";
}, },
init(data) { init(data) {
this.detailVisible = true; this.detailVisible = true;
@ -316,8 +313,9 @@ $item-size: 22px;
left: 0; left: 0;
width: 100%; width: 100%;
background-color: rgba(20, 28, 34, 0.6); background-color: rgba(20, 28, 34, 0.6);
z-index: 2000; z-index: 2000;
transition: opacity 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0s, transform 0.2s ease-in-out 0s; transition: opacity 0.2s cubic-bezier(0.6, 0, 0.4, 1) 0s,
transform 0.2s ease-in-out 0s;
.content { .content {
position: relative; position: relative;
.close { .close {

81
src/views/desktop/Market.vue
View File

@ -36,7 +36,7 @@
:pieceOptions="pieceOptions" :pieceOptions="pieceOptions"
:chipOptions="chipOptions" :chipOptions="chipOptions"
:nft-type="nftType" :nft-type="nftType"
:isType="isType" :isType="isType"
:value="value" :value="value"
:priceMax="priceMax" :priceMax="priceMax"
:priceMin="priceMin" :priceMin="priceMin"
@ -106,7 +106,7 @@ import { debounce } from "@/utils/formatAddress";
export default class Market extends Vue { export default class Market extends Vue {
mobileFilterShow = false; mobileFilterShow = false;
currentTab = "market"; currentTab = "market";
isType="isType" isType = "isType";
value = 7; value = 7;
nftType = 1; nftType = 1;
nftList = []; nftList = [];
@ -531,7 +531,6 @@ export default class Market extends Vue {
heroLevelChange(levelSlider: any) { heroLevelChange(levelSlider: any) {
this.lvFilter = levelSlider; this.lvFilter = levelSlider;
this.getMarketNftList(); this.getMarketNftList();
// this.$emit("heroLevelChange", levelSlider);
} }
heroQualityChange(Quality: any) { heroQualityChange(Quality: any) {
this.qualityFilter = Quality; this.qualityFilter = Quality;
@ -592,55 +591,52 @@ export default class Market extends Vue {
this.getMarketNftList(); this.getMarketNftList();
} }
toPage(pageNo: number) { toPage(pageNo: number) {
console.log("to page: ", pageNo);
// this.currentPage = pageNo
this.starts = (pageNo - 1) * 10; this.starts = (pageNo - 1) * 10;
this.getMarketNftList(); this.getMarketNftList();
} }
async getMarketNftList( ) { async getMarketNftList() {
if (!AppModule.accountId) { if (!AppModule.accountId) {
return; return;
} }
try{ try {
this.showLoading(); this.showLoading();
const reqData: any = { const reqData: any = {
page_size: this.pageSize, page_size: this.pageSize,
start: this.starts, start: this.starts,
type: this.nftType == 4 ? 5 : this.nftType, type: this.nftType == 4 ? 5 : this.nftType,
job_filters: this.nftType == 2 ? null : this.jobFilters, job_filters: this.nftType == 2 ? null : this.jobFilters,
search_filters: this.searchFilters, search_filters: this.searchFilters,
quality_filter: this.qualityFilter, quality_filter: this.qualityFilter,
durability_filter: this.durabilityFilter, durability_filter: this.durabilityFilter,
lv_filter: this.lvFilter, lv_filter: this.lvFilter,
order_asc: this.orderAsc, order_asc: this.orderAsc,
order_method: this.orderMethod, order_method: this.orderMethod,
price_filter: this.priceFilter, price_filter: this.priceFilter,
}; };
const res: any = await queryMarketNftList(reqData); const res: any = await queryMarketNftList(reqData);
if (res.nfts) { if (res.nfts) {
// this.nftList = res.nfts; let list = res.nfts || [];
let list = res.nfts; 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();
this.hideLoading(); }
} }
} } catch (err) {
}catch(err){ this.hideLoading();
this.hideLoading()
} }
} }
@Watch("isLogin") @Watch("isLogin")
private accountChange() { private accountChange() {
console.log("account change: ", AppModule.accountId); // console.log("account change: ", AppModule.accountId);
if (this.isLogin) { if (this.isLogin) {
// this.fetchDatas(this.pageSize); // this.fetchDatas(this.pageSize);
// this.checkOrderHistory(); // this.checkOrderHistory();
@ -655,7 +651,6 @@ export default class Market extends Vue {
} }
onNftTypeClicked(id: number) { onNftTypeClicked(id: number) {
// console.log("nft type clicked: ", id);
this.nftType = id; this.nftType = id;
this.jobFilters = "1|2|3|4"; this.jobFilters = "1|2|3|4";
const jobList = this.jobList.map((item) => { const jobList = this.jobList.map((item) => {
@ -680,8 +675,6 @@ export default class Market extends Vue {
hideLoading() { hideLoading() {
this.loadingInstance?.close(); this.loadingInstance?.close();
} }
// this.isValue
sliderChange() {}
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>

90
src/views/desktop/MyNft.vue
View File

@ -44,16 +44,6 @@
@nft-type-changed="onNftTypeClicked" @nft-type-changed="onNftTypeClicked"
class="left-bar" class="left-bar"
></nft-type-bar> ></nft-type-bar>
<!-- <sort-select
:filters="filters"
:selected-index="nftState"
@filter-change="filterChange"
></sort-select> -->
<!-- <nft-list
:nft-datas="nftList"
v-if="nftList.length > 0"
@activate-clicked="onActivateClick"
></nft-list> -->
<search-result <search-result
@filter-show="showFilter" @filter-show="showFilter"
:select-idx="nftType" :select-idx="nftType"
@ -485,7 +475,6 @@ export default class MyNft extends Vue {
private currentPage = 1; private currentPage = 1;
private currencyTypeList = []; private currencyTypeList = [];
private dataCache: Map<any, INftData[]> = new Map(); private dataCache: Map<any, INftData[]> = new Map();
private isProcess = false; private isProcess = false;
private rewardModal: ZModal; private rewardModal: ZModal;
orderTimer: any = null; orderTimer: any = null;
@ -571,7 +560,6 @@ export default class MyNft extends Vue {
heroLevelChange(levelSlider: any) { heroLevelChange(levelSlider: any) {
this.lvFilter = levelSlider; this.lvFilter = levelSlider;
this.getMyNftList(this.starts); this.getMyNftList(this.starts);
// this.$emit("heroLevelChange", levelSlider);
} }
heroQualityChange(Quality: any) { heroQualityChange(Quality: any) {
this.qualityFilter = Quality; this.qualityFilter = Quality;
@ -622,8 +610,6 @@ export default class MyNft extends Vue {
this.getMyNftList(this.starts); this.getMyNftList(this.starts);
} }
toPage(pageNo: number) { toPage(pageNo: number) {
console.log("to page: ", pageNo);
// this.currentPage = pageNo
this.starts = (pageNo - 1) * 10; this.starts = (pageNo - 1) * 10;
this.getMyNftList(this.starts); this.getMyNftList(this.starts);
} }
@ -631,47 +617,44 @@ export default class MyNft extends Vue {
if (!AppModule.accountId) { if (!AppModule.accountId) {
return; return;
} }
try{ try {
this.showLoading();
const reqData: any = {
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: any = await queryMyNftList(reqData);
this.showLoading(); if (res.nfts) {
const reqData: any = { this.nftList = res.nfts || [];
page_size: this.pageSize, // this.nftList = list.filter((item: any) => {
start: this.starts, // return item.details !== null;
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: any = await queryMyNftList(reqData); if (res) {
if (res.nfts) { const page = res;
let list = res.nfts; this.totalPage = page.total || 1;
this.nftList = list.filter((item: any) => { this.pageSize = page.page_size || 10;
return item.details !== null; this.starts = page.start;
}); this.currentPage = page.start / page.page_size + 1;
// console.log(this.nftList, "-=========================="); }
if (res.errcode == 0) {
if (res) { this.hideLoading();
const page = res; } else {
this.totalPage = page.total || 1; this.hideLoading();
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();
} }
}catch(err){
this.hideLoading()
}
} }
async getCurrencyType() { async getCurrencyType() {
if (this.currencyTypeList.length > 0) { if (this.currencyTypeList.length > 0) {
@ -679,11 +662,8 @@ export default class MyNft extends Vue {
} }
const res: any = await getSupportedCurrenTypes(); const res: any = await getSupportedCurrenTypes();
this.currencyTypeList = res.list; this.currencyTypeList = res.list;
// this.value = this.options[0].address;
} }
onNftTypeClicked(typeId: number) { onNftTypeClicked(typeId: number) {
console.log("nft type clicked: ", typeId);
if (this.nftType !== typeId) { if (this.nftType !== typeId) {
this.nftType = typeId; this.nftType = typeId;
this.jobFilters = "1|2|3|4"; this.jobFilters = "1|2|3|4";
@ -735,7 +715,7 @@ export default class MyNft extends Vue {
this.resetData(); this.resetData();
} }
} }
showFilter(val: boolean) { showFilter(val: boolean) {
this.mobileFilterShow = val; this.mobileFilterShow = val;
} }