<template>
|
<div>
|
<van-nav-bar
|
:placeholder="true"
|
:fixed="true"
|
title="ICO"
|
left-arrow
|
@click-left="onClickLeft"
|
>
|
<!-- @click-right="$router.push('/list-urrency')" -->
|
<!-- <template #right>
|
<van-icon name="todo-list-o" size="20" />
|
</template> -->
|
</van-nav-bar>
|
<div class="ico-warp">
|
<div class="ex-tabs flex">
|
<div
|
class="ex-tab"
|
v-for="item in listArr"
|
:key="item.id"
|
@click="changeTab(item)"
|
:class="active == item.id ? 'active' : ''"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
|
<template v-if="active === 1">
|
<subscriptionListIndex :active="active" />
|
</template>
|
<template v-else-if="active === 2">
|
<placingListIndex :active="active" @setgoumai="setgoumai" />
|
</template>
|
<template v-else>
|
<newbiList :active="active" />
|
</template>
|
<!-- 申购 配售 -->
|
<van-popup v-model="show" position="bottom" class="placing">
|
<div class="placing-box">
|
<div class="placing-header">{{ $t("配售") }}</div>
|
<van-row
|
type="flex"
|
justify="space-between"
|
class="mb"
|
align="center"
|
>
|
<van-col span="12">{{ $t("钱包余额") }}</van-col>
|
<van-col span="12" class="right"
|
>{{ money_data.money_wallet }} USDT</van-col
|
>
|
</van-row>
|
<van-row
|
type="flex"
|
justify="space-between"
|
class="mb"
|
align="center"
|
>
|
<van-col span="12">{{ activeData.tradingPair }}</van-col>
|
<van-col span="12" class="right">
|
{{ $t("单价") }}
|
{{ activeData.issuePrice }} USDT</van-col
|
>
|
</van-row>
|
<van-row
|
type="flex"
|
justify="space-between"
|
class="mb"
|
align="center"
|
>
|
<van-col span="4">{{ $t("购买数量") }}</van-col>
|
<van-col span="16" class="right">
|
<div class="input-box">
|
<van-field type="digit" v-model="amt" />
|
<div class="jy">
|
<div @click="amt--">-</div>
|
<div class="jia" @click="amt++">+</div>
|
</div>
|
</div>
|
</van-col>
|
</van-row>
|
<van-row
|
type="flex"
|
justify="space-between"
|
class="mb"
|
align="center"
|
>
|
<van-col span="4"></van-col>
|
<van-col span="16" class="right">
|
<div class="bfb">
|
<div
|
v-for="item in bfbList"
|
:key="item.value"
|
:class="`${item.value === bfbActive ? 'bfbActive' : ''}`"
|
@click="setbfbActive(item)"
|
>
|
{{ item.text }}
|
</div>
|
</div>
|
</van-col>
|
</van-row>
|
<div class="zongjia">
|
<div>{{ $t("总价") }}</div>
|
<div>{{ amt * activeData.issuePrice }} USDT</div>
|
</div>
|
<van-button class="okbut" type="info" @click="peishou">
|
{{ $t("确定") }}
|
</van-button>
|
</div>
|
</van-popup>
|
</div>
|
</div>
|
</template>
|
|
<script>
|
import { icoOrderAppAdd } from "@/API/home.api";
|
import { List, Cell, Dialog, Notify } from "vant";
|
import { mapGetters } from "vuex";
|
import newbiList from "./components/newbi-list.vue";
|
import placingListIndex from "./components/placing-list-index.vue";
|
import subscriptionListIndex from "./components/subscription-list-index.vue";
|
import Axios from "@/API/assets";
|
|
export default {
|
props: {},
|
components: {
|
newbiList,
|
placingListIndex,
|
subscriptionListIndex,
|
[Dialog.Component.name]: Dialog.Component,
|
[List.name]: List,
|
[Cell.name]: Cell,
|
},
|
data() {
|
return {
|
amt: 0,
|
show: false,
|
active: 1,
|
bfbActive: 0,
|
bfbList: [
|
{
|
text: "25%",
|
value: 0.25,
|
},
|
{
|
text: "50%",
|
value: 0.5,
|
},
|
{
|
text: "75%",
|
value: 0.75,
|
},
|
{
|
text: "100%",
|
value: 1,
|
},
|
],
|
listArr: [
|
{
|
name: this.$t("认购"),
|
id: 1,
|
},
|
{
|
name: this.$t("配售"),
|
id: 2,
|
},
|
{
|
name: this.$t("新币预览"),
|
id: 0,
|
},
|
],
|
|
activeData: {},
|
money_data: {},
|
};
|
},
|
mounted() {
|
this.GetAllAssetsdata();
|
},
|
methods: {
|
async GetAllAssetsdata() {
|
const res = await Axios.GetAllAssets();
|
this.money_data = res.data;
|
},
|
async peishou() {
|
if (Number(this.amt) <= 0) {
|
return Notify({ type: "warning", message: this.$t("请输入数量") });
|
}
|
await icoOrderAppAdd({
|
icoNewCurrencyId: this.activeData.id,
|
orderType: this.activeData.type,
|
tokenCode: this.activeData.tokenCode,
|
lotteryQuantity: this.amt,
|
});
|
|
Dialog.alert({
|
title: this.$t("提示"),
|
message: this.$t("配售成功"),
|
confirmButtonText: this.$t("确定"),
|
}).then(() => {
|
this.$router.push(`/list-urrency?type=${this.activeData.type}`);
|
});
|
},
|
onClickLeft() {
|
this.$router.go(-1);
|
},
|
setbfbActive(item) {
|
this.bfbActive = item.value;
|
try {
|
this.amt = Math.floor(
|
(this.money_data.money_wallet / this.activeData.issuePrice) *
|
item.value
|
);
|
} catch (error) {}
|
},
|
// 弹框
|
setgoumai(item) {
|
this.activeData = item;
|
this.show = true;
|
},
|
|
// 获取列表
|
|
changeTab(item) {
|
this.active = item.id;
|
},
|
},
|
computed: {
|
...mapGetters({ currency: "home/currency" }),
|
},
|
};
|
</script>
|
|
<style lang="scss" scoped>
|
.ico-warp {
|
background-color: #f5f5f8;
|
min-height: 100vh;
|
padding: 0 15px;
|
}
|
.ex-tabs {
|
margin-bottom: 20px;
|
font-size: 28px;
|
display: flex;
|
// padding-top: 22px;
|
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.05);
|
|
justify-content: center;
|
align-items: center;
|
background-color: #f5f5f8;
|
|
.ex-tab {
|
flex: 1;
|
text-align: center;
|
margin: 4px 1px;
|
padding: 18px 0px;
|
border-radius: 4px;
|
color: #9691fa;
|
|
@include themify() {
|
border-bottom: 2px solid transparent !important;
|
}
|
}
|
}
|
|
.ex-tabs .active {
|
@include themify() {
|
color: #9691fa !important;
|
// color: themed("text_color") !important;
|
}
|
|
@include themify() {
|
background-color: #fff;
|
// border-bottom: 2px solid themed("color_main") !important;
|
}
|
}
|
.bt {
|
width: 100%;
|
// height: 50px;
|
margin: 10px 0;
|
|
line-height: 50px;
|
text-align: center;
|
background-color: #def7ef;
|
color: #22d27f;
|
}
|
.placing {
|
border-top-left-radius: 20px;
|
border-top-right-radius: 20px;
|
}
|
|
.placing-box {
|
padding: 40px;
|
.placing-header {
|
// width: 100%;
|
margin: 20px 0;
|
text-align: center;
|
font-size: 46px;
|
}
|
.right {
|
text-align: right;
|
}
|
.mb {
|
margin-bottom: 10px;
|
}
|
.input-box {
|
border: 1px solid #c2c4c7;
|
display: flex;
|
|
.jy {
|
min-width: 150px;
|
border-left: 1px solid #c2c4c7;
|
display: flex;
|
align-items: center;
|
padding: 20px 0;
|
justify-content: space-between;
|
> div {
|
flex: 1;
|
// height: 50%;
|
text-align: center;
|
}
|
.jia {
|
border-left: 1px solid #c2c4c7;
|
}
|
}
|
}
|
}
|
::v-deep .van-field__body {
|
height: 100%;
|
padding-left: 10px;
|
}
|
.bfb {
|
display: flex;
|
justify-content: space-between;
|
margin-top: 15px;
|
> div {
|
width: 20%;
|
text-align: center;
|
border: 1px solid transparent;
|
background-color: #f6f6fc;
|
font-size: 24px;
|
line-height: 50px;
|
}
|
.bfbActive {
|
color: #056aea;
|
border: 1px solid #056aea;
|
background-color: #fff;
|
}
|
}
|
|
.item-box {
|
min-height: 100px;
|
padding: 0 20px;
|
}
|
.zongjia {
|
background-color: #f6f6fc;
|
box-sizing: border-box;
|
width: 100%;
|
height: 100px;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
padding: 0 20px;
|
margin-top: 30px;
|
}
|
.okbut {
|
width: 100%;
|
margin-top: 30px;
|
}
|
</style>
|
