Commit 7c36bf03 authored by 李维's avatar 李维

feat: 添加保存提示

parent 3944b871
[data-v-5c385f59] .el-upload{height:80px}[data-v-5c385f59] .el-upload-dragger{height:80px;border:1px dashed #d9d9d9;border-radius:6px;color:#8c939d;font-size:14px;display:flex;justify-content:center;align-items:center}[data-v-5c385f59] .el-icon-upload{font-size:36px;color:#c0c4cc;margin:0 10px}.buttons[data-v-5c385f59]{text-align:center;position:absolute;right:0;top:0}.el-button[data-v-5c385f59]{padding:4px 12px;font-size:18px;margin:0;border-radius:0 0 0 20px}body,html{margin:0;padding:0;height:100%;overflow:hidden;background-color:#fff}#app{padding:10px}.btn{margin-left:10px;font-size:14px}.warn .el-form-item__label{background-color:#f56c6c;color:#fff} [data-v-68f08346] .el-upload{height:80px}[data-v-68f08346] .el-upload-dragger{height:80px;border:1px dashed #d9d9d9;border-radius:6px;color:#8c939d;font-size:14px;display:flex;justify-content:center;align-items:center}[data-v-68f08346] .el-icon-upload{font-size:36px;color:#c0c4cc;margin:0 10px}.buttons[data-v-68f08346]{text-align:center;position:absolute;right:0;top:0}.el-button[data-v-68f08346]{padding:4px 12px;font-size:18px;margin:0;border-radius:0 0 0 20px}body,html{margin:0;padding:0;height:100%;overflow:hidden;background-color:#fff}#app{padding:10px}.btn{margin-left:10px;font-size:14px}.warn .el-form-item__label{background-color:#f56c6c;color:#fff}
\ No newline at end of file \ No newline at end of file
<!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>form_vue</title><script defer="defer" src="js/chunk-vendors.1cfae6a9.js"></script><script defer="defer" src="js/app.50d99513.js"></script><link href="css/chunk-vendors.77489a8d.css" rel="stylesheet"><link href="css/app.328601d9.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but form_vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script><script>if (document.domain.indexOf("iteachabc.com") > 0) { <!doctype html><html lang=""><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="favicon.ico"><title>form_vue</title><script defer="defer" src="js/chunk-vendors.1cfae6a9.js"></script><script defer="defer" src="js/app.7a5cf174.js"></script><link href="css/chunk-vendors.77489a8d.css" rel="stylesheet"><link href="css/app.693843a8.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but form_vue doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><script src="https://staging-teach.cdn.ireadabc.com/h5template/h5-static-lib/js/air.js"></script><script>if (document.domain.indexOf("iteachabc.com") > 0) {
document.domain = "iteachabc.com"; document.domain = "iteachabc.com";
}</script><div id="app"></div></body></html> }</script><div id="app"></div></body></html>
\ No newline at end of file
(function(){"use strict";var t={2644:function(t,e,i){var a=i(5471),n=i(1052),o=i.n(n),r=function(){var t=this,e=t._self._c;return e("div",{attrs:{id:"app"}},[e("div",{staticStyle:{width:"500px"}},[e("el-form",{attrs:{"label-width":"80px"}},[e("el-form-item",{attrs:{label:"音频"}},[e("AudioUploader",{ref:"refAudioUploader",on:{change:t.save},model:{value:t.itemData.url,callback:function(e){t.$set(t.itemData,"url",e)},expression:"itemData.url"}})],1),e("el-form-item",{attrs:{label:"时长(秒)"}},[e("div",{staticStyle:{display:"flex"}},[e("el-input",{model:{value:t.itemData.duration,callback:function(e){t.$set(t.itemData,"duration",e)},expression:"itemData.duration"}}),e("el-button",{staticClass:"btn",attrs:{type:"ghost",size:"mini"},on:{click:function(e){return t.updateDuration()}}},[t._v("更新")])],1)]),e("el-form-item",{attrs:{label:"大小"}},[e("el-input",{model:{value:t.itemData.size,callback:function(e){t.$set(t.itemData,"size",e)},expression:"itemData.size"}})],1),t._l(t.configArr,(function(i,a){return[e("el-form-item",{class:{warn:t.configArr[a]>t.itemData.duration},attrs:{label:`第${a+1}页`}},[e("div",{staticStyle:{display:"flex"}},[e("el-input",{model:{value:t.configArr[a],callback:function(e){t.$set(t.configArr,a,e)},expression:"configArr[index]"}}),e("el-button",{staticClass:"btn",attrs:{type:"ghost",size:"mini",icon:"el-icon-video-play"},on:{click:function(e){return t.playIndex(a)}}},[t._v("播放")]),e("el-button",{staticClass:"btn",attrs:{type:"primary",size:"mini",icon:"el-icon-place"},on:{click:function(e){return t.setTag(a)}}},[t._v("打点")]),e("el-button",{staticClass:"btn",attrs:{type:"danger",size:"mini",icon:"el-icon-delete"},on:{click:function(e){return t.deleteConf(a)}}},[t._v("删除")])],1)])]}))],2),e("el-button",{staticClass:"btn",attrs:{type:"danger",size:"mini",icon:"el-icon-delete"},on:{click:function(e){return t.addConfig()}}},[t._v("新建")])],1)])},s=[],l=function(){var t=this,e=t._self._c;return e("div",{staticStyle:{position:"relative",width:"360px",height:"80px"}},[e("el-upload",{staticStyle:{height:"100px"},attrs:{data:t.uploadData,action:t.uploadUrl,drag:"",accept:".mp3","show-file-list":!1,"on-success":t.handleUploadSuccess}},[e("i",{directives:[{name:"show",rawName:"v-show",value:!t.audioUrl,expression:"!audioUrl"}],staticClass:"el-icon-upload"}),e("div",{directives:[{name:"show",rawName:"v-show",value:!t.audioUrl,expression:"!audioUrl"}],staticClass:"el-upload__text"},[t._v("将MP3文件拖到此处,或"),e("em",[t._v("点击上传")])]),t.audioUrl?e("div",[e("audio",{attrs:{src:t.audioUrl,controls:""}})]):t._e()]),t.audioUrl?e("div",{staticClass:"buttons"},[e("el-button",{attrs:{type:"ghost",size:"mini",icon:"el-icon-delete"},on:{click:t.deleteAudio}})],1):t._e()],1)},u=[],c=(i(5735),{name:"ImageUploader",props:{value:{type:String,default:""}},watch:{value:function(t,e){this.audioUrl=t}},data(){return{uploadUrl:"",uploadData:"",audioUrl:""}},created(){this.uploadUrl=window.courseware.uploadUrl(),this.uploadData=window.courseware.uploadData(),window["air"].getUploadCallback=(t,e)=>{this.uploadUrl=t,this.uploadData=e}},methods:{handleUploadSuccess(t){this.audioUrl=t.url,this.$emit("input",this.audioUrl),this.$emit("change",{url:this.audioUrl})},async download(){const t=this.audioUrl,e=t.split("/").pop(),i=await fetch(t);if(i.ok){const t=await i.blob(),a=window.URL.createObjectURL(t),n=document.createElement("a");n.href=a,n.download=e,document.body.appendChild(n),n.click(),this.$message({type:"success",message:"下载完成"})}else this.$message({type:"error",message:"下载失败"})},deleteAudio(){this.$confirm("确定要删除吗?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then((()=>{this.audioUrl="",this.$emit("input",""),this.$emit("change",{url:this.audioUrl})})).catch((()=>{}))}}}),d=c,f=i(1656),p=(0,f.A)(d,l,u,!1,null,"5c385f59",null),h=p.exports,m={name:"App",components:{AudioUploader:h},data(){return{itemData:{url:"",duration:0,size:0,splitConfig:""},configArr:[],endConf:0}},async mounted(){this.getData()},methods:{async getData(){const t=await this.$getData();t?(this.itemData=t,this.itemData.splitConfig&&(this.configArr=this.itemData.splitConfig.split(","))):(this.itemData={url:"https://teach.cdn.ireadabc.com/066e70f0278240e000fd0b4e39d12ef9.mp3",duration:127.08,size:2033900,splitConfig:"23.361281,31.816778,40.853425,49.199478,57.893614,66.694963,75.30565,84.465703,93.306864,127.08"},this.itemData.splitConfig&&(this.configArr=this.itemData.splitConfig.split(",")))},playScopeCallback(){const t=this.$refs.refAudioUploader.getAudioRef(),e=t.currentTime;e>=this.endConf&&(t.pause(),t.removeEventListener("timeupdate",this.playScopeCallback))},playIndex(t){const e=t-1<0?0:this.configArr[t-1],i=this.configArr[t],a=this.$refs.refAudioUploader.getAudioRef();a.currentTime=e,this.endConf=i,a.removeEventListener("timeupdate",this.playScopeCallback),a.addEventListener("timeupdate",this.playScopeCallback),a.play()},setTag(t){const e=this.$refs.refAudioUploader.getAudioRef();this.configArr[t]=e.currentTime,this.save()},deleteConf(t){this.$confirm("确认删除该页吗?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then((()=>{this.configArr.splice(t,1),this.save()})).catch((()=>{this.$message({type:"info",message:"已取消删除"})}))},updateDuration(){this.itemData.duration=this.$refs.refAudioUploader.getAudioRef().duration,this.save()},addConfig(){const t=this.$refs.refAudioUploader.getAudioRef();this.configArr.push(t.currentTime),this.save()},save(){this.itemData.splitConfig=this.configArr.join(","),this.$setData(this.itemData)},handleUploading(t){}}},g=m,v=(0,f.A)(g,r,s,!1,null,null,null),w=v.exports,y=i(9393);const b="getDPEData",D=function(t){const e={...t,urlParams:window.location.search,origin:"template"};window.parent.postMessage(e,"*")},U=async function(){return new Promise(((t,e)=>{let i=!1,a=setTimeout((()=>{i||(window.removeEventListener("message",n),e("timeout"))}),5e3);const n=e=>{if(e.data.action===b){i=!0,window.removeEventListener("message",n),clearTimeout(a);try{const i=JSON.parse(e.data.data);t(i.data)}catch(o){console.error("Error parsing DPE data",o),t(null)}}};D({action:b,data:window.location.search}),window.addEventListener("message",n)}))};a["default"].use(o()),a["default"].config.productionTip=!1,a["default"].prototype.$getData=()=>(console.log("===== getData ====="),new Promise(((t,e)=>{window.courseware.getData((e=>{console.log(e),t(e)}),"default_key")}))),a["default"].prototype.$getDPEData=U,a["default"].prototype.$setData=t=>{console.log("===== setData ====="),console.log(t),window.courseware.setData(t,null,"default_key")},a["default"].prototype.$echarts=y,new a["default"]({render:function(t){return t(w)}}).$mount("#app")}},e={};function i(a){var n=e[a];if(void 0!==n)return n.exports;var o=e[a]={id:a,loaded:!1,exports:{}};return t[a](o,o.exports,i),o.loaded=!0,o.exports}i.m=t,function(){i.amdO={}}(),function(){var t=[];i.O=function(e,a,n,o){if(!a){var r=1/0;for(c=0;c<t.length;c++){a=t[c][0],n=t[c][1],o=t[c][2];for(var s=!0,l=0;l<a.length;l++)(!1&o||r>=o)&&Object.keys(i.O).every((function(t){return i.O[t](a[l])}))?a.splice(l--,1):(s=!1,o<r&&(r=o));if(s){t.splice(c--,1);var u=n();void 0!==u&&(e=u)}}return e}o=o||0;for(var c=t.length;c>0&&t[c-1][2]>o;c--)t[c]=t[c-1];t[c]=[a,n,o]}}(),function(){i.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return i.d(e,{a:e}),e}}(),function(){i.d=function(t,e){for(var a in e)i.o(e,a)&&!i.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:e[a]})}}(),function(){i.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"===typeof window)return window}}()}(),function(){i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}}(),function(){i.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}}(),function(){i.nmd=function(t){return t.paths=[],t.children||(t.children=[]),t}}(),function(){var t={524:0};i.O.j=function(e){return 0===t[e]};var e=function(e,a){var n,o,r=a[0],s=a[1],l=a[2],u=0;if(r.some((function(e){return 0!==t[e]}))){for(n in s)i.o(s,n)&&(i.m[n]=s[n]);if(l)var c=l(i)}for(e&&e(a);u<r.length;u++)o=r[u],i.o(t,o)&&t[o]&&t[o][0](),t[o]=0;return i.O(c)},a=self["webpackChunkform_vue"]=self["webpackChunkform_vue"]||[];a.forEach(e.bind(null,0)),a.push=e.bind(null,a.push.bind(a))}();var a=i.O(void 0,[504],(function(){return i(2644)}));a=i.O(a)})();
//# sourceMappingURL=app.50d99513.js.map
\ No newline at end of file
This diff is collapsed.
(function(){"use strict";var t={9364:function(t,e,i){var a=i(5471),o=i(1052),n=i.n(o),r=function(){var t=this,e=t._self._c;return e("div",{attrs:{id:"app"}},[e("div",{staticStyle:{width:"500px"}},[e("el-form",{attrs:{"label-width":"80px"}},[e("el-form-item",{attrs:{label:"音频"}},[e("AudioUploader",{ref:"refAudioUploader",on:{change:t.save},model:{value:t.itemData.url,callback:function(e){t.$set(t.itemData,"url",e)},expression:"itemData.url"}})],1),e("el-form-item",{attrs:{label:"时长(秒)"}},[e("div",{staticStyle:{display:"flex"}},[e("el-input",{on:{change:t.save},model:{value:t.itemData.duration,callback:function(e){t.$set(t.itemData,"duration",e)},expression:"itemData.duration"}}),e("el-button",{staticClass:"btn",attrs:{type:"ghost",size:"mini"},on:{click:function(e){return t.updateDuration()}}},[t._v("更新")])],1)]),e("el-form-item",{attrs:{label:"大小"}},[e("el-input",{on:{change:t.save},model:{value:t.itemData.size,callback:function(e){t.$set(t.itemData,"size",e)},expression:"itemData.size"}})],1),t._l(t.configArr,(function(i,a){return e("div",{key:a},[e("el-form-item",{class:{warn:t.configArr[a]>t.itemData.duration},attrs:{label:`第${a+1}页`}},[e("div",{staticStyle:{display:"flex"}},[e("el-input",{model:{value:t.configArr[a].text,callback:function(e){t.$set(t.configArr[a],"text",e)},expression:"configArr[index].text"}}),e("el-button",{staticClass:"btn",attrs:{type:"ghost",size:"mini",icon:"el-icon-video-play"},on:{click:function(e){return t.playIndex(a)}}},[t._v("播放")]),e("el-button",{staticClass:"btn",attrs:{type:"primary",size:"mini",icon:"el-icon-place"},on:{click:function(e){return t.setTag(a)}}},[t._v("打点")]),e("el-button",{staticClass:"btn",attrs:{type:"danger",size:"mini",icon:"el-icon-delete"},on:{click:function(e){return t.deleteConf(a)}}},[t._v("删除")])],1)])],1)}))],2),e("div",{staticStyle:{padding:"10px","text-align":"center",border:"1px dashed #000000",cursor:"pointer"},on:{click:function(e){return t.addConfig()}}},[e("el-button",{staticClass:"btn",attrs:{type:"text",size:"mini",icon:"el-icon-plus"}},[t._v("新建打点")])],1)],1)])},s=[],l=function(){var t=this,e=t._self._c;return e("div",{staticStyle:{position:"relative",width:"360px",height:"80px"}},[e("el-upload",{staticStyle:{height:"100px"},attrs:{data:t.uploadData,action:t.uploadUrl,drag:"",accept:".mp3","show-file-list":!1,"on-success":t.handleUploadSuccess}},[e("i",{directives:[{name:"show",rawName:"v-show",value:!t.audioUrl,expression:"!audioUrl"}],staticClass:"el-icon-upload"}),e("div",{directives:[{name:"show",rawName:"v-show",value:!t.audioUrl,expression:"!audioUrl"}],staticClass:"el-upload__text"},[t._v("将MP3文件拖到此处,或"),e("em",[t._v("点击上传")])]),t.audioUrl?e("div",[e("audio",{ref:"refAudio",attrs:{src:t.audioUrl,controls:""}})]):t._e()]),t.audioUrl?e("div",{staticClass:"buttons"},[e("el-button",{attrs:{type:"ghost",size:"mini",icon:"el-icon-delete"},on:{click:t.deleteAudio}})],1):t._e()],1)},u=[],c=(i(5735),{name:"ImageUploader",props:{value:{type:String,default:""}},watch:{value:function(t,e){this.audioUrl=t}},data(){return{uploadUrl:"",uploadData:"",audioUrl:""}},created(){this.uploadUrl=window.courseware.uploadUrl(),this.uploadData=window.courseware.uploadData(),window["air"].getUploadCallback=(t,e)=>{this.uploadUrl=t,this.uploadData=e}},methods:{handleUploadSuccess(t){this.audioUrl=t.url,this.$emit("input",this.audioUrl),this.$emit("change",{url:this.audioUrl})},async download(){const t=this.audioUrl,e=t.split("/").pop(),i=await fetch(t);if(i.ok){const t=await i.blob(),a=window.URL.createObjectURL(t),o=document.createElement("a");o.href=a,o.download=e,document.body.appendChild(o),o.click(),this.$message({type:"success",message:"下载完成"})}else this.$message({type:"error",message:"下载失败"})},deleteAudio(){this.$confirm("确定要删除吗?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then((()=>{this.audioUrl="",this.$emit("input",""),this.$emit("change",{url:this.audioUrl})})).catch((()=>{}))},getAudioRef(){return this.$refs.refAudio}}}),d=c,f=i(1656),p=(0,f.A)(d,l,u,!1,null,"68f08346",null),h=p.exports,m={name:"App",components:{AudioUploader:h},data(){return{itemData:{url:"",duration:0,size:0,splitConfig:""},configArr:[],endConf:0}},async mounted(){this.getData()},methods:{async getData(){const t=await this.$getData();if(t){if(this.itemData=t,this.itemData.splitConfig){const t=this.itemData.splitConfig.split(",");this.configArr=[],t.forEach(((t,e)=>{this.configArr.push({text:t})}))}}else if(this.itemData={url:"",duration:0,size:0,splitConfig:""},this.itemData.splitConfig){const t=this.itemData.splitConfig.split(",");this.configArr=[],t.forEach(((t,e)=>{this.configArr.push({text:t})}))}},playScopeCallback(){const t=this.$refs.refAudioUploader.getAudioRef(),e=t.currentTime;e>=this.endConf&&(t.pause(),t.removeEventListener("timeupdate",this.playScopeCallback))},playIndex(t){const e=t-1<0?0:this.configArr[t-1].text,i=this.configArr[t].text,a=this.$refs.refAudioUploader.getAudioRef();a?(a.currentTime=e,this.endConf=i,a.removeEventListener("timeupdate",this.playScopeCallback),a.addEventListener("timeupdate",this.playScopeCallback),a.play()):this.$message({type:"error",message:"请先上传音频"})},setTag(t){const e=this.$refs.refAudioUploader.getAudioRef();e?(this.configArr[t].text=e.currentTime,this.save()):this.$message({type:"error",message:"请先上传音频"})},deleteConf(t){this.$confirm("确认删除该页吗?","提示",{confirmButtonText:"确定",cancelButtonText:"取消",type:"warning"}).then((()=>{this.configArr.splice(t,1),this.save()})).catch((()=>{this.$message({type:"info",message:"已取消删除"})}))},updateDuration(){this.$refs.refAudioUploader.getAudioRef();this.$refs.refAudioUploader.getAudioRef()?(this.itemData.duration=this.$refs.refAudioUploader.getAudioRef().duration,this.save()):this.$message({type:"error",message:"请先上传音频"})},addConfig(){const t=this.$refs.refAudioUploader.getAudioRef();this.configArr.push(t?t.currentTime:0),this.save()},save(){let t=[];this.configArr.forEach(((e,i)=>{t.push(e.text)})),this.itemData.splitConfig=t.join(","),this.$message({type:"success",message:"保存成功",duration:500}),this.$setData(this.itemData)}}},g=m,v=(0,f.A)(g,r,s,!1,null,null,null),y=v.exports,w=i(9393);const b="getDPEData",D=function(t){const e={...t,urlParams:window.location.search,origin:"template"};window.parent.postMessage(e,"*")},A=async function(){return new Promise(((t,e)=>{let i=!1,a=setTimeout((()=>{i||(window.removeEventListener("message",o),e("timeout"))}),5e3);const o=e=>{if(e.data.action===b){i=!0,window.removeEventListener("message",o),clearTimeout(a);try{const i=JSON.parse(e.data.data);t(i.data)}catch(n){console.error("Error parsing DPE data",n),t(null)}}};D({action:b,data:window.location.search}),window.addEventListener("message",o)}))};a["default"].use(n()),a["default"].config.productionTip=!1,a["default"].prototype.$getData=()=>(console.log("===== getData ====="),new Promise(((t,e)=>{window.courseware.getData((e=>{console.log(e),t(e)}),"default_key")}))),a["default"].prototype.$getDPEData=A,a["default"].prototype.$setData=t=>{console.log("===== setData ====="),console.log(t),window.courseware.setData(t,null,"default_key")},a["default"].prototype.$echarts=w,new a["default"]({render:function(t){return t(y)}}).$mount("#app")}},e={};function i(a){var o=e[a];if(void 0!==o)return o.exports;var n=e[a]={id:a,loaded:!1,exports:{}};return t[a](n,n.exports,i),n.loaded=!0,n.exports}i.m=t,function(){i.amdO={}}(),function(){var t=[];i.O=function(e,a,o,n){if(!a){var r=1/0;for(c=0;c<t.length;c++){a=t[c][0],o=t[c][1],n=t[c][2];for(var s=!0,l=0;l<a.length;l++)(!1&n||r>=n)&&Object.keys(i.O).every((function(t){return i.O[t](a[l])}))?a.splice(l--,1):(s=!1,n<r&&(r=n));if(s){t.splice(c--,1);var u=o();void 0!==u&&(e=u)}}return e}n=n||0;for(var c=t.length;c>0&&t[c-1][2]>n;c--)t[c]=t[c-1];t[c]=[a,o,n]}}(),function(){i.n=function(t){var e=t&&t.__esModule?function(){return t["default"]}:function(){return t};return i.d(e,{a:e}),e}}(),function(){i.d=function(t,e){for(var a in e)i.o(e,a)&&!i.o(t,a)&&Object.defineProperty(t,a,{enumerable:!0,get:e[a]})}}(),function(){i.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"===typeof window)return window}}()}(),function(){i.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)}}(),function(){i.r=function(t){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}}(),function(){i.nmd=function(t){return t.paths=[],t.children||(t.children=[]),t}}(),function(){var t={524:0};i.O.j=function(e){return 0===t[e]};var e=function(e,a){var o,n,r=a[0],s=a[1],l=a[2],u=0;if(r.some((function(e){return 0!==t[e]}))){for(o in s)i.o(s,o)&&(i.m[o]=s[o]);if(l)var c=l(i)}for(e&&e(a);u<r.length;u++)n=r[u],i.o(t,n)&&t[n]&&t[n][0](),t[n]=0;return i.O(c)},a=self["webpackChunkform_vue"]=self["webpackChunkform_vue"]||[];a.forEach(e.bind(null,0)),a.push=e.bind(null,a.push.bind(a))}();var a=i.O(void 0,[504],(function(){return i(9364)}));a=i.O(a)})();
//# sourceMappingURL=app.7a5cf174.js.map
\ No newline at end of file
This diff is collapsed.
...@@ -8,27 +8,29 @@ ...@@ -8,27 +8,29 @@
<el-form-item label="时长(秒)"> <el-form-item label="时长(秒)">
<div style="display: flex;"> <div style="display: flex;">
<el-input v-model="itemData.duration"></el-input> <el-input v-model="itemData.duration" @change="save"></el-input>
<el-button class="btn" type="ghost" size="mini" @click="updateDuration()">更新</el-button> <el-button class="btn" type="ghost" size="mini" @click="updateDuration()">更新</el-button>
</div> </div>
</el-form-item> </el-form-item>
<el-form-item label="大小"> <el-form-item label="大小">
<el-input v-model="itemData.size"></el-input> <el-input v-model="itemData.size" @change="save"></el-input>
</el-form-item> </el-form-item>
<template v-for="conf,index in configArr"> <div v-for="conf,index in configArr" :key="index">
<el-form-item :class="{'warn': configArr[index] > itemData.duration}" :label="`第${index+1}页`"> <el-form-item :class="{'warn': configArr[index] > itemData.duration}" :label="`第${index+1}页`">
<div style="display: flex;"> <div style="display: flex;">
<el-input v-model="configArr[index]"></el-input> <el-input v-model="configArr[index].text"></el-input>
<el-button class="btn" type="ghost" size="mini" @click="playIndex(index)" icon="el-icon-video-play">播放</el-button> <el-button class="btn" type="ghost" size="mini" @click="playIndex(index)" icon="el-icon-video-play">播放</el-button>
<el-button class="btn" type="primary" size="mini" @click="setTag(index)" icon="el-icon-place">打点</el-button> <el-button class="btn" type="primary" size="mini" @click="setTag(index)" icon="el-icon-place">打点</el-button>
<el-button class="btn" type="danger" size="mini" @click="deleteConf(index)" icon="el-icon-delete">删除</el-button> <el-button class="btn" type="danger" size="mini" @click="deleteConf(index)" icon="el-icon-delete">删除</el-button>
</div> </div>
</el-form-item> </el-form-item>
</template> </div>
</el-form> </el-form>
<el-button class="btn" type="danger" size="mini" @click="addConfig()" icon="el-icon-delete">新建</el-button> <div style="padding: 10px; text-align: center; border: 1px dashed #000000; cursor: pointer;" @click="addConfig()">
<el-button class="btn" type="text" size="mini"icon="el-icon-plus">新建打点</el-button>
</div>
</div> </div>
</div> </div>
</template> </template>
...@@ -63,18 +65,31 @@ export default { ...@@ -63,18 +65,31 @@ export default {
if(!res) { if(!res) {
// 默认数据 // 默认数据
this.itemData = { this.itemData = {
"url": "https://teach.cdn.ireadabc.com/066e70f0278240e000fd0b4e39d12ef9.mp3", "url": "",
"duration": 127.08, "duration": 0,
"size": 2033900, "size": 0,
"splitConfig": "23.361281,31.816778,40.853425,49.199478,57.893614,66.694963,75.30565,84.465703,93.306864,127.08" "splitConfig": ""
} }
if(this.itemData.splitConfig) { if(this.itemData.splitConfig) {
this.configArr = this.itemData.splitConfig.split(',') const configArr = this.itemData.splitConfig.split(',')
this.configArr = []
configArr.forEach((item, index) => {
this.configArr.push({
text: item,
})
})
} }
} else { } else {
this.itemData = res this.itemData = res
if(this.itemData.splitConfig) { if(this.itemData.splitConfig) {
this.configArr = this.itemData.splitConfig.split(',') const configArr = this.itemData.splitConfig.split(',')
this.configArr = []
configArr.forEach((item, index) => {
this.configArr.push({
text: item,
})
})
} }
} }
}, },
...@@ -91,23 +106,39 @@ export default { ...@@ -91,23 +106,39 @@ export default {
// 播放单页音频 // 播放单页音频
playIndex(index) { playIndex(index) {
const strConf = index - 1 < 0 ? 0 : this.configArr[index - 1] const strConf = index - 1 < 0 ? 0 : this.configArr[index - 1].text
const endConf = this.configArr[index] const endConf = this.configArr[index].text
const refAudio = this.$refs.refAudioUploader.getAudioRef(); const refAudio = this.$refs.refAudioUploader.getAudioRef();
refAudio.currentTime = strConf; if(refAudio) {
this.endConf = endConf; refAudio.currentTime = strConf;
refAudio.removeEventListener("timeupdate", this.playScopeCallback); this.endConf = endConf;
refAudio.addEventListener("timeupdate", this.playScopeCallback); refAudio.removeEventListener("timeupdate", this.playScopeCallback);
refAudio.addEventListener("timeupdate", this.playScopeCallback);
refAudio.play(); refAudio.play();
} else {
this.$message({
type: 'error',
message: '请先上传音频'
});
}
}, },
// 打点 // 打点
setTag(index) { setTag(index) {
const refAudio = this.$refs.refAudioUploader.getAudioRef(); const refAudio = this.$refs.refAudioUploader.getAudioRef();
this.configArr[index] = refAudio.currentTime; if(refAudio) {
this.save() this.configArr[index].text = refAudio.currentTime;
this.save()
} else {
this.$message({
type: 'error',
message: '请先上传音频'
});
}
}, },
// 删除 // 删除
...@@ -129,26 +160,39 @@ export default { ...@@ -129,26 +160,39 @@ export default {
// 更新时长 // 更新时长
updateDuration() { updateDuration() {
this.itemData.duration = this.$refs.refAudioUploader.getAudioRef().duration const refAudio = this.$refs.refAudioUploader.getAudioRef();
this.save() if(this.$refs.refAudioUploader.getAudioRef()) {
this.itemData.duration = this.$refs.refAudioUploader.getAudioRef().duration
this.save()
} else {
this.$message({
type: 'error',
message: '请先上传音频'
});
}
}, },
// 添加新的配置 // 添加新的配置
addConfig() { addConfig() {
const refAudio = this.$refs.refAudioUploader.getAudioRef(); const refAudio = this.$refs.refAudioUploader.getAudioRef();
this.configArr.push(refAudio.currentTime) this.configArr.push(refAudio ? refAudio.currentTime : 0)
this.save() this.save()
}, },
// 保存数据 // 保存数据
save() { save() {
this.itemData.splitConfig = this.configArr.join(',') let temp = []
this.configArr.forEach((item, index) => {
temp.push(item.text)
})
this.itemData.splitConfig = temp.join(',')
this.$message({
type: 'success',
message: '保存成功',
duration: 500
});
this.$setData(this.itemData) this.$setData(this.itemData)
}, },
handleUploading(progress) {
}
} }
} }
</script> </script>
......
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<!-- 音频预览 --> <!-- 音频预览 -->
<div v-if="audioUrl" > <div v-if="audioUrl" >
<audio :src="audioUrl" controls></audio> <audio ref="refAudio" :src="audioUrl" controls></audio>
</div> </div>
</el-upload> </el-upload>
...@@ -107,6 +107,9 @@ export default { ...@@ -107,6 +107,9 @@ export default {
}); });
}, },
getAudioRef() {
return this.$refs.refAudio;
}
}, },
} }
......
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