Commit 7d84f189 authored by 15011343103's avatar 15011343103

feat

parent 28568645
......@@ -13,12 +13,10 @@
<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="./crypto-js.min.js"></script>
</head>
<body>
<div class="edit-data">
<!-- 简单的例子,一个输入框+一个按钮,保存输入框的信息 -->
test: <input type="text" name="test" />
<input id="save" type="button" value="保存" >
<div id="app">
</div>
</body>
<script src="./index.js"></script>
......
/**
* 通用接口请求方法
* @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);
}
const signObj = {
appKey: "9a7efe3f90",
appSecret: "bcbd5d350b3e568a29963d1b1d16ba",
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);
/*
window.courseware.getData(callback,key); //用于获取数据
window.courseware.setData(data,callback,key); //用于存储数据
var uploadUrl = window.courseware.uploadUrl(); //上传文件的路径
var uploadData = window.courseware.uploadData(); //上传文件必须要的参数
*/
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
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
This diff is collapsed.
......@@ -10,7 +10,7 @@ html, body {
margin: 0;
padding: 0;
overflow: hidden;
background: #000;
background: #fff;
}
#app {
......@@ -21,6 +21,7 @@ html, body {
left: 0;
right: 0;
bottom: 0;
background: #fff;
}
.loading {
......@@ -51,6 +52,7 @@ html, body {
right: 0;
bottom: 0;
overflow: hidden;
background: #000;
}
.photo-wrapper {
......@@ -104,7 +106,7 @@ html, body {
.controls {
position: fixed;
bottom: 30px;
bottom: 65px;
left: 30px;
z-index: 1000;
display: flex;
......@@ -273,4 +275,197 @@ audio {
[v-cloak] {
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
......@@ -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/vue.min.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">
</head>
<body>
<div id="app" v-cloak>
<div v-if="loading" class="loading">
<i class="el-icon-loading"></i>
<p>Loading...</p>
<!-- 目录浏览模式 -->
<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">
<i class="el-icon-loading"></i>
<p>Loading...</p>
</div>
<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-wrapper" :style="wrapperStyle">
<div v-for="(url, index) in bookData.photoUrls"
......
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment