<template>
|
<div class="ico">
|
<fx-header :showLeft="false">
|
<template v-slot:title>
|
<div>STO</div>
|
</template>
|
<!-- <template v-slot:right>
|
<van-icon name="todo-list-o" @click="$router.push('/ICO/icoRecord')" />
|
</template> -->
|
</fx-header>
|
|
<div class="ico_list">
|
<div class="ico_item mb-5" v-for="i in icoList" :key="i.id">
|
<div class="item_1">
|
{{ i.name }}
|
</div>
|
<div class="item_2 flex justify-between">
|
<div class="mr-5">{{ $t('申购时间') }}</div>
|
<div>{{ i.startDate }} ~ {{ i.endDate }}</div>
|
</div>
|
<div class="item_2 flex justify-between">
|
<div>{{ $t('最低认购') }}</div>
|
<div>{{ i.minContribution }}</div>
|
</div>
|
<div class="item_2 flex justify-between">
|
<div>{{ $t('币种数量') }}</div>
|
<div>{{ i.maxContribution }}</div>
|
</div>
|
<div class="item_2 flex justify-between">
|
<div>{{ $t('IssuePrice') }}</div>
|
<div>{{ i.unitAmount }}</div>
|
</div>
|
|
<div class="item_2 flex justify-between">
|
<div>{{ $t('listingDate') }}</div>
|
<div>{{ i.marketDate }}</div>
|
</div>
|
<div class="item_2 flex justify-between align-center">
|
<div>{{ $t('进度') }}</div>
|
<div style="width: 70%;padding-top: 1rem;">
|
<van-progress :percentage="i.progressRate || 0" track-color="#ccc" />
|
</div>
|
</div>
|
<!-- <div class="item_3 flex justify-center">
|
<van-button type="default" round size="large" @click="openBuy(i)">{{$t('申购')}}</van-button>
|
</div> -->
|
</div>
|
</div>
|
|
|
<!-- 购买弹窗 -->
|
<van-popup v-model:show="show" round>
|
<div class="buy_popup">
|
<div class="buy_title flex justify-center">{{ itemObj.symbol }}</div>
|
|
<van-field v-model="sgNum" type="digit" :label="$t('申购数量')" />
|
|
<div class="flex justify-center mt-5">
|
<van-button type="default" size="large" round @click="buy">{{ $t('confirm') }}</van-button>
|
</div>
|
</div>
|
</van-popup>
|
</div>
|
</template>
|
|
<script setup>
|
import { ref } from "vue";
|
import { showToast } from 'vant'
|
import { _icoList, _icoSubscribe } from "@/service/ico.api.js";
|
import { useI18n } from "vue-i18n";
|
const { t } = useI18n()
|
|
// 获取列表
|
const icoList = ref([])
|
_icoList().then(res => {
|
icoList.value = res.records
|
}).catch(err => {
|
// showToast(err.msg)
|
})
|
|
// 打开申购弹窗
|
const show = ref(false) // 控制弹窗显示
|
const itemObj = ref({}) // ico列表项
|
const sgNum = ref(0) // 申购数量
|
const openBuy = (i) => {
|
show.value = true
|
itemObj.value = i
|
}
|
|
// 申购
|
const buy = () => {
|
let opt = {
|
icoProjectId: itemObj.value.id,
|
subscribeNums: sgNum.value,
|
subscriptionType: 1,
|
}
|
_icoSubscribe(opt).then(res => {
|
showToast(t('submitSuccess'))
|
show.value = false
|
}).catch(err => {
|
showToast(err)
|
})
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
.ico {
|
padding: 0rem 1.2rem 5rem 1.2rem;
|
font-size: 1.5rem;
|
|
.buy_popup {
|
width: 40rem;
|
padding: 1rem;
|
|
.buy_title {
|
font-size: 2.5rem;
|
font-weight: 700;
|
border-bottom: #aaa solid 1px;
|
padding: 1rem;
|
}
|
}
|
|
.ico_list {
|
padding: 1rem 0rem;
|
|
.ico_item {
|
background-color: #333;
|
padding: .5rem 1rem;
|
border: #aaa solid 1px;
|
border-radius: 1rem;
|
|
.item_1 {
|
padding: 1rem .5rem;
|
border-bottom: #ccc solid 1px;
|
font-size: 2rem;
|
font-weight: 700;
|
}
|
|
.item_2 {
|
padding: 1rem .5rem;
|
border-bottom: #ccc solid 1px;
|
font-size: 1.6rem;
|
font-weight: 500;
|
|
&>div:last-child {
|
color: #999;
|
}
|
}
|
|
.item_3 {
|
padding: .5rem;
|
}
|
}
|
}
|
}
|
</style>
|
