|
|
|
@ -13,11 +13,11 @@ |
|
|
|
<!-- 用户头像 --> |
|
|
|
<img :src=live.user.avatar alt="节目1" class="user-avatar"> |
|
|
|
<!-- 用户昵称，与头像同行显示 --> |
|
|
|
<div class="card-info">{{ live.user.userName }}</div> |
|
|
|
<div class="card-info">{{ live.user.username }}</div> |
|
|
|
<!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” --> |
|
|
|
<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> |
|
|
|
@click="booking(live.id, 90000001)">预约</a> |
|
|
|
<a v-else href="#" @click="cancelBooking(live.id, 90000001)" class="card-button" style="background-color: #ccc;">已预约</a> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -26,82 +26,23 @@ |
|
|
|
|
|
|
|
|
|
|
|
<script setup> |
|
|
|
import liveApi from '@/api/LiveApi'; |
|
|
|
import { ref } from 'vue'; |
|
|
|
/* |
|
|
|
模拟后端数据 |
|
|
|
*/ |
|
|
|
const liveList = ref([]); |
|
|
|
|
|
|
|
|
|
|
|
const liveList = ref({}); |
|
|
|
//获取直播列表 |
|
|
|
function getLive() { |
|
|
|
liveList.value = [ |
|
|
|
{ |
|
|
|
id: 1, |
|
|
|
cover: "src/assets/live.jpg", |
|
|
|
user: { |
|
|
|
userId: 1, |
|
|
|
userName: "冷辉老师", |
|
|
|
avatar: "src/assets/live.jpg" |
|
|
|
}, |
|
|
|
liveName: "猎庄之顶级波段", |
|
|
|
startTime: "2024-12-01 09:55", |
|
|
|
reservation: 1, //0表示未预约，1表示已预约 |
|
|
|
status: 1 //0表示未开播，1表示已开播 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 2, |
|
|
|
cover: "src/assets/live.jpg", |
|
|
|
user: { |
|
|
|
userId: 2, |
|
|
|
userName: "冷辉老师", |
|
|
|
avatar: "src/assets/live.jpg" |
|
|
|
}, |
|
|
|
liveName: "猎庄之顶级波段", |
|
|
|
startTime: "2024-12-01 09:55", |
|
|
|
reservation: 1, //0表示未预约，1表示已预约 |
|
|
|
status: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 3, |
|
|
|
cover: "src/assets/live.jpg", |
|
|
|
user: { |
|
|
|
userId: 3, |
|
|
|
userName: "冷辉老师", |
|
|
|
avatar: "src/assets/live.jpg" |
|
|
|
}, |
|
|
|
liveName: "猎庄之顶级波段", |
|
|
|
startTime: "2024-11-30 12:55", |
|
|
|
reservation: 1, //0表示未预约，1表示已预约 |
|
|
|
status: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 4, |
|
|
|
cover: "src/assets/live.jpg", |
|
|
|
user: { |
|
|
|
userId: 4, |
|
|
|
userName: "冷辉老师", |
|
|
|
avatar: "src/assets/live.jpg" |
|
|
|
}, |
|
|
|
liveName: "猎庄之顶级波段", |
|
|
|
startTime: "2024-12-30 12:55", |
|
|
|
reservation: 0, //0表示未预约，1表示已预约 |
|
|
|
status: 1 |
|
|
|
}, |
|
|
|
{ |
|
|
|
id: 5, |
|
|
|
cover: "src/assets/live.jpg", |
|
|
|
user: { |
|
|
|
userId: 5, |
|
|
|
userName: "冷辉老师", |
|
|
|
avatar: "src/assets/live.jpg" |
|
|
|
}, |
|
|
|
liveName: "猎庄之顶级波段", |
|
|
|
startTime: "2024-12-30 12:55", |
|
|
|
reservation: 0, //0表示未预约，1表示已预约 |
|
|
|
status: 1, |
|
|
|
} |
|
|
|
] |
|
|
|
liveApi.getLiveList() |
|
|
|
.then(resp => { |
|
|
|
if(resp.code == 0){ |
|
|
|
liveList.value = resp.data.liveList; |
|
|
|
console.log(liveList.value); |
|
|
|
}else{ |
|
|
|
alert("获取直播列表失败，请联系管理员"); |
|
|
|
} |
|
|
|
}) |
|
|
|
} |
|
|
|
getLive(); |
|
|
|
|
|
|
|
@ -119,36 +60,29 @@ function getDateDay(startTime) { |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
// //获取用户信息 |
|
|
|
// 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("预约成功！"); |
|
|
|
liveApi.addReservation(liveId,userId) |
|
|
|
.then(resp => { |
|
|
|
if (resp.code == 0) { |
|
|
|
getLive(); |
|
|
|
alert("预约成功！"); |
|
|
|
} else { |
|
|
|
alert("预约失败！请联系管理员"); |
|
|
|
} |
|
|
|
}) |
|
|
|
|
|
|
|
} |
|
|
|
function cancelBooking(liveId, userId) { |
|
|
|
liveApi.cancelReservation(liveId, userId) |
|
|
|
.then(resp => { |
|
|
|
if (resp.code == 0) { |
|
|
|
alert("取消预约成功！"); |
|
|
|
} else { |
|
|
|
alert("取消预约失败！请联系管理员"); |
|
|
|
} |
|
|
|
}) |
|
|
|
getLive(); |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
@ -226,7 +160,7 @@ function booking(liveId, userId) { |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: 0; |
|
|
|
width: 207px; |
|
|
|
width: 209px; |
|
|
|
height: 120px; |
|
|
|
/*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/ |
|
|
|
background-color: rgba(0, 0, 0, 0.3); |
|
|
|
|
lenghui
7 months ago