This commit is contained in:
huangjinming 2022-12-26 17:12:16 +08:00
parent 46093aa9a9
commit 59c8427c3e
6 changed files with 132 additions and 238 deletions

View File

@ -5,13 +5,7 @@
<div>{{ chipArrid[chipsinfo[0].attr_id] }}</div>
<div>+{{ chipList * 100 }}%</div>
</div>
<!-- <div class="def-item">
<div>DEF PCT</div>
<div>+7.2%</div>
</div> -->
<!-- <div class="def-item" style="justify-content: center">
Unlocked at Lv.5
</div> -->
<div class="def-item">LUCKY Unlocked at Lv.5</div>
</div>
<div class="def-content" v-else>
@ -19,13 +13,7 @@
<div>{{ chipArrid[chip.attr_id] }}</div>
<div>+{{ (chip.val * 100).toFixed(2) }}%</div>
</div>
<!-- <div class="def-item">
<div>DEF PCT</div>
<div>+7.2%</div>
</div> -->
<!-- <div class="def-item" style="justify-content: center">
Unlocked at Lv.5
</div> -->
<div class="def-item">LUCKY Unlocked at Lv.5</div>
</div>
</div>

View File

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

View File

@ -2,18 +2,8 @@
<div>
<div class="star">
<div class="quality-img">
<div class="quality-levelList" v-if="quality > 0 && quality <= 5">
<div class="item-Image" v-for="(item, i) in firstList" :key="i">
<div><img width="42px" :src="item.Image" alt="" /></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 class="quality-levelList" >
<div class="item-Image" v-for="(item, i) in starList" :key="i">
<div><img width="42px" :src="item.Image" alt="" /></div>
</div>
</div>
@ -26,46 +16,46 @@
export default {
name: "LevelStar",
props: ["quality"],
created(){
console.log(this.quality,'this.level');
created() {
if (this.quality > 0 && this.quality <= 5) {
for (var i = 1; i <= this.quality; i++) {
this.starList.push(this.starType[0]);
}
} else if (this.quality > 5 && this.quality <= 10) {
for (var i = 1; i <= this.quality-5; i++) {
this.starList.push(this.starType[1]);
}
} else {
for (var i = 1; i <= this.quality-10; i++) {
this.starList.push(this.starType[2]);
}
}
},
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));
},
beforeUpdate() {
this.starList = [];
if (this.quality > 0 && this.quality <= 5) {
for (var i = 1; i <= this.quality; i++) {
this.starList.push(this.starType[0]);
}
} else if (this.quality > 5 && this.quality <= 10) {
for (var i = 1; i <= this.quality - 5; i++) {
this.starList.push(this.starType[1]);
}
} else {
for (var i = 1; i <= this.quality - 10; i++) {
this.starList.push(this.starType[2]);
}
}
},
data() {
return {
firstOrder: [
starType: [
{ 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/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") },
],
starList: []
};
},
};

View File

@ -107,7 +107,11 @@ export default {
};
},
created() {
this.getOption();
if (this.options.length > 0) {
return;
} else {
this.getOption();
}
console.log(this.options, "87887");
},
@ -129,19 +133,19 @@ export default {
switch (this.type) {
case "hero":
console.log(this.type, "-=-",AppModule.chainId);
'1338'
console.log(this.type, "-=-", AppModule.chainId);
"1338";
console.log(CONTRACT_ADDRESS[AppModule.chainId]);
this.nft_Token = CONTRACT_ADDRESS['1338'].hero;
this.nft_Token = CONTRACT_ADDRESS["1338"].hero;
break;
case "weapon":
this.nft_Token = CONTRACT_ADDRESS['1338'].weapon;
this.nft_Token = CONTRACT_ADDRESS["1338"].weapon;
break;
case "chip":
this.nft_Token = CONTRACT_ADDRESS['1338'].chip;
this.nft_Token = CONTRACT_ADDRESS["1338"].chip;
break;
case "piece":
this.nft_Token = CONTRACT_ADDRESS['1338'].piece;
this.nft_Token = CONTRACT_ADDRESS["1338"].piece;
break;
}
try {
@ -153,7 +157,7 @@ export default {
: this.data.detail.token_id,
amount: this.piece ? this.cunout : 1,
price: this.price,
marketAddress: CONTRACT_ADDRESS['1338'].address,
marketAddress: CONTRACT_ADDRESS["1338"].address,
};
console.log(shellData, "shellData");
const nftres = await this.chainManager.bc.beginNftSell(
@ -162,13 +166,12 @@ export default {
this.piece ? this.piece.detail.token_id : this.data.detail.token_id,
this.piece ? this.cunout : 1,
this.price,
CONTRACT_ADDRESS['1338'].address
CONTRACT_ADDRESS["1338"].address
);
console.log(nftres, "beginSell");
} catch (err) {
console.log("query order status error", err);
}
},
async getOption() {
const res = await getSupportedCurrenTypes();

View File

@ -59,30 +59,11 @@
<div class="info-level">
Lv: <span class="level"></span>
<span> {{ fillZero(levelNumber) }}</span>
<span>{{ this.data.detail.quality }}</span>
</div>
<div class="level-img">
<div
class="level-levelList"
v-if="this.data.detail.quality > 0 && this.data.detail.quality <= 5"
>
<div class="item-Image" v-for="(item, i) in firstOrder" :key="i">
<div><img width="28px" :src="item.Image" alt="" /></div>
</div>
</div>
<div
class="level-levelList"
v-else-if="
this.data.detail.quality > 5 && this.data.detail.quality <= 10
"
>
<div class="item-Image" v-for="(item, i) in secondOrder" :key="i">
<div><img width="28px" :src="item.Image" alt="" /></div>
</div>
</div>
<div class="level-levelList" v-else>
<div class="item-Image" v-for="(item, i) in thirdOrder" :key="i">
<div class="level-levelList">
<div class="item-Image" v-for="(item, i) in starList" :key="i">
<div><img width="28px" :src="item.Image" alt="" /></div>
</div>
</div>
@ -161,7 +142,7 @@ interface DialogConfigtype {
animationLeave: string;
destroyTime: number;
}
import { Component, Prop, Vue } from "vue-property-decorator";
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import Herodialog from "../Herodialog.vue";
import TheBuyDialog from "../TheBuyDialog.vue";
import TheSellDialog from "../TheSellDialog.vue";
@ -178,6 +159,7 @@ import TheSellDialog from "../TheSellDialog.vue";
export default class HeroNft extends Vue {
// @Prop() data
// boxState = 'n'
quality: any = 1;
dialogVisible: boolean = false;
isTab: boolean = false;
isPiecePut: boolean = false;
@ -186,35 +168,12 @@ export default class HeroNft extends Vue {
// created() {
// console.log(this.data, "nftlist3sdfsadff");
// }
firstOrder = [
starType = [
{ 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/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") },
];
starList:any[]=[]
fillZero(str: number | string) {
var realNum;
@ -232,53 +191,44 @@ export default class HeroNft extends Vue {
showTip(hide: boolean) {
this.isTab = hide;
}
@Watch("data.detail.quality")
haldQuality(newvalue: any) {
this.quality = newvalue;
console.log(this.quality, "this.quality");
console.log(this.qualityNumber, "this.qualityNumber");
}
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));
if (this.qualityNumber > 0 && this.qualityNumber <= 5) {
for (var i = 1; i <= this.qualityNumber; i++) {
this.starList.push(this.starType[0]);
}
} else if (this.qualityNumber > 5 && this.qualityNumber <= 10) {
for (var i = 1; i <= this.qualityNumber-5; i++) {
this.starList.push(this.starType[1]);
}
} else {
this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
for (var i = 1; i <= this.qualityNumber-10; i++) {
this.starList.push(this.starType[2]);
}
}
}
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));
beforeUpdate() {
this.starList=[]
if (this.qualityNumber > 0 && this.qualityNumber <= 5) {
for (var i = 1; i <= this.qualityNumber; i++) {
this.starList.push(this.starType[0]);
}
} else if (this.qualityNumber > 5 && this.qualityNumber <= 10) {
for (var i = 1; i <= this.qualityNumber - 5; i++) {
this.starList.push(this.starType[1]);
}
} else {
this.thirdOrder.splice(0, 5 - (this.data.detail.quality - 10));
for (var i = 1; i <= this.qualityNumber- 10; i++) {
this.starList.push(this.starType[2]);
}
}
}
// 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() {
return this.data.detail.hero_lv;
}
@ -411,6 +361,8 @@ export default class HeroNft extends Vue {
}
.level-img {
display: flex;
width: 65%;
justify-content: center;
}
.level-levelList {
display: flex;

View File

@ -28,34 +28,9 @@
<div class="level-img">
<div
class="level-levelList"
v-if="weapon.detail.quality > 0 && weapon.detail.quality <= 5"
>
<div
class="item-Image"
v-for="(item, i) in firstOrder"
:key="i"
>
<div><img width="32px" :src="item.Image" alt="" /></div>
</div>
</div>
<div
class="level-levelList"
v-else-if="weapon.detail.quality > 5 && weapon.detail.quality <= 10"
>
<div
class="item-Image"
v-for="(item, i) in secondOrder"
:key="i"
>
<div><img width="32px" :src="item.Image" alt="" /></div>
</div>
</div>
<div class="level-levelList" v-else>
<div
class="item-Image"
v-for="(item, i) in thirdOrder"
:key="i"
>
<div class="item-Image" v-for="(item, i) in starList" :key="i">
<div><img width="32px" :src="item.Image" alt="" /></div>
</div>
</div>
@ -141,71 +116,51 @@ export default {
type: "weapon",
isBuy: false,
isPiecePut: false,
firstOrder: [
starType: [
{ 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/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") },
],
starList: []
};
},
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)
);
if (this.qualityNumber > 0 && this.qualityNumber <= 5) {
for (var i = 1; i <= this.qualityNumber; i++) {
this.starList.push(this.starType[0]);
}
} else if (this.qualityNumber > 5 && this.qualityNumber <= 10) {
for (var i = 1; i <= this.qualityNumber - 5; i++) {
this.starList.push(this.starType[1]);
}
} else {
this.thirdOrder = this.thirdOrder.splice(
0,
5 - (this.weapon.detail.quality - 10)
);
for (var i = 1; i <= this.qualityNumber - 10; i++) {
this.starList.push(this.starType[2]);
}
}
},
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));
beforeUpdate() {
this.starList = [];
if (this.qualityNumber > 0 && this.qualityNumber <= 5) {
for (var i = 1; i <= this.qualityNumber; i++) {
this.starList.push(this.starType[0]);
}
} else if (this.qualityNumber > 5 && this.qualityNumber <= 10) {
for (var i = 1; i <= this.qualityNumber - 5; i++) {
this.starList.push(this.starType[1]);
}
} else {
this.thirdOrder.splice(0, 5 - (this.weapon.detail.quality - 10));
for (var i = 1; i <= this.qualityNumber - 10; i++) {
this.starList.push(this.starType[2]);
}
}
},
computed: {
qualityNumber() {
return this.weapon.detail.quality;
},
},
methods: {
ChipDialoghide() {
this.dialogVisible = false;
@ -316,14 +271,20 @@ export default {
.level-content {
display: flex;
.level-img {
margin-top: 7px;
display: flex;
width: 78%;
justify-content: center;
align-items: center;
}
.level-levelList {
display: flex;
align-items: center;
margin-left: 14px;
}
.item-Image {
align-items: center;
margin-left: 6px;
display: flex;
}