fix: new index

pages/index/index.vue

@@ -31,34 +31,84 @@
 
     <!-- Lucky Card (New Design) -->
     <view class="lucky-card">
-      <view class="lucky-left">
+      <view class="card-toggle" @tap="toggleCardMode">
-        <view class="date-group">
+        <uni-icons
-          <text class="date-val">{{ currentDate.day }}</text>
+          :type="cardMode === 'lucky' ? 'calendar' : 'star'"
-          <view class="date-sub">
+          size="18"
-            <text class="date-month">{{ currentDate.month }}月</text>
+          color="#d81e06"
-            <text class="date-year">{{ currentDate.year }}</text>
+        />
+      </view>
+
+      <!-- Lucky Mode -->
+      <block v-if="cardMode === 'lucky'">
+        <view class="lucky-left">
+          <view class="date-group">
+            <text class="date-val">{{ currentDate.day }}</text>
+            <view class="date-sub">
+              <text class="date-month">{{ currentDate.month }}月</text>
+              <text class="date-year">{{ currentDate.year }}</text>
+            </view>
           </view>
         </view>
-      </view>
+        <view class="lucky-divider"></view>
-      <view class="lucky-divider"></view>
+        <view class="lucky-middle">
-      <view class="lucky-middle">
+          <view class="lucky-tags">
-        <view class="lucky-tags">
+            <text class="tag-yi">宜 {{ lunarDate.yi.split("、")[0] }}</text>
-          <text class="tag-yi">宜 {{ lunarDate.yi.split("、")[0] }}</text>
+            <text class="tag-ji">忌 {{ lunarDate.ji.split("、")[0] }}</text>
-          <text class="tag-ji">忌 {{ lunarDate.ji.split("、")[0] }}</text>
+          </view>
+          <text class="lucky-lunar"
+            >农历 {{ lunarDate.month }}{{ lunarDate.day }}</text
+          >
         </view>
-        <text class="lucky-lunar"
+        <button class="lucky-btn" @tap="onOpenLucky">
-          >农历 {{ lunarDate.month }}{{ lunarDate.day }}</text
+          <uni-icons
-        >
+            type="star-filled"
-      </view>
+            size="16"
-      <button class="lucky-btn" @tap="onOpenLucky">
+            color="#fff"
-        <uni-icons
+            style="margin-right: 4rpx"
-          type="star-filled"
+          />
-          size="16"
+          <text>{{ signInfo.isSignedToday ? "已开启" : "抽取好运" }}</text>
-          color="#fff"
+        </button>
-          style="margin-right: 4rpx"
+      </block>
-        />
+
-        <text>{{ signInfo.isSignedToday ? "已开启" : "抽取好运" }}</text>
+      <!-- Calendar Mode -->
-      </button>
+      <block v-else>
+        <view class="calendar-mode">
+          <view class="sign-header">
+            <text class="sign-title"
+              >已连续签到
+              <text class="highlight">{{ signInfo.continuousDays || 0 }}</text>
+              天</text
+            >
+            <text class="sign-tip">连续7天得大奖</text>
+          </view>
+          <view class="week-days">
+            <view
+              class="day-item"
+              v-for="(day, index) in weekDays"
+              :key="index"
+              :class="{ 'is-today': day.isToday, 'is-signed': day.isSigned }"
+            >
+              <text class="day-label">{{ day.label }}</text>
+              <view class="status-icon">
+                <uni-icons
+                  v-if="day.isSigned"
+                  type="checkmarkempty"
+                  size="12"
+                  color="#fff"
+                />
+                <uni-icons
+                  v-else-if="day.isToday && !day.isSigned"
+                  type="plus"
+                  size="12"
+                  color="#d81e06"
+                />
+                <text v-else class="dot"></text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </block>
     </view>
 
     <!-- Make Card Scenes -->
@@ -188,6 +238,51 @@ const userInfo = computed(() => userStore?.userInfo || {});
 const isLoggedIn = computed(() => !!userStore.userInfo.nickName);
 const userPoints = computed(() => userStore.userInfo.points || 0);
 const signInfo = ref({}); // 用户签到信息
+const cardMode = ref("lucky"); // 'lucky' or 'calendar'
+
+const toggleCardMode = () => {
+  cardMode.value = cardMode.value === "lucky" ? "calendar" : "lucky";
+};
+
+const weekDays = computed(() => {
+  const now = new Date();
+  const todayStr =
+    signInfo.value.today ||
+    `${now.getFullYear()}-${String(now.getMonth() + 1).padStart(2, "0")}-${String(now.getDate()).padStart(2, "0")}`;
+
+  const current = new Date(todayStr);
+  const day = current.getDay() || 7; // 1 (Mon) - 7 (Sun)
+  const monday = new Date(current);
+  monday.setDate(current.getDate() - day + 1);
+
+  const days = [];
+  const labels = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
+  const signedDays = signInfo.value.signedDays || [];
+
+  for (let i = 0; i < 7; i++) {
+    const d = new Date(monday);
+    d.setDate(monday.getDate() + i);
+    const y = d.getFullYear();
+    const m = String(d.getMonth() + 1).padStart(2, "0");
+    const da = String(d.getDate()).padStart(2, "0");
+    const dateStr = `${y}-${m}-${da}`;
+
+    let isSigned = false;
+    const isToday = dateStr === todayStr;
+
+    if (signedDays.includes(i + 1)) {
+      isSigned = true;
+    }
+
+    days.push({
+      label: labels[i],
+      date: dateStr,
+      isToday,
+      isSigned,
+    });
+  }
+  return days;
+});
 
 const greetingText = computed(() => {
   const hour = new Date().getHours();
@@ -469,6 +564,21 @@ onShareTimeline(() => {
   justify-content: space-between;
   margin-bottom: 48rpx;
   box-shadow: 0 12rpx 32rpx rgba(216, 30, 6, 0.08);
+  position: relative;
+
+  .card-toggle {
+    position: absolute;
+    top: 16rpx;
+    right: 16rpx;
+    width: 48rpx;
+    height: 48rpx;
+    background: rgba(216, 30, 6, 0.05);
+    border-radius: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10;
+  }
 
   .lucky-left {
     display: flex;
@@ -565,6 +675,92 @@ onShareTimeline(() => {
       border: none;
     }
   }
+
+  .calendar-mode {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    .sign-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 24rpx;
+      padding-right: 64rpx;
+
+      .sign-title {
+        font-size: 28rpx;
+        color: #333;
+        font-weight: bold;
+
+        .highlight {
+          color: #d81e06;
+          font-size: 32rpx;
+          margin: 0 4rpx;
+        }
+      }
+
+      .sign-tip {
+        font-size: 20rpx;
+        color: #999;
+      }
+    }
+
+    .week-days {
+      display: flex;
+      justify-content: space-between;
+      width: 100%;
+
+      .day-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        flex: 1;
+
+        .day-label {
+          font-size: 20rpx;
+          color: #999;
+          margin-bottom: 12rpx;
+        }
+
+        .status-icon {
+          width: 32rpx;
+          height: 32rpx;
+          border-radius: 50%;
+          background: #f5f5f5;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+
+          .dot {
+            width: 8rpx;
+            height: 8rpx;
+            border-radius: 50%;
+            background: #ccc;
+          }
+        }
+
+        &.is-today {
+          .day-label {
+            color: #d81e06;
+            font-weight: bold;
+          }
+          .status-icon {
+            background: rgba(216, 30, 6, 0.1);
+          }
+        }
+
+        &.is-signed {
+          .status-icon {
+            background: #d81e06;
+            box-shadow: 0 4rpx 8rpx rgba(216, 30, 6, 0.2);
+          }
+        }
+      }
+    }
+  }
 }
 
 /* 通用 Section 样式 */