uniProject/pages/chanpinneirong/index.vue

<template>
	<view class="container">
		<view class="sticky-title">
			学习
		</view>
		<view>
			<view class="arrow-nav">
				<view class="arrow" :class="{ 'disabled': currentIndex == 0 }" @click="prev">
					左箭头
				</view>

				<view class="arrow" :class="{ 'disabled': currentIndex == list.length - 1 }" @click="next">
					右箭头
				</view>
			</view>
			<!-- 显示内容 -->
			<view class="current-content">
				<text>{{ danyuanInfo.danyuanName }}</text>
				<text>{{ danyuanInfo.danyuanIntro }}</text>
			
			</view>
		</view>
	
		<scroll-view scroll-y class="scroll-view" :scroll-top="scrollTop" @scroll="onScroll">
			<view>
				<progress :percent="20" class="exam-progress-box" stroke-width="10" backgroundColor="#3c7dfd"
					activeColor="#ffd11c" />
				<text class="course-name" @click="handlePlay(subjectDetail,'jixu')">继续学习</text>
				<view>单元大纲</view>
				<view>单元目录</view>
			</view>
			<view v-for="section in dagangList" :key="section.jieId" class="section-item">
				<view class="status" :class="section.wanchengFlag === 1 ? 'completed' : 'uncompleted'">
					{{ section.wanchengFlag === 1 ? '已完成' : '未开始' }}
				</view>
				<view class="section-left">
					<image class="section-cover" :src="section.cover" mode="aspectFill"></image>
					<view class="section-info">
						<text class="section-name">{{ section.jieName }}</text>
						<text class="section-desc">{{ section.jieIntro }}</text>
					</view>
				</view>
				<view class="section-right">
					<text class="section-number">第{{ section.number }}节</text>
					<text @click="handlePlay(section,'play')">播放按钮</text>
				</view>
			</view>
			<!-- 底部占位 -->
			<view style="height: 100px; text-align: center;">学习下一单元</view>
		</scroll-view>

		<danyuanInfoVue ref="dyRef" v-if="isShow" @close="isShow= false"></danyuanInfoVue>

		<CustomTabBar :currentTabNumber="1"></CustomTabBar>
	</view>
</template>

<script>
	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	import {
		shuxueChanpinDanyuanInfo
	} from "@/api/chanpinneirong.js"
	import danyuanInfoVue from '@/pages/xinshuxue/components/danyuanInfo.vue';

	export default {
		data() {
			return {
				dagangList: [],
				currentUnitName: "",
				isShow: true,
				currentIndex: 0,
				danyuanInfo:{}
			
			}
		},
		components: {
			CustomTabBar,
			danyuanInfoVue,
		},
		onShow() {
			console.log('学习页面显示，尝试恢复滚动位置')
		},
		onHide() {

			console.log('学习页面隐藏，保存滚动位置')
		},

		onLoad() {

			this.loadDataFromApi()
		},

		methods: {

			prev() {
				if (this.currentIndex > 0) {
					this.currentIndex--
				}
			},
			next() {
				if (this.currentIndex < this.list.length - 1) {
					this.currentIndex++
				}
			},

			handlePlay(da, code) {
				let jieId = null;
				if (code == 'jixu') {
					jieId = da.curJieId;
					uni.navigateTo({
						url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
					})
				} else {
					jieId = da.jieId;
					if (da.type == 1) {
						uni.navigateTo({
							url: `/pages/xinshuxue/lookShipin?jieId=${jieId}`
						})
					} else {
						uni.navigateTo({
							url: `/pages/xinshuxue/unitTest?jieId=${jieId}`
						})
					}
				}
			},
			handleClickDanyuan(item) {
				console.log('item', item)
				this.isShow = true;
				setTimeout(() => {
					this.$refs.dyRef.handleShow(item.danyuanId)
				}, 100)
			},

			loadDataFromApi() {
				const req = {
					banbenId: 7,
					danyuanId:2
				}
				shuxueChanpinDanyuanInfo(req).then(res => {
					this.danyuanInfo = res.data
					this.dagangList = res.data.dagangList || []
					// 初始化当前单元
					// if (this.danyuanList.length > 0) {
					// 	this.currentUnitName = this.danyuanList[0].danyuanName
					// }
				})
			},






			// 滚动事件处理
			onScroll(e) {
				const scrollTop = e.detail.scrollTop;
				// 更新滚动位置
				this.scrollTop = scrollTop;
			}
		}
	}
</script>

<style scoped>
	.container {
		height: 100vh;
		background-color: #f5f5f5;
	}

	/* 吸顶标题 */
	.sticky-title {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 100;
		background-color: #1890ff;
		color: white;
		padding: 12px 16px;
		font-size: 16px;
		font-weight: bold;
		text-align: center;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	}

	/* 返回顶部按钮 */
	.back-top {
		position: fixed;
		right: 16px;
		bottom: 100px;
		z-index: 99;
		width: 44px;
		height: 44px;
		background-color: #1890ff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		font-size: 20px;
		box-shadow: 0 2px 8px rgba(24, 144, 255, 0.4);
	}

	.back-top:active {
		background-color: #096dd9;
		transform: scale(0.95);
	}

	/* 滚动区域 */
	.scroll-view {
		height: 100%;
		padding-top: 50px;
		/* 给吸顶标题留出空间 */
		box-sizing: border-box;
	}

	/* 单元样式 */
	.unit-item {
		margin: 12px;
		background: white;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	}

	.unit-title {
		padding: 16px;
		background: linear-gradient(135deg, #1890ff, #36cfc9);
		color: white;
	}

	.unit-name {
		font-size: 18px;
		font-weight: bold;
		display: block;
		margin-bottom: 4px;
	}

	.unit-intro {
		font-size: 14px;
		opacity: 0.9;
	}

	/* 节样式 */
	.section-item {
		padding: 12px 16px;
		border-bottom: 1px solid #f0f0f0;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.section-item:last-child {
		border-bottom: none;
	}

	.section-left {
		display: flex;
		align-items: center;
		flex: 1;
	}

	.section-cover {
		width: 60px;
		height: 60px;
		border-radius: 6px;
		margin-right: 12px;
	}

	.section-info {
		flex: 1;
	}

	.section-name {
		font-size: 16px;
		color: #333;
		display: block;
		margin-bottom: 4px;
		font-weight: 500;
	}

	.section-desc {
		font-size: 13px;
		color: #666;
	}

	.section-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		margin-left: 12px;
	}

	.section-number {
		font-size: 12px;
		color: #999;
		margin-bottom: 4px;
	}

	.status {
		font-size: 12px;
		padding: 2px 8px;
		border-radius: 10px;
	}

	.status.completed {
		background-color: #f6ffed;
		color: #52c41a;
		border: 1px solid #b7eb8f;
	}

	.status.uncompleted {
		background-color: #fff7e6;
		color: #fa8c16;
		border: 1px solid #ffd591;
	}
</style>