Commit 48f83d45 authored by Chen Jiping's avatar Chen Jiping

feat:完成配置页面开发

parent 885cdb10
.video {
width:100%;
display: none;
}
.upload-btn {
margin: 3px;
border-radius: 2px;
position: relative;
border: 1px solid #dcdfe6;
text-align: center;
height: 30px;
line-height: 30px;
}
.upload-container {
width: 300px;
height: 100px;
position: relative;
border-radius: 2px;
border: 1px solid #dcdfe6;
line-height: 100px;
margin: 10px;
text-align: center;
display:flex;
align-items:center;
justify-content:center;
}
.edit-data{
padding: 10px;
.hide-fileinput {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
}
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5-template-generator</title>
<script type="text/javascript" src="../lib/js/jquery-1.12.3.min.js"></script>
<link href="./index.css" rel="stylesheet" >
<link href="../lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="./index.css" rel="stylesheet">
<script type="text/javascript" src="../lib/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
</head>
<body>
<div class="edit-data">
<!-- 简单的例子,一个输入框+一个按钮,保存输入框的信息 -->
test: <input type="text" name="test" />
<input id="save" type="button" value="保存" >
<div class="container-fluid" id="content">
<div class="panel panel-info">
<div class="panel-heading">
<h3>内容编辑</h3>
</div>
<div class="panel-body">
<form class="form-horizontal" enctype="multipart/form-data">
<div class="form-group">
<label for="video" class="col-sm-2 control-label">标题1</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="title1" placeholder="标题1">
</div>
</div>
<div class="form-group">
<label for="video" class="col-sm-2 control-label">标题2</label>
<div class="col-sm-6">
<input type="text" class="form-control" id="title2" placeholder="标题2">
</div>
</div>
<div class="form-group">
<label for="video" class="col-sm-2 control-label">视频</label>
<div class="col-sm-2">
<button type="button" class="btn btn-default" onclick="addVideo()">
<span class="glyphicon glyphicon-plus-sign"></span> 添加
</button>
</div>
</div>
<div class="form-group">
<div class="col-sm-6 col-sm-offset-2" id="videoList">
</div>
</div>
</div>
</form>
</div>
</div>
<div style="display: none" id="add_video">
<div class="panel panel-info" name="video_panel" data-type="video_panel">
<div class="panel-heading">
<h5 class="panel-title"></h5>
</div>
<div class="panel-body">
<div class="upload-btn"><span>上传视频</span><input class="hide-fileinput" type="file" name="video"
accept="video/*" data-target="#showVideo"></div>
<video class="video" id="showVideo" src="" controls="controls"></video>
</div>
<div class="panel-footer">
<button type="button" class="btn btn-danger" onclick="delVideo(this)">
<span class="glyphicon glyphicon-trash"></span> 删除
</button>
</div>
</div>
</div>
</body>
<script src="./index.js"></script>
</html>
\ No newline at end of file
......@@ -10,26 +10,242 @@ var uploadData = window.courseware.uploadData(); //上传文件必须要的参
*/
//对应模板的名称,这个可以不写,但是最好是能写上,同时开发多个模板的情况下如果不写这个,本地缓存可能会存在混乱
var key = "h5_test";
var key = "JMXS03";
$(function(){
window.courseware.getData(function(data){
//数据加载完,才算页面加载完成
//获取数据
if(data&&data.test){
$("[name='test']").val(data.test);
var formView;
class FormView {
data;
init() {
this.initDefaultData();
this.initView();
}
//绑定点击事件
$('#save').on('click',function(){
var test = $("[name='test']").val();
initDefaultData() {
//保存新增或修改的数据
window.courseware.setData({test: test},function(){
//保存数据也是异步的
alert("保存成功!");
},key);
if (!this.data) {
this.data = {};
this.save();
}
if (!this.data.videoArr) {
this.data.videoArr = [];
this.save();
}
}
initView() {
const _this = this;
$("#title1").val(this.data.title1);
$("#title2").val(this.data.title2);
$("#title1").change(function () {
_this.data.title1 = $(this).val();
_this.save();
})
},key);
$("#title2").change(function () {
_this.data.title2 = $(this).val();
_this.save();
});
const videoArr = _this.data.videoArr;
//循环设置video信息
for (let i = 0; i < videoArr.length; ++i) {
const videoPanel = addVideo();
$(videoPanel).find(".video").attr('src', videoArr[i]).show();
}
}
bindVideoUpload(dom) {
const _this = this;
dom.find("[name='video']").change(function () {
const files = $(this).prop('files');
$(this).attr("disabled", true);
$(this).prev().text("上传中...");
commonUploadFile(files[0], (data) => {
$(this).attr("disabled", false);
$(this).prev().text("上传视频");
if (data) {
const d = JSON.parse(data);
const showVideo = $(this).attr('data-target');
$(showVideo).attr("src", d.url).show();
_this.setVideoArr();
}
});
});
}
/**
* 设置视频数组信息
*/
setVideoArr() {
const _this = this;
let videoArr = [];
//获取所有的url地址
var items = $("#videoList").find(".video");
$.each(items, function (i, item) {
let videoUrl = $(item).attr("src");
videoArr.push(videoUrl);
});
_this.data.videoArr = videoArr;
_this.save();
}
saveTmsp = null;
save() {
if (this.saveTmsp) {
return;
}
this.saveTmsp = setTimeout(() => {
const saveData = this.data;
console.log(saveData);
window.courseware.setData(saveData, null, key); //用于存储数据
this.saveTmsp = null;
}, 1000);
}
}
$(function () {
formView = new FormView();
window.courseware.getData(function (data) {
//数据加载完,才算页面加载完成
console.log(data);
formView.data = data;
formView.init();
}, key);
})
function commonUploadFile(file, callback) {
const uploadUrl = window.courseware.uploadUrl(); //上传文件的路径
const uploadData = window.courseware.uploadData(); //上传文件必须要的参数
const formData = new FormData();
formData.append("file", file);
for (const key in uploadData) {
formData.append(key, uploadData[key]);
}
$.ajax({
url: uploadUrl,
type: "post",
data: formData,
dataType: 'text',
contentType: false,
processData: false,
success: function (data) {
callback && callback(data);
},
error: function (data) {
console.error("文件上传失败", data);
callback && callback(null);
}
});
}
//form索引
var _add_video_index = 0;
//form标题
var _add_video_title_index = 1;
/**
* 添加vido
*/
function addVideo() {
// 添加一个五要素
$("#videoList").append($("#add_video").html());
var videoPanel = $("#videoList").find("div[name='video_panel']");
//绑定事件
if (formView) {
formView.bindVideoUpload(videoPanel);
}
//修改id值
setAddVideoId(_add_video_index, _add_video_title_index);
_add_video_index += 1;
_add_video_title_index += 1;
return videoPanel;
}
/**
* 修改id值
* @param index
* @param titleIndex
*/
function setAddVideoId(index, titleIndex) {
var video_panel = $("#videoList").find("div[name='video_panel']");
//修改name值
$(video_panel).attr("name", "video_panel" + index);
//设置id值
$(video_panel).attr("id", "video_panel" + index);
//设置title值
$(video_panel).find(".panel-title").append("<h5>视频" + titleIndex + "</h5>");
//设置video显示位置
$(video_panel).find("[name='video']").attr('data-target', "#showVideo_" + index)
//设置组件id值
var items = $(video_panel).find(".video");
$.each(items, function (i, item) {
$(item).attr("id", "showVideo_" + index);
});
}
/**
* 删除通讯配置项
* @returns
*/
function delVideo(obj) {
$(obj).parents("div[data-type=video_panel]").remove();
_add_video_title_index--;
//重新设置通讯配置项显示
var addVideoTitles = $("#videoList").find(".panel-title");
$.each(addVideoTitles, function (i, title) {
$(title).empty();
$(title).append("<h5>视频" + (i + 1) + "</h5>");
});
if (formView) {
formView.setVideoArr();
}
}
\ No newline at end of file
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
This diff is collapsed.
This diff is collapsed.
// This file is autogenerated via the `commonjs` Grunt task. You can require() this file in a CommonJS environment.
require('../../js/transition.js')
require('../../js/alert.js')
require('../../js/button.js')
require('../../js/carousel.js')
require('../../js/collapse.js')
require('../../js/dropdown.js')
require('../../js/modal.js')
require('../../js/tooltip.js')
require('../../js/popover.js')
require('../../js/scrollspy.js')
require('../../js/tab.js')
require('../../js/affix.js')
\ No newline at end of file
# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
# yarn lockfile v1
bl@^1.0.0:
version "1.2.3"
resolved "https://registry.npm.taobao.org/bl/download/bl-1.2.3.tgz#1e8dd80142eac80d7158c9dccc047fb620e035e7"
integrity sha1-Ho3YAULqyA1xWMnczAR/tiDgNec=
dependencies:
readable-stream "^2.3.5"
safe-buffer "^5.1.1"
buffer-alloc-unsafe@^1.1.0:
version "1.1.0"
resolved "https://registry.nlark.com/buffer-alloc-unsafe/download/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
integrity sha1-vX3CauKXLQ7aJTvgYdupkjScGfA=
buffer-alloc@^1.2.0:
version "1.2.0"
resolved "https://registry.nlark.com/buffer-alloc/download/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
integrity sha1-iQ3ZDZI6hz4I4Q5f1RpX5bfM4Ow=
dependencies:
buffer-alloc-unsafe "^1.1.0"
buffer-fill "^1.0.0"
buffer-crc32@~0.2.3:
version "0.2.13"
resolved "https://registry.nlark.com/buffer-crc32/download/buffer-crc32-0.2.13.tgz#0d333e3f00eac50aa1454abd30ef8c2a5d9a7242"
integrity sha1-DTM+PwDqxQqhRUq9MO+MKl2ackI=
buffer-fill@^1.0.0:
version "1.0.0"
resolved "https://registry.nlark.com/buffer-fill/download/buffer-fill-1.0.0.tgz#f8f78b76789888ef39f205cd637f68e702122b2c"
integrity sha1-+PeLdniYiO858gXNY39o5wISKyw=
compressing@^1.5.0:
version "1.5.1"
resolved "https://registry.nlark.com/compressing/download/compressing-1.5.1.tgz#d031a3311b8c2ed6561a8431671d5a844540482d"
integrity sha1-0DGjMRuMLtZWGoQxZx1ahEVASC0=
dependencies:
flushwritable "^1.0.0"
get-ready "^1.0.0"
iconv-lite "^0.5.0"
mkdirp "^0.5.1"
pump "^3.0.0"
streamifier "^0.1.1"
tar-stream "^1.5.2"
yauzl "^2.7.0"
yazl "^2.4.2"
core-util-is@~1.0.0:
version "1.0.3"
resolved "https://registry.nlark.com/core-util-is/download/core-util-is-1.0.3.tgz?cache=0&sync_timestamp=1630420577662&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fcore-util-is%2Fdownload%2Fcore-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
integrity sha1-pgQtNjTCsn6TKPg3uWX6yDgI24U=
end-of-stream@^1.0.0, end-of-stream@^1.1.0:
version "1.4.4"
resolved "https://registry.npm.taobao.org/end-of-stream/download/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
integrity sha1-WuZKX0UFe682JuwU2gyl5LJDHrA=
dependencies:
once "^1.4.0"
fd-slicer@~1.1.0:
version "1.1.0"
resolved "https://registry.npm.taobao.org/fd-slicer/download/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
integrity sha1-JcfInLH5B3+IkbvmHY85Dq4lbx4=
dependencies:
pend "~1.2.0"
flushwritable@^1.0.0:
version "1.0.0"
resolved "https://registry.npm.taobao.org/flushwritable/download/flushwritable-1.0.0.tgz#3e328d8fde412ad47e738e3be750b4d290043498"
integrity sha1-PjKNj95BKtR+c44751C00pAENJg=
fs-constants@^1.0.0:
version "1.0.0"
resolved "https://registry.npm.taobao.org/fs-constants/download/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
integrity sha1-a+Dem+mYzhavivwkSXue6bfM2a0=
get-ready@^1.0.0:
version "1.0.0"
resolved "https://registry.nlark.com/get-ready/download/get-ready-1.0.0.tgz#f91817f1e9adecfea13a562adfc8de883ab34782"
integrity sha1-+RgX8emt7P6hOlYq38jeiDqzR4I=
iconv-lite@^0.5.0:
version "0.5.2"
resolved "https://registry.nlark.com/iconv-lite/download/iconv-lite-0.5.2.tgz#af6d628dccfb463b7364d97f715e4b74b8c8c2b8"
integrity sha1-r21ijcz7RjtzZNl/cV5LdLjIwrg=
dependencies:
safer-buffer ">= 2.1.2 < 3"
inherits@~2.0.3:
version "2.0.4"
resolved "https://registry.npm.taobao.org/inherits/download/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
integrity sha1-D6LGT5MpF8NDOg3tVTY6rjdBa3w=
isarray@~1.0.0:
version "1.0.0"
resolved "https://registry.nlark.com/isarray/download/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
integrity sha1-u5NdSFgsuhaMBoNJV6VKPgcSTxE=
minimist@^1.2.5:
version "1.2.5"
resolved "https://registry.nlark.com/minimist/download/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
integrity sha1-Z9ZgFLZqaoqqDAg8X9WN9OTpdgI=
mkdirp@^0.5.1:
version "0.5.5"
resolved "https://registry.npmmirror.com/mkdirp/download/mkdirp-0.5.5.tgz?cache=0&sync_timestamp=1636300883420&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Fmkdirp%2Fdownload%2Fmkdirp-0.5.5.tgz#d91cefd62d1436ca0f41620e251288d420099def"
integrity sha1-2Rzv1i0UNsoPQWIOJRKI1CAJne8=
dependencies:
minimist "^1.2.5"
once@^1.3.1, once@^1.4.0:
version "1.4.0"
resolved "https://registry.nlark.com/once/download/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
integrity sha1-WDsap3WWHUsROsF9nFC6753Xa9E=
dependencies:
wrappy "1"
pend@~1.2.0:
version "1.2.0"
resolved "https://registry.nlark.com/pend/download/pend-1.2.0.tgz#7a57eb550a6783f9115331fcf4663d5c8e007a50"
integrity sha1-elfrVQpng/kRUzH89GY9XI4AelA=
process-nextick-args@~2.0.0:
version "2.0.1"
resolved "https://registry.nlark.com/process-nextick-args/download/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
integrity sha1-eCDZsWEgzFXKmud5JoCufbptf+I=
pump@^3.0.0:
version "3.0.0"
resolved "https://registry.nlark.com/pump/download/pump-3.0.0.tgz#b4a2116815bde2f4e1ea602354e8c75565107a64"
integrity sha1-tKIRaBW94vTh6mAjVOjHVWUQemQ=
dependencies:
end-of-stream "^1.1.0"
once "^1.3.1"
readable-stream@^2.3.0, readable-stream@^2.3.5:
version "2.3.7"
resolved "https://registry.nlark.com/readable-stream/download/readable-stream-2.3.7.tgz#1eca1cf711aef814c04f62252a36a62f6cb23b57"
integrity sha1-Hsoc9xGu+BTAT2IlKjamL2yyO1c=
dependencies:
core-util-is "~1.0.0"
inherits "~2.0.3"
isarray "~1.0.0"
process-nextick-args "~2.0.0"
safe-buffer "~5.1.1"
string_decoder "~1.1.1"
util-deprecate "~1.0.1"
safe-buffer@^5.1.1:
version "5.2.1"
resolved "https://registry.nlark.com/safe-buffer/download/safe-buffer-5.2.1.tgz?cache=0&sync_timestamp=1618847044058&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsafe-buffer%2Fdownload%2Fsafe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
integrity sha1-Hq+fqb2x/dTsdfWPnNtOa3gn7sY=
safe-buffer@~5.1.0, safe-buffer@~5.1.1:
version "5.1.2"
resolved "https://registry.nlark.com/safe-buffer/download/safe-buffer-5.1.2.tgz?cache=0&sync_timestamp=1618847044058&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fsafe-buffer%2Fdownload%2Fsafe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
integrity sha1-mR7GnSluAxN0fVm9/St0XDX4go0=
"safer-buffer@>= 2.1.2 < 3":
version "2.1.2"
resolved "https://registry.npm.taobao.org/safer-buffer/download/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
integrity sha1-RPoWGwGHuVSd2Eu5GAL5vYOFzWo=
streamifier@^0.1.1:
version "0.1.1"
resolved "https://registry.npm.taobao.org/streamifier/download/streamifier-0.1.1.tgz#97e98d8fa4d105d62a2691d1dc07e820db8dfc4f"
integrity sha1-l+mNj6TRBdYqJpHR3AfoINuN/E8=
string_decoder@~1.1.1:
version "1.1.1"
resolved "https://registry.nlark.com/string_decoder/download/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
integrity sha1-nPFhG6YmhdcDCunkujQUnDrwP8g=
dependencies:
safe-buffer "~5.1.0"
tar-stream@^1.5.2:
version "1.6.2"
resolved "https://registry.npm.taobao.org/tar-stream/download/tar-stream-1.6.2.tgz?cache=0&sync_timestamp=1609236246435&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Ftar-stream%2Fdownload%2Ftar-stream-1.6.2.tgz#8ea55dab37972253d9a9af90fdcd559ae435c555"
integrity sha1-jqVdqzeXIlPZqa+Q/c1VmuQ1xVU=
dependencies:
bl "^1.0.0"
buffer-alloc "^1.2.0"
end-of-stream "^1.0.0"
fs-constants "^1.0.0"
readable-stream "^2.3.0"
to-buffer "^1.1.1"
xtend "^4.0.0"
to-buffer@^1.1.1:
version "1.1.1"
resolved "https://registry.nlark.com/to-buffer/download/to-buffer-1.1.1.tgz#493bd48f62d7c43fcded313a03dcadb2e1213a80"
integrity sha1-STvUj2LXxD/N7TE6A9ytsuEhOoA=
util-deprecate@~1.0.1:
version "1.0.2"
resolved "https://registry.npm.taobao.org/util-deprecate/download/util-deprecate-1.0.2.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Futil-deprecate%2Fdownload%2Futil-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
wrappy@1:
version "1.0.2"
resolved "https://registry.nlark.com/wrappy/download/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
xtend@^4.0.0:
version "4.0.2"
resolved "https://registry.nlark.com/xtend/download/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
integrity sha1-u3J3n1+kZRhrH0OPZ0+jR/2121Q=
yauzl@^2.7.0:
version "2.10.0"
resolved "https://registry.npm.taobao.org/yauzl/download/yauzl-2.10.0.tgz#c7eb17c93e112cb1086fa6d8e51fb0667b79a5f9"
integrity sha1-x+sXyT4RLLEIb6bY5R+wZnt5pfk=
dependencies:
buffer-crc32 "~0.2.3"
fd-slicer "~1.1.0"
yazl@^2.4.2:
version "2.5.1"
resolved "https://registry.nlark.com/yazl/download/yazl-2.5.1.tgz#a3d65d3dd659a5b0937850e8609f22fffa2b5c35"
integrity sha1-o9ZdPdZZpbCTeFDoYJ8i//orXDU=
dependencies:
buffer-crc32 "~0.2.3"
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