Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
B
bookplayer
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
bookplayer
Commits
7d84f189
Commit
7d84f189
authored
Mar 30, 2025
by
15011343103
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat
parent
28568645
Changes
6
Expand all
Show whitespace changes
Inline
Side-by-side
Showing
6 changed files
with
531 additions
and
111 deletions
+531
-111
index.html
form/index.html
+2
-4
index.js
form/index.js
+63
-33
crypto-js.min.js
play/crypto-js.min.js
+1
-0
index.css
play/index.css
+197
-2
index.html
play/index.html
+44
-4
index.js
play/index.js
+224
-68
No files found.
form/index.html
View file @
7d84f189
...
@@ -13,12 +13,10 @@
...
@@ -13,12 +13,10 @@
<link
href=
"//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/theme-chalk/index.css"
rel=
"stylesheet"
>
<link
href=
"//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/theme-chalk/index.css"
rel=
"stylesheet"
>
<!-- 引入组件库 -->
<!-- 引入组件库 -->
<script
src=
"//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/index.js"
></script>
<script
src=
"//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/index.js"
></script>
<script
src=
"./crypto-js.min.js"
></script>
</head>
</head>
<body>
<body>
<div
class=
"edit-data"
>
<div
id=
"app"
>
<!-- 简单的例子,一个输入框+一个按钮,保存输入框的信息 -->
test:
<input
type=
"text"
name=
"test"
/>
<input
id=
"save"
type=
"button"
value=
"保存"
>
</div>
</div>
</body>
</body>
<script
src=
"./index.js"
></script>
<script
src=
"./index.js"
></script>
...
...
form/index.js
View file @
7d84f189
/**
* 通用接口请求方法
* @param {string} url - 接口地址
* @param {string} method - 请求方法 ('GET' 或 'POST')
* @param {object} data - 请求参数
* @param {function} successCallback - 成功回调函数
* @param {function} errorCallback - 错误回调函数
*/
function
request
(
url
,
method
=
'
GET
'
,
data
=
{},
successCallback
,
errorCallback
)
{
// 构建请求配置
const
config
=
{
url
:
url
,
type
:
method
.
toUpperCase
(),
headers
:
{
'
Authorization
'
:
auth_key
,
'
Content-Type
'
:
'
application/json
'
},
success
:
function
(
response
)
{
if
(
successCallback
&&
typeof
successCallback
===
'
function
'
)
{
successCallback
(
response
);
}
},
error
:
function
(
xhr
,
status
,
error
)
{
if
(
errorCallback
&&
typeof
errorCallback
===
'
function
'
)
{
errorCallback
(
error
);
}
else
{
console
.
error
(
'
Request failed:
'
,
error
);
}
}
};
// 根据请求方法处理数据
if
(
method
.
toUpperCase
()
===
'
GET
'
)
{
config
.
data
=
data
;
// GET 请求参数会自动转换为查询字符串
}
else
if
(
method
.
toUpperCase
()
===
'
POST
'
)
{
config
.
data
=
JSON
.
stringify
(
data
);
// POST 请求体转换为 JSON 字符串
}
/*
// 发送请求
$
.
ajax
(
config
);
}
window.courseware.getData(callback,key); //用于获取数据
const
signObj
=
{
window.courseware.setData(data,callback,key); //用于存储数据
appKey
:
"
9a7efe3f90
"
,
var uploadUrl = window.courseware.uploadUrl(); //上传文件的路径
appSecret
:
"
bcbd5d350b3e568a29963d1b1d16ba
"
,
var uploadData = window.courseware.uploadData(); //上传文件必须要的参数
stmt
:
Date
.
now
(),
};
const
signStr
=
JSON
.
stringify
(
signObj
);
const
sign
=
CryptoJS
.
MD5
(
signStr
).
toString
();
let
auth_key
=
{
appKey
:
signObj
.
appKey
,
sign
,
stmt
:
signObj
.
stmt
};
// 把auth_key转成base64
auth_key
=
btoa
(
JSON
.
stringify
(
auth_key
));
console
.
log
(
auth_key
);
*/
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var
key
=
"
h5_test
"
;
$
(
function
(){
window
.
courseware
.
getData
(
function
(
data
){
//数据加载完,才算页面加载完成
//获取数据
if
(
data
&&
data
.
test
){
$
(
"
[name='test']
"
).
val
(
data
.
test
);
}
//绑定点击事件
$
(
'
#save
'
).
on
(
'
click
'
,
function
(){
var
test
=
$
(
"
[name='test']
"
).
val
();
//保存新增或修改的数据
window
.
courseware
.
setData
({
test
:
test
},
function
(){
//保存数据也是异步的
alert
(
"
保存成功!
"
);
},
key
);
})
},
key
);
})
\ No newline at end of file
play/crypto-js.min.js
0 → 100644
View file @
7d84f189
This diff is collapsed.
Click to expand it.
play/index.css
View file @
7d84f189
...
@@ -10,7 +10,7 @@ html, body {
...
@@ -10,7 +10,7 @@ html, body {
margin
:
0
;
margin
:
0
;
padding
:
0
;
padding
:
0
;
overflow
:
hidden
;
overflow
:
hidden
;
background
:
#
000
;
background
:
#
fff
;
}
}
#app
{
#app
{
...
@@ -21,6 +21,7 @@ html, body {
...
@@ -21,6 +21,7 @@ html, body {
left
:
0
;
left
:
0
;
right
:
0
;
right
:
0
;
bottom
:
0
;
bottom
:
0
;
background
:
#fff
;
}
}
.loading
{
.loading
{
...
@@ -51,6 +52,7 @@ html, body {
...
@@ -51,6 +52,7 @@ html, body {
right
:
0
;
right
:
0
;
bottom
:
0
;
bottom
:
0
;
overflow
:
hidden
;
overflow
:
hidden
;
background
:
#000
;
}
}
.photo-wrapper
{
.photo-wrapper
{
...
@@ -104,7 +106,7 @@ html, body {
...
@@ -104,7 +106,7 @@ html, body {
.controls
{
.controls
{
position
:
fixed
;
position
:
fixed
;
bottom
:
30
px
;
bottom
:
65
px
;
left
:
30px
;
left
:
30px
;
z-index
:
1000
;
z-index
:
1000
;
display
:
flex
;
display
:
flex
;
...
@@ -274,3 +276,196 @@ audio {
...
@@ -274,3 +276,196 @@ audio {
[
v-cloak
]
{
[
v-cloak
]
{
display
:
none
;
display
:
none
;
}
}
.catalog-view
{
padding
:
20px
;
width
:
100%
;
height
:
100vh
;
display
:
flex
;
flex-direction
:
column
;
overflow
:
hidden
;
}
.catalog-header
{
position
:
fixed
;
bottom
:
20px
;
left
:
30px
;
z-index
:
1000
;
margin
:
0
;
padding
:
0
;
}
.catalog-header
.el-button
{
width
:
90px
;
height
:
40px
;
border-radius
:
20px
;
background
:
rgba
(
0
,
0
,
0
,
0.5
);
backdrop-filter
:
blur
(
5px
);
border
:
none
;
color
:
#fff
;
padding
:
0
;
font-size
:
14px
;
transition
:
all
0.2s
ease
;
display
:
flex
;
align-items
:
center
;
justify-content
:
center
;
gap
:
5px
;
}
.catalog-header
.el-button
:hover
{
background
:
rgba
(
0
,
0
,
0
,
0.7
);
}
.catalog-header
.el-button
:active
{
transform
:
translateY
(
1px
);
}
.catalog-header
.el-button
i
{
margin
:
0
;
font-size
:
16px
;
}
.catalog-header
.el-button
span
{
font-size
:
12px
;
line-height
:
1
;
}
/* 播放页面的返回按钮样式 */
.photo-section
+
.catalog-header
{
position
:
fixed
;
top
:
auto
;
bottom
:
20px
;
left
:
30px
;
z-index
:
1000
;
margin
:
0
;
padding
:
0
;
}
.catalog-list
{
display
:
flex
;
flex-wrap
:
wrap
;
gap
:
20px
;
justify-content
:
flex-start
;
width
:
100%
;
padding
:
20px
;
overflow-y
:
auto
;
}
.catalog-item
{
cursor
:
default
;
transition
:
all
0.3s
ease
;
background
:
#fff
;
border-radius
:
4px
;
box-shadow
:
0
2px
12px
0
rgba
(
0
,
0
,
0
,
.1
);
border
:
1px
solid
#EBEEF5
;
overflow
:
hidden
;
width
:
200px
;
flex-grow
:
0
;
flex-shrink
:
0
;
}
.catalog-item.clickable
{
cursor
:
pointer
;
}
.catalog-item.clickable
:hover
{
transform
:
translateY
(
-5px
);
box-shadow
:
0
4px
12px
rgba
(
0
,
0
,
0
,
0.1
);
background
:
#f5f7fa
;
}
.catalog-item.clickable
:active
{
transform
:
scale
(
0.98
);
background
:
#e8f4ff
;
transition
:
all
0.1s
ease
;
}
/* 自定义滚动条样式 */
.catalog-list
::-webkit-scrollbar
{
width
:
6px
;
}
.catalog-list
::-webkit-scrollbar-track
{
background
:
transparent
;
}
.catalog-list
::-webkit-scrollbar-thumb
{
background
:
rgba
(
0
,
0
,
0
,
0.2
);
border-radius
:
3px
;
}
.catalog-list
::-webkit-scrollbar-thumb:hover
{
background
:
rgba
(
0
,
0
,
0
,
0.3
);
}
.card-content
{
display
:
flex
;
align-items
:
flex-start
;
justify-content
:
space-between
;
padding
:
15px
;
min-height
:
90px
;
}
.item-name
{
font-size
:
16px
;
color
:
#333
;
flex
:
1
;
margin-right
:
10px
;
overflow
:
hidden
;
text-overflow
:
ellipsis
;
display
:
-webkit-box
;
-webkit-line-clamp
:
3
;
-webkit-box-orient
:
vertical
;
line-height
:
1.4
;
white-space
:
normal
;
word-break
:
break-word
;
}
.card-indicators
{
display
:
flex
;
flex-direction
:
column
;
align-items
:
center
;
gap
:
8px
;
flex-shrink
:
0
;
}
.card-indicators
i
{
font-size
:
18px
;
}
.el-icon-folder-opened
{
color
:
#E6A23C
;
}
.el-icon-document
{
color
:
#409EFF
;
}
.el-icon-arrow-right
{
color
:
#909399
;
}
.catalog-loading
{
position
:
fixed
;
top
:
0
;
left
:
0
;
right
:
0
;
bottom
:
0
;
background
:
rgba
(
255
,
255
,
255
,
0.9
);
display
:
flex
;
flex-direction
:
column
;
justify-content
:
center
;
align-items
:
center
;
z-index
:
1000
;
}
.catalog-loading
i
{
font-size
:
40px
;
color
:
#409EFF
;
margin-bottom
:
20px
;
}
.catalog-loading
p
{
font-size
:
16px
;
color
:
#606266
;
}
\ No newline at end of file
play/index.html
View file @
7d84f189
...
@@ -9,16 +9,56 @@
...
@@ -9,16 +9,56 @@
<script
src=
"//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"
></script>
<script
src=
"//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"
></script>
<script
src=
"//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/vue.min.js"
></script>
<script
src=
"//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/vue.min.js"
></script>
<script
src=
"//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/index.js"
></script>
<script
src=
"//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/index.js"
></script>
<script
src=
"./crypto-js.min.js"
></script>
<link
rel=
"stylesheet"
href=
"index.css"
>
<link
rel=
"stylesheet"
href=
"index.css"
>
</head>
</head>
<body>
<body>
<div
id=
"app"
v-cloak
>
<div
id=
"app"
v-cloak
>
<!-- 目录浏览模式 -->
<div
v-if=
"!bookData"
class=
"catalog-view"
>
<!-- Loading overlay -->
<div
v-if=
"loading"
class=
"catalog-loading"
>
<i
class=
"el-icon-loading"
></i>
<p>
加载中...
</p>
</div>
<div
class=
"catalog-header"
v-if=
"catalogStack.length > 0"
>
<el-button
type=
"text"
@
click=
"goBack"
>
<i
class=
"el-icon-arrow-left"
></i>
返回上级
</el-button>
</div>
<div
class=
"catalog-list"
>
<div
v-for=
"item in catalogList"
:key=
"item.id"
class=
"catalog-item"
:class=
"{'clickable': item.has_child === '1' || item.has_courseware === 1}"
@
click=
"handleCardClick(item)"
>
<div
class=
"card-content"
>
<span
class=
"item-name"
>
{{ item.name }}
</span>
<div
class=
"card-indicators"
>
<i
v-if=
"item.has_child === '1'"
class=
"el-icon-folder-opened"
></i>
<i
v-else-if=
"item.has_courseware === 1"
class=
"el-icon-document"
></i>
<i
v-if=
"item.has_child === '1'"
class=
"el-icon-arrow-right"
></i>
</div>
</div>
</div>
</div>
</div>
<!-- 课件播放模式 -->
<template
v-else
>
<div
v-if=
"loading"
class=
"loading"
>
<div
v-if=
"loading"
class=
"loading"
>
<i
class=
"el-icon-loading"
></i>
<i
class=
"el-icon-loading"
></i>
<p>
Loading...
</p>
<p>
Loading...
</p>
</div>
</div>
<template
v-else
>
<div
class=
"catalog-header"
>
<el-button
type=
"text"
@
click=
"exitCourseware"
>
<i
class=
"el-icon-arrow-left"
></i>
返回目录
</el-button>
</div>
<div
class=
"photo-section"
>
<div
class=
"photo-section"
>
<div
class=
"photo-wrapper"
:style=
"wrapperStyle"
>
<div
class=
"photo-wrapper"
:style=
"wrapperStyle"
>
<div
v-for=
"(url, index) in bookData.photoUrls"
<div
v-for=
"(url, index) in bookData.photoUrls"
...
...
play/index.js
View file @
7d84f189
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment