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 2022-12-26 11:57:00 +08:00
parent 620f7238a5
commit 74033c20c1
6 changed files with 220 additions and 136 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -33,7 +33,7 @@
/> />
</div> </div>
</div> </div>
<LeveStars :level="data.detail.gun_lv"> </LeveStars> <LeveStars :quality="data.detail.gun_lv"> </LeveStars>
<LuckyValue <LuckyValue
:level="data.detail.gun_lv" :level="data.detail.gun_lv"
:lucky="data.detail.lucky" :lucky="data.detail.lucky"

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

@ -62,7 +62,7 @@
/> />
</div> </div>
</div> </div>
<LeveStars :level="hero.detail.quality"> </LeveStars> <LeveStars :quality="hero.detail.quality"> </LeveStars>
<LuckyValue <LuckyValue
:level="hero.detail.hero_lv" :level="hero.detail.hero_lv"
:lucky="hero.detail.lucky" :lucky="hero.detail.lucky"

120
src/components/market/LeveStars.vue
View File

@ -1,77 +1,73 @@
<template> <template>
<div> <div>
<div class="star"> <div class="star">
<div class="level-img"> <div class="quality-img">
<div <div class="quality-levelList" v-if="quality > 0 && quality <= 5">
class="level-levelList" <div class="item-Image" v-for="(item, i) in firstList" :key="i">
v-if="level > 0 && level <= 5" <div><img width="42px" :src="item.Image" alt="" /></div>
>
<div
class="item-Image"
v-for="(item, i) in levelList.firstOrder"
:key="i"
>
<div><img width="42px" :src="item.Image" alt="" /></div>
</div>
</div>
<div
class="level-levelList"
v-else-if="level > 5 && level <= 10"
>
<div
class="item-Image"
v-for="(item, i) in levelList.secondOrder"
:key="i"
>
<div><img width="42px" :src="item.Image" alt="" /></div>
</div>
</div>
<div class="level-levelList" v-else>
<div
class="item-Image"
v-for="(item, i) in levelList.thirdOrder"
:key="i"
>
<div><img width="42px" :src="item.Image" alt="" /></div>
</div>
</div>
</div>
</div> </div>
</div>
<div class="quality-levelList" v-else-if="quality > 5 && quality <= 10">
<div class="item-Image" v-for="(item, i) in secondList" :key="i">
<div><img width="42px" :src="item.Image" alt="" /></div>
</div>
</div>
<div class="quality-levelList" v-else>
<div class="item-Image" v-for="(item, i) in thirdList" :key="i">
<div><img width="42px" :src="item.Image" alt="" /></div>
</div>
</div>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "LevelStar", name: "LevelStar",
props: ["level"], props: ["quality"],
created(){
console.log(this.quality,'this.level');
},
computed: {
firstList() {
console.log(this.firstOrder.splice(0, 5 - this.quality),'this.firstOrder.splice(0, 4 - this.level)');
return this.firstOrder.splice(0, 5 - this.quality);
},
secondList() {
console.log(this.secondOrder.splice(0, 4 - (this.quality -5)),'this.firstOrder.splice(0, 4 - this.level)');
return this.secondOrder.splice(0, 5 - (this.quality -5));
},
thirdList() {
console.log(this.thirdOrder.splice(0, 4 - (this.quality -10)),'this.firstOrder.splice(0, 4 - this.level)');
return this.thirdOrder.splice(0, 5 - (this.quality -10));
},
},
data() { data() {
return { return {
levelList: { firstOrder: [
firstOrder: [ { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") }, ],
], secondOrder: [
secondOrder: [ { Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") }, { Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") }, { Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") }, { Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") }, { Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") }, ],
], thirdOrder: [
thirdOrder: [ { Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") }, { Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") }, { Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") }, { Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") }, { Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") }, ],
],
},
}; };
}, },
}; };
</script> </script>
@ -85,13 +81,13 @@ export default {
margin-left: 23px; margin-left: 23px;
margin-top: 19px; margin-top: 19px;
margin-bottom: 20px; margin-bottom: 20px;
.level-img { .quality-img {
display: flex; display: flex;
height: 100%; height: 100%;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.level-levelList { .quality-levelList {
display: flex; display: flex;
} }
.item-Image { .item-Image {

134
src/components/market/nft/HeroNft.vue
View File

@ -58,40 +58,31 @@
<div class="info"> <div class="info">
<div class="info-level"> <div class="info-level">
Lv: <span class="level"></span> Lv: <span class="level"></span>
{{ fillZero(levelNumber) }} <span> {{ fillZero(levelNumber) }}</span>
<span>{{ this.data.detail.quality }}</span>
</div> </div>
<div class="level-img"> <div class="level-img">
<div <div
class="level-levelList" class="level-levelList"
v-if="qualityNumber > 0 && qualityNumber <= 5" v-if="this.data.detail.quality > 0 && this.data.detail.quality <= 5"
> >
<div <div class="item-Image" v-for="(item, i) in firstOrder" :key="i">
class="item-Image"
v-for="(item, i) in levelList.firstOrder"
:key="i"
>
<div><img width="28px" :src="item.Image" alt="" /></div> <div><img width="28px" :src="item.Image" alt="" /></div>
</div> </div>
</div> </div>
<div <div
class="level-levelList" class="level-levelList"
v-else-if="qualityNumber > 5 && qualityNumber <= 10" v-else-if="
this.data.detail.quality > 5 && this.data.detail.quality <= 10
"
> >
<div <div class="item-Image" v-for="(item, i) in secondOrder" :key="i">
class="item-Image"
v-for="(item, i) in levelList.secondOrder"
:key="i"
>
<div><img width="28px" :src="item.Image" alt="" /></div> <div><img width="28px" :src="item.Image" alt="" /></div>
</div> </div>
</div> </div>
<div class="level-levelList" v-else> <div class="level-levelList" v-else>
<div <div class="item-Image" v-for="(item, i) in thirdOrder" :key="i">
class="item-Image"
v-for="(item, i) in levelList.thirdOrder"
:key="i"
>
<div><img width="28px" :src="item.Image" alt="" /></div> <div><img width="28px" :src="item.Image" alt="" /></div>
</div> </div>
</div> </div>
@ -192,33 +183,39 @@ export default class HeroNft extends Vue {
isPiecePut: boolean = false; isPiecePut: boolean = false;
isBuy: boolean = false; isBuy: boolean = false;
type: string = "hero"; type: string = "hero";
created() { // created() {
console.log(this.data, "nftlist3sdfsadff"); // console.log(this.data, "nftlist3sdfsadff");
} // }
firstOrder = [
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
];
firstOrder2 = [
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
];
secondOrder = [
{ Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") },
];
thirdOrder = [
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
];
levelList = {
firstOrder: [
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") },
],
secondOrder: [
{ Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star02.png") },
],
thirdOrder: [
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
],
};
fillZero(str: number | string) { fillZero(str: number | string) {
var realNum; var realNum;
if (str < 10) { if (str < 10) {
@ -235,6 +232,53 @@ export default class HeroNft extends Vue {
showTip(hide: boolean) { showTip(hide: boolean) {
this.isTab = hide; this.isTab = hide;
} }
created() {
// console.log(this.starList, "starList");
if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
this.firstOrder.splice(0, 5 - this.data.detail.quality);
// this.firstOrder= this.firstOrder.splice(0, 5 - this.data.detail.quality);
} else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
console.log("2");
this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
} else {
this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
}
}
beforeUpdate(){
if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
this.firstOrder2.splice(0, 5 - this.data.detail.quality);
// this.firstOrder= this.firstOrder.splice(0, 5 - this.data.detail.quality);
} else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
console.log("2");
this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
} else {
this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
}
}
// Update(){
// if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
// this.firstOrder2.splice(0, 5 - this.data.detail.quality);
// // this.firstOrder= this.firstOrder.splice(0, 5 - this.data.detail.quality);
// } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
// console.log("2");
// this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
// } else {
// this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
// }
// }
// get starList() {
// if (this.data.detail.quality > 0 && this.data.detail.quality <= 5) {
// console.log('11111111111111',this.firstOrder.splice(0, 5 - this.data.detail.quality));
// return this.firstOrder.splice(0, 5 - this.data.detail.quality);
// } else if (this.data.detail.quality > 5 && this.data.detail.quality <= 10) {
// console.log('2');
// return this.secondOrder.splice(0, 5 - (this.data.detail.quality - 5));
// } else {
// return this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
// }
// }
get levelNumber() { get levelNumber() {
return this.data.detail.hero_lv; return this.data.detail.hero_lv;
} }
@ -295,7 +339,7 @@ export default class HeroNft extends Vue {
opacity: 0.8; opacity: 0.8;
z-index: 11; z-index: 11;
border-radius: 16px; border-radius: 16px;
.for-rent-img{ .for-rent-img {
margin-top: 100px; margin-top: 100px;
margin-bottom: 70px; margin-bottom: 70px;
} }

93
src/components/market/nft/WeaponList.vue
View File

@ -32,7 +32,7 @@
> >
<div <div
class="item-Image" class="item-Image"
v-for="(item, i) in levelList.firstOrder" v-for="(item, i) in firstOrder"
:key="i" :key="i"
> >
<div><img width="32px" :src="item.Image" alt="" /></div> <div><img width="32px" :src="item.Image" alt="" /></div>
@ -44,7 +44,7 @@
> >
<div <div
class="item-Image" class="item-Image"
v-for="(item, i) in levelList.secondOrder" v-for="(item, i) in secondOrder"
:key="i" :key="i"
> >
<div><img width="32px" :src="item.Image" alt="" /></div> <div><img width="32px" :src="item.Image" alt="" /></div>
@ -53,7 +53,7 @@
<div class="level-levelList" v-else> <div class="level-levelList" v-else>
<div <div
class="item-Image" class="item-Image"
v-for="(item, i) in levelList.thirdOrder" v-for="(item, i) in thirdOrder"
:key="i" :key="i"
> >
<div><img width="32px" :src="item.Image" alt="" /></div> <div><img width="32px" :src="item.Image" alt="" /></div>
@ -141,31 +141,72 @@ export default {
type: "weapon", type: "weapon",
isBuy: false, isBuy: false,
isPiecePut: false, isPiecePut: false,
levelList: {
firstOrder: [ firstOrder: [
{ Image: require("@/assets/market/hero/star01.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star01.png") }, { Image: require("@/assets/market/hero/star01.png") },
], ],
secondOrder: [ firstOrder2: [
{ Image: require("@/assets/market/hero/star02.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star02.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star02.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star02.png") }, { Image: require("@/assets/market/hero/star01.png") },
{ Image: require("@/assets/market/hero/star02.png") }, { Image: require("@/assets/market/hero/star01.png") },
], ],
thirdOrder: [ secondOrder: [
{ Image: require("@/assets/market/hero/star03.png") }, { Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star03.png") }, { Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star03.png") }, { Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star03.png") }, { Image: require("@/assets/market/hero/star02.png") },
{ Image: require("@/assets/market/hero/star03.png") }, { Image: require("@/assets/market/hero/star02.png") },
], ],
}, thirdOrder: [
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
{ Image: require("@/assets/market/hero/star03.png") },
],
}; };
}, },
created() {
// console.log(this.starList, "starList");
if (this.weapon.detail.quality > 0 && this.weapon.detail.quality <= 5) {
console.log(
this.weapon.detail.quality,
this.firstOrder.splice(0, 5 - this.weapon.detail.quality) ,'opppppppppppppppppppppppp23233'
);
// this.firstOrder= this.firstOrder.splice(0, 5 - this.data.detail.quality);
} else if (
this.weapon.detail.quality > 5 &&
this.weapon.detail.quality <= 10
) {
console.log("2");
this.secondOrder = this.secondOrder.splice(
0,
5 - (this.weapon.detail.quality - 5)
);
} else {
this.thirdOrder = this.thirdOrder.splice(
0,
5 - (this.weapon.detail.quality - 10)
);
}
},
beforeUpdate(){
if (this.weapon.detail.quality > 0 && this.weapon.detail.quality <= 5) {
this.firstOrder2.splice(0, 5 - this.weapon.detail.quality);
// this.firstOrder= this.firstOrder.splice(0, 5 - this.data.detail.quality);
} else if (this.weapon.detail.quality > 5 && this.weapon.detail.quality <= 10) {
console.log("2");
this.secondOrder.splice(0, 5 - (this.weapon.detail.quality - 5));
} else {
this.thirdOrder.splice(0, 5 - (this.weapon.detail.quality - 10));
}
},
methods: { methods: {
ChipDialoghide() { ChipDialoghide() {
this.dialogVisible = false; this.dialogVisible = false;

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

@ -616,13 +616,16 @@ 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;
} }
console.log(this.nftList,'this.nftList');
} }
} }
@Watch("isLogin") @Watch("isLogin")