From 4adc31f969c8de7d2445f5776563586a4728f770 Mon Sep 17 00:00:00 2001
From: lenghui <h280650@163.com>
Date: Fri, 29 Nov 2024 15:05:04 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BD=BF=E7=94=A8js=E6=94=B9=E4=B8=BA=E5=8A=A8?=
 =?UTF-8?q?=E6=80=81=E9=A1=B5=E9=9D=A2=EF=BC=8C=E5=AE=9E=E7=8E=B0=E5=AF=B9?=
 =?UTF-8?q?=E5=90=8E=E7=AB=AF=E6=95=B0=E6=8D=AE=E7=9A=84=E6=A8=A1=E6=8B=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 vueHomilyLink/src/views/LiveView.vue | 252 ++++++++++++++++++-----------------
 1 file changed, 127 insertions(+), 125 deletions(-)

diff --git a/vueHomilyLink/src/views/LiveView.vue b/vueHomilyLink/src/views/LiveView.vue
index 7cd86e1..0e82959 100644
--- a/vueHomilyLink/src/views/LiveView.vue
+++ b/vueHomilyLink/src/views/LiveView.vue
@@ -1,133 +1,145 @@
 <template>
     <!-- 卡片 -->
     <div class="card-container">
-        <div class="card">
-            <div class="cover-image" style="position:relative;">
-                <img src="../assets/live.jpg" alt="节目1">
-                <div
+        <div v-for="(live, index) in liveList" :key="index" class="card">
+            <div class="cover-image" :class="{ 'no-overlay': !live.status == 1 }" style="position:relative;">
+                <img :src=live.cover alt="节目1">
+                <div 
+                    v-if="live.status == 1"
                     style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;">
                     即将开播</div>
-                <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;">
-                    明天09:55开播</div>
+                    明天{{ live.startTime.slice(11, 16)}}开播</div>
             </div>
             <div class="card-content">
-                <div class="card-title">猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段</div>
-                <div class="card-actions"> <!-- 新增的容器类用于动作 -->
+                <div class="card-title">{{ live.liveName }}</div>
+                <div class="card-actions"> 
                     <!-- 用户头像 -->
-                    <img src="../assets/live.jpg" alt="节目1" class="user-avatar"
+                    <img :src=live.user.avatar alt="节目1" class="user-avatar"
                         style="border-radius: 50%; width: 20px; height: 20px;">
                     <!-- 用户昵称，与头像同行显示 -->
-                    <div class="card-info">用户昵称用户昵称用户昵称用户昵称</div>
-                    <!-- 预约按钮 -->
-                    <a href="#" class="card-button">预约</a>
+                    <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-else href="#" class="card-button" style="background-color: #ccc;">已预约</a>
                 </div>
             </div>
         </div>
+    </div>
+</template>
 
 
-        <!-- 卡片 -->
-        <div class="card">
-            <div class="cover-image" style="position:relative;">
-                <img src="../assets/live.jpg" alt="节目1">
-                <div
-                    style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;">
-                    即将开播</div>
-                <div
-                    style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;">
-                    明天09:55开播</div>
-            </div>
-            <div class="card-content">
-                <div class="card-title">猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段</div>
-                <div class="card-actions"> <!-- 新增的容器类用于动作 -->
-                    <!-- 用户头像 -->
-                    <img src="../assets/live.jpg" alt="节目1" class="user-avatar"
-                        style="border-radius: 50%; width: 20px; height: 20px;">
-                    <!-- 用户昵称，与头像同行显示 -->
-                    <div class="card-info">用户昵称用户昵称用户昵称用户昵称</div>
-                    <!-- 预约按钮 -->
-                    <a href="#" class="card-button">预约</a>
-                </div>
-            </div>
-        </div>
+<script setup>
+import { ref } from 'vue';
+/*
+模拟后端数据
+*/
+const liveList = ref([]);
 
-        <!-- 卡片 -->
-        <div class="card">
-            <div class="cover-image" style="position:relative;">
-                <img src="../assets/live.jpg" alt="节目1">
-                <div
-                    style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;">
-                    即将开播</div>
-                <div
-                    style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;">
-                    明天09:55开播</div>
-            </div>
-            <div class="card-content">
-                <div class="card-title">猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段</div>
-                <div class="card-actions"> <!-- 新增的容器类用于动作 -->
-                    <!-- 用户头像 -->
-                    <img src="../assets/live.jpg" alt="节目1" class="user-avatar"
-                        style="border-radius: 50%; width: 20px; height: 20px;">
-                    <!-- 用户昵称，与头像同行显示 -->
-                    <div class="card-info">用户昵称用户昵称用户昵称用户昵称</div>
-                    <!-- 预约按钮 -->
-                    <a href="#" class="card-button">预约</a>
-                </div>
-            </div>
-        </div>
 
-        <!-- 卡片 -->
-        <div class="card">
-            <div class="cover-image" style="position:relative;">
-                <img src="../assets/live.jpg" alt="节目1">
-                <div
-                    style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;">
-                    即将开播</div>
-                <div
-                    style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;">
-                    明天09:55开播</div>
-            </div>
-            <div class="card-content">
-                <div class="card-title">猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段</div>
-                <div class="card-actions"> <!-- 新增的容器类用于动作 -->
-                    <!-- 用户头像 -->
-                    <img src="../assets/live.jpg" alt="节目1" class="user-avatar"
-                        style="border-radius: 50%; width: 20px; height: 20px;">
-                    <!-- 用户昵称，与头像同行显示 -->
-                    <div class="card-info">用户昵称用户昵称用户昵称用户昵称</div>
-                    <!-- 预约按钮 -->
-                    <a href="#" class="card-button">预约</a>
-                </div>
-            </div>
-        </div>
+//获取直播列表
+function getLive() {
+    liveList.value = [
+        {
+            id: 1,
+            cover: "src/assets/live.jpg",
+            user: {
+                userId: 1,
+                userName: "冷辉老师",
+                avatar: "src/assets/live.jpg"
+            },
+            liveName: "猎庄之顶级波段",
+            startTime: "2023-05-01 09:55",
+            status: 0
+        },
+        {
+            id: 2,
+            cover: "src/assets/live.jpg",
+            user: {
+                userId: 2,
+                userName: "冷辉老师",
+                avatar: "src/assets/live.jpg"
+            },
+            liveName: "猎庄之顶级波段",
+            startTime: "2023-05-01 09:55",
+            status: 0
+        },
+        {
+            id: 3,
+            cover: "src/assets/live.jpg",
+            user: {
+                userId: 3,
+                userName: "冷辉老师",
+                avatar: "src/assets/live.jpg"
+            },
+            liveName: "猎庄之顶级波段",
+            startTime: "2023-05-01 09:55",
+            status: 1
+        },
+        {
+            id: 4,
+            cover: "src/assets/live.jpg",
+            user: {
+                userId: 4,
+                userName: "冷辉老师",
+                avatar: "src/assets/live.jpg"
+            },
+            liveName: "猎庄之顶级波段",
+            startTime: "2023-05-01 09:55",
+            status: 1
+        },
+        {
+            id: 5,
+            cover: "src/assets/live.jpg",
+            user: {
+                userId: 5,
+                userName: "冷辉老师",
+                avatar: "src/assets/live.jpg"
+            },
+            liveName: "猎庄之顶级波段",
+            startTime: "2023-05-01 09:55",
+            status: 1
+        }
+    ]
+}
+getLive();
+
+//获取用户信息
+const userInfo = ref([]);
+function getUserInfo() {
+    userInfo.value = {
+        userId: 1,
+        userName: "冷辉老师",
+        avatar: "src/assets/live.jpg",
+        //预约信息
+        reservationList: [1,2,3]
+    }
+}
+getUserInfo();
+
+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;
+}
+
+
+
+/*点击预约按钮以后显示预约成功的提示，并将按钮变为不可点击状态，且将按钮的文字改为“已预约”，并将按钮的背景颜色改为灰色*/
+function booking(liveId, userId) {
+    alert("预约成功！");
+}
+</script>
 
-        <!-- 卡片 -->
-        <div class="card">
-            <div class="cover-image" style="position:relative;">
-                <img src="../assets/live.jpg" alt="节目1">
-                <div
-                    style="position:absolute; z-index:2;text-align:center;top:30%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:18px;">
-                    即将开播</div>
-                <div
-                    style="position:absolute; z-index:2;text-align:center;top:60%;left:50%;transform:translate(-50%,-50%);color:#ffffffaf;font-size:15px;">
-                    明天09:55开播</div>
-            </div>
-            <div class="card-content">
-                <div class="card-title">猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段猎庄之顶级波段</div>
-                <div class="card-actions"> <!-- 新增的容器类用于动作 -->
-                    <!-- 用户头像 -->
-                    <img src="../assets/live.jpg" alt="节目1" class="user-avatar"
-                        style="border-radius: 50%; width: 20px; height: 20px;">
-                    <!-- 用户昵称，与头像同行显示 -->
-                    <div class="card-info">用户昵称用户昵称用户昵称用户昵称</div>
-                    <!-- 预约按钮 -->
-                    <a href="#" class="card-button">预约</a>
-                </div>
-            </div>
-        </div>
-    </div>
 
-</template>
 <style scoped>
 .card-container {
     /*居中显示*/
@@ -181,6 +193,10 @@
     background-color: rgba(0, 0, 0, 0.3);
     border-radius: 8px;
 }
+/*用于隐藏样式*/
+.cover-image.no-overlay::before {
+    display: none;
+}
 
 .card-content {
     padding: 8px;
@@ -208,7 +224,6 @@
     color: #fff;
     text-decoration: none;
     border-radius: 20px;
-    ;
     font-size: small;
     width: 50px;
     text-align: center;
@@ -242,17 +257,4 @@
     width: 90px;
     font-size: 12px;
 }
-</style>
-
-<script setup>
-/*点击预约按钮以后显示预约成功的提示，并将按钮变为不可点击状态，且将按钮的文字改为“已预约”，并将按钮的背景颜色改为灰色*/
-var buttons = document.querySelectorAll('.card-button');
-buttons.forEach(function (button) {
-    button.addEventListener('click', function () {
-        alert('预约成功！');
-        button.disabled = true;
-        button.innerText = '已预约';
-        button.style.backgroundColor = '#ccc';
-    });
-});
-</script>
\ No newline at end of file
+</style>
\ No newline at end of file