You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
459 lines
16 KiB
459 lines
16 KiB
<template>
|
|
<v-page>
|
|
<view class="layout-main">
|
|
<!-- 申购数据和申购周期 -->
|
|
<v-header class="nav-head" :border="false" :title="$t('purchase.a5')" :left-arrow="false">
|
|
<template #right>
|
|
<v-link :to="'/pages/purchase/bill?issue_price='+detail.issue_price">
|
|
<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.status*25"-->
|
|
<!-- :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 }} –>-->
|
|
<!-- 0.035-->
|
|
<!-- </text>-->
|
|
<!-- USDT-->
|
|
<!-- </view>-->
|
|
<!-- <view class="fn-center fn-15 color-success">-->
|
|
<!-- {{ detail.coin_name }}-->
|
|
<!-- </view>-->
|
|
<!-- </view>-->
|
|
<!--</van-circle>-->
|
|
<view class="m-b-xs">
|
|
<view class="label fn-10">{{ $t('purchase.issueNumber') }}</view>
|
|
<view class="color-light">{{price1(detail.issue_num)}}</view>
|
|
<view class="label fn-10">{{ $t("purchase.a0") }}</view>
|
|
<view class="color-light">1 {{ detail.coin_name }}≈{{ detail.issue_price }}<!-- 0.035USDT --></view>
|
|
<view class="label fn-10">{{ $t("purchase.a1") }}</view>
|
|
<view class="color-light">{{ detail.subscribe_currency }}</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
|
|
<vue class="m-b-xs"><img :src="detail.icon" style="width: 30px;" /></vue>
|
|
<view class="m-b-xs">
|
|
<view class="label fn-10">{{ $t("purchase.a2") }}</view>
|
|
<view class="color-light">{{convertTo12HourFormat(detail.expected_time_online)}}
|
|
</view>
|
|
</view>
|
|
<view class="m-b-xs">
|
|
<view class="label fn-10">{{ $t("purchase.a3") }}</view>
|
|
<view class="color-light">{{convertTo12HourFormat(detail.start_subscription_time)}}
|
|
</view>
|
|
</view>
|
|
<view class="m-b-xs">
|
|
<view class="label fn-10">{{ $t("purchase.a4") }}</view>
|
|
<view class="color-light">{{convertTo12HourFormat(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("purchase.a5") }}</view>
|
|
<view class="title border-b" style="padding:10px 0px">{{ timerbool?$t("purchase.Countdown1"):$t("purchase.Countdown") }}：<span>{{ hours }}:</span><span>{{ minutes }}:</span><span>{{ seconds }}</span></view>
|
|
<view class="m-y-md">
|
|
<view class="label">{{ $t("purchase.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"
|
|
>
|
|
<v-input
|
|
disabled
|
|
:value="activeCoin.coin_name"
|
|
:placeholder="$t('purchase.a6')"
|
|
>
|
|
<template #right>
|
|
<i class="iconfont"></i>
|
|
</template>
|
|
</v-input>
|
|
</v-picker>
|
|
<view class="tips m-t-xs fn-sm d-flex justify-between color-sell">
|
|
<view>
|
|
{{ num || 1 }} {{ activeCoin.coin_name }} ≈
|
|
<!-- {{ omitTo(activeCoin.proportion_amount, 4) }} -->
|
|
{{ omitTo((1 / detail.issue_price * activeCoin.CurrentPrice * num), 4) }}
|
|
{{ detail.coin_name }}
|
|
</view>
|
|
<!--<view class="color-sell">-->
|
|
<!-- {{ num || 1 }} {{ activeCoin.coin_name }} ≈-->
|
|
<!-- <!– {{ total }} –>-->
|
|
<!-- {{ omitTo(((activeCoin.CurrentPrice / detail.issue_price) * num), 4)}}-->
|
|
<!-- {{ detail.coin_name }}-->
|
|
<!--</view>-->
|
|
</view>
|
|
</view>
|
|
<view class="m-y-md">
|
|
<view class="label">{{ $t("purchase.a7") }}</view>
|
|
<view class="border-b p-y-xs color-light">
|
|
<v-input type="number" v-model="num" :placeholder="$t('purchase.a8')">
|
|
<template #right>
|
|
<view
|
|
class="color-success"
|
|
@click="num = activeCoin.usable_balance * 1 || 0"
|
|
>{{ $t("purchase.a9") }}
|
|
</view
|
|
>
|
|
</template>
|
|
</v-input>
|
|
</view>
|
|
</view>
|
|
<v-button
|
|
block
|
|
class="w-max rounded-lg"
|
|
type="green"
|
|
ref="btn"
|
|
@click="ifSubscribeNow"
|
|
>{{ $t("purchase.b0") }}
|
|
</v-button
|
|
>
|
|
<br>
|
|
</view>
|
|
<!-- 周期 -->
|
|
<view class="bg-panel-3 p-md box-shadow">
|
|
<view class="title p-b-xs border-b">{{ $t("purchase.b1") }}</view>
|
|
<van-steps
|
|
:active="detail.status - 1"
|
|
:steps="[
|
|
{
|
|
text: $t('purchase.b2'),
|
|
desc: '',
|
|
},
|
|
{
|
|
text: $t('purchase.b3'),
|
|
desc: detail.start_subscription_time,
|
|
},
|
|
{
|
|
text: $t('purchase.b4'),
|
|
desc: detail.end_subscription_time,
|
|
},
|
|
{
|
|
text: $t('purchase.b5'),
|
|
desc: detail.announce_time,
|
|
},
|
|
]"
|
|
active-color="#60c08c"
|
|
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("purchase.b6") }}</view>
|
|
<view class="m-t-md edit-content ">{{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: [],
|
|
detail: {},
|
|
num: 1,
|
|
coin: "",
|
|
subscription: false,
|
|
subscriptionCode: "",
|
|
activityStep: 0,
|
|
days: 0,
|
|
hours: '00',
|
|
minutes: '00',
|
|
seconds: '00',
|
|
timer1: null,
|
|
// 存储固定的初始时间差（单位：秒）
|
|
remainingSeconds: 0,
|
|
timerbool:false
|
|
}
|
|
},
|
|
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'])
|
|
},
|
|
methods: {
|
|
convertTo12HourFormat: date.convertTo12HourFormat,
|
|
omitTo(num, idx) {
|
|
if (!num) return 0;
|
|
return math.omitTo(num, idx);
|
|
},
|
|
parseTime(num) {
|
|
if (!num) return;
|
|
return date.parseTime(num);
|
|
},
|
|
subscribeTokenList() {
|
|
Subscride.subscribeTokenList().then((res) => {
|
|
this.coinList = res.data;
|
|
this.coin = this.coinList[0].coin_name;
|
|
});
|
|
},
|
|
getInfo() {
|
|
Subscride.subscribe().then((res) => {
|
|
this.detail = res.data;
|
|
// 初始化固定时间差
|
|
const start = new Date(this.detail.start_subscription_time).getTime();
|
|
const end = new Date(this.detail.end_subscription_time).getTime();
|
|
const now = new Date();
|
|
const options = {
|
|
timeZone: 'America/New_York', // 指定时区为纽约
|
|
year: 'numeric',
|
|
month: '2-digit',
|
|
day: '2-digit',
|
|
hour: '2-digit',
|
|
minute: '2-digit',
|
|
second: '2-digit',
|
|
hour12: false // 使用24小时制
|
|
};
|
|
|
|
const newYorkTime = new Date(now.toLocaleString('en-US', options)).getTime();
|
|
if(newYorkTime < start && newYorkTime < end){
|
|
this.timerbool = false
|
|
this.remainingSeconds = Math.floor((start - newYorkTime) / 1000);
|
|
this.startTimer()
|
|
}else if (newYorkTime > start && newYorkTime < end) {
|
|
this.timerbool = true
|
|
this.remainingSeconds = Math.floor((end - newYorkTime) / 1000);
|
|
this.startTimer()
|
|
}
|
|
});
|
|
},
|
|
// 选择币种
|
|
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.activeCoin.coin_name
|
|
}${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_name: this.activeCoin.coin_name,
|
|
};
|
|
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("purchase.b9"));
|
|
this.num = "";
|
|
}
|
|
})
|
|
.catch(() => {
|
|
});
|
|
},
|
|
|
|
price1(item){
|
|
if (item) {
|
|
let price = item.toString();
|
|
let parts = price.split(".");
|
|
parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
|
|
return parts.join(".");
|
|
}
|
|
},
|
|
startTimer() {
|
|
this.timer1 = setInterval(() => {
|
|
this.remainingSeconds -= 1; // 每秒减少1秒
|
|
this.updateDisplay();
|
|
|
|
if (this.remainingSeconds <= 0) {
|
|
this.clearTimer();
|
|
this.$emit('time-end');
|
|
}
|
|
}, 1000);
|
|
this.updateDisplay(); // 初始显示
|
|
},
|
|
clearTimer() {
|
|
if (this.timer1) {
|
|
clearInterval(this.timer1);
|
|
this.timer1 = null;
|
|
}
|
|
},
|
|
updateDisplay() {
|
|
const seconds = this.remainingSeconds % 60;
|
|
const minutes = Math.floor(this.remainingSeconds / 60) % 60;
|
|
const hours = Math.floor(this.remainingSeconds / 3600);
|
|
// const days = Math.floor(this.remainingSeconds / 86400);
|
|
|
|
// this.days = days;
|
|
this.hours = this.padZero(hours);
|
|
this.minutes = this.padZero(minutes);
|
|
this.seconds = this.padZero(seconds);
|
|
},
|
|
padZero(num) {
|
|
return num < 10 ? `0${num}` : num.toString();
|
|
}
|
|
},
|
|
created() {
|
|
this.subscribeTokenList();
|
|
this.getInfo();
|
|
},
|
|
};
|
|
</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>
|
|
|