bemarket/src/components/market/TheSellDialog.vue
huangjinming 3f661ce8dc fix
2022-12-22 16:01:09 +08:00

382 lines
9.5 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.label"
:value="item.value"
>
</el-option>
</el-select>
</div>
</div>
<div class="piece-bottom-center">
<div class="minimum">
<div>The minimum price setting is</div>
<div>1.01 &nbsp;&nbsp;&nbsp;USDT</div>
</div>
<div class="minimum">
<div>The maximum price setting is</div>
<div>999999.99&nbsp; &nbsp;&nbsp;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 { sellMyNft } from "@/api/Market";
import ChainManager from "@/chain/ChainManager";
export default {
props: ["isPiecePut", "type", "data"],
components: {
WeaponSellTop,
HeroSellTop,
ChipSellTop,
PieceSellTop,
},
data() {
return {
piece: "",
price: "",
chainManager: new ChainManager(),
cunout: 1,
dialogVisible: false,
isWeapon: false,
options: [
{
value: "选项1",
label: "USDT",
},
{
value: "选项2",
label: "CEG",
},
{
value: "选项3",
label: "CEC",
},
{
value: "选项4",
label: "MATIC",
},
],
value: "",
};
},
created() {
console.log(this.data, "data");
},
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);
try {
const shellData = {
nftToken: "",
currency: "",
tokenId: this.piece
? this.piece.detail.token_id
: this.data.detail.token_id,
amount: this.piece ? this.cunout : null,
price: this.price,
marketAddress: "",
};
const res = await this.beginSell(shellData);
console.log(res);
} catch (err) {
console.log(err);
this.$message({
type: "info",
message: "error transfer",
});
}
console.log("handMessage1", res);
},
async beginSell(data) {
return this.chainManager.beginNftSell({
nftToken: data.nftToken,
currency: data.currency,
tokenId: data.tokenId,
amount: data.amount,
price: data.price,
marketAddress: data.marketAddress,
});
},
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>