wanglin
/
practice_VUE
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

使用js改为动态页面，实现对后端数据的模拟

live_lh
lenghui 7 months ago
parent
a383e058d1
commit
4adc31f969
1 changed files with 127 additions and 125 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 252
      vueHomilyLink/src/views/LiveView.vue

252
vueHomilyLink/src/views/LiveView.vue
View File

@ -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>
</style>
Write Preview
Loading…
Cancel
Save