.

.env.development

@@ -1,4 +1,4 @@
-VUE_APP_BASE_URL=https://www.raex.vip/
+VUE_APP_BASE_URL=https://test.raex.vip/
 NODE_ENV=development
 VUE_APP_PUBLIC_PATH=/
 ASSETS_PATH=raex

src/views/Check.vue

@@ -10,14 +10,22 @@
                 <div class="text1">已经签到1天</div>
 
                 <div class="check-list">
-                    <div class="check-info animate__animated animate__flipInX" v-for="i in 10" :key="i">
-                        <img src="@assets/check/png-weiqiandao.png" alt="" />
-                        <div class="check-text">1月10日</div>
+                    <div
+                        class="check-info"
+                        v-for="(item, index) in showDates"
+                        :key="index"
+                        :class="{ 'prim animate__animated animate__flipInX': item.isSign }"
+                    >
+                        <img v-if="item.isSign" src="@assets/check/png-yiqiandao-pre.png" alt="" />
+                        <img v-else src="@assets/check/png-weiqiandao.png" alt="" />
+                        <div class="check-text">{{ item.title }}</div>
                     </div>
                 </div>
 
+                <img src="@assets/check/png-qiandaochenggong-btn.png" v-if="isSign" alt="" class="btn" />
                 <img
                     src="@assets/check/png-qiandao-btn.png"
+                    v-else
                     alt=""
                     @click="sign"
                     class="btn animate__animated animate__heartBeat animate__infinite"
@@ -44,14 +52,13 @@
                 </div>
             </div>
         </div>
-
         <div class="tips">本次活动最终解释权归RAEX绿洲所有备份</div>
     </div>
 </template>
 
 <script setup>
 import '@/styles/animate.css';
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, computed } from 'vue';
 import http from '../plugins/http';
 import { useStore } from 'vuex';
 import dayjs from 'dayjs';
@@ -60,28 +67,60 @@ const cards = ref(['健康福', '成长福', '感恩福', '财富福', '事业
 
 const store = new useStore();
 function sign() {
-    http.http.post('/dailySign/sign', {
-        userId: store.state.userInfo.id
-    });
+    http.http
+        .post('/dailySign/sign', {
+            userId: store.state.userInfo.id
+        })
+        .then(res => {
+            getSign();
+        });
 }
 
 const startDate = ref('');
 const dates = ref([]);
+const signDate = ref([]);
+
+const showDates = computed(() => {
+    return dates.value.map(item => {
+        return {
+            ...item,
+            isSign: signDate.value.includes(item.date)
+        };
+    });
+});
+
+const isSign = computed(() => {
+    let date1 = dayjs().format('YYYY-MM-DD');
+
+    return signDate.value.includes(date1);
+});
+
+function getSign() {
+    http.http
+        .post('/dailySign/search', {
+            userId: store.state.userInfo.id,
+            start: dates.value[0].date,
+            end: dates.value[dates.value.length - 1].date
+        })
+        .then(res => {
+            res.forEach(item => {
+                signDate.value.push(item.date);
+            });
+        });
+}
 
 onMounted(() => {
     http.http.get('sysConfig/get/fu_startTime').then(res => {
         startDate.value = res.value;
-        // for (let i = 0; i < 10; i++)
+        let date1 = dayjs(startDate.value);
+        for (let i = 0; i < 10; i++) {
+            dates.value.push({
+                date: date1.add(i, 'days').format('YYYY-MM-DD'),
+                title: date1.add(i, 'days').format('MM月DD日')
+            });
+        }
+        getSign();
     });
-    // http.http.post(
-    //     '/dailySign/all',
-    //     {
-    //         query: {
-    //             userId: store.state.userInfo.id
-    //         }
-    //     },
-    //     { body: 'json' }
-    // );
 });
 </script>
 
@@ -166,6 +205,7 @@ onMounted(() => {
             .flex-col();
             display: inline-flex;
             align-items: center;
+            box-sizing: border-box;
 
             img {
                 width: 32px;
@@ -180,6 +220,19 @@ onMounted(() => {
                 -webkit-text-fill-color: transparent;
                 margin-top: 8px;
             }
+
+            &.prim {
+                background: linear-gradient(136deg, #ff1f1f 0%, #ff4884 49%, #ff4f12 100%);
+                box-shadow: inset 0px 1px 3px 0px #cc0000;
+                border: 1px solid #ffd78b;
+
+                .check-text {
+                    color: #d8d8d8;
+                    background: linear-gradient(180deg, #ffea90 0%, #ffe8cc 100%);
+                    -webkit-background-clip: text;
+                    -webkit-text-fill-color: transparent;
+                }
+            }
         }
     }
 
@@ -276,7 +329,7 @@ onMounted(() => {
 }
 
 .check-info {
-    -webkit-animation-delay: 0.5s;
-    animation-delay: 0.5s;
+    -webkit-animation-delay: 0.3s;
+    animation-delay: 0.3s;
 }
 </style>