practice_uniapp/pages/live/live.vue

<template>
	<!-- 卡片 -->
	<view class="card-container">
		<view v-for="(live, index) in liveList" :key="index" class="card">
			<view class="cover-image" :class="{ 'no-overlay': live.status != 1 }">
				<image class="img" :src="live.cover" mode="aspectFill" alt="节目"></image>
				<view v-if="live.status == 1" class="status-time" style="
						position: absolute;
						bottom: 0;
						left: 0;
						background-color: gray;
						color: white;
						padding: 2px 5px;
						border-radius: 2px;
						font-size: 12px;">
					{{getDateDay(live.startTime)}} {{ live.startTime.slice(11, 16)}}开播
				</view>
			</view>
			<view class="card-content">
				<text class="card-title">{{ live.liveName }}</text>
				<view class="card-actions">
					<!-- 用户头像 -->
					<!-- <image :src="live.user.avatar" mode="aspectFill" alt="用户头像" class="user-avatar"></image> -->
					<!-- 用户昵称，与头像同行显示 -->
					<text class="card-info">{{reservationNum}}人已预约</text>
					<!-- 预约按钮,如果预约过了，按钮变灰色，文字变灰色，按钮文字为“已预约” -->
					<a v-if="live.reservation == 0" class="card-button"
						@click="booking(live.id, 90000001)">预约</a>
					<a v-else @click="cancelBooking(live.id, 90000001)" class="card-button" style="background-color: #ccc;">已预约</a>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import service from '../../api';
	import liveApi from '../../api/LiveApi';
	/*
	模拟后端数据
	*/
	const liveList = ref({});
	//预约人数
	const reservationNum = 100;
	//获取直播列表
	function getLive() {
		liveApi.getLiveList()
			.then(resp => {
				if (resp.code == 0) {
					liveList.value = resp.data.liveList;
					console.log(liveList.value);
				} else {
					alert("获取直播列表失败，请联系管理员");
				}
			})
	}
	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 => {
				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>

<style scoped>
	.card-container {
		width: 100%;
		/* 占满整个屏幕宽度 */
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		/* 允许卡片换行 */
		justify-content: space-between;
		/* 卡片之间的间距均匀分布 */
		background-color: #f4f4f4;
	}

	.card {
		background-color: #fff;
		border-radius: 8px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
		overflow: hidden;
		border: #666;
		width: calc(50% - 10px);
		/* 每个卡片宽度为50%减去间隔 */
		margin: 5px;
		/* 卡片上下左右的间隔 */
		transform: scale(1);
		/* 重置缩放，如果不需要可以删除这行 */
		transform-origin: center;
	}

	.cover-image {
		position: relative;
		width: 100%;
		height: 100px;
		border-radius: 8px;
	}

	.cover-image::before {
		content: " ";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100px;
		/*最后一个参数是半透明度，可以透过调整0-1的数值，调整到满意的透明度*/
		background-color: rgba(0, 0, 0, 0.3);
		border-radius: 8px;
	}

	.card .img {
		width: 100%;
		height: 100%;
		/*图片占满整个卡片*/
		object-fit: cover;
		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: 22px;
		height: 20px;
	}

	.card-info {
		margin-left: 0px;
		/* 昵称与头像之间的间距 */
		margin-top: 0;
		/* 移除顶部外边距 */
		/*超长以后将内容省略显示*/
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;

		width: 90px;
		font-size: 10px;
	}
</style>