Commit fa23b016 authored by liujiangnan's avatar liujiangnan

feat

parent 9d944887
.edit-data{ .edit-data{
padding: 10px; padding: 10px;
}
.upload-progress {
margin-top: 20px;
padding: 10px;
}
.upload-progress .el-button {
margin-top: 10px;
}
.el-card {
display: inline-block;
margin: 3px;
}
.data-card {
position: relative;
height: 450px;
width: 300px;
vertical-align: top;
}
.data-card .el-card__body {
padding: 15px 20px 0px;
}
.audio-uploader {
text-align: center;
margin-bottom: 10px;
}
.audio-uploader .el-upload {
width: 100%;
}
.audio-uploader .el-upload-dragger {
width: 100%;
height: auto;
padding: 10px;
}
audio {
width: 100%;
margin: 10px 0;
}
.el-form-item {
margin-bottom: 15px;
}
.delete-btn-wrapper {
position: absolute;
bottom: 10px;
left: 0;
right: 0;
text-align: center;
}
/* 音频信息显示样式 */
.audio-info {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 10px;
padding: 8px 12px;
background: #f5f7fa;
border-radius: 4px;
}
.audio-file-info {
flex: 1;
overflow: hidden;
margin-right: 10px;
}
.audio-file-info .filename {
display: block;
font-size: 14px;
color: #606266;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.audio-file-info .file-meta {
font-size: 12px;
color: #909399;
}
.audio-play-btn {
font-size: 20px;
color: #409EFF;
cursor: pointer;
transition: all 0.3s;
}
.audio-play-btn:hover {
color: #66b1ff;
}
.audio-play-btn.is-playing {
animation: rotating 2s linear infinite;
}
@keyframes rotating {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
/* 图片上传区域样式 */
.image-uploader {
width: 120px;
height: 120px;
line-height: 120px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.image-uploader:hover {
border-color: #409EFF;
}
.upload-icon {
font-size: 28px;
color: #8c939d;
width: 120px;
height: 120px;
line-height: 120px;
text-align: center;
}
.image-preview {
width: 100%;
height: 100%;
position: relative;
}
.uploaded-image {
width: 100%;
height: 100%;
object-fit: cover;
}
.image-actions {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: opacity 0.3s;
}
.image-preview:hover .image-actions {
opacity: 1;
}
.image-actions i {
color: #fff;
font-size: 20px;
margin: 0 10px;
cursor: pointer;
}
.image-actions i:hover {
transform: scale(1.2);
} }
\ No newline at end of file
...@@ -6,19 +6,116 @@ ...@@ -6,19 +6,116 @@
<meta http-equiv="X-UA-Compatible" content="ie=edge"> <meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>h5-template-generator</title> <title>h5-template-generator</title>
<link href="./index.css" rel="stylesheet" > <link href="./index.css" rel="stylesheet" >
<script type="text/javascript" src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script> <script type="text/javascript" src="../lib/js/jquery-1.12.3.min.js"></script>
<script type="text/javascript" src="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/vue.min.js"></script> <script type="text/javascript" src="../lib/common.js"></script>
<script type="text/javascript" src="../lib/vue.min.js"></script>
<script type="text/javascript" src="//staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script>
<!-- 引入样式 --> <!-- 引入样式 -->
<link href="//teach.cdn.ireadabc.com/h5template/h5-static-lib/js/element-ui/theme-chalk/index.css" rel="stylesheet"> <link href="../lib/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="../lib/element-ui/index.js"></script>
</head> </head>
<body> <body>
<div class="edit-data"> <div id="edit-data" class="edit-data">
<!-- 简单的例子,一个输入框+一个按钮,保存输入框的信息 --> <el-upload class="upload-demo" drag
test: <input type="text" name="test" /> :action="uploadPdfUrl"
<input id="save" type="button" value="保存" > :data="uploadPdfData"
:show-file-list="false"
:on-success="handleCoverSuccess"
:on-error="handleCoverError"
:before-upload="beforeCoverUpload"
:http-request="customUpload"
>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip" slot="tip">只能上传pdf/ppt/word文件,且不超过100Mb</div>
</el-upload>
<!-- 添加进度条和取消按钮 -->
<div v-if="uploading" class="upload-progress">
<el-progress :percentage="uploadProgress"></el-progress>
<el-button type="danger" size="small" @click="cancelUpload">取消上传</el-button>
</div>
<br>
<el-link v-if="fileData" :href="fileData.url">{{fileData.name}}</el-link>
<!-- 分割线 -->
<el-divider></el-divider>
<div v-if="fileData">
<el-card v-for="item, index in fileData.items" :key="index" class="data-card">
<div>
<el-form label-width="40px">
<el-form-item label="图片">
<div class="image-uploader">
<el-upload
:action="uploadUrl"
:data="uploadData"
:show-file-list="false"
:on-success="(res, file) => handleImageSuccess(res, file, index)"
:before-upload="beforeImageUpload">
<div v-if="fileData.items[index].image_url" class="image-preview">
<img :src="fileData.items[index].image_url" class="uploaded-image">
<div class="image-actions">
<i class="el-icon-zoom-in" @click.stop="previewImage(fileData.items[index].image_url)"></i>
<i class="el-icon-delete" @click.stop="removeImage(index)"></i>
</div>
</div>
<i v-else class="el-icon-plus upload-icon"></i>
</el-upload>
</div>
</el-form-item>
<el-form-item label="英文">
<el-input type="textarea" v-model="fileData.items[index].text_en" placeholder="请输入英文" @change="save"></el-input>
</el-form-item>
<el-form-item label="中文">
<el-input type="textarea" v-model="fileData.items[index].text_cn" placeholder="请输入中文" @change="save"></el-input>
</el-form-item>
<!-- 新增音频上传和预览部分 -->
<el-form-item label="音频">
<div class="audio-uploader">
<el-upload
:action="uploadUrl"
:data="uploadData"
:on-success="(res, file) => handleAudioSuccess(res, file, index)"
:before-upload="beforeAudioUpload"
:show-file-list="false">
<el-button size="small" type="primary">点击上传音频</el-button>
</el-upload>
<div v-if="fileData.items[index].audio_url" class="audio-info">
<div class="audio-file-info">
<span class="filename">{{ fileData.items[index].audio_name }}</span>
</div>
<i class="el-icon-service audio-play-btn"
:class="{ 'is-playing': fileData.items[index].isPlaying }"
@click="togglePlay(index)"></i>
<audio
:ref="'audio' + index"
:src="fileData.items[index].audio_url"
@ended="audioEnded(index)"
style="display: none;">
</audio>
</div>
</div>
</el-form-item>
</el-form>
<div class="delete-btn-wrapper">
<el-button type="text" @click="deleteConf(index)">删除</el-button>
</div>
</div>
</el-card>
<el-card shadow="hover" class="data-card">
<div style="cursor: pointer; display: flex; justify-content: center; align-items: center; height: 300px;"
@click="addConfig">
<el-button class="btn" type="text" size="mini" icon="el-icon-plus">新建</el-button>
</div>
</el-card>
</div>
</div> </div>
</body> </body>
<script src="./index.js"></script> <script src="./index.js"></script>
......
This diff is collapsed.

/**
* 设置div自适应屏幕的高度
*/
function setDivHeight()
{
var height = document.documentElement.clientHeight;
var divViewHeight = height - 135;
var divDisplayHeight = divViewHeight - 37;
$("#divAll").css("height", height);
$("#divView").css("height", divViewHeight);
$("#divDisplay").css("height", divDisplayHeight);
}
/**
* 通过对象返回urlData字符串
* @param {} postData 由属性构成的对象
* @return {}
*/
function getUrlData(obj){
var props = "" ;
for ( var p in obj ){
if ( typeof ( obj [ p ]) == "function" ){
obj [ p ]() ;
} else {
props += p + "=" + obj [ p ] + "&" ;
}
}
//alert(props);
return encodeURIComponent(props) ;
}
/**
* 去左空格
* @param s 输入字符串
*/
function ltrim(s) {
return s.replace(/^\s*/, "");
}
/**
* 去右空格
* @param s 输入字符串
*/
function rtrim(s) {
return s.replace(/\s*$/, "");
}
/**
* 去左右空格
* @param s 输入字符串
*/
function trim(s) {
return rtrim(ltrim(s));
}
/**
* 读取Cookie
* @param key Cookie的键
* @returns 返回Cookie的值
*/
function GetCookieValue(key) {
var cookies = document.cookie.split("; ");
var value = "";
var count = 0;
count = cookies.length;
for (var iCookie = 0; iCookie < count; iCookie++) {
var arr = cookies[iCookie].split("=");
if (trim(arr[0]) == trim(key)) {
value = unescape(arr[1]);
return value;
}
}
return value;
}
/**
* 写Cookie
* @param key Cookie的键
* @param value Cookie的值
*/
function SetCookieValue(key, value) {
value = escape(value);
document.cookie = key + "=" + value;
}
/**
* 对Date的扩展,将 Date 转化为指定格式的String
* 月(M)、日(d)、12小时(h)、24小时(H)、分(m)、秒(s)、周(E)、季度(q) 可以用 1-2 个占位符
* 年(y)可以用 1-4 个占位符,毫秒(S)只能用 1 个占位符(是 1-3 位的数字)
* eg:
* (new Date()).pattern("yyyy-MM-dd hh:mm:ss.S") ==> 2006-07-02 08:09:04.423
* (new Date()).pattern("yyyy-MM-dd E HH:mm:ss") ==> 2009-03-10 二 20:09:04
* (new Date()).pattern("yyyy-MM-dd EE hh:mm:ss") ==> 2009-03-10 周二 08:09:04
* (new Date()).pattern("yyyy-MM-dd EEE hh:mm:ss") ==> 2009-03-10 星期二 08:09:04
* (new Date()).pattern("yyyy-M-d h:m:s.S") ==> 2006-7-2 8:9:4.18
*/
Date.prototype.pattern=function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours()%12 == 0 ? 12 : this.getHours()%12, //小时
"H+" : this.getHours(), //小时
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
var week = {
"0" : "/u65e5",
"1" : "/u4e00",
"2" : "/u4e8c",
"3" : "/u4e09",
"4" : "/u56db",
"5" : "/u4e94",
"6" : "/u516d"
};
if(/(y+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
if(/(E+)/.test(fmt)){
fmt=fmt.replace(RegExp.$1, ((RegExp.$1.length>1) ? (RegExp.$1.length>2 ? "/u661f/u671f" : "/u5468") : "")+week[this.getDay()+""]);
}
for(var k in o){
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
Date.prototype.addDays = function(d)
{
this.setDate(this.getDate() + d);
};
Date.prototype.addWeeks = function(w)
{
this.addDays(w * 7);
};
Date.prototype.addMonths= function(m)
{
var d = this.getDate();
this.setMonth(this.getMonth() + m);
if (this.getDate() < d)
this.setDate(0);
};
Date.prototype.subtractMonths= function(m)
{
var d = this.getDate();
this.setMonth(this.getMonth() - m);
if (this.getDate() < d)
this.setDate(0);
};
Date.prototype.addYears = function(y)
{
var m = this.getMonth();
this.setFullYear(this.getFullYear() + y);
if (m < this.getMonth())
{
this.setDate(0);
}
};
// 转换日期格式
function parseISO8601(dateStringInRange) {
var isoExp = /^\s*(\d{4})-(\d\d)-(\d\d)\s*$/,
date = new Date(NaN), month,
parts = isoExp.exec(dateStringInRange);
if(parts) {
month = +parts[2];
date.setFullYear(parts[1], month - 1, parts[3]);
if(month != date.getMonth() + 1) {
date.setTime(NaN);
}
}
return date;
}
/**
* 显示或隐藏等待框
* @param isShow true-显示 false-隐藏
* @param opacity 透明度
*/
function ShowWaitting(isShow,opacity){
if(isShow)
{
$("#fwaitting").css({'display': 'block'});
if(opacity){
$("#fwaitting").css({'opacity': opacity});
}
$("#fwaittingTable").css({'display': 'block'});
}
else
{
$("#fwaitting").css({'display': 'none'});
$("#fwaittingTable").css({'display': 'none'});
}
}
/**
* 生成UUID
*/
var CreateUUID = (function (uuidRegEx, uuidReplacer) {
return function () {
return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(uuidRegEx, uuidReplacer).toUpperCase();
};
})(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0,
v = c == "x" ? r : (r & 3 | 8);
return v.toString(16);
});
/**
* 检查邮箱格式是否输入正确
* @param strEmail 邮箱地址
* @returns {boolean}
*/
function IsEmail(strEmail)
{
var result = false;
if(strEmail.length != 0) {
var reg=/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(reg.test(strEmail)) {
result = true;
}
}
return result;
}
\ No newline at end of file
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.
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