<template>
|
<v-page>
|
<view class="layout-main">
|
<!-- 申购数据和申购周期 -->
|
<v-header class="nav-head" :border="false" :title="$t('purchases.b6')">
|
<!-- <template #right>
|
<v-link to="/pages/purchases/bill">
|
<van-icon class="fn-20 m-t-xs" name="todo-list-o" />
|
</v-link>
|
</template> -->
|
</v-header>
|
<view class="bg-form-panel-4 p-md fn-center d-flex">
|
<view class="w-6/12 d-flex align-center">
|
<van-circle
|
size="130"
|
class="w-max"
|
stroke-width="6"
|
:value="detail.baifenbi"
|
:color="{ '0%': '#27CAE0', '100%': '#4653EF' }"
|
>
|
<view class="color-light fn-center fn-10">
|
<view class="label m-b-xs color-default">{{ $t("purchase.a0") }}</view>
|
<!-- <view class="fn-11">1 {{ detail.coin_name }}≈</view>
|
<view class="fn-11"> -->
|
<text class="fn-16">{{ detail.issue_price }}</text>
|
<!-- USDT -->
|
<!-- </view> -->
|
<view>{{$t('exchange.a8')}}{{detail.issue_count}}</view>
|
<text class="fn-16">{{ detail.baifenbi.toFixed(2) }}%</text>
|
<view class="fn-center fn-15 color-success">
|
{{ detail.coin_name }}
|
</view>
|
</view>
|
</van-circle>
|
</view>
|
<view>
|
<view class="m-b-xs">
|
<view class="label fn-10">{{ $t("purchases.a1") }}</view>
|
<view class="color-light">{{ detail.subscribe_currency }}</view>
|
</view>
|
<view class="m-b-xs">
|
<view class="label fn-10">{{ $t("purchases.a2") }}</view>
|
<view class="color-light">{{
|
detail.expected_time_online
|
}}</view>
|
</view>
|
<view class="m-b-xs">
|
<view class="label fn-10">{{ $t("purchases.a3") }}</view>
|
<view class="color-light">{{
|
detail.start_subscription_time
|
}}</view>
|
</view>
|
<view class="m-b-xs">
|
<view class="label fn-10">{{ $t("purchases.a4") }}</view>
|
<view class="color-light">{{
|
detail.end_subscription_time
|
}}</view>
|
</view>
|
</view>
|
</view>
|
<!-- 申购 -->
|
<view class="bg-panel-3 p-md box-shadow">
|
<!-- <view class="title p-b-xs border-b">{{ $t("purchases.a5") }}</view>
|
<view class="m-y-md">
|
<view class="label">{{ $t("purchases.a1") }}</view>
|
<v-picker
|
:list="coinList"
|
v-model="coin"
|
range-label="coin_name"
|
range-value="coin_name"
|
class="border-b p-y-xs color-light"
|
@change="onCoinChange"
|
>
|
<v-input
|
disabled
|
:value="activeCoin.coin_name"
|
:placeholder="$t('purchases.a6')"
|
>
|
<template #right>
|
<i class="iconfont"></i>
|
</template>
|
</v-input>
|
</v-picker>
|
|
|
</view> -->
|
<view class="m-y-md">
|
<view class="label">{{ $t("purchases.a1") }}</view>
|
<v-picker :list="coinLists" v-model="coins" range-label="coin_name" range-value="coin_name"
|
class="border-b p-y-xs color-light">
|
<v-input disabled :value="coins" :placeholder="$t('purchases.a6')">
|
<template #right>
|
<i class="iconfont"></i>
|
</template>
|
</v-input>
|
</v-picker>
|
|
<view class="tips m-t-xs fn-sm " style="text-align: end;">
|
|
<view class="color-sell" style="text-align: end;">
|
<!-- {{ num || 0 }} {{ activeCoin.coin_name }} ≈ {{ total }} -->
|
{{ detail.issue_price }}USDT ≈
|
1{{ detail.coin_name }}
|
</view>
|
</view>
|
</view>
|
<view class="m-y-md">
|
<!-- <view class="label">{{ $t("purchases.a7") }}</view> -->
|
<view class="border-b p-y-xs color-light">
|
<v-input type="number" v-model="num" :placeholder="$t('currency.a8')">
|
<template #right>
|
<view class="color-success" @click="num = coinLists[0].usable_balance">
|
{{ $t("purchases.a9") }}</view>
|
</template>
|
</v-input>
|
</view>
|
</view>
|
<view style="margin-bottom: 10px; text-align: end;">{{$t('contract.e4')}}{{$t('assets.c1')}} : {{coinLists[0].usable_balance.toFixed(2)}} USDT</view>
|
<v-button block class="w-max rounded-lg" type="green" ref="btn"
|
@click="ifSubscribeNow">{{ $t("purchases.b0") }}
|
</v-button>
|
<br>
|
</view>
|
<!-- 周期 -->
|
<view class="bg-panel-3 p-md box-shadow">
|
<view class="title p-b-xs border-b">{{ $t("purchases.b1") }}</view>
|
<van-steps :active="detail.status - 1" :steps="[
|
{
|
text: $t('purchases.b2'),
|
desc: '',
|
},
|
{
|
text: $t('purchases.b3'),
|
desc: detail.start_subscription_time,
|
},
|
{
|
text: $t('purchases.b4'),
|
desc: detail.end_subscription_time,
|
},
|
{
|
text: $t('purchases.b5'),
|
desc: detail.announce_time,
|
},
|
]" active-color="#00D094" align-center direction="vertical">
|
</van-steps>
|
</view>
|
<!-- 项目详情 -->
|
<view class="bg-panel-3 p-md box-shadow">
|
<view class="title p-b-xs border-b">{{ $t("purchases.b6") }}</view>
|
<view class="m-t-md edit-content " v-html="detail.project_details"></view>
|
</view>
|
<van-popup :show="subscription" @close="subscription = false" closeable close-on-popstate
|
custom-style="height:auto;width:70%">
|
<view class="pop">
|
<input class="border-b" type="text" v-model="subscriptionCode" :placeholder="$t('common.a0')" />
|
<view class="m-t-lg d-flex justify-between">
|
<v-button block round class="w-4/12 m-t-md" type="default" ref="btn"
|
@click="subscription = false">{{ $t("common.cancel") }}</v-button>
|
<v-button block round class="w-4/12 m-t-md" type="primary" ref="btn"
|
@click="changePurchaseCode">{{ $t("common.confirm") }}</v-button>
|
</view>
|
</view>
|
</van-popup>
|
</view>
|
</v-page>
|
</template>
|
<script>
|
import Subscride from "@/api/subscride";
|
import date from "@/utils/class/date";
|
import math from "@/utils/class/math";
|
import {
|
mapGetters
|
} from 'vuex'
|
export default {
|
data() {
|
return {
|
coinList: [],
|
coinLists: [],
|
detail: {},
|
num: "",
|
coin: "",
|
coins: "",
|
subscription: false,
|
subscriptionCode: "",
|
activityStep: 0,
|
coinid: '', //申购币种id
|
type: '', //1是申购2是配售
|
}
|
},
|
computed: {
|
total() {
|
if (!this.activeCoin.proportion_amount) return 0;
|
return math.multiple(
|
this.num || 0,
|
this.activeCoin.proportion_amount * 1,
|
2
|
);
|
},
|
activeCoin() {
|
if (!this.coin) return {};
|
return this.coinList.find((item) => item.coin_name == this.coin);
|
},
|
...mapGetters(['themeStyle'])
|
},
|
onLoad(e) {
|
this.coinid = e.id
|
this.type = e.type
|
},
|
methods: {
|
onCoinChange() {
|
var data = {
|
self_coin: this.coinid,
|
sp_type: this.type
|
}
|
this.getInfo(data)
|
this.subscribeTokenList(data)
|
},
|
omitTo(num, idx) {
|
if (!num) return 0;
|
return math.omitTo(num, idx);
|
},
|
parseTime(num) {
|
if (!num) return;
|
return date.parseTime(num);
|
},
|
subscribeTokenList(data) {
|
|
Subscride.subscribeTokenList(data).then((res) => {
|
this.coinLists = res.data;
|
this.coins = this.coinLists[0].coin_name;
|
});
|
},
|
subscribeCoinList() {
|
Subscride.subscribeCoinList().then((res) => {
|
this.coinList = res.data;
|
this.coin = this.coinList[0].coin_name;
|
var data = {
|
self_coin: this.coinid,
|
sp_type: this.type
|
}
|
this.getInfo(data);
|
this.subscribeTokenList(data);
|
});
|
},
|
getInfo(data) {
|
console.log(data);
|
Subscride.subscribe(data).then((res) => {
|
this.detail = res.data;
|
});
|
},
|
// 选择币种
|
selectCoin() {
|
let arr = this.coinList.map((item) => {
|
return {
|
label: item.coin_name,
|
value: item.coin_name,
|
};
|
});
|
|
this.$picker(arr, {
|
value: this.coin
|
}).then((res) => {
|
this.coin = res;
|
});
|
},
|
// 提交询问
|
ifSubscribeNow() {
|
this.$dialog
|
.confirm({
|
title: this.$t("common.tips"),
|
message: `${this.$t("purchase.b7")}${
|
this.coins
|
}${this.$t("purchase.b8")}？`,
|
cancelButtonText: this.$t("common.cancel"),
|
confirmButtonText: this.$t("common.confirm")
|
})
|
.then(() => {
|
this.subscribeNow();
|
})
|
.catch(() => {});
|
},
|
//认购码
|
changePurchaseCode() {
|
let data = {
|
purchase_code: this.subscriptionCode
|
};
|
Subscride.changePurchaseCode(data, {
|
btn: this.$refs.btn
|
})
|
.then((res) => {
|
if (res.code == 4001) {
|
this.subscription = true
|
} else {
|
this.subscription = false
|
this.subscribeNow()
|
}
|
})
|
.catch(() => {});
|
},
|
// 申购
|
subscribeNow() {
|
let data = {
|
amount: this.num,
|
coin_symbol: this.coinid,
|
coin_name: this.coins,
|
sp_type: this.type
|
};
|
Subscride.subscribeNow(data, {
|
btn: this.$refs.btn
|
})
|
.then((res) => {
|
if (res.code == 4001) {
|
this.$toast(res.message)
|
this.subscription = true
|
return
|
}
|
if (res) {
|
this.$toast.success(this.$t("purchases.b9"));
|
this.num = "";
|
}
|
var data = {
|
self_coin: this.coinid,
|
sp_type:this.type
|
}
|
this.subscribeTokenList(data)
|
})
|
.catch(() => {});
|
},
|
},
|
created() {
|
this.subscribeCoinList()
|
|
},
|
};
|
</script>
|
<style lang="scss" scoped>
|
::v-deep uni-canvas {
|
width: 130px;
|
height: 130px;
|
}
|
|
::v-deep .van-step--finish {
|
color: $light;
|
}
|
|
::v-deep .van-step--vertical:first-child::before {
|
background: transparent;
|
}
|
|
::v-deep .van-steps {
|
background-color: var(--panel-4, #484859);
|
}
|
|
::v-deep .van-step--vertical {
|
.van-step__circle-container {
|
background-color: transparent;
|
|
.van-icon-checked {
|
width: 14px;
|
height: 14px;
|
background: rgba($green, 0.7);
|
font-size: 0;
|
display: block;
|
border-radius: 20px;
|
|
&::after {
|
content: '';
|
display: block;
|
font-size: 0;
|
width: 8px;
|
height: 8px;
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
transform: translate(-50%, -50%);
|
background: $green;
|
border-radius: 20px;
|
}
|
}
|
}
|
}
|
|
// .color-light {
|
// color: $text-color;
|
// }
|
.layout-main {
|
color: $text-color;
|
}
|
|
.pop {
|
padding: 50px 20px 30px;
|
}
|
</style>
|
