This commit is contained in:
huangjinming 2023-01-17 16:34:27 +08:00
parent 989219ee31
commit a4777dd8e2
11 changed files with 291 additions and 55 deletions

View File

@ -183,6 +183,7 @@ export default {
height: 531px;
padding-top: 45px;
padding-left: 46px;
// margin: 0 auto;
// padding-right: 31px;
margin-bottom: 20px;
background: url("../../../assets/mobile/market/chip/bg.png") no-repeat;

View File

@ -79,7 +79,11 @@
</div>
</div>
<div class="mynft-sell" v-if="isType == 'mynft'">
<div class="sell" @click="handPutShow">Sell</div>
<div class="for-rent-btn" v-if="chip.o_link > 0">
<div class="adjust" @click="handPutShow"></div>
<div class="remove" @click="handRemove"></div>
</div>
<div class="sell" @click="handPutShow" v-else>Sell</div>
</div>
<div class="buy-price" v-else>
<div class="price"><span class="price-number">{{formatPriceShow(chip.s_price,18)}}</span></div>
@ -98,6 +102,9 @@
import { formatSelect } from "@/utils/UTCTime";
import { formatPrice } from "@/utils/chain.util";
import { formatAddress } from "@/utils/formatAddress";
import { AppModule } from "@/store/modules/app";
import { CONTRACT_ADDRESS } from "@/configs/config_chain";
import ChainManager from "@/chain/ChainManager";
export default {
props: ["isType"],
name: "HeroModal",
@ -105,6 +112,8 @@ export default {
return {
detailVisible: false,
chip: "",
loadingInstance:null,
chainManager: new ChainManager(),
chipArrid: {
39: "Hp Pct",
40: "Atk Pct",
@ -152,6 +161,40 @@ export default {
handBuyShow() {
this.$emit("handBuyShow", this.chip);
},
async handRemove() {
try {
this.showLoading()
const nftres = await this.chainManager.bc.beginCancelOrder(
this.chip.o_link,
CONTRACT_ADDRESS[AppModule.chainId].marketDddress
);
if (nftres.status == true) {
this.$emit("handMessage", 1);
this.hideLoading();
setTimeout(() => {
this.$emit("handMessageHide");
this.$emit("on-close");
setTimeout(() => {
this.$emit("getMarketNftList");
}, 1000);
}, 1000);
}
} catch (err) {
console.log("query order status error", err);
this.hideLoading();
this.$emit("handMessage", 1);
}
},
showLoading() {
this.loadingInstance = this.$loading({
background: "rgba(0, 0, 0, 0.8)",
});
},
hideLoading() {
this.loadingInstance?.close();
},
},
};
</script>
@ -407,6 +450,24 @@ export default {
background: url("../../../assets/market/hero/sell-mb-btn.png") no-repeat;
background-size: 100% 100%;
}
.for-rent-btn {
display: flex;
.adjust {
width: 344px;
height: 89px;
cursor: pointer;
background: url("../../../assets/market/hero/adjust.png") no-repeat;
background-size: 100% 100%;
}
.remove {
width: 344px;
height: 89px;
cursor: pointer;
margin-left: 14px;
background: url("../../../assets/market/hero/remove.png") no-repeat;
background-size: 100% 100%;
}
}
}
.buy-price {
position: absolute;

View File

@ -140,7 +140,7 @@ export default {
width: 100%;
display: flex;
margin-top: 34px;
margin-left: 27px;
margin-left: 39px;
margin-right: 27px;
flex-direction: row;
justify-content: flex-start;

View File

@ -50,7 +50,9 @@
<div class="hero-bottom">
<div class="hero-right-token">
<div class="token-name">TOKEN ID</div>
<div class="token-id">#{{hero.detail.token_id? hero.detail.token_id :''}}</div>
<div class="token-id">
#{{ hero.detail.token_id ? hero.detail.token_id : "" }}
</div>
<div class="hill">
<div class="hill-content">
<div class="hill-name">
@ -237,11 +239,17 @@
</div>
<MosaicChip v-if="isTabs" :data="hero"></MosaicChip>
<div class="mynft-sell" v-if="isType == 'mynft'">
<div class="sell" @click="handPutShow">Sell</div>
<div class="for-rent-btn" v-if="hero.o_link > 0">
<div class="adjust" @click="handPutShow(hero)"></div>
<div class="remove" @click="handremove"></div>
</div>
<div class="sell" @click="handPutShow" v-else>Sell</div>
</div>
<div class="buy-price" v-else>
<div class="price">
<span class="price-number">{{formatPriceShow(hero.s_price,18) }}</span>
<span class="price-number">{{
formatPriceShow(hero.s_price, 18)
}}</span>
</div>
<div class="buy-img" @click="handBuyShow">
<img src="../../../assets/market/hero/buy.png" alt="aoi-hero" />
@ -263,6 +271,9 @@ import MosaicChip from "./MosaicChip.vue";
import { formatAddress } from "@/utils/formatAddress";
import { formatPrice } from "@/utils/chain.util";
import { formatSelect } from "@/utils/UTCTime";
import { AppModule } from "@/store/modules/app";
import { CONTRACT_ADDRESS } from "@/configs/config_chain";
import ChainManager from "@/chain/ChainManager";
export default {
props: ["isType"],
components: { LevelStar, ProgressCard, LevelValue, AccountCard, MosaicChip },
@ -270,11 +281,13 @@ export default {
data() {
return {
detailVisible: false,
chainManager: new ChainManager(),
hero: "",
isTabs: false,
chipsid: 0,
cunter: 0,
name: ""
name: "",
loadingInstance: null,
};
},
// created() {
@ -289,14 +302,14 @@ export default {
level() {
return this.hero.info ? this.hero.info.level : false;
},
chipinfo(){
if(this.hero?.detail?.chips_info ){
return this.hero.detail.chips_info
}else{
return false
}
},
chipinfo() {
if (this.hero?.detail?.chips_info) {
return this.hero.detail.chips_info;
} else {
return false;
}
},
address() {
return formatAddress(
this.hero.detail.chips_info[this.chipsid].nft_address
@ -346,31 +359,40 @@ export default {
handBuyShow() {
this.$emit("handBuyShow", this.hero);
},
},
// watch: {
// isShow: {
// //
// watch: {
// isShow: {
// //
// handler(val) {
// var mo = function (e) {
// e.preventDefault();
// };
// if (val) {
// document.getElementById("container").style.overflow = "hidden";
// document.getElementById("container").style.position = "fixed";
// document.addEventListener("touchmove", mo, false); //
// } else {
// document.getElementById("container").style.overflow = ""; //
// document.getElementById("container").style.position = "";
// document.removeEventListener("touchmove", mo, false);
// }
// },
// },
// },
// },
// },
async handremove() {
try {
this.showLoading();
const nftres = await this.chainManager.bc.beginCancelOrder(
this.hero.o_link,
CONTRACT_ADDRESS[AppModule.chainId].marketDddress
);
if (nftres.status == true) {
this.$emit("handMessage", 1);
this.hideLoading();
setTimeout(() => {
this.$emit("handMessageHide");
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);
}
},
showLoading() {
this.loadingInstance = this.$loading({
background: "rgba(0, 0, 0, 0.8)",
});
},
hideLoading() {
this.loadingInstance?.close();
},
}
};
</script>
@ -807,6 +829,24 @@ export default {
background-size: 100% 100%;
}
}
.for-rent-btn {
display: flex;
.adjust {
width: 384px;
height: 89px;
cursor: pointer;
background: url("../../../assets/market/hero/adjust.png") no-repeat;
background-size: 100% 100%;
}
.remove {
width: 384px;
height: 89px;
cursor: pointer;
margin-left: 14px;
background: url("../../../assets/market/hero/remove.png") no-repeat;
background-size: 100% 100%;
}
}
}
.star-img {
width: 47px;

View File

@ -9,6 +9,12 @@
:src="require('@/assets/mobile/market/hero/' + data.item_id + '.png')"
alt=""
/>
<img
class="hero-img"
v-if="data.c_id"
:src="require('@/assets/mobile/market/hero/' + data.c_id + '.png')"
alt=""
/>
</div>
<div class="gen" v-if="data.info.is_genesis">
<img width="31px" src="../../../assets/market/hero/gen.png" alt="" />

View File

@ -166,14 +166,14 @@ export default {
align-items: center;
flex-direction: row;
margin-top: 43px;
margin-left: 28px;
margin-left: 72px;
align-items: center;
flex-wrap: wrap;
}
.list-content {
display: flex;
flex-direction: column;
margin-right: 18px;
margin-right: 41px;
width: 382px;
height: 504px;
padding-top: 35px;

View File

@ -61,10 +61,18 @@
</div>
</div>
<div class="mynft-sell" v-if="isType == 'mynft'">
<div class="sell" @click="handPutShow">Sell</div>
<div class="for-rent-btn" v-if="piece.o_link > 0">
<div class="adjust" @click="handPutShow"></div>
<div class="remove" @click="handRemove"></div>
</div>
<div class="sell" @click="handPutShow" v-else>Sell</div>
</div>
<div class="buy-price" v-else>
<div class="price"><span class="price-number">{{formatPriceShow(piece.s_price,18)}}</span></div>
<div class="price">
<span class="price-number">{{
formatPriceShow(piece.s_price, 18)
}}</span>
</div>
<div class="buy-img" @click="handBuyShow">
<img src="../../../assets/market/hero/buy.png" alt="aoi-hero" />
</div>
@ -80,13 +88,18 @@
import { formatSelect } from "@/utils/UTCTime";
import { formatPrice } from "@/utils/chain.util";
import { formatAddress } from "@/utils/formatAddress";
import { AppModule } from "@/store/modules/app";
import { CONTRACT_ADDRESS } from "@/configs/config_chain";
import ChainManager from "@/chain/ChainManager";
export default {
props: ["isType"],
name: "HeroModal",
data() {
return {
detailVisible: false,
piece: ""
piece: "",
loadingInstance: null,
chainManager: new ChainManager(),
};
},
created() {
@ -105,7 +118,7 @@ export default {
// (: closeTip)
this.$emit("closeTip");
},
formatPriceShow(price, decimals, fixed = 2) {
formatPriceShow(price, decimals, fixed = 2) {
return formatPrice(price, decimals, fixed);
},
init(data) {
@ -119,6 +132,40 @@ export default {
handBuyShow() {
this.$emit("handBuyShow", this.piece);
},
async handRemove() {
try {
this.showLoading();
const nftres = await this.chainManager.bc.beginCancelOrder(
this.piece.o_link,
CONTRACT_ADDRESS[AppModule.chainId].marketDddress
);
// console.log(nftres, "beginSell");
if (nftres.status == true) {
this.$emit("handMessage", 1);
this.hideLoading();
setTimeout(() => {
this.$emit("handMessageHide");
this.$emit("closeTip", false);
setTimeout(() => {
this.$emit("getMarketNftList");
}, 1000);
}, 1000);
}
} catch (err) {
this.hideLoading();
this.$emit("handMessage", 0);
console.log("query order status error", err);
}
},
showLoading() {
this.loadingInstance = this.$loading({
background: "rgba(0, 0, 0, 0.8)",
});
},
hideLoading() {
this.loadingInstance?.close();
},
},
};
</script>
@ -370,6 +417,24 @@ export default {
background: url("../../../assets/market/hero/sell-mb-btn.png") no-repeat;
background-size: 100% 100%;
}
.for-rent-btn {
display: flex;
.adjust {
width: 274px;
height: 89px;
cursor: pointer;
background: url("../../../assets/market/hero/adjust.png") no-repeat;
background-size: 100% 100%;
}
.remove {
width: 274px;
height: 89px;
cursor: pointer;
margin-left: 14px;
background: url("../../../assets/market/hero/remove.png") no-repeat;
background-size: 100% 100%;
}
}
}
.buy-price {
position: absolute;

View File

@ -31,7 +31,7 @@
<div v-if="isBuy == true">
<div class="amount">Amount</div>
<div class="count-content">cunout
<div class="count-content">
<div class="count">
<div class="left" @click="handReduce"></div>
<div class="conunt-number">{{ cunout }}</div>
@ -44,7 +44,7 @@
<div class="priece" v-else>
<div class="priece-btn">
<div class="priece-number">
{{ formatPriceShow(data.s_price,18)}}
{{ formatPriceShow(data.s_price, 18) }}
</div>
</div>
</div>
@ -55,24 +55,22 @@
<script>
import { formatPrice } from "@/utils/chain.util";
export default {
props: ["data", "isBuy",'cunout'],
props: ["data", "isBuy", "cunout"],
data() {
return {
};
return {};
},
methods: {
handReduce() {
this.$emit("handReduce")
this.$emit("handReduce");
},
handPlus() {
this.$emit("handPlus")
this.$emit("handPlus");
},
formatPriceShow(price, decimals, fixed = 2) {
return formatPrice(price, decimals, fixed);
},
},
};
</script>

View File

@ -407,6 +407,7 @@ export default {
height: 115px;
text-align: center;
line-height: 115px;
opacity: 0;
cursor: pointer;
color: #9dabd3;
background: url("../../../assets/market/dialog/confirm.png") no-repeat;

View File

@ -161,6 +161,7 @@ export default {
// (: closeTip)
// this.$emit("closeTip");
this.detailVisible = false;
this.shell.price =''
},
init(data) {
this.detailVisible = true;
@ -556,6 +557,7 @@ $item-size: 22px;
text-align: center;
line-height: 115px;
cursor: pointer;
opacity: 0;
color: #9dabd3;
background: url("../../../assets/market/dialog/confirm.png") no-repeat;
background-size: 100% 100%;

View File

@ -226,7 +226,11 @@
</div>
<MosaicChip v-if="isTabs" :data="weapon"></MosaicChip>
<div class="mynft-sell" v-if="isType == 'mynft'">
<div class="sell" @click="handPutShow">Sell</div>
<div class="for-rent-btn" v-if="weapon.o_link > 0">
<div class="adjust" @click="handPutShow(hero)"></div>
<div class="remove" @click="handRemove"></div>
</div>
<div class="sell" @click="handPutShow" v-else>Sell</div>
</div>
<div class="buy-price" v-else>
<div class="price"><span class="price-number">{{formatPriceShow(weapon.s_price,18)}}</span></div>
@ -248,6 +252,9 @@ import AccountCard from "./AccountCard.vue";
import ProgressCard from "./ProgressCard.vue";
import MosaicChip from "./MosaicChip.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 {
props: ["isType"],
components: { LevelStar, ProgressCard, LevelValue, AccountCard, MosaicChip },
@ -255,8 +262,10 @@ export default {
data() {
return {
detailVisible: false,
chainManager: new ChainManager(),
weapon: "",
isTabs: false,
loadingInstance:null
};
},
created() {
@ -288,6 +297,41 @@ export default {
handBuyShow() {
this.$emit("handBuyShow", this.weapon);
},
async handRemove() {
try {
this.showLoading()
const nftres = await this.chainManager.bc.beginCancelOrder(
this.weapon.o_link,
CONTRACT_ADDRESS[AppModule.chainId].marketDddress
);
console.log(nftres, "beginSell");
if (nftres.status == true) {
this.$emit("handMessage", 1);
this.hideLoading();
setTimeout(() => {
this.$emit("handMessageHide");
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);
}
},
showLoading() {
this.loadingInstance = this.$loading({
background: "rgba(0, 0, 0, 0.8)",
});
},
hideLoading() {
this.loadingInstance?.close();
},
},
};
</script>
@ -708,6 +752,24 @@ export default {
background: url("../../../assets/market/hero/sell-mb-btn.png") no-repeat;
background-size: 100% 100%;
}
.for-rent-btn {
display: flex;
.adjust {
width: 384px;
height: 89px;
cursor: pointer;
background: url("../../../assets/market/hero/adjust.png") no-repeat;
background-size: 100% 100%;
}
.remove {
width: 384px;
height: 89px;
cursor: pointer;
margin-left: 14px;
background: url("../../../assets/market/hero/remove.png") no-repeat;
background-size: 100% 100%;
}
}
}
.buy-price {
position: absolute;