|
|
@@ -54,9 +54,9 @@
|
|
|
}}</van-button>
|
|
|
</div>
|
|
|
</ion-content>
|
|
|
- <ion-modal :is-open="showPayModal" class="pay-modal" @didDismiss="showPayModal = false">
|
|
|
- <ion-content :scrollY="false">
|
|
|
- <div class="pay-box">
|
|
|
+ <ion-modal class="stake-modal" :is-open="showPayModal" @didDismiss="showPayModal = false">
|
|
|
+ <div class="stake-modal-wrapper">
|
|
|
+ <div class="stake-modal-content">
|
|
|
<div class="title">
|
|
|
<div class="text1">{{ $t('blf.amount') }}</div>
|
|
|
<div class="text2">{{ $t('blf.minAmount') + $t('balance.symbol') + minAmount }}</div>
|
|
|
@@ -65,27 +65,29 @@
|
|
|
<div class="close" @click="showPayModal = false">
|
|
|
<img src="@/assets/icon_close2.png" alt="" />
|
|
|
</div>
|
|
|
- <van-stepper
|
|
|
- :min="minAmount"
|
|
|
- :max="now"
|
|
|
- :show-plus="false"
|
|
|
- :show-minus="false"
|
|
|
- v-model="stakeAmount"
|
|
|
- />
|
|
|
+ <van-field class="amount-filed" type="digit" v-model="stakeAmount" autofocus />
|
|
|
<div class="title">
|
|
|
<div class="text1">{{ $t('blf.time') }}</div>
|
|
|
</div>
|
|
|
<div class="time-list">
|
|
|
- <div class="time-item" v-for="item in stakeTimes" :key="item" @click="stakeTime = item">
|
|
|
- <img :src="item === stakeTime ? activeIcon : icon" alt="" />
|
|
|
- <span>{{ getHours(item) + $t('delegate.tips3') }}</span>
|
|
|
+ <div
|
|
|
+ class="time-item"
|
|
|
+ v-for="item in productInfo?.stakeOptions || []"
|
|
|
+ :key="item"
|
|
|
+ @click="stakeTime = item.duration"
|
|
|
+ >
|
|
|
+ <img :src="item.duration === stakeTime ? activeIcon : icon" alt="" />
|
|
|
+ <span class="duration">{{
|
|
|
+ formatDuration({ hours: item.duration / 60 }, { format: ['hours'] })
|
|
|
+ }}</span>
|
|
|
+ <span class="profit">{{ item.rate * 1000 }}‰ {{ $t('rank.profit') }}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="footer">
|
|
|
- <van-button type="primary" block @click="pay">{{ $t('blf.sure') }}</van-button>
|
|
|
+ <van-button type="primary" block @click="stake">{{ $t('common.confirm') }}</van-button>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </ion-content>
|
|
|
+ </div>
|
|
|
</ion-modal>
|
|
|
</ion-page>
|
|
|
</template>
|
|
|
@@ -98,7 +100,7 @@ import http from '@/plugins/http'
|
|
|
import { useIonRouter } from '@ionic/vue'
|
|
|
import { useWindowSize } from '@vueuse/core'
|
|
|
import { onIonViewWillEnter } from '@ionic/vue'
|
|
|
-import { differenceInMilliseconds, differenceInSeconds } from 'date-fns'
|
|
|
+import { differenceInMilliseconds, differenceInSeconds, formatDuration } from 'date-fns'
|
|
|
import { useUserStore } from '@/stores/user'
|
|
|
import { accDiv, accMul } from '@/plugins/calc'
|
|
|
import { closeOutline } from 'ionicons/icons'
|
|
|
@@ -128,10 +130,13 @@ const buy = () => {
|
|
|
showPayModal.value = true
|
|
|
}
|
|
|
}
|
|
|
-const stakeAmount = ref(0)
|
|
|
+const stakeAmount = ref(null)
|
|
|
const stakeTime = ref(720)
|
|
|
-const stakeTimes = ref([720, 1080, 1440])
|
|
|
-function pay() {
|
|
|
+function stake() {
|
|
|
+ if (!stakeAmount.value) {
|
|
|
+ Toast(t('blf.promptAmount'))
|
|
|
+ return
|
|
|
+ }
|
|
|
Toast.loading({
|
|
|
message: t('common.loading') + '...',
|
|
|
forbidClick: true
|
|
|
@@ -163,12 +168,15 @@ function onFinish() {
|
|
|
const productInfo = ref({})
|
|
|
const time = ref(0)
|
|
|
const rate = ref(0)
|
|
|
-const minAmount = ref(1)
|
|
|
+const minAmount = ref(null)
|
|
|
function init() {
|
|
|
http.http
|
|
|
.get('/financeProduct/today')
|
|
|
.then(res => {
|
|
|
productInfo.value = res
|
|
|
+ if (res.stakeOptions && res.stakeOptions.length > 0) {
|
|
|
+ stakeTime.value = res.stakeOptions[res.stakeOptions.length - 1].duration
|
|
|
+ }
|
|
|
total.value = res.amount
|
|
|
now.value = res.amount - res.saleAmount
|
|
|
if (res.status === 'PENDING') {
|
|
|
@@ -360,90 +368,86 @@ ion-content {
|
|
|
}
|
|
|
}
|
|
|
|
|
|
-ion-modal {
|
|
|
- --height: 330px;
|
|
|
+.stake-modal {
|
|
|
+ --height: fit-content;
|
|
|
--border-radius: 8px;
|
|
|
--width: 80vw;
|
|
|
+}
|
|
|
+.stake-modal-wrapper {
|
|
|
+ background: linear-gradient(90deg, rgba(219, 255, 206, 1), rgba(61, 243, 188, 1));
|
|
|
+ padding: 2px;
|
|
|
+}
|
|
|
+.stake-modal-content {
|
|
|
+ background-color: #2c302f;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 24px 16px;
|
|
|
+
|
|
|
+ .title {
|
|
|
+ .text1 {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #ffffff;
|
|
|
+ line-height: 24px;
|
|
|
+ }
|
|
|
|
|
|
- :deep(ion-content) {
|
|
|
- --background: linear-gradient(90deg, rgba(219, 255, 206, 1), rgba(61, 243, 188, 1));
|
|
|
- position: relative;
|
|
|
- padding: 2px;
|
|
|
- box-sizing: border-box;
|
|
|
-
|
|
|
- .pay-box {
|
|
|
- background-color: #2c302f;
|
|
|
- border-radius: 8px;
|
|
|
- position: absolute;
|
|
|
- top: 2px;
|
|
|
- left: 2px;
|
|
|
- right: 2px;
|
|
|
- bottom: 2px;
|
|
|
- padding: 24px 16px;
|
|
|
-
|
|
|
- .title {
|
|
|
- .text1 {
|
|
|
- font-size: 18px;
|
|
|
- font-weight: bold;
|
|
|
- color: #ffffff;
|
|
|
- line-height: 24px;
|
|
|
- }
|
|
|
-
|
|
|
- .text2 {
|
|
|
- font-size: 12px;
|
|
|
- color: #39f3b9;
|
|
|
- line-height: 17px;
|
|
|
- margin-top: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .text2 {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #39f3b9;
|
|
|
+ line-height: 17px;
|
|
|
+ margin-top: 5px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .close {
|
|
|
- position: absolute;
|
|
|
- right: 16px;
|
|
|
- top: 16px;
|
|
|
- img {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ right: 16px;
|
|
|
+ top: 16px;
|
|
|
+ img {
|
|
|
+ width: 22px;
|
|
|
+ height: 22px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .van-stepper {
|
|
|
- width: 100%;
|
|
|
- --van-stepper-input-width: 100%;
|
|
|
- --van-stepper-input-height: 60px;
|
|
|
- margin: 14px 0 24px;
|
|
|
- .van-stepper__input {
|
|
|
- margin: 0 0;
|
|
|
- background: #3c403f;
|
|
|
- border-radius: 8px;
|
|
|
- border: 1px solid #4f5352;
|
|
|
- font-size: 36px;
|
|
|
- font-weight: bold;
|
|
|
- color: #39f3b9;
|
|
|
- line-height: 36px;
|
|
|
- text-align: left;
|
|
|
- padding: 0 12px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .amount-filed {
|
|
|
+ --van-field-input-text-color: #39f3b9;
|
|
|
+ width: 100%;
|
|
|
+ margin: 14px 0 24px;
|
|
|
+ background: #3c403f;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #4f5352;
|
|
|
+ font-size: 36px;
|
|
|
+ font-weight: bold;
|
|
|
+ line-height: 60px;
|
|
|
+ padding: 0 12px;
|
|
|
+ &::-webkit-input-placeholder {
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ ::-webkit-input-placeholder {
|
|
|
+ font-size: 20px;
|
|
|
+ line-height: 60px;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- .time-list {
|
|
|
- .f();
|
|
|
- padding: 16px 0 24px;
|
|
|
- .time-item {
|
|
|
- width: 33%;
|
|
|
- .f();
|
|
|
- img {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- span {
|
|
|
- font-size: 14px;
|
|
|
- color: #959797;
|
|
|
- line-height: 24px;
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .time-list {
|
|
|
+ .f-col();
|
|
|
+ padding: 20px 0px;
|
|
|
+ .time-item {
|
|
|
+ .f();
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #959797;
|
|
|
+ line-height: 24px;
|
|
|
+ img {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .duration {
|
|
|
+ margin-left: 4px;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ .profit {
|
|
|
+ text-align: right;
|
|
|
}
|
|
|
}
|
|
|
}
|
