rtliveCompany/pages_task/onlineLecture.vue

<template>
	<view class="container">
		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input-wrapper">
				<text class="search-icon">🔍</text>
				<input 
					class="search-input" 
					v-model="keyword" 
					placeholder="请输入关键字"
					@confirm="doSearch"
				/>
			</view>
		</view>
		
		<!-- 标签栏 -->
		<view class="tabs-bar">
			<view class="tab-item" 
				:class="{ active: currentTab === 'incomplete' }" 
				@click="switchTab('incomplete')">
				未完成
			</view>
			<view class="tab-item" 
				:class="{ active: currentTab === 'completed' }" 
				@click="switchTab('completed')">
				已完成
			</view>
		</view>
		
		<!-- 讲座列表 -->
		<scroll-view class="content" scroll-y>
			<view class="lecture-card" v-for="(item, index) in lectureList" :key="index">
				<view class="card-thumbnail">
					<image class="thumbnail-img" :src="item.thumbnail" mode="aspectFill"></image>
					<view class="thumbnail-status" v-if="item.status === 'inProgress'">
						<text class="status-text">进行中</text>
					</view>
					<view class="thumbnail-date" v-else-if="item.scheduledTime">
						<text class="date-icon">🕐</text>
						<text class="date-text">{{ item.scheduledTime }}</text>
					</view>
				</view>
				
				<view class="card-content">
					<view class="card-title">{{ item.title }}</view>
					<view class="card-tags">
						<view class="tag-item">{{ item.category }}</view>
						<view class="tag-item">{{ item.type }}</view>
					</view>
					<view class="card-points">{{ item.points }} 积分</view>
					<view class="card-views" v-if="currentTab === 'completed'">
						<text class="eye-icon">👁</text>
						<text>{{ item.viewCount }}</text>
					</view>
					<view class="card-action">
						<view class="action-btn" 
							v-if="item.status === 'inProgress' || item.status === 'scheduled'"
							@click.stop="openChannelPicker(item)">
							{{ item.status === 'inProgress' ? '继续开播' : '去开播' }}
						</view>
					</view>
				</view>
			</view>
			
			<view class="no-more">没有更多了~</view>
		</scroll-view>
		
		<!-- 选择开播渠道弹窗 -->
		<view class="channel-picker-popup" v-if="showChannelPicker" @click="showChannelPicker = false">
			<view class="channel-picker-content" @click.stop>
				<view class="picker-header">
					<view class="picker-title">选择开播渠道</view>
					<view class="picker-close" @click="showChannelPicker = false">×</view>
				</view>
				
				<!-- 电脑浏览器开播 -->
				<view class="channel-option">
					<view class="option-icon">💻</view>
					<view class="option-content">
						<view class="option-title">电脑浏览器开播</view>
						<view class="option-url-wrapper">
							<text class="option-url">{{ broadcastUrl }}</text>
							<view class="copy-btn" @click="copyUrl">复制链接</view>
						</view>
						<view class="option-tips">复制至谷歌浏览器,登录账号即可开播</view>
					</view>
				</view>
				
				<!-- 微信小程序开播 -->
				<view class="channel-option">
					<view class="option-icon wechat">💬</view>
					<view class="option-content">
						<view class="option-title">微信小程序开播</view>
						<view class="option-action">
							<view class="enter-btn" @click="enterMiniProgram">立即进入</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { getOnlineLectureList, getBroadcastUrl, enterMiniProgram } from '@/api-js/onlineLecture'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			keyword: '',
			currentTab: 'incomplete',
			showChannelPicker: false,
			broadcastUrl: 'https://www.test.coe.huahua...',
			currentLecture: null,
			lectureList: []
		}
	},
	onLoad() {
		this.loadData()
	},
	onReachBottom() {
		this.loadMore()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		doSearch() {
			this.loadData()
		},
		switchTab(tab) {
			this.currentTab = tab
			this.loadData()
		},
		async openChannelPicker(item) {
			this.currentLecture = item
			// try {
			// 	const res = await getBroadcastUrl({ lectureId: item.id })
			// 	if (res.code === 200 && res.data) {
			// 		this.broadcastUrl = res.data.url
			// 	}
			// } catch (e) {
			// 	console.error('获取开播链接失败', e)
			// }
			this.showChannelPicker = true
		},
		copyUrl() {
			uni.setClipboardData({
				data: this.broadcastUrl,
				success: () => {
					uni.showToast({
						icon: 'success',
						title: '链接已复制'
					})
				}
			})
		},
		async enterMiniProgram() {
			try {
				const res = await enterMiniProgram({ lectureId: this.currentLecture.id })
				if (res.code === 200 && res.data) {
					// 跳转到微信小程序
					uni.navigateToMiniProgram({
						appId: res.data.appId,
						path: res.data.path,
						success: () => {
							this.showChannelPicker = false
						}
					})
				}
			} catch (e) {
				uni.showToast({
					icon: 'none',
					title: '进入失败'
				})
			}
		},
		async loadData() {
			try {
				uni.showLoading({ title: '加载中...' })
				const res = await getOnlineLectureList({
					keyword: this.keyword,
					status: this.currentTab,
					page: 1,
					pageSize: 20
				})
				uni.hideLoading()
				if (res.code === 200 && res.data) {
					this.lectureList = res.data.list || this.getDefaultData()
				} else {
					this.lectureList = this.getDefaultData()
				}
			} catch (e) {
				uni.hideLoading()
				console.error('加载数据失败', e)
				this.lectureList = this.getDefaultData()
			}
		},
		async loadMore() {
			// 加载更多数据
		},
		getDefaultData() {
			if (this.currentTab === 'incomplete') {
				return [
					{
						id: 1,
						title: '康复医学概论',
						thumbnail: '/static/image/lecture1.png',
						category: '学术讲座',
						type: '单人讲座',
						points: '32.50',
						status: 'inProgress',
						scheduledTime: ''
					},
					{
						id: 2,
						title: '中医养生至冬病夏天治...',
						thumbnail: '/static/image/lecture2.png',
						category: '学术讲座',
						type: '单人讲座',
						points: '32.50',
						status: 'scheduled',
						scheduledTime: '05-12 12:00'
					},
					{
						id: 3,
						title: '康复医学概论',
						thumbnail: '/static/image/lecture3.png',
						category: '学术讲座',
						type: '单人讲座',
						points: '32.50',
						status: 'scheduled',
						scheduledTime: '05-24 16:00'
					}
				]
			} else {
				return [
					{
						id: 4,
						title: '康复医学概论',
						thumbnail: '/static/image/lecture1.png',
						category: '学术讲座',
						type: '单人讲座',
						points: '32.50',
						viewCount: '123',
						scheduledTime: '05-12 12:00'
					},
					{
						id: 5,
						title: '康复医学概论',
						thumbnail: '/static/image/lecture2.png',
						category: '学术讲座',
						type: '单人讲座',
						points: '32.50',
						viewCount: '123',
						scheduledTime: '05-12 12:00'
					},
					{
						id: 6,
						title: '康复医学概论',
						thumbnail: '/static/image/lecture3.png',
						category: '学术讲座',
						type: '单人讲座',
						points: '32.50',
						viewCount: '123',
						scheduledTime: '05-12 12:00'
					}
				]
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
}

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

.header {
	position: relative;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.back-btn {
		position: absolute;
		left: 24rpx;
		width: 40rpx;
		height: 40rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-right {
		position: absolute;
		right: 24rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.search-bar {
	padding: 24rpx;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.search-input-wrapper {
		display: flex;
		align-items: center;
		height: 72rpx;
		background: #f5f5f5;
		border-radius: 36rpx;
		padding: 0 24rpx;
		
		.search-icon {
			font-size: 32rpx;
			margin-right: 16rpx;
			color: #999;
		}
		
		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
		}
	}
}

.tabs-bar {
	display: flex;
	background: #fff;
	border-bottom: 1rpx solid #f0f0f0;
	
	.tab-item {
		flex: 1;
		height: 88rpx;
		line-height: 88rpx;
		text-align: center;
		font-size: 28rpx;
		color: #666;
		position: relative;
		
		&.active {
			color: #388BFF;
			font-weight: bold;
			
			&::after {
				content: '';
				position: absolute;
				bottom: 0;
				left: 0;
				right: 0;
				height: 4rpx;
				background: #388BFF;
			}
		}
	}
}

.content {
	flex: 1;
	padding: 24rpx;
}

.lecture-card {
	display: flex;
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
	margin-bottom: 24rpx;
	
	.card-thumbnail {
		position: relative;
		width: 240rpx;
		height: 180rpx;
		border-radius: 12rpx;
		overflow: hidden;
		margin-right: 24rpx;
		flex-shrink: 0;
		
		.thumbnail-img {
			width: 100%;
			height: 100%;
		}
		
		.thumbnail-status {
			position: absolute;
			top: 8rpx;
			left: 8rpx;
			padding: 4rpx 12rpx;
			background: #FF9800;
			border-radius: 4rpx;
			
			.status-text {
				font-size: 20rpx;
				color: #fff;
			}
		}
		
		.thumbnail-date {
			position: absolute;
			top: 8rpx;
			left: 8rpx;
			display: flex;
			align-items: center;
			gap: 4rpx;
			padding: 4rpx 12rpx;
			background: rgba(0, 0, 0, 0.5);
			border-radius: 4rpx;
			
			.date-icon {
				font-size: 20rpx;
			}
			
			.date-text {
				font-size: 20rpx;
				color: #fff;
			}
		}
	}
	
	.card-content {
		flex: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		.card-title {
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			margin-bottom: 12rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		
		.card-tags {
			display: flex;
			align-items: center;
			gap: 12rpx;
			margin-bottom: 12rpx;
			
			.tag-item {
				padding: 4rpx 12rpx;
				background: #f5f5f5;
				border-radius: 4rpx;
				font-size: 22rpx;
				color: #666;
			}
		}
		
		.card-points {
			font-size: 26rpx;
			color: #333;
			margin-bottom: 12rpx;
		}
		
		.card-views {
			display: flex;
			align-items: center;
			gap: 4rpx;
			font-size: 24rpx;
			color: #999;
			margin-bottom: 12rpx;
			
			.eye-icon {
				font-size: 24rpx;
			}
		}
		
		.card-action {
			display: flex;
			justify-content: flex-end;
			
			.action-btn {
				padding: 12rpx 32rpx;
				background: #388BFF;
				border-radius: 8rpx;
				font-size: 26rpx;
				color: #fff;
			}
		}
	}
}

.no-more {
	text-align: center;
	padding: 48rpx 0;
	font-size: 24rpx;
	color: #999;
}

.channel-picker-popup {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.channel-picker-content {
	width: 90%;
	max-width: 600rpx;
	background: #fff;
	border-radius: 24rpx;
	padding: 24rpx;
	
	.picker-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 32rpx;
		
		.picker-title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333;
		}
		
		.picker-close {
			width: 48rpx;
			height: 48rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 40rpx;
			color: #999;
		}
	}
	
	.channel-option {
		display: flex;
		align-items: flex-start;
		margin-bottom: 32rpx;
		
		&:last-child {
			margin-bottom: 0;
		}
		
		.option-icon {
			width: 64rpx;
			height: 64rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 48rpx;
			margin-right: 24rpx;
			flex-shrink: 0;
			
			&.wechat {
				background: #07C160;
				border-radius: 8rpx;
			}
		}
		
		.option-content {
			flex: 1;
			
			.option-title {
				font-size: 30rpx;
				font-weight: bold;
				color: #333;
				margin-bottom: 16rpx;
			}
			
			.option-url-wrapper {
				display: flex;
				align-items: center;
				gap: 16rpx;
				margin-bottom: 12rpx;
				
				.option-url {
					flex: 1;
					padding: 12rpx 16rpx;
					background: #f5f5f5;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #666;
					overflow: hidden;
					text-overflow: ellipsis;
					white-space: nowrap;
				}
				
				.copy-btn {
					padding: 12rpx 24rpx;
					background: #388BFF;
					border-radius: 8rpx;
					font-size: 24rpx;
					color: #fff;
					white-space: nowrap;
				}
			}
			
			.option-tips {
				font-size: 22rpx;
				color: #999;
			}
			
			.option-action {
				display: flex;
				justify-content: flex-end;
				
				.enter-btn {
					padding: 12rpx 32rpx;
					background: #388BFF;
					border-radius: 8rpx;
					font-size: 28rpx;
					color: #fff;
				}
			}
		}
	}
}
</style>