Compare commits
merge into: wanglin:master
wanglin:bogu_yjt
wanglin:channel_yjt
wanglin:dev
wanglin:home_zwk
wanglin:live_lh
wanglin:master
wanglin:study
pull from: wanglin:live_lh
wanglin:bogu_yjt
wanglin:channel_yjt
wanglin:dev
wanglin:home_zwk
wanglin:live_lh
wanglin:master
wanglin:study
10 Commits
| Author | SHA1 | Message | Date |
|---|---|---|---|
lenghui
|
138bcd36cb |
小修
|
7 months ago |
|
lenghui
|
81c1caa158 |
引入elmentplus
|
7 months ago |
|
lenghui
|
46829c0206 |
接口对接
|
7 months ago |
|
lenghui
|
30771975b9 |
行内样式抽离
|
7 months ago |
|
lenghui
|
6741db2de0 |
Api编写
|
7 months ago |
|
lenghui
|
59a00a994a |
调整数据格式，计算日期
|
7 months ago |
|
lenghui
|
4adc31f969 |
使用js改为动态页面，实现对后端数据的模拟
|
7 months ago |
|
lenghui
|
a383e058d1 |
显示优化
|
7 months ago |
|
lenghui
|
a636ddc299 |
完成直播静态H5页面的跳转
|
7 months ago |
|
lenghui
|
3c735d1f4e |
H5静态页面
|
7 months ago |
10 changed files with 593 additions and 36 deletions
-
311vueHomilyLink/package-lock.json
-
2vueHomilyLink/package.json
-
16vueHomilyLink/src/api/LiveApi.js
-
15vueHomilyLink/src/api/index.js
-
BINvueHomilyLink/src/assets/live.jpg
-
38vueHomilyLink/src/assets/main.css
-
2vueHomilyLink/src/components/Nav.vue
-
3vueHomilyLink/src/main.js
-
233vueHomilyLink/src/views/LiveView.vue
-
9vueHomilyLink/vite.config.js
@ -0,0 +1,16 @@ |
|||||
|
import service from "."; |
||||
|
const liveApi = { |
||||
|
//获取直播列表
|
||||
|
getLiveList() { |
||||
|
return service.post('/live', { UserId: 90000001 }); |
||||
|
}, |
||||
|
//预约
|
||||
|
addReservation(Id, UserId) { |
||||
|
return service.post('/reservation', { Id, UserId }); |
||||
|
}, |
||||
|
//取消预约
|
||||
|
cancelReservation(Id, UserId) { |
||||
|
return service.delete(`/reservation?Id=${Id}&UserId=${UserId}`); |
||||
|
} |
||||
|
} |
||||
|
export default liveApi; |
||||
@ -0,0 +1,15 @@ |
|||||
|
import axios from "axios"; |
||||
|
|
||||
|
const service = axios.create({ |
||||
|
// baseURL: 'http://192.168.9.19:8080',
|
||||
|
baseURL: '/api' |
||||
|
}); |
||||
|
|
||||
|
|
||||
|
//Axios的响应拦截器..
|
||||
|
service.interceptors.response.use(resp => { |
||||
|
return resp.data; |
||||
|
}, error => { |
||||
|
return Promise.reject(error); |
||||
|
}); |
||||
|
export default service; |
||||
|
After Width: 310 | Height: 200 | Size: 39 KiB |
@ -1,35 +1,9 @@ |
|||||
@import './base.css'; |
@import './base.css'; |
||||
|
|
||||
#app { |
|
||||
max-width: 1280px; |
|
||||
margin: 0 auto; |
|
||||
padding: 2rem; |
|
||||
font-weight: normal; |
|
||||
} |
|
||||
|
|
||||
a, |
|
||||
.green { |
|
||||
text-decoration: none; |
|
||||
color: hsla(160, 100%, 37%, 1); |
|
||||
transition: 0.4s; |
|
||||
padding: 3px; |
|
||||
} |
|
||||
|
|
||||
@media (hover: hover) { |
|
||||
a:hover { |
|
||||
background-color: hsla(160, 100%, 37%, 0.2); |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
@media (min-width: 1024px) { |
|
||||
body { |
|
||||
display: flex; |
|
||||
place-items: center; |
|
||||
} |
|
||||
|
|
||||
#app { |
|
||||
display: grid; |
|
||||
grid-template-columns: 1fr 1fr; |
|
||||
padding: 0 2rem; |
|
||||
} |
|
||||
|
html,body{ |
||||
|
margin:0px; |
||||
|
height: 100%; |
||||
} |
} |
||||
|
#app{ |
||||
|
height: 100%; |
||||
|
} |
||||
@ -1,10 +1,237 @@ |
|||||
|
<template> |
||||
|
<!-- 卡片 --> |
||||
|
<div class="card-container"> |
||||
|
<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" class="overlay">即将开播</div> |
||||
|
<div v-if="live.status == 1" class="start-time">{{ getDateDay(live.startTime) }} {{ live.startTime.slice(11, 16) }}开播</div> |
||||
|
</div> |
||||
|
<div class="card-content"> |
||||
|
<div class="card-title">{{ live.liveName }}</div> |
||||
|
<div class="card-actions"> |
||||
|
<!-- 用户头像 --> |
||||
|
<img :src=live.user.avatar alt="节目1" class="user-avatar"> |
||||
|
<!-- 用户昵称，与头像同行显示 --> |
||||
|
<div class="card-info">{{ live.user.username }}</div> |
||||
|
<!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” --> |
||||
|
<a v-if="live.reservation == 0" href="#" class="card-button" |
||||
|
@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> |
||||
|
</div> |
||||
|
</template> |
||||
|
|
||||
|
|
||||
<script setup> |
<script setup> |
||||
|
import liveApi from '@/api/LiveApi'; |
||||
|
import { ref } from 'vue'; |
||||
|
import { ElMessage } from 'element-plus'; |
||||
|
/* |
||||
|
模拟后端数据 |
||||
|
*/ |
||||
|
const liveList = ref({}); |
||||
|
//获取直播列表 |
||||
|
function getLive() { |
||||
|
liveApi.getLiveList() |
||||
|
.then(resp => { |
||||
|
if(resp.code == 0){ |
||||
|
liveList.value = resp.data.liveList; |
||||
|
console.log(liveList.value); |
||||
|
}else{ |
||||
|
ElMessage.error('获取直播列表失败'); |
||||
|
} |
||||
|
}) |
||||
|
} |
||||
|
getLive(); |
||||
|
|
||||
|
// 判断开播日期与当前时间的关系（今天、明天、其他） |
||||
|
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); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
/*点击预约按钮以后显示预约成功的提示，并将按钮变为不可点击状态，且将按钮的文字改为“已预约”，并将按钮的背景颜色改为灰色*/ |
||||
|
function booking(liveId, userId) { |
||||
|
liveApi.addReservation(liveId,userId) |
||||
|
.then(resp => { |
||||
|
console.log(resp.code); |
||||
|
if (resp.code == 0) { |
||||
|
getLive(); |
||||
|
ElMessage.success("预约成功"); |
||||
|
} else { |
||||
|
ElMessage.error("预约失败，请联系管理员"); |
||||
|
} |
||||
|
}) |
||||
|
|
||||
|
} |
||||
|
function cancelBooking(liveId, userId) { |
||||
|
liveApi.cancelReservation(liveId, userId) |
||||
|
.then(resp => { |
||||
|
if (resp.code == 0) { |
||||
|
ElMessage.success("取消预约成功"); |
||||
|
} else { |
||||
|
ElMessage.error("取消预约失败，请联系管理员"); |
||||
|
} |
||||
|
getLive(); |
||||
|
}) |
||||
|
} |
||||
|
|
||||
</script> |
</script> |
||||
|
|
||||
<template> |
|
||||
直播 |
|
||||
</template> |
|
||||
|
|
||||
<style scoped> |
<style scoped> |
||||
|
.card-container { |
||||
|
/*居中显示*/ |
||||
|
margin-left: auto; |
||||
|
margin-right: auto; |
||||
|
/*宽度*/ |
||||
|
width: 916px; |
||||
|
font-family: Arial, sans-serif; |
||||
|
padding: 0; |
||||
|
flex-wrap: wrap; |
||||
|
/*超出自动换行*/ |
||||
|
background-color: #f4f4f4; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
.card { |
||||
|
background-color: #fff; |
||||
|
border-radius: 8px; |
||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); |
||||
|
margin: 10px; |
||||
|
overflow: hidden; |
||||
|
border: #666; |
||||
|
height: 190px; |
||||
|
width: 209px; |
||||
|
} |
||||
|
|
||||
|
.card .cover-image img { |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
/*图片占满整个卡片*/ |
||||
|
object-fit: cover; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
.cover-image { |
||||
|
position: relative; |
||||
|
height: 120px; |
||||
|
width: 208px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
/*即将开播图层*/ |
||||
|
.overlay { |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
text-align: center; |
||||
|
top: 30%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
color: #fff; |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
|
||||
|
/*开播时间*/ |
||||
|
.start-time { |
||||
|
position: absolute; |
||||
|
z-index: 2; |
||||
|
text-align: center; |
||||
|
top: 60%; |
||||
|
left: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
color: #ffffffaf; |
||||
|
font-size: 15px; |
||||
|
width: 120px; |
||||
|
} |
||||
|
|
||||
|
.cover-image::before { |
||||
|
content: " "; |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 209px; |
||||
|
height: 120px; |
||||
|
/*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/ |
||||
|
background-color: rgba(0, 0, 0, 0.3); |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
/*用于隐藏样式*/ |
||||
|
.cover-image.no-overlay::before { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
.card-content { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
|
||||
|
.card-title { |
||||
|
font-size: 13px; |
||||
|
font-weight: bold; |
||||
|
margin-bottom: 5px; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.card-info { |
||||
|
font-size: 14px; |
||||
|
color: #666; |
||||
|
} |
||||
|
|
||||
|
.card-button { |
||||
|
display: inline-block; |
||||
|
padding: 5px 5px; |
||||
|
background-color: #eb8b31; |
||||
|
color: #fff; |
||||
|
text-decoration: none; |
||||
|
border-radius: 20px; |
||||
|
font-size: small; |
||||
|
width: 50px; |
||||
|
text-align: center; |
||||
|
margin-left: auto; |
||||
|
} |
||||
|
|
||||
|
.card-actions { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
/* 垂直居中对齐 */ |
||||
|
justify-content: space-between; |
||||
|
/* 按钮右对齐 */ |
||||
|
} |
||||
|
|
||||
|
.user-avatar { |
||||
|
border-radius: 50%; |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
} |
||||
|
|
||||
|
.card-info { |
||||
|
margin-left: 5px; |
||||
|
/* 昵称与头像之间的间距 */ |
||||
|
margin-top: 0; |
||||
|
/* 移除顶部外边距 */ |
||||
|
/*超长以后将内容省略显示*/ |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
text-overflow: ellipsis; |
||||
|
|
||||
|
width: 90px; |
||||
|
font-size: 12px; |
||||
|
} |
||||
</style> |
</style> |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue