374 lines
9.1 KiB
Vue
374 lines
9.1 KiB
Vue
<template>
|
||
<el-dialog :show-close="false" :visible.sync="isBuy">
|
||
<div class="bg"></div>
|
||
<div class="container">
|
||
<div class="hero-top">
|
||
<div class="piece-left">
|
||
<div class="piece-img">
|
||
<img
|
||
v-if="piece.c_id"
|
||
width="97px"
|
||
:src="require('@/assets/market/piece/' + piece.c_id + '.png')"
|
||
alt=""
|
||
/>
|
||
<img
|
||
v-else
|
||
width="97px"
|
||
:src="
|
||
require('@/assets/market/chip/details/' +
|
||
data.c_id +
|
||
'_full.png')
|
||
"
|
||
alt=""
|
||
/>
|
||
</div>
|
||
<div class="name">
|
||
{{ piece.c_name ? piece.c_name : data.c_name }}
|
||
</div>
|
||
</div>
|
||
<div class="hero-right">
|
||
<div class="userinfo">
|
||
<div class="srabded">
|
||
<div>Srabded</div>
|
||
<div>ERC721</div>
|
||
</div>
|
||
<div class="token-id">
|
||
<div>ERC721</div>
|
||
<div>#{{ piece.token_id ? piece.token_id : data.token_id }}</div>
|
||
</div>
|
||
</div>
|
||
<div class="priece">
|
||
<div class="priece-btn">
|
||
<div class="priece-number">
|
||
{{ piece.s_price ? piece.s_price : data.s_price }}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="priece-bottom">
|
||
<div class="token-usid">
|
||
<div class="token-item-top">
|
||
<div>Token</div>
|
||
<div>USDT</div>
|
||
</div>
|
||
<div class="token-item">
|
||
<div>Price</div>
|
||
<div>{{ piece.s_price ? piece.s_price : data.s_price }}</div>
|
||
</div>
|
||
<div class="token-item-balance">
|
||
<div>Balance</div>
|
||
<div class="balance">0.37</div>
|
||
</div>
|
||
</div>
|
||
<div class="buy-state">
|
||
<div class="title">You don’t hane enough USDT to purchase.</div>
|
||
<div class="progress-content">
|
||
<div class="progress">
|
||
<div class="approve-progress"></div>
|
||
<div class="boder"></div>
|
||
<div class="buy-progress"></div>
|
||
</div>
|
||
|
||
<div class="progress-neme">
|
||
<div>Approve</div>
|
||
<div>buy</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="pending">
|
||
<div class="pending-order" @click="haldBuy">PEBDING ORDER</div>
|
||
<div class="confirm">CONFIRM</div>
|
||
</div>
|
||
</div>
|
||
|
||
<span @click="closeTip" class="close">
|
||
<img
|
||
src="../../assets/market/hero/cose.png"
|
||
width="38px"
|
||
height="38px"
|
||
alt=""
|
||
/></span>
|
||
</el-dialog>
|
||
</template>
|
||
|
||
<script>
|
||
import { AppModule } from "@/store/modules/app";
|
||
import { CONTRACT_ADDRESS } from "@/configs/config_chain";
|
||
import ChainManager from "@/chain/ChainManager";
|
||
export default {
|
||
props: ["isBuy", "data"],
|
||
data() {
|
||
return {
|
||
piece: "",
|
||
orderId: 0,
|
||
chainManager: new ChainManager(),
|
||
dialogVisible: false,
|
||
};
|
||
},
|
||
methods: {
|
||
async haldBuy() {
|
||
try {
|
||
const nftres = await this.chainManager.bc.beginBuy(
|
||
this.orderId,
|
||
CONTRACT_ADDRESS["1338"].address
|
||
);
|
||
console.log(nftres, "beginSell");
|
||
} catch (err) {
|
||
console.log("query order status error", err);
|
||
}
|
||
},
|
||
closeTip() {
|
||
// 分发自定义事件(事件名: closeTip)
|
||
this.$emit("handBuyHide", false);
|
||
// console.log("closeTip");
|
||
},
|
||
init(data) {
|
||
this.piece = data;
|
||
console.log(data, "dfgdg0900,2020-19");
|
||
console.log(this.piece, "this.piece.detail.balance12qrqwerqwer");
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
::v-deep .el-dialog,
|
||
.el-pager li {
|
||
position: relative;
|
||
width: 634px !important;
|
||
height: 593px !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: 28px;
|
||
padding-left: 36px;
|
||
padding-right: 34px;
|
||
padding-bottom: 27px;
|
||
height: 538px;
|
||
position: relative;
|
||
.price-title {
|
||
font-size: 33px;
|
||
font-weight: bold;
|
||
padding-bottom: 14px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
}
|
||
.hero-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.hero-left {
|
||
width: 149px;
|
||
height: 163px;
|
||
background: url("../../assets/market/chip/bg-there.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.hero-right {
|
||
font-size: 25px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
.userinfo {
|
||
width: 368px;
|
||
height: 87px;
|
||
font-size: 22px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
background: #28c1ed;
|
||
border: 4px solid rgba(91, 211, 246, 0.4);
|
||
border-radius: 18px;
|
||
.srabded {
|
||
display: flex;
|
||
margin-top: 10px;
|
||
margin-bottom: 10px;
|
||
margin-right: 18px;
|
||
margin-left: 19px;
|
||
justify-content: space-between;
|
||
}
|
||
.token-id {
|
||
display: flex;
|
||
margin-left: 19px;
|
||
margin-right: 18px;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
.priece {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
|
||
.priece-btn {
|
||
width: 148px;
|
||
height: 52px;
|
||
font-size: 25px;
|
||
font-weight: bold;
|
||
margin-top: 21px;
|
||
line-height: 52px;
|
||
// text-align: center;
|
||
background: url("../../assets/market/hero/price.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.priece-number {
|
||
margin-left: 46px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.priece-bottom {
|
||
margin-top: 19px;
|
||
.token-usid {
|
||
width: 564px;
|
||
height: 155px;
|
||
background: rgba(26, 58, 175, 0.3);
|
||
border-radius: 20px;
|
||
.token-item-top {
|
||
display: flex;
|
||
height: 50px;
|
||
// width: 100%;
|
||
// padding-top: 15px;
|
||
padding-left: 25px;
|
||
padding-right: 55px;
|
||
font-size: 26px;
|
||
font-weight: bold;
|
||
color: #ffffff;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
background: rgba(26, 58, 175, 0.3);
|
||
border-radius: 20px;
|
||
}
|
||
.token-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 20px;
|
||
color: #ffffff;
|
||
padding-right: 55px;
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
padding-left: 27px;
|
||
}
|
||
.token-item-balance {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding-top: 15px;
|
||
color: #ffffff;
|
||
padding-right: 55px;
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
padding-left: 27px;
|
||
.balance {
|
||
font-weight: 600;
|
||
color: #ff3b3b;
|
||
}
|
||
}
|
||
}
|
||
.buy-state {
|
||
width: 100%;
|
||
margin-top: 10px;
|
||
.title {
|
||
text-align: center;
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #fe3c3e;
|
||
}
|
||
.progress {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
.approve-progress {
|
||
width: 17px;
|
||
height: 17px;
|
||
background: rgba(43, 204, 237, 1);
|
||
border: 2px solid #557cda;
|
||
border-radius: 50%;
|
||
}
|
||
.boder {
|
||
width: 250px;
|
||
height: 2px;
|
||
background: #cfdcff;
|
||
border-radius: 1px;
|
||
}
|
||
.buy-progress {
|
||
width: 17px;
|
||
height: 17px;
|
||
background: rgba(170, 191, 247, 1);
|
||
border: 2px solid #557cda;
|
||
border-radius: 50%;
|
||
}
|
||
}
|
||
.progress-neme {
|
||
display: flex;
|
||
margin-left: 106px;
|
||
margin-right: 133px;
|
||
font-size: 22px;
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
margin-top: 6px;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
.pending {
|
||
position: absolute;
|
||
right: 95px;
|
||
bottom: -103px;
|
||
font-size: 26px;
|
||
.pending-order {
|
||
width: 426px;
|
||
height: 76px;
|
||
text-align: center;
|
||
color: #ffffff;
|
||
cursor: pointer;
|
||
line-height: 76px;
|
||
margin-bottom: 47px;
|
||
background: url("../../assets/market/dialog/order.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
.confirm {
|
||
width: 426px;
|
||
height: 76px;
|
||
text-align: center;
|
||
line-height: 76px;
|
||
cursor: pointer;
|
||
color: #9dabd3;
|
||
background: url("../../assets/market/dialog/confirm.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
}
|
||
}
|
||
}
|
||
.piece-left {
|
||
width: 137px;
|
||
height: 150px;
|
||
background: url("../../assets/market/chip/bg-there.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
.piece-img {
|
||
margin-top: 20px;
|
||
margin-left: 21px;
|
||
}
|
||
.name {
|
||
width: 100%;
|
||
text-align: center;
|
||
}
|
||
}
|
||
</style>
|