389 lines
10 KiB
Vue
389 lines
10 KiB
Vue
<template>
|
|
<el-dialog :show-close="false" :visible.sync="isPiecePut">
|
|
<div class="bg"></div>
|
|
<div class="container">
|
|
<div class="price-title">PRIECE SETTIONG</div>
|
|
<HeroSellTop :data="data" v-if="type === 'hero'" />
|
|
<WeaponSellTop :data="data" v-else-if="type === 'weapon'" />
|
|
<ChipSellTop :data="data" v-else-if="type === 'chip'" />
|
|
<PieceSellTop
|
|
@handReduce="handReduce"
|
|
@handPlus="handPlus"
|
|
:data="piece"
|
|
:cunout="cunout"
|
|
v-else
|
|
/>
|
|
<div class="piece-bottom">
|
|
<div class="piece-bottom-top">
|
|
<div class="price-input">
|
|
<el-input placeholder="Input your price" v-model="price"></el-input>
|
|
</div>
|
|
<div class="attributes">
|
|
<el-select
|
|
class="se"
|
|
v-model="value"
|
|
:popper-append-to-body="false"
|
|
placeholder=""
|
|
popper-class="select-popper"
|
|
>
|
|
<el-option
|
|
v-for="item in options"
|
|
:key="item.value"
|
|
:label="item.name"
|
|
:value="item.address"
|
|
>
|
|
</el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="piece-bottom-center">
|
|
<div class="minimum">
|
|
<div>The minimum price setting is</div>
|
|
<div>1.01 USDT</div>
|
|
</div>
|
|
<div class="minimum">
|
|
<div>The maximum price setting is</div>
|
|
<div>999999.99 USDT</div>
|
|
</div>
|
|
<div class="wingning">
|
|
<div>
|
|
<img
|
|
width="57px"
|
|
src="../../assets/market/dialog/wingning.png"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
<div class="slogn">
|
|
When you list NFT on the marketplace,<br />
|
|
you wil lose the right to use NFT in the game.
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="pending">
|
|
<div class="pending-order" @click="handMessage">PEBDING ORDER</div>
|
|
<div class="confirm">CONFIRM</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span @click="closeTip" class="close">
|
|
<img
|
|
src="../../assets/market/hero/cose.png"
|
|
width="51px"
|
|
height="51px"
|
|
alt=""
|
|
/></span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import WeaponSellTop from "./WeaponSellTop.vue";
|
|
import PieceSellTop from "./PieceSellTop.vue";
|
|
import HeroSellTop from "./HeroSellTop.vue";
|
|
import ChipSellTop from "./ChipSellTop.vue";
|
|
import { getSupportedCurrenTypes } from "@/api/Market";
|
|
import { AppModule } from "@/store/modules/app";
|
|
import { CONTRACT_ADDRESS } from "@/configs/config_chain";
|
|
import ChainManager from "@/chain/ChainManager";
|
|
|
|
export default {
|
|
props: ["isPiecePut", "type", "data"],
|
|
components: {
|
|
WeaponSellTop,
|
|
HeroSellTop,
|
|
ChipSellTop,
|
|
PieceSellTop,
|
|
},
|
|
data() {
|
|
return {
|
|
piece: "",
|
|
price: "",
|
|
nft_Token: "",
|
|
chainManager: new ChainManager(),
|
|
cunout: 1,
|
|
dialogVisible: false,
|
|
isWeapon: false,
|
|
options: [],
|
|
value: "",
|
|
};
|
|
},
|
|
created() {
|
|
if (this.options.length > 0) {
|
|
return;
|
|
} else {
|
|
this.getOption();
|
|
}
|
|
|
|
console.log(this.options, "87887");
|
|
},
|
|
methods: {
|
|
closeTip() {
|
|
this.$emit("handPutHide");
|
|
},
|
|
async handMessage() {
|
|
// this.$emit("handMessage");
|
|
// const data = {
|
|
// nft_token: this.piece
|
|
// ? this.piece.detail.token_id
|
|
// : this.data.detail.token_id,
|
|
// s_price: this.price,
|
|
// amount: this.piece ? this.cunout : null,
|
|
// };
|
|
|
|
// const res = await sellMyNft(data);
|
|
|
|
switch (this.type) {
|
|
case "hero":
|
|
console.log(this.type, "-=-", AppModule.chainId);
|
|
"1338";
|
|
console.log(CONTRACT_ADDRESS[AppModule.chainId]);
|
|
this.nft_Token = CONTRACT_ADDRESS["1338"].hero;
|
|
break;
|
|
case "weapon":
|
|
this.nft_Token = CONTRACT_ADDRESS["1338"].weapon;
|
|
break;
|
|
case "chip":
|
|
this.nft_Token = CONTRACT_ADDRESS["1338"].chip;
|
|
break;
|
|
case "piece":
|
|
this.nft_Token = CONTRACT_ADDRESS["1338"].piece;
|
|
break;
|
|
}
|
|
try {
|
|
const shellData = {
|
|
nftToken: this.nft_Token,
|
|
currency: this.value,
|
|
tokenId: this.piece
|
|
? this.piece.detail.token_id
|
|
: this.data.detail.token_id,
|
|
amount: this.piece ? this.cunout : 1,
|
|
price: this.price,
|
|
marketAddress: CONTRACT_ADDRESS["1338"].address,
|
|
};
|
|
console.log(shellData, "shellData");
|
|
const nftres = await this.chainManager.bc.beginNftSell(
|
|
this.nft_Token,
|
|
this.value,
|
|
this.piece ? this.piece.detail.token_id : this.data.detail.token_id,
|
|
this.piece ? this.cunout : 1,
|
|
this.price,
|
|
CONTRACT_ADDRESS["1338"].address
|
|
);
|
|
console.log(nftres, "beginSell");
|
|
} catch (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) {
|
|
this.dialogVisible = true;
|
|
this.piece = data;
|
|
// console.log(data, "dfgdg");
|
|
// console.log(this.piece.detail.balance, "this.piece.detail.balance");
|
|
},
|
|
handReduce() {
|
|
if (this.cunout > 0) {
|
|
this.cunout--;
|
|
}
|
|
},
|
|
handPlus() {
|
|
if (this.cunout < this.piece.balance) {
|
|
this.cunout++;
|
|
}
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$item-bg-color: rgba(43, 204, 237, 0.34);
|
|
$item-size: 22px;
|
|
::v-deep .el-dialog,
|
|
.el-pager li {
|
|
position: relative;
|
|
width: 583px !important;
|
|
height: 584px !important;
|
|
background: url("../../assets/market/dialog/dialog-bg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
box-shadow: none;
|
|
}
|
|
::v-deep .el-dialog__body {
|
|
padding: 0px 0px !important;
|
|
}
|
|
::v-deep .el-dialog__header {
|
|
padding: 0px 0px 0px;
|
|
}
|
|
.contaier {
|
|
display: flex;
|
|
}
|
|
.close {
|
|
position: absolute;
|
|
cursor: pointer;
|
|
right: -46px;
|
|
top: -31px;
|
|
}
|
|
.container {
|
|
padding-top: 20px;
|
|
padding-left: 32px;
|
|
padding-right: 32px;
|
|
padding-bottom: 24px;
|
|
height: 540px;
|
|
position: relative;
|
|
.price-title {
|
|
font-size: 33px;
|
|
font-weight: bold;
|
|
padding-bottom: 14px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.piece-bottom {
|
|
.piece-bottom-top {
|
|
display: flex;
|
|
width: 100%;
|
|
justify-content: space-between;
|
|
margin-top: 20px;
|
|
margin-bottom: 19px;
|
|
.price-input {
|
|
width: 310px;
|
|
height: 48px;
|
|
::v-deep .el-input__inner {
|
|
height: 48px;
|
|
border-radius: 24px 10px 10px 24px;
|
|
}
|
|
::v-deep .el-input__inner {
|
|
&::placeholder {
|
|
text-align: center;
|
|
font-size: 23px;
|
|
font-weight: normal;
|
|
color: #d9d8d8;
|
|
}
|
|
}
|
|
}
|
|
.attributes {
|
|
width: 183px;
|
|
height: 48px;
|
|
::v-deep .el-input--suffix .el-input__inner {
|
|
width: 183px;
|
|
height: 48px;
|
|
background: #2bcced;
|
|
border-radius: 10px 24px 24px 10px;
|
|
border: none;
|
|
font-size: 24px;
|
|
font-weight: 600;
|
|
// text-align: center;
|
|
color: #fff;
|
|
}
|
|
|
|
::v-deep .el-select .el-input .el-select__caret.el-input__icon::before {
|
|
content: "";
|
|
background: url("../../assets/market/filter-left/select-icon.png")
|
|
center center no-repeat;
|
|
color: #fd724e;
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
::v-deep .el-input__inner {
|
|
&::placeholder {
|
|
color: #fff;
|
|
}
|
|
}
|
|
::v-deep .select-popper {
|
|
background-color: $item-bg-color;
|
|
border-radius: 0.08rem;
|
|
border: solid 0.02rem $item-bg-color;
|
|
border-radius: 18px;
|
|
font-family: "PingFangSC-Regular";
|
|
|
|
.el-select-dropdown__item.selected {
|
|
font-family: "PingFangSC-Regular";
|
|
font-size: $item-size;
|
|
border-radius: 18px;
|
|
// color: rgb(16, 17, 17);
|
|
}
|
|
li {
|
|
color: #fff;
|
|
background: transparent;
|
|
color: #fff;
|
|
// text-align: center;
|
|
border-radius: 18px;
|
|
font-weight: 600;
|
|
font-size: $item-size;
|
|
}
|
|
.el-select-dropdown__item:hover,
|
|
.el-select-dropdown__item.hover {
|
|
background: #2bcced;
|
|
margin-right: 1px;
|
|
}
|
|
.popper__arrow::after {
|
|
border-bottom-color: $item-bg-color;
|
|
}
|
|
.popper__arrow {
|
|
border-bottom-color: $item-bg-color;
|
|
}
|
|
.el-select-dropdown__empty {
|
|
padding: 0.2rem;
|
|
font-size: $item-size;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.minimum {
|
|
display: flex;
|
|
font-size: 17px;
|
|
color: #fc3b57;
|
|
justify-content: space-between;
|
|
}
|
|
.wingning {
|
|
display: flex;
|
|
margin-top: 27px;
|
|
margin-left: 36px;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.slogn {
|
|
width: 350px;
|
|
height: 37px;
|
|
margin-left: 14px;
|
|
font-size: 17px;
|
|
color: #fc3b57;
|
|
}
|
|
}
|
|
}
|
|
.pending {
|
|
position: absolute;
|
|
right: 84px;
|
|
bottom: -101px;
|
|
font-size: 26px;
|
|
.pending-order {
|
|
width: 401px;
|
|
height: 78px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
cursor: pointer;
|
|
line-height: 78px;
|
|
margin-bottom: 41px;
|
|
background: url("../../assets/market/dialog/order.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.confirm {
|
|
width: 401px;
|
|
height: 78px;
|
|
text-align: center;
|
|
line-height: 78px;
|
|
cursor: pointer;
|
|
color: #9dabd3;
|
|
background: url("../../assets/market/dialog/confirm.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
}
|
|
</style>
|