福利列表加倒计时

src/language/en.json

@@ -462,5 +462,8 @@
   "lang461": "Token Address",
   "lang462": "USDT Address",
   "lang463": "Access to clipboard failed, please check whether the access to clipboard is enabled",
-  "lang464": "Paste"
+  "lang464": "Paste",
+  "lang465": "The time left before the exchange starts is:",
+  "lang466": "The time left before the exchange ends is:",
+  "lang467": "The exchange ends"
 }

src/language/zh.json

@@ -462,5 +462,26 @@
   "lang461": "代币地址",
   "lang462": "USDT地址",
   "lang463": "访问剪贴板失败，请检查是否开启访问剪贴板权限",
-  "lang464": "粘贴"
+  "lang464": "粘贴",
+  "lang465": "距离开始兑换还有：",
+  "lang466": "距离截止兑换还有：",
+  "lang467": "截止兑换",
+  "lang468": "",
+  "lang469": "",
+  "lang470": "",
+  "lang471": "",
+  "lang472": "",
+  "lang473": "",
+  "lang474": "",
+  "lang475": "",
+  "lang476": "",
+  "lang477": "",
+  "lang478": "",
+  "lang479": "",
+  "lang480": "",
+  "lang481": "",
+  "lang482": "",
+  "lang483": "",
+  "lang484": "",
+  "lang485": ""
 }

src/views/exchange/index.vue

@@ -5,7 +5,22 @@
       <span>{{ $t('lang458') }}</span>
     </div>
     <div class="total_box" v-if="list.length > 0">
-      <img :src="item.product_image" alt="" v-for="(item, index) in list" :key="index" @click="navigation('exchange', { id: item.id })" />
+      <div class="item" v-for="(item, index) in list" :key="index" @click="toPage(item)">
+        <img :src="item.product_image" alt="" />
+        <van-count-down
+          class="count2"
+          v-if="new Date().getTime() < item.start_time * 1000"
+          :time="item.start_time * 1000 - new Date().getTime()"
+          :format="`${$t('lang465')} DD ${$t('lang9')} HH ${$t('lang10')} mm ${$t('lang11')} ss ${$t('lang12')}`"
+        />
+        <van-count-down
+          v-else-if="new Date().getTime() > item.start_time * 1000 && new Date().getTime() < item.end_time * 1000"
+          class="count1"
+          :time="item.end_time * 1000 - new Date().getTime()"
+          :format="`${$t('lang466')} DD ${$t('lang9')} HH ${$t('lang10')} mm ${$t('lang11')} ss ${$t('lang12')}`"
+        />
+        <span class="count3" v-else>{{ $t('lang467') }}</span>
+      </div>
     </div>
     <div class="bare" v-else>
       <span>{{ $t('lang60') }}</span>
@@ -34,6 +49,11 @@ export default {
     navigation(name, query) {
       this.$router.push({ name, query });
     },
+    toPage(item) {
+      if (new Date().getTime() > item.start_time * 1000 && new Date().getTime() < item.end_time * 1000) {
+        this.navigation('exchange', { id: item.id });
+      }
+    },
     handleScroll(event) {
       const container = event.target;
       const scrollTop = container.scrollTop; // 滚动距离
@@ -134,13 +154,50 @@ export default {
     box-sizing: border-box;
     border-radius: 10px;
     margin: 14px 14px;
-    img {
+    .item {
+      position: relative;
       margin-bottom: 6px;
     }
     img {
       width: 100%;
       border-radius: 10px;
     }
+
+    .count1 {
+      color: #fff;
+      font-size: 12px;
+      position: absolute;
+      bottom: 3.2px;
+      right: 0;
+      max-width: 76%;
+      padding: 3px 10px;
+      border-radius: 10px 0 10px 0;
+      background-color: #29b286;
+    }
+    .count2 {
+      color: #fff;
+      font-size: 12px;
+      position: absolute;
+      bottom: 3.2px;
+      right: 0;
+      max-width: 76%;
+      padding: 3px 10px;
+      border-radius: 10px 0 10px 0;
+      background-color: #1B9AEE;
+    }
+    .count3 {
+      color: #fff;
+      font-size: 12px;
+      position: absolute;
+      bottom: 3.2px;
+      right: 0;
+      max-width: 76%;
+      min-width: 100px;
+      text-align: center;
+      padding: 3px 10px;
+      border-radius: 10px 0 10px 0;
+      background-color: #8f8f8f;
+    }
   }
 
   .bare {