<route lang="json5" type="add">
{
style: {
navigationStyle: 'custom',
navigationBarTitleText: '听音练习',
animationType: 'slide-in-bottom',
animationDuration: 200,
},
}
</route>
<template>
<view class="page-container">
<wd-navbar fixed placeholder :bordered="true" safeAreaInsetTop left-text="" left-arrow>
<template #title>听音练习</template>
</wd-navbar>
<!-- 视频播放器 -->
<video
style="width: 100vw; left: 50%; transform: translateX(-50%); flex: 1"
id="videoContainer"
:src="selectSubVideo.mp4"
:controls="true"
@canplay="handleVideoCanPlay"
@timeupdate="handleVideoTimeUpdate"
@ended="handleVideoEnded"
@error="handleVideoError"
@progress="handleVideoProgress"
@loadedmetadata="handleLoadedMetadata"
@click="togglePlay"
:autoplay="true"
:loop="false"
:show-play-btn="true"
:show-fullscreen-btn="true"
:http-cache="true"
></video>
</view>
</template>
<script lang="ts" setup>
import { storeToRefs } from 'pinia'
import { toast } from '@/utils/toast'
import { url_Request } from '@/utils/http'
import { useUserStore } from '@/store/user'
import { useBookStore } from '@/store/book'
const userStore = useUserStore()
const bookStore = useBookStore()
const { schoolId } = storeToRefs(userStore)
const { selectSubVideo } = storeToRefs(bookStore)
// 加载状态控制
const isLoaded = ref(false)
const progress = ref(0)
const audioReady = ref(false)
const loadAudioContext = uni.createInnerAudioContext()
// 页面数据
const currentIndex = ref(0)
const url = ref('')
// 音频控制
const audioContext = ref(null)
const isPlaying = ref(false)
const index = ref(0)
// 页面初始化
onLoad(async (e) => {
console.log(selectSubVideo.value)
})
// 页面卸载清理
onUnload(() => {
if (loadAudioContext) {
loadAudioContext.stop()
loadAudioContext.destroy()
}
isLoaded.value = false
progress.value = 0
currentIndex.value = 0
isPlaying.value = false
audioReady.value = false
})
defineOptions({ name: 'add_book_infor' })
</script>
<style lang="scss" scoped>
.loading-container {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 9999;
}
.progress-box {
width: 600rpx;
text-align: center;
}
.progress-text {
display: block;
margin-bottom: 20rpx;
font-size: 32rpx;
color: #333;
}
.page-container {
padding: 0;
box-sizing: border-box;
height: 100vh;
background-color: black;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.swiper-item {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.item-container {
position: relative;
width: 100%;
height: 100%;
}
.item-image {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-width: 100%;
max-height: 80%;
}
// 新增样式
.item-text-container {
position: absolute;
bottom: 60rpx;
left: 50%;
transform: translateX(-50%);
display: flex;
align-items: center;
gap: 20rpx; // 文字和勾选框之间的间距
}
.item-text {
font-size: 30rpx;
color: #fff;
text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);
}
.checkbox {
// 增加点击区域
padding: 10rpx;
// 防止点击事件冒泡影响轮播
pointer-events: auto;
}
</style>