baiyuApp/pages_enter/drama.vue

<template>
	<view class="drama-page">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
		
		<!-- 顶部导航栏 -->
		<view class="nav-bar">
			<view class="nav-back" @click="handleBack">
				<image class="w64 h64" src="@/static/images/enter/back_white_icon24.png"></image>
			</view>
			<view class="nav-title">短剧</view>
			<view class="nav-refresh">
				<image class="w48 h48" src="@/static/images/enter/share_icom24.png"></image>
			</view>
		</view>
		
		<!-- 页面内容 -->
		<scroll-view class="page-content" scroll-y>
			<!-- 热门短剧 -->
			<view class="section">
				<view class="section-header">
				<view class="section-title">热门短剧</view>
				<view class="clear-history" @click="handleRefresh">
					<image class="w32 h32" src="@/static/images/enter/refresh_icon16.png"></image>
					<text class="clear-text">换一换</text>
				</view>
				</view>
				<scroll-view class="drama-scroll" scroll-x>
					<view class="drama-list">
						<view 
							class="drama-card large" 
							v-for="(drama, index) in popularList" 
							:key="index"
							@click="handleDramaClick(drama)"
						>
							<view class="card-image-wrapper">
								<image class="card-image" :src="drama.image" mode="aspectFill"></image>
								<view class="card-badge" :class="drama.badgeType">
									{{ drama.badge }}
								</view>
								<view class="card-overlay">
									<view class="overlay-title">{{ drama.title }}</view>
									<view class="overlay-followers" v-if="drama.followers">
										{{ drama.followers }}人在追
									</view>
								</view>
							</view>
							<view class="card-info">
								<view class="info-title">{{ drama.title }}</view>
								<view class="info-episode">{{ drama.episode }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 历史观看 -->
			<view class="section">
				<view class="section-header">
					<view class="section-title">历史观看</view>
					<view class="clear-history" @click="handleClearHistory">
						<image class="w32 h32" src="@/static/images/enter/delete_icon16.png"></image>
						<text class="clear-text">清空历史</text>
					</view>
				</view>
				<scroll-view class="drama-scroll" scroll-x>
					<view class="drama-list">
						<view 
							class="drama-card small" 
							v-for="(item, index) in historyList" 
							:key="index"
							@click="handleHistoryClick(item)"
						>
							<view class="card-image-wrapper">
								<image class="card-image" :src="item.image" mode="aspectFill"></image>
							</view>
							<view class="card-info">
								<view class="info-title">{{ item.title }}</view>
								<view class="info-episode">{{ item.episode }}</view>
								<view class="info-progress">
									<u-icon name="phone" size="24" color="#999999"></u-icon>
									<text class="progress-text">观看至{{ item.progress }}%</text>
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 精选 -->
			<view class="section">
				<view class="section-header">
				<view class="section-title">精选</view>
				</view>
				<scroll-view class="drama-scroll" scroll-x>
					<view class="drama-list">
						<view 
							class="drama-card large" 
							v-for="(drama, index) in featuredList" 
							:key="index"
							@click="handleDramaClick(drama)"
						>
							<view class="card-image-wrapper">
								<image class="card-image" :src="drama.image" mode="aspectFill"></image>
								<view class="card-cast" v-if="drama.cast">
									{{ drama.cast }}
								</view>
								<view class="card-overlay">
									<view class="overlay-title">{{ drama.title }}</view>
									<view class="overlay-followers" v-if="drama.followers">
										{{ drama.followers }}人在追
									</view>
								</view>
							</view>
							<view class="card-info">
								<view class="info-title">{{ drama.title }}</view>
								<view class="info-episode">{{ drama.episode }}</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
			
			<!-- 底部安全区域 -->
			<view class="safe-area-bottom" :style="{ height: safeAreaBottom + 'px' }"></view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 0,
			safeAreaBottom: 0,
			popularList: [
				{
					id: 1,
					title: '如果海葵会恋爱',
					episode: '完结·全50集',
					image: '/static/image/default/drama1.jpg',
					badge: '新剧',
					badgeType: 'badge-new',
					followers: '41.9万'
				},
				{
					id: 2,
					title: '穿成恶婆婆后 我成了全家顶梁柱',
					episode: '完结·全50集',
					image: '/static/image/default/drama2.jpg',
					badge: '爆剧',
					badgeType: 'badge-hot',
					followers: '41.9万'
				},
				{
					id: 3,
					title: '朕的喵妃是戏精',
					episode: '完结·全50集',
					image: '/static/image/default/drama3.jpg',
					badge: '新剧',
					badgeType: 'badge-new',
					followers: '41.9万'
				}
			],
			historyList: [
				{
					id: 1,
					title: '海棠瘦尽春未晚',
					episode: '第2集',
					image: '/static/image/default/drama1.jpg',
					progress: 3
				},
				{
					id: 2,
					title: '穿成恶婆婆',
					episode: '第2集',
					image: '/static/image/default/drama2.jpg',
					progress: 3
				}
			],
			featuredList: [
				{
					id: 1,
					title: '海棠瘦尽春未晚',
					episode: '完结·全50集',
					image: '/static/image/default/drama4.jpg',
					cast: '宋宇欣 * 苏洛卿, 洪乔 * 苏洛卿, 可谦 饰 装时宴'
				},
				{
					id: 2,
					title: '如果海葵会恋爱',
					episode: '完结·全50集',
					image: '/static/image/default/drama1.jpg',
					followers: '41.9万'
				}
			]
		}
	},
	onLoad() {
		this.getSystemInfo();
	},
	methods: {
		getSystemInfo() {
			const systemInfo = uni.getSystemInfoSync();
			this.statusBarHeight = systemInfo.statusBarHeight || 0;
			if (systemInfo.safeArea) {
				this.safeAreaBottom = systemInfo.screenHeight - systemInfo.safeArea.bottom;
			}
		},
		handleBack() {
			uni.navigateBack();
		},
		handleRefresh() {
			uni.showToast({
				title: '换一换',
				icon: 'none'
			});
		},
		handleDramaClick(drama) {
			uni.showToast({
				title: `打开${drama.title}`,
				icon: 'none'
			});
		},
		handleHistoryClick(item) {
			uni.showToast({
				title: `继续观看${item.title}`,
				icon: 'none'
			});
		},
		handleClearHistory() {
			uni.showModal({
				title: '提示',
				content: '确定要清空历史记录吗？',
				success: (res) => {
					if (res.confirm) {
						this.historyList = [];
						uni.showToast({
							title: '已清空',
							icon: 'success'
						});
					}
				}
			});
		}
	}
}
</script>

<style lang="scss" scoped>
.drama-page {
	width: 100%;
	min-height: 100vh;
	background-color: #ffffff;
	display: flex;
	flex-direction: column;
}

.status-bar {
	width: 100%;
	background-color: #ffffff;
}

.nav-bar {
	width: 100%;
	height: 88rpx;
	background-color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	
	.nav-back {
		width: 60rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.nav-title {
		font-size: 36rpx;
		font-weight: 500;
		color: #333333;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}
	
	.nav-refresh {
		display: flex;
		align-items: center;
		gap: 8rpx;
		
		.refresh-text {
			font-size: 28rpx;
			color: #333333;
		}
	}
}

.page-content {
	flex: 1;
	width: 100%;
}

.section {
	width: 100%;
	margin-bottom: 40rpx;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	margin-bottom: 20rpx;
}

.section-title {
	font-size: 36rpx;
	font-weight: 500;
	color: #333333;
	//padding: 0 30rpx;
	margin-bottom: 20rpx;
}

.clear-history {
	display: flex;
	align-items: center;
	gap: 8rpx;
	
	.clear-text {
		font-size: 28rpx;
		color: #999999;
	}
}

.drama-scroll {
	width: 100%;
	white-space: nowrap;
}

.drama-list {
	display: flex;
	padding: 0 30rpx;
	gap: 20rpx;
}

.drama-card {
	flex-shrink: 0;
	background-color: #ffffff;
	border-radius: 12rpx;
	overflow: hidden;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	
	&.large {
		width: 480rpx;
	}
	
	&.small {
		width: 320rpx;
	}
}

.card-image-wrapper {
	width: 100%;
	position: relative;
	
	.drama-card.large & {
		height: 640rpx;
	}
	
	.drama-card.small & {
		height: 400rpx;
	}
}

.card-image {
	width: 100%;
	height: 100%;
	background-color: #f0f0f0;
}

.card-badge {
	position: absolute;
	top: 16rpx;
	right: 16rpx;
	padding: 6rpx 16rpx;
	border-radius: 20rpx;
	font-size: 22rpx;
	font-weight: 500;
	color: #ffffff;
	z-index: 2;
	
	&.badge-new {
		background-color: #27AE60;
	}
	
	&.badge-hot {
		background-color: #FF4757;
	}
}

.card-cast {
	position: absolute;
	top: 16rpx;
	left: 16rpx;
	background-color: rgba(0, 0, 0, 0.5);
	color: #ffffff;
	padding: 8rpx 12rpx;
	border-radius: 8rpx;
	font-size: 20rpx;
	z-index: 2;
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 24rpx;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.overlay-title {
	font-size: 38rpx;
	font-weight: bold;
	color: #ffffff;
	margin-bottom: 8rpx;
	text-shadow: 2rpx 2rpx 4rpx rgba(0, 0, 0, 0.5);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 1.3;
}

.overlay-followers {
	font-size: 24rpx;
	color: #ffffff;
	text-shadow: 1rpx 1rpx 2rpx rgba(0, 0, 0, 0.5);
}

.card-info {
	padding: 20rpx;
}

.info-title {
	font-size: 28rpx;
	font-weight: 600;
	color: #333333;
	margin-bottom: 8rpx;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.info-episode {
	font-size: 24rpx;
	color: #999999;
	margin-bottom: 8rpx;
}

.info-progress {
	display: flex;
	align-items: center;
	gap: 8rpx;
	
	.progress-text {
		font-size: 22rpx;
		color: #999999;
	}
}

.safe-area-bottom {
	width: 100%;
	height: 40rpx;
}
</style>