Browse Source

申购页面新增倒计时、数量

master
liaoxinyu 1 year ago
parent
commit
e055220003
  1. 8
      src/i18n/en.json
  2. 8
      src/i18n/tw.json
  3. 70
      src/views/purchase/index.vue

8
src/i18n/en.json

@ -911,7 +911,13 @@
"useOrNot": "Using?",
"subscribe": "Apply",
"prompt": "Tips",
"subscribeSuccess": "Apply Success"
"subscribeSuccess": "Apply Success",
"issueNumber" :"issue number",
"Countdown" :"Subscription Countdown",
"hour" :"hour",
"point" :"minute",
"Second" :"second",
"day":"day"
},
"contract": {
"a0": "Futures Account",

8
src/i18n/tw.json

@ -853,7 +853,13 @@
"useOrNot": "是否使用",
"subscribe": "申購",
"prompt": "提示",
"subscribeSuccess": "申購成功"
"subscribeSuccess": "申購成功",
"issueNumber" :"發行數量",
"Countdown" :"申購倒數計時",
"hour" :"时",
"point" :"分",
"Second" :"秒",
"day":"天"
},
"contract": {
"a0": "合約賬戶",

70
src/views/purchase/index.vue

@ -5,6 +5,8 @@
<div class="row">
<div class="col-6">
<div class="h3 mb-3">{{ detail.coin_name }}</div>
<div class="label text-secondary">{{ $t('purchase.issueNumber') }}</div>
<div style="margin-bottom: 20px;">{{price1(detail.issue_num)}}</div>
<div class>{{ $t("purchase.sendPrice") }}</div>
<div class="price fn-20 blue">
1 {{ detail.coin_name }} = {{detail.issue_price}}
@ -50,6 +52,7 @@
<div
class="col-6 d-flex flex-column justify-content-end align-items-start"
>
<div style="margin-bottom: 20px;">{{$t("purchase.Countdown")}}: <span style="margin-right: 10px;">{{ days }}{{$t("purchase.day")}}</span><span>{{ hours }}:</span><span>{{ minutes }}:</span><span>{{ seconds }}</span></div>
<div class="input-group mb-3">
<div class="input-group-prepend">
<el-dropdown>
@ -322,8 +325,16 @@ export default {
activityList:[{rate: "", amount: ""},{rate: "", amount: ""},{rate: "", amount: ""},{rate: "", amount: ""},{rate: "", amount: ""}],
activestep:0,
issue_price:0.03,
timer:''
};
timer:'',
days: 0,
hours: '00',
minutes: '00',
seconds: '00',
timer1: null,
//
remainingSeconds: 0
}
},
computed: {
total() {
@ -381,7 +392,7 @@ export default {
getInfo() {
Subscride.subscribe().then((res) => {
this.detail = res;
console.log(this.detail.announce_time,'1111')
// console.log(this.detail.announce_time,'1111')
});
},
@ -450,6 +461,58 @@ export default {
}
});
},
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) % 24;
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();
}
},
mounted() {
//
const start = new Date(this.detail.start_subscription_time).getTime();
const end = new Date(this.detail.end_subscription_time).getTime();
const now = Date.now();
if (now > start && now < end) {
this.remainingSeconds = Math.floor((end - now) / 1000);
this.startTimer()
}
},
created() {
this.subscribeTokenList();
@ -459,6 +522,7 @@ export default {
this.timer=setInterval(this.getTransferRecords,5000)
},
beforeDestroy() {
// this.clearTimer()
clearInterval(this.timer);
}
};

Loading…
Cancel
Save