基金

src/locales/en.json

@@ -241,7 +241,13 @@
     "has": "Remaining places",
     "pic": "illustrate",
     "tips": "Pledge your balance, and enjoy today's dividends through the platform's overall pledge balance ratio, and the highest daily chemical income can get 1%",
-    "buy": "snap up now"
+    "buy": "snap up now",
+    "buying": "snapped up, income",
+    "computing": "Income calculation",
+    "finish": "sold out",
+    "pending": "Coming soon",
+    "sucess": "successful purchase",
+    "not": "no activity yet"
   },
   "tutorial": {
     "step1": "Step 1: Scan the QR code of the recommender, fill in the registration information, and click register to complete the registration",

src/locales/zh.json

@@ -239,7 +239,13 @@
         "pic": "图片说明",
         "tips": "质押您的余额，通过平台整体质押余额比例，享受今日分红，最高日化收益可得1%",
         "has": "剩余名额",
-        "buy": "立即抢购"
+        "buy": "立即抢购",
+        "computing": "收益计算中",
+        "buying": "已抢购，收益",
+        "pending": "即将开售",
+        "finish": "已抢光",
+        "not": "暂无活动",
+        "sucess": "购买成功"
     },
     "tutorial": {
         "step1": "第一步：扫一扫推荐人二维码，填写注册信息，点击register完成注册",

src/views/BLFPage.vue

@@ -25,28 +25,114 @@
                     @click="buy"
                     >{{ $t('blf.buy') }}</van-button
                 > -->
-                <van-button type="primary" block @click="buy">{{ $t('blf.buy') }}</van-button>
+
+                <template v-if="orderInfo.id">
+                    <van-button type="info" v-if="orderInfo.status === 'PENDING'" block>{{
+                        $t('blf.computing')
+                    }}</van-button>
+                    <van-button type="primary" class="getted" v-else block
+                        >{{ $t('blf.buying') }} +{{ orderInfo.profit }}</van-button
+                    >
+                </template>
+                <template v-if="orderInfo.productId !== productInfo.id">
+                    <van-button type="primary" class="not" block v-if="productInfo.status === 'PENDING'">
+                        <div class="btn-content">
+                            <div class="text1">{{ $t('blf.pending') }}</div>
+                            <van-count-down class="text2" :time="time" @finish="onFinish" />
+                        </div>
+                    </van-button>
+                    <van-button type="primary" v-else-if="productInfo.stock" block @click="buy">{{
+                        $t('blf.buy')
+                    }}</van-button>
+                    <van-button type="primary" v-else class="not" block> {{ $t('blf.finish') }} </van-button>
+                </template>
+
+                <van-button v-if="!productInfo.id && !orderInfo.id" type="primary" class="not" block>{{
+                    $t('blf.not')
+                }}</van-button>
             </div>
         </ion-content>
     </ion-page>
 </template>
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useI18n } from 'vue-i18n'
 import Toast from '@/utils/toast'
 import '@/styles/animate.css'
+import http from '@/plugins/http'
+import { onIonViewWillEnter } from '@ionic/vue'
+import { differenceInMilliseconds } from 'date-fns'
 
 const { t } = useI18n()
 const total = ref(100)
-const now = ref(20)
+const now = ref(0)
 
 const progress = computed(() => {
     return (now.value * 100) / total.value
 })
 
 const buy = () => {
-    Toast(t('common.notAvailable'))
+    Toast.loading({
+        message: t('common.loading') + '...',
+        forbidClick: true
+    })
+    http.http
+        .post('/financeOrder/create', {
+            productId: productInfo.value.id
+        })
+        .then(() => {
+            Toast.clear()
+            init()
+            Toast.success(t('blf.sucess'))
+        })
+}
+
+function onFinish() {
+    init()
 }
+
+const productInfo = ref({})
+const orderInfo = ref({})
+const time = ref(0)
+function init() {
+    http.http
+        .get('/financeProduct/today')
+        .then(res => {
+            productInfo.value = res
+            total.value = res.total
+            now.value = res.total - res.stock
+            if (res.status === 'PENDING') {
+                // res.startTime
+                time.value = differenceInMilliseconds(new Date(res.startTime), new Date())
+                console.log(time.value)
+            }
+            getOrder()
+        })
+        .catch(e => {
+            getOrder()
+        })
+}
+
+function getOrder() {
+    http.http
+        .post(
+            '/financeOrder/my',
+            {
+                query: {
+                    status: 'PENDING, STAKING'
+                }
+            },
+            { body: 'json' }
+        )
+        .then(res => {
+            if (!res.empty) {
+                orderInfo.value = res.content[0]
+            }
+        })
+}
+onIonViewWillEnter(() => {
+    init()
+})
 </script>
 
 <style lang="less" scoped>
@@ -129,11 +215,43 @@ ion-content {
 .buy {
     padding: 25px 20px;
     .van-button {
-        background: linear-gradient(90deg, #dfffcd 0%, #91fac5 48%, #39f3bb 100%);
+        --van-button-radius: 8px;
         color: #000;
         font-size: 18px;
         font-weight: bold;
         height: 49px;
+
+        &.van-button--primary {
+            background: linear-gradient(90deg, #dfffcd 0%, #91fac5 48%, #39f3bb 100%);
+        }
+
+        &.van-button--info {
+            background: linear-gradient(
+                90deg,
+                rgba(232, 130, 255, 1) 0%,
+                rgba(208, 104, 252, 1) 49.98%,
+                rgba(162, 78, 252, 1) 100%
+            );
+            color: #ffffff;
+        }
+
+        &.getted {
+            background: linear-gradient(90deg, #99d3ff 0%, #9298fc 0%, #5f64ed 50.32%, #4e65fc 100%);
+            color: #ffffff;
+        }
+
+        &.not {
+            background: linear-gradient(90deg, #3d403f 0%, #383b3a 100%);
+            color: #c4c5c5;
+
+            .text2 {
+                font-size: 13px;
+                font-weight: bold;
+            }
+        }
+    }
+    .van-button + .van-button {
+        margin-top: 20px;
     }
 }
 </style>