调整数据格式，计算日期

vueHomilyLink/src/views/LiveView.vue

@@ -10,8 +10,8 @@
                     即将开播</div>
                 <div 
                     v-if="live.status == 1"
-                    style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;">
-                    明天{{ live.startTime.slice(11, 16)}}开播</div>
+                    style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;width: 120px;">
+                    {{getDateDay(live.startTime)}}  {{ live.startTime.slice(11, 16)}}开播</div>
             </div>
             <div class="card-content">
                 <div class="card-title">{{ live.liveName }}</div>
@@ -22,7 +22,7 @@
                     <!-- 用户昵称，与头像同行显示 -->
                     <div class="card-info">{{ live.user.userName }}</div>
                     <!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” -->
-                    <a v-if="!isBooking(live.id)" href="#" class="card-button" @click="booking(live.id, live.user.userId)">预约</a>
+                    <a v-if="live.reservation == 0" href="#" class="card-button" @click="booking(live.id, live.user.userId)">预约</a>
                     <a v-else href="#" class="card-button" style="background-color: #ccc;">已预约</a>
                 </div>
             </div>
@@ -51,8 +51,9 @@ function getLive() {
                 avatar: "src/assets/live.jpg"
             },
             liveName: "猎庄之顶级波段",
-            startTime: "2023-05-01 09:55",
-            status: 0
+            startTime: "2024-12-01 09:55",
+            reservation: 1, //0表示未预约，1表示已预约
+            status: 1 //0表示未开播，1表示已开播
         },
         {
             id: 2,
@@ -63,8 +64,9 @@ function getLive() {
                 avatar: "src/assets/live.jpg"
             },
             liveName: "猎庄之顶级波段",
-            startTime: "2023-05-01 09:55",
-            status: 0
+            startTime: "2024-12-01 09:55",
+            reservation: 1, //0表示未预约，1表示已预约
+            status: 1
         },
         {
             id: 3,
@@ -75,7 +77,8 @@ function getLive() {
                 avatar: "src/assets/live.jpg"
             },
             liveName: "猎庄之顶级波段",
-            startTime: "2023-05-01 09:55",
+            startTime: "2024-11-30 12:55",
+            reservation: 1, //0表示未预约，1表示已预约
             status: 1
         },
         {
@@ -87,7 +90,8 @@ function getLive() {
                 avatar: "src/assets/live.jpg"
             },
             liveName: "猎庄之顶级波段",
-            startTime: "2023-05-01 09:55",
+            startTime: "2024-12-30 12:55",
+            reservation: 0, //0表示未预约，1表示已预约
             status: 1
         },
         {
@@ -99,37 +103,52 @@ function getLive() {
                 avatar: "src/assets/live.jpg"
             },
             liveName: "猎庄之顶级波段",
-            startTime: "2023-05-01 09:55",
-            status: 1
+            startTime: "2024-12-30 12:55",
+            reservation: 0, //0表示未预约，1表示已预约
+            status: 1,
         }
     ]
 }
 getLive();
 
-//获取用户信息
-const userInfo = ref([]);
-function getUserInfo() {
-    userInfo.value = {
-        userId: 1,
-        userName: "冷辉老师",
-        avatar: "src/assets/live.jpg",
-        //预约信息
-        reservationList: [1,2,3]
+// 判断开播日期与当前时间的关系（今天、明天、其他）
+function getDateDay(startTime) {
+    const now = new Date();
+    const start = new Date(startTime);
+    const oneDay = 24 * 60 * 60 * 1000; // 一天的毫秒数
+    if (now.toDateString() == start.toDateString()) {
+        return "今天";
+    } else if (now.getTime() + oneDay >= start.getTime()) {
+        return "明天";
+    } else {
+        return startTime.slice(5, 10);
     }
 }
-getUserInfo();
 
-console.log(userInfo.value);
+// //获取用户信息
+// const userInfo = ref([]);
+// function getUserInfo() {
+//     userInfo.value = {
+//         userId: 1,
+//         userName: "冷辉老师",
+//         avatar: "src/assets/live.jpg",
+//         //预约信息
+//         reservationList: [1,2,3]
+//     }
+// }
+// getUserInfo();
 
-/* 判断预约状态 */
-function isBooking(liveId) {
-    for (let i = 0; i < userInfo.value.reservationList.length; i++) {
-        if (userInfo.value.reservationList[i] == liveId) {
-            return true;
-        }
-    }
-    return false;
-}
+// console.log(userInfo.value);
+
+// /* 判断预约状态 */
+// function isBooking(liveId) {
+//     for (let i = 0; i < userInfo.value.reservationList.length; i++) {
+//         if (userInfo.value.reservationList[i] == liveId) {
+//             return true;
+//         }
+//     }
+//     return false;
+// }