<template>
<div class="editor">
<el-container>
<div class="head-top">
缩放：<el-input-number v-model="bigNum" size="mini" :min="30" :max="150" :step="10"></el-input-number>
</div>
<el-button class="head-edit" type="default" @click="setOpen()">
编辑当前页参数
</el-button>
<el-header>
<div class="head-content">
<div v-if="selectedMould.length > 0">
{{ selectedMould[nowIndex].title }}
</div>
</div>
</el-header>
<el-container>
<el-aside width="150px" class="aside-block">
<div class="page-list">
<div class="card-item" v-for="(data,index) in selectedMould" :key="index" >
<div class="list2-btn">
<i class="iconfont icon-shanchu" @click="delMould(index)"></i>
</div>
<div @click="chooseThat(index)">
<el-card shadow="hover" :class="nowIndex === index ? 'border' : ''" :body-style="{ padding: '0px' }">
<div class="dialog-card">
序号：{{index}}
</div>
<img :src="data.imgUrl" class="image">
</el-card>
</div>
</div>
</div>
</el-aside>
<el-main>
<!--爸妈看一看1-->
<div v-if="selectedMould.length > 0 && selectedMould[nowIndex] && selectedMould[nowIndex].key === 'look1'">
<div class="look1" :style="{backgroundImage:`url(${mouldImg.look1.bg}`,transform:`scale(${bigNum/100},${bigNum/100})`}">
<div class="bg-block">
<img :src="mouldImg.look1.reqiqiu" class="reqiqiu"/>
<img :src="mouldImg.look1.qiqiu" class="qiqiu"/>
<img :src="mouldImg.look1.feiji" class="feiji"/>
<div>
<img :src="mouldImg.look1.title1"/>
</div>
<div class="radio">
<img :src="mouldImg.look1.r1" class="r1">
<img :src="mouldImg.look1.r2" class="r2" v-show="lookAudioType">
<img :src="mouldImg.look1.playing" class="r2" v-show="!lookAudioType">
<img :src="mouldImg.look1.r3" class="r3">
<img :src="mouldImg.look1.rp" class="rp" @click="playLook1Audio" v-show="lookAudioType">
<img :src="mouldImg.look1.rs" class="rs" @click="stopLook1Audio" v-show="!lookAudioType">
</div>
<!--<img :src="mouldImg.look1.radio" @click="$refs.audio.play()"/>-->
<audio ref="audio" v-if="selectedMould[nowIndex].content.radio.length>0" :src="selectedMould[nowIndex].content.radio[0].url"></audio>
<div class="today-block">
<img :src="mouldImg.look1.tadayBg"/>
<div class="today-text">
<div class="zhanwei1"></div>
<div class="zhanwei2"></div>
<div class="zhanwei3"></div>
<div v-html="formatBr(selectedMould[nowIndex].content.today)">
</div>
</div>
</div>
<div class="title2-block">
<img :src="mouldImg.look1.title2" class="title2"/>
<div class="directory-text">
<div v-html="formatBr(selectedMould[nowIndex].content.directory)">
</div>
</div>
</div>
</div>
<div class="bottom-block">
<img :src="mouldImg.look1.bank"/>
<img :src="mouldImg.look1.go" v-if="selectedMould[nowIndex].content.nextIndex !== -1"/>
</div>
</div>
</div>
<!--音频1-->
<div v-if="selectedMould[nowIndex] && selectedMould[nowIndex].key === 'radio1'">
<div class="look1 radio1" :style="{backgroundImage:`url(${selectedMould[nowIndex].content.titleType === 0 ? mouldImg.radio1.bg:mouldImg.radio1.moerduoBg}`,transform:`scale(${bigNum/100},${bigNum/100})`}">
<div class="bg-block" :style="{backgroundImage:`url(${mouldImg.radio1.contentBg}`}">
<img :src="mouldImg.radio1.tabVideo" class="tab-video-img" v-if="selectedMould[nowIndex].content.tabVideo.type"/>
<div>
<img :src="mouldImg.radio1.title" v-if="selectedMould[nowIndex].content.titleType === 0"/>
<img :src="mouldImg.radio1.moerduo" v-if="selectedMould[nowIndex].content.titleType === 1"/>
</div>
<div>
<img :src="mouldImg.radio1.CD"/>
</div>
<audio ref="audio" v-if="selectedMould[nowIndex].content.radio[radioLenth]" :src="selectedMould[nowIndex].content.radio[radioLenth].url" @timeupdate="updateTime"></audio>
<div class="name-block">
<div class="name">
<span v-if="selectedMould[nowIndex].content.radio[radioLenth]">{{selectedMould[nowIndex].content.radio[0].title}}</span>
</div>
<div class="ahtor">
<span v-if="selectedMould[nowIndex].content.radio[radioLenth]">{{selectedMould[nowIndex].content.radio[0].lable}}</span>
</div>
</div>
<div class="play-block">
<img :src="mouldImg.radio1.loading"/>
<div class="radius-icon" :style="{left:audioLeft}"></div>
</div>
<div class="btn-block">
<img :src="mouldImg.radio1.near" @click="dRadio()"/>
<img :src="mouldImg.radio1.play" class="play" @click="playLook1Audio" v-if="lookAudioType"/>
<img :src="mouldImg.radio1.stop" class="play" @click="stopLook1Audio" v-if="!lookAudioType"/>
<img :src="mouldImg.radio1.next" @click="aRadio()"/>
</div>
</div>
<div class="bottom-block" v-if="selectedMould[nowIndex].content.buttonType === 0">
<img :src="mouldImg.radio1.backLookBtn"/>
<img :src="mouldImg.radio1.showBtn"/>
</div>
<div class="bottom-block" v-if="selectedMould[nowIndex].content.buttonType === 1">
<img :src="mouldImg.radio1.last"/>
<img :src="mouldImg.radio1.finishBtn"/>
</div>
<div class="bottom-block" v-if="selectedMould[nowIndex].content.buttonType === 2">
<img :src="mouldImg.radio1.last"/>
<img :src="mouldImg.radio1.nextBtn"/>
</div>
<div class="bottom-block" v-if="selectedMould[nowIndex].content.buttonType === 3">
<img :src="mouldImg.radio1.backPlayBtn"/>
<img :src="mouldImg.radio1.nextBtn" v-if="selectedMould[nowIndex].content.nextIndex !== -1"/>
</div>
</div>
</div>
<!--视频玩一玩1-->
<div v-if="selectedMould[nowIndex] && selectedMould[nowIndex].key === 'play1'">
<div class="look1 play1" :style="{backgroundImage:`url(${mouldImg.play1.bg}`,transform:`scale(${bigNum/100},${bigNum/100})`}">
<div class="bg-block">
<div class="video-block">
<div class="icon-class" v-if="playVideoType">
<img :src="mouldImg.play1.play" @click="playVideo()"/>
</div>
<video
style="width: 100%"
ref="video"
:controls="!playVideoType"
v-if="selectedMould[nowIndex].content.videoUrl.length > 0"
:poster="selectedMould[nowIndex].content.banner[0] ? selectedMould[nowIndex].content.banner[0].url : '' "
:src="selectedMould[nowIndex].content.videoUrl[0].url"></video>
</div>
<img :src="mouldImg.play1.radio" class="radio-img"/>
<img :src="mouldImg.play1.backBtn" class="btn back"/>
<img :src="mouldImg.play1.next" class="btn next" v-if="selectedMould[nowIndex].content.nextIndex !== -1"/>
</div>
</div>
</div>
<!--爸妈秀宝贝1-->
<div v-if="selectedMould[nowIndex] && selectedMould[nowIndex].key === 'show1'">
<div class="look1 show1" :style="{backgroundImage:`url(${mouldImg.show1.bg}`,transform:`scale(${bigNum/100},${bigNum/100})`}">
<img :src="mouldImg.show1.riji" class="riji"/>
<img :src="mouldImg.show1.yeziyou" class="yeziyou"/>
<img :src="mouldImg.show1.yezizuo" class="yezizuo"/>
<img :src="mouldImg.show1.zhaopianqiang" class="zhaopianqiang"/>
<div class="bg-block" :style="{backgroundImage:`url(${mouldImg.show1.contentBg}`}">
<div class="title-block">
<img :src="mouldImg.show1.title"/>
</div>
<div class="textarea">
<div class="btn-block">
<img :src="mouldImg.show1.radioIcon"/>
<img :src="mouldImg.show1.imgIcon"/>
<img :src="mouldImg.show1.videoIcon"/>
</div>
</div>
<div class="text-block">
解释说明：
<div class="text-content">
各位爸爸妈妈，记得在每日完成学习后记录宝宝一天的学习过程哦！养成良好的学习习惯也是很重要的一环，记录并分享后更可以获得
<span style="color: #333">唱学加油包</span>哦！
</div>
</div>
<div class="sub-block">
<img :src="mouldImg.show1.subBtn">
</div>
</div>
<div class="bottom-block">
<img :src="mouldImg.show1.backBtn"/>
<img :src="mouldImg.show1.jiayoubao" v-if="selectedMould[nowIndex].content.nextIndex !== -1"/>
</div>
</div>
</div>
<!--唱学加油包1-->
<div v-if="selectedMould[nowIndex] && selectedMould[nowIndex].key === 'refueling1'">
<div class="look1 refueling1" :style="{backgroundImage:`url(${mouldImg.refueling1.bg}`,transform:`scale(${bigNum/100},${bigNum/100})`}">
<div class="bg-block">
<audio ref="audio" v-if="selectedMould[nowIndex].content.radio[0]" :src="selectedMould[nowIndex].content.radio[0].url"></audio>
<img :src="mouldImg.refueling1.title">
<div class="content-img">
<img :src="selectedMould[nowIndex].content.banner[0] ? selectedMould[nowIndex].content.banner[0].url :''" style="width: 100%">
<img :src="mouldImg.refueling1.radio" class="radio-icon" @click="playJiayou()">
</div>
</div>
<div class="bottom-block">
<img :src="mouldImg.refueling1.backBtn"/>
<img :src="mouldImg.refueling1.next" v-if="selectedMould[nowIndex].content.nextIndex !== -1"/>
</div>
</div>
</div>
<!--唱学加油包2-->
<div v-if="selectedMould[nowIndex] && selectedMould[nowIndex].key === 'refueling2'">
<div class="look1 refueling2" :style="{backgroundImage:`url(${mouldImg.refueling2.bg}`,transform:`scale(${bigNum/100},${bigNum/100})`}">
<div class="bg-block">
<audio ref="audio" v-if="selectedMould[nowIndex].content.radio[0]" :src="selectedMould[nowIndex].content.radio[0].url"></audio>
<img :src="mouldImg.refueling2.title" v-if="!selectedMould[nowIndex].content.title || selectedMould[nowIndex].content.title===0 " class="title">
<img :src="mouldImg.radio1.title" v-if="selectedMould[nowIndex].content.title===1 " class="title">
<div class="content-img" :style="{backgroundImage:selectedMould[nowIndex].content.banner[0] ? `url(${selectedMould[nowIndex].content.banner[0].url}`:''}">
<img :src="mouldImg.refueling2.radio" class="radio-icon" @click="playJiayou()">
<img :src="mouldImg.refueling2.back" class="left-icon"/>
<img :src="mouldImg.refueling2.next" class="right-icon" v-if="selectedMould[nowIndex].content.nextIndex !== -1"/>
</div>
</div>
</div>
</div>
</el-main>
</el-container>
</el-container>
<el-dialog
:title="`编辑序号${nowIndex}页参数`"
:visible.sync="dialogVisible"
:modal="false"
width="800px">
<!--爸妈看一看1-->
<el-form label-width="100px" v-if="selectedMould[nowIndex] && selectedMould[this.nowIndex].key === 'look1'">
<el-form-item label="模块">
<el-select v-model="selectedMould[nowIndex].name" placeholder="请选择">
<el-option
label="爸妈看一看"
:value="1">
</el-option>
<el-option
label="宝贝玩一玩"
:value="2">
</el-option>
<el-option
label="宝贝成长秀"
:value="3">
</el-option>
<el-option
label="多元趣味课"
:value="4">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="音频">
<el-button type="success" size="small" v-if="!urlShow" @click="urlShow = true">
地址输入
</el-button>
<el-button type="success" size="small" v-if="urlShow" @click="urlShow = false">
素材上传
</el-button>
</el-form-item>
<el-form-item v-if="!urlShow">
<el-upload
class="upload-demo"
action="/api/public/upload"
:on-remove="removeFileRadio2"
:http-request="uploadFileRadio2"
multiple
:disabled="(fileUid && progress < 99)"
:file-list="selectedMould[nowIndex].content.radio">
<el-button size="small" type="primary" :disabled="(fileUid && progress < 99)">点击上传</el-button>
<div style="width: 300px">
<el-progress v-if="fileUid" :percentage="progress"></el-progress>
</div>
</el-upload>
</el-form-item>
<el-form-item v-if="urlShow">
<el-input v-model="selectedMould[nowIndex].content.radio[0].url" v-if="selectedMould[nowIndex].content.radio[0]" @change="urlChangeAudio" placeholder="请输入音频地址"></el-input>
<el-input v-if="!selectedMould[nowIndex].content.radio[0]" placeholder="请输入音频地址" @change="urlChangeAudio"></el-input>
</el-form-item>
<el-form-item label="今日目标">
<el-input type="textarea" rows="8" v-model="selectedMould[nowIndex].content.today" placeholder="今日目标换行输入<br>"></el-input>
</el-form-item>
<el-form-item label="陪玩指南">
<el-input type="textarea" rows="8" v-model="selectedMould[nowIndex].content.directory" placeholder="陪玩指南换行输入<br>"></el-input>
</el-form-item>
<el-form-item label="下一页序号">
<el-select v-model="selectedMould[nowIndex].content.nextIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
<el-option
label="无"
:value="-1">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="停留时长">
<el-input-number v-model="selectedMould[nowIndex].content.timeLang"></el-input-number>
</el-form-item>
</el-form>
<!--音频1-->
<el-form label-width="100px" v-if="selectedMould[nowIndex] && selectedMould[this.nowIndex].key === 'radio1'">
<el-form-item label="模块">
<el-select v-model="selectedMould[nowIndex].name" placeholder="请选择">
<el-option
label="爸妈看一看"
:value="1">
</el-option>
<el-option
label="宝贝玩一玩"
:value="2">
</el-option>
<el-option
label="宝贝成长秀"
:value="3">
</el-option>
<el-option
label="多元趣味课"
:value="4">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="音频">
<el-button type="success" size="small" v-if="!urlShow" @click="urlShow = true">
地址输入
</el-button>
<el-button type="success" size="small" v-if="urlShow" @click="urlShow = false">
素材上传
</el-button>
</el-form-item>
<el-form-item v-if="!urlShow">
<el-upload
class="upload-demo"
action="/api/public/upload"
:on-remove="removeFileRadio2"
:http-request="uploadFileRadio2"
multiple
:disabled="(fileUid && progress < 99)"
:file-list="selectedMould[nowIndex].content.radio">
<el-button size="small" type="primary" :disabled="(fileUid && progress < 99)">点击上传</el-button>
<div style="width: 300px">
<el-progress v-if="fileUid" :percentage="progress"></el-progress>
</div>
</el-upload>
</el-form-item>
<el-form-item v-if="urlShow">
<el-input
v-for="(data,index) in selectedMould[nowIndex].content.radio"
style="margin-bottom: 10px"
v-model="selectedMould[nowIndex].content.radio[index].url"
:key="index"
@change="urlChangeAudioMore($event,index)"
placeholder="请输入音频地址"></el-input>
<el-button size="mini" type="success" @click="addRadio()">添加</el-button>
</el-form-item>
<div v-for="(data,index) in selectedMould[nowIndex].content.radio">
<el-form-item label="音频名字">
<el-input v-model="data.title" placeholder="请输入音频显示标题"></el-input>
</el-form-item>
<el-form-item label="音频作者">
<el-input v-model="data.lable" placeholder="请输入音频来源作者"></el-input>
</el-form-item>
</div>
<el-form-item label="上一步序号">
<el-select v-model="selectedMould[nowIndex].content.lastIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="下一步序号">
<el-select v-model="selectedMould[nowIndex].content.nextIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
<el-option
label="无"
:value="-1">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="标题类型">
<el-select v-model="selectedMould[nowIndex].content.titleType" placeholder="请选择">
<el-option
:value="0"
label="宝贝玩一玩">
</el-option>
<el-option
:value="1"
label="磨耳朵">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="按钮组">
<el-select v-model="selectedMould[nowIndex].content.buttonType" placeholder="请选择">
<el-option
:value="0"
label="返回看一看 + 爸妈秀宝贝">
</el-option>
<el-option
:value="1"
label="上一页 + 完成今日学习">
</el-option>
<el-option
:value="2"
label="上一页 + 下一页">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="视频切换">
<el-switch v-model="selectedMould[nowIndex].content.tabVideo.type">
</el-switch>
</el-form-item>
<el-form-item label="视频目标" v-if="selectedMould[nowIndex].content.tabVideo.type">
<el-select v-model="selectedMould[nowIndex].content.tabVideo.index" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="停留时长">
<el-input-number v-model="selectedMould[nowIndex].content.timeLang"></el-input-number>
</el-form-item>
</el-form>
<!--视频玩一玩1-->
<el-form label-width="100px" v-if="selectedMould[nowIndex] && selectedMould[this.nowIndex].key === 'play1'">
<el-form-item label="模块">
<el-select v-model="selectedMould[nowIndex].name" placeholder="请选择">
<el-option
label="爸妈看一看"
:value="1">
</el-option>
<el-option
label="宝贝玩一玩"
:value="2">
</el-option>
<el-option
label="宝贝成长秀"
:value="3">
</el-option>
<el-option
label="多元趣味课"
:value="4">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="音频">
<el-button type="success" size="small" v-if="!urlShow" @click="urlShow = true">
地址输入
</el-button>
<el-button type="success" size="small" v-if="urlShow" @click="urlShow = false">
素材上传
</el-button>
</el-form-item>
<el-form-item v-if="!urlShow">
<el-upload
class="upload-demo"
action="/api/public/upload"
:http-request="uploadFileVideo"
:on-remove="removeFileVideoUrl"
:on-exceed="handleExceed"
multiple
:limit="1"
:disabled="(fileUid && progress < 99)"
:file-list="selectedMould[nowIndex].content.videoUrl">
<el-button size="small" type="primary" :disabled="(fileUid && progress < 100)">点击上传</el-button>
<div style="width: 300px">
<el-progress v-if="fileUid" :percentage="progress"></el-progress>
</div>
</el-upload>
</el-form-item>
<el-form-item v-if="urlShow">
<el-input v-model="selectedMould[nowIndex].content.videoUrl[0].url" v-if="selectedMould[nowIndex].content.videoUrl[0]" @change="urlChangeVidoe" placeholder="请输入视频地址"></el-input>
<el-input v-if="!selectedMould[nowIndex].content.videoUrl[0]" placeholder="请输入视频地址" @change="urlChangeVidoe"></el-input>
</el-form-item>
<el-form-item label="视频封面">
<el-upload
class="upload-demo"
action="/api/public/upload"
:http-request="uploadFileVideo1Banner"
:on-remove="removeFileBanner"
:on-exceed="handleExceed"
list-type="picture-card"
multiple
:limit="1"
:disabled="(fileUid && progress < 99)"
:file-list="selectedMould[nowIndex].content.banner">
</el-upload>
</el-form-item>
<el-form-item label="是否切换">
<el-switch v-model="selectedMould[nowIndex].content.tabRadio.type">
</el-switch>
</el-form-item>
<el-form-item label="切换目标" v-if="selectedMould[nowIndex].content.tabRadio.type">
<el-select v-model="selectedMould[nowIndex].content.tabRadio.index" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="上一步序号">
<el-select v-model="selectedMould[nowIndex].content.lastIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="下一步序号">
<el-select v-model="selectedMould[nowIndex].content.nextIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
<el-option
label="无"
:value="-1">
</el-option>
</el-select>
</el-form-item>
</el-form>
<!--唱学加油包1-->
<el-form label-width="100px" v-if="selectedMould[nowIndex] && selectedMould[this.nowIndex].key === 'refueling1'">
<el-form-item label="模块">
<el-select v-model="selectedMould[nowIndex].name" placeholder="请选择">
<el-option
label="爸妈看一看"
:value="1">
</el-option>
<el-option
label="宝贝玩一玩"
:value="2">
</el-option>
<el-option
label="宝贝成长秀"
:value="3">
</el-option>
<el-option
label="多元趣味课"
:value="4">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="音频">
<el-button type="success" size="small" v-if="!urlShow" @click="urlShow = true">
地址输入
</el-button>
<el-button type="success" size="small" v-if="urlShow" @click="urlShow = false">
素材上传
</el-button>
</el-form-item>
<el-form-item v-if="!urlShow">
<el-upload
class="upload-demo"
action="/api/public/upload"
:on-remove="removeFileRadio2"
:http-request="uploadFileRadio2"
multiple
:disabled="(fileUid && progress < 99)"
:file-list="selectedMould[nowIndex].content.radio">
<el-button size="small" type="primary" :disabled="(fileUid && progress < 99)">点击上传</el-button>
<div style="width: 300px">
<el-progress v-if="fileUid" :percentage="progress"></el-progress>
</div>
</el-upload>
</el-form-item>
<el-form-item v-if="urlShow">
<el-input v-model="selectedMould[nowIndex].content.radio[0].url" v-if="selectedMould[nowIndex].content.radio[0]" @change="urlChangeAudio" placeholder="请输入音频地址"></el-input>
<el-input v-if="!selectedMould[nowIndex].content.radio[0]" placeholder="请输入音频地址" @change="urlChangeAudio"></el-input>
</el-form-item>
<el-form-item label="图片">
<el-upload
class="upload-demo"
action="/api/public/upload"
:http-request="uploadFileVideo1Banner"
list-type="picture-card"
:on-remove="removeFileBanner"
multiple
:on-exceed="handleExceed"
:limit="1"
:disabled="(fileUid && progress < 99)"
:file-list="selectedMould[nowIndex].content.banner">
</el-upload>
</el-form-item>
<el-form-item label="上一步序号">
<el-select v-model="selectedMould[nowIndex].content.lastIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="下一步序号">
<el-select v-model="selectedMould[nowIndex].content.nextIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
<el-option
label="无"
:value="-1">
</el-option>
</el-select>
</el-form-item>
</el-form>
<!--唱学加油包2-->
<el-form label-width="100px" v-if="selectedMould[nowIndex] && selectedMould[this.nowIndex].key === 'refueling2'">
<el-form-item label="模块">
<el-select v-model="selectedMould[nowIndex].name" placeholder="请选择">
<el-option
label="爸妈看一看"
:value="1">
</el-option>
<el-option
label="宝贝玩一玩"
:value="2">
</el-option>
<el-option
label="宝贝成长秀"
:value="3">
</el-option>
<el-option
label="多元趣味课"
:value="4">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="音频">
<el-button type="success" size="small" v-if="!urlShow" @click="urlShow = true">
地址输入
</el-button>
<el-button type="success" size="small" v-if="urlShow" @click="urlShow = false">
素材上传
</el-button>
</el-form-item>
<el-form-item v-if="!urlShow">
<el-upload
class="upload-demo"
action="/api/public/upload"
:on-remove="removeFileRadio2"
:http-request="uploadFileRadio2"
multiple
:disabled="(fileUid && progress < 99)"
:file-list="selectedMould[nowIndex].content.radio">
<el-button size="small" type="primary" :disabled="(fileUid && progress < 99)">点击上传</el-button>
<div style="width: 300px">
<el-progress v-if="fileUid" :percentage="progress"></el-progress>
</div>
</el-upload>
</el-form-item>
<el-form-item v-if="urlShow">
<el-input v-model="selectedMould[nowIndex].content.radio[0].url" v-if="selectedMould[nowIndex].content.radio[0]" @change="urlChangeAudio" placeholder="请输入音频地址"></el-input>
<el-input v-if="!selectedMould[nowIndex].content.radio[0]" placeholder="请输入音频地址" @change="urlChangeAudio"></el-input>
</el-form-item>
<el-form-item label="图片">
<el-upload
class="upload-demo"
action="/api/public/upload"
:http-request="uploadFileVideo1Banner"
list-type="picture-card"
:on-remove="removeFileBanner"
multiple
:on-exceed="handleExceed"
:limit="1"
:disabled="(fileUid && progress < 99)"
:file-list="selectedMould[nowIndex].content.banner">
</el-upload>
</el-form-item>
<el-form-item label="标题">
<el-select v-model="selectedMould[nowIndex].content.title" placeholder="请选择">
<el-option
label="多元趣味课"
:value="0">
</el-option>
<el-option
label="宝贝玩一玩"
:value="1">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="上一步序号">
<el-select v-model="selectedMould[nowIndex].content.lastIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="下一步序号">
<el-select v-model="selectedMould[nowIndex].content.nextIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
<el-option
label="无"
:value="-1">
</el-option>
</el-select>
</el-form-item>
</el-form>
<!--爸妈秀宝贝1-->
<el-form label-width="100px" v-if="selectedMould[nowIndex] && selectedMould[this.nowIndex].key === 'show1'">
<el-form-item label="模块">
<el-select v-model="selectedMould[nowIndex].name" placeholder="请选择">
<el-option
label="爸妈看一看"
:value="1">
</el-option>
<el-option
label="宝贝玩一玩"
:value="2">
</el-option>
<el-option
label="宝贝成长秀"
:value="3">
</el-option>
<el-option
label="多元趣味课"
:value="4">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="说明文字">
<el-input type="textarea" :rows="3" v-model="selectedMould[nowIndex].content.text"></el-input>
</el-form-item>
<el-form-item label="解锁限制">
<el-switch v-model="selectedMould[nowIndex].content.check">
</el-switch>
</el-form-item>
<el-form-item label="上一步序号">
<el-select v-model="selectedMould[nowIndex].content.lastIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="下一步序号">
<el-select v-model="selectedMould[nowIndex].content.nextIndex" placeholder="请选择">
<el-option
v-for="(item,index) in selectedMould"
:key="index"
:label="index"
:value="index">
</el-option>
<el-option
label="无"
:value="-1">
</el-option>
</el-select>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer" style="text-align: center">
<!--<el-button type="default" @click="dialogVisible = false">取消</el-button>-->
<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
</span>
</el-dialog>
</div>
</template>
<script>
import mouldImg from '../../util/mouldImgUrl'
import {uploadFileApi} from "../../service/api";
export default {
name: "editor",
props:[
'selectedMould',
'editorObj'
],
data(){
return {
// 放大缩小参数
bigNum:50,
// 弹窗参数
dialogVisible:false,
// 当前对象下标
nowIndex:0,
// 模板图片集
mouldImg:mouldImg,
// 文件上传Uid
fileUid:null,
// radio播放标志
lookAudioType:true,
// 播放进度
audioLeft:0,
// 音频下标
radioLenth:0,
// 视频播放
playVideoType:true,
// url选择标志
urlShow:true
}
},
mounted(){
},
computed:{
progress(){
return this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num <100 ? this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num : 100
}
},
methods:{
initPage(){
switch (this.editorObj.type) {
case 0:
this.selectedMould=[]
}
},
playVideo(){
this.playVideoType = false;
this.$refs.video.play()
},
playLook1Audio(){
this.$refs.audio.play();
this.lookAudioType = false
},
playJiayou(){
if(this.$refs.audio.paused){
this.$refs.audio.play()
}else{
this.$refs.audio.pause()
}
},
// 暂停看一看音频
stopLook1Audio(){
this.$refs.audio.pause();
this.lookAudioType = true
},
formatBr(str){
str = str.replace(/\r\n/g,"<br/>");
str = str.replace(/\n/g,"<br/>");
str = str.replace(/\r/g,"<br/>");
return str
},
setOpen(){
if ( !this.selectedMould[this.nowIndex]){
this.$message.info('请先选泽模版！');
} else {
this.dialogVisible = true;
}
},
// 上传Banner
uploadFileVideo1Banner(a){
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.selectedMould[this.nowIndex].content.banner[0] = {name:res.name,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''};
this.$store.dispatch('setProgress',{type:'delete',id:a.file.uid});
this.fileUid=null
})
},
// 删除文件
removeFileVideoUrl(a,b){
this.selectedMould[this.nowIndex].content.videoUrl = [];
this.fileUid=null
},
removeFileBanner(a,b){
this.selectedMould[this.nowIndex].content.banner = [];
this.fileUid=null
},
removeFileRadio(a,b){
this.selectedMould[this.nowIndex].content.radio = [];
this.fileUid=null
},
removeFileRadio2(a,b){
this.selectedMould[this.nowIndex].content.radio = b;
this.fileUid=null
},
// 上传音频
uploadFileRadio(a){
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
this.fileUid = a.file.uid;
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.selectedMould[this.nowIndex].content.radio[0] = {name:res.name,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''};
this.$store.dispatch('setProgress',{type:'delete',id:a.file.uid});
this.fileUid=null
})
},
// 上传多个音频
uploadFileRadio2(a){
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
this.fileUid = a.file.uid;
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.selectedMould[this.nowIndex].content.radio.push({name:res.name,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''});
this.$store.dispatch('setProgress',{type:'delete',id:a.file.uid});
this.fileUid=null
})
},
// 上传视频
uploadFileVideo(a){
this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
this.fileUid = a.file.uid;
uploadFileApi({file:a.file,type:'local'}).then(res=>{
this.$message({
type: 'success',
message: '上传成功!'
});
this.selectedMould[this.nowIndex].content.videoUrl[0]= {name:res.name,url:process.env.IMAGE_URL_HEAD + res.url,title:'',lable:''};
this.$store.dispatch('setProgress',{type:'delete',id:a.file.uid});
this.fileUid=null
})
},
// 列表选择
chooseThat(data){
this.nowIndex = data;
},
// 超出个数显示
handleExceed(){
this.$message.error('超出文件限制个数');
},
updateTime(e){
let time = e.target.currentTime / e.target.duration * 544;
this.audioLeft = time + 'px';
if(e.target.currentTime === e.target.duration ){
this.playAudioType = false
}
},
delMould(index){
this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(() => {
this.selectedMould.splice(index,1);
if(this.nowIndex > this.selectedMould.length - 1){
this.nowIndex = 0;
}
});
},
// 切换音频+
aRadio(){
if(this.radioLenth <this.selectedMould[this.nowIndex].content.radio.length - 1){
this.radioLenth ++;
this.playAudioType = false;
this.audioLeft = 0;
}else{
}
},
// 切换音频-
dRadio(){
if(this.radioLenth>0){
this.radioLenth --;
this.playAudioType = false;
this.audioLeft = 0;
}else{
}
},
urlChangeAudio(e){
let a = e.split('/');
this.selectedMould[this.nowIndex].content.radio[0] = {name:a[a.length-1],url:e}
},
urlChangeVidoe(e){
let a = e.split('/');
this.selectedMould[this.nowIndex].content.videoUrl[0] = {name:a[a.length-1],url:e}
},
addRadio(){
this.selectedMould[this.nowIndex].content.radio.push({name:'',url:''})
},
urlChangeAudioMore(e,index){
let a = e.split('/');
this.selectedMould[this.nowIndex].content.radio[index] = {name:a[a.length-1],url:e}
}
},
watch:{
'selectedMould':{
handler(newValue, oldValue) {
this.pageList = newValue
},
deep: true
}
},
}
</script>
<style>
.el-upload{
text-align: left;
}
</style>
<style scoped lang="less">
@import "../../util/public";
.editor{
height: 100%;
}
.aside-block{
height: 100%;
overflow: scroll;
}
.el-container{
position: relative;
background: white;
height: 100%;
.head-top{
background: #f5f8ff;
font-size: 14px;
color: #333333;
padding: 5px;
position: absolute;
top: -102px;
left: 50%;
width: 182px;
margin-left: -91px;
.page-type{
display: inline-block;
padding: 0 10px;
}
}
.head-edit{
position: absolute;
top: -49px;
left: 190px;
width: 182px;
margin-left: 0;
}
.el-header{
padding: 0;
.head-content{
padding: 10px;
text-align: center;
line-height: 60px;
font-size: 18px;
}
}
.page-list{
padding: 10px 0;
.el-card{
margin: 15px 0;
position: relative;
.dialog-card{
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
text-align: center;
padding: 20px;
background: rgba(0,0,0,0.3);
color: white;
font-size: 18px;
}
img{
width: 100%;
}
}
}
}
.plus-radio{
text-align: center;
margin: 10px;
padding: 5px;
border-radius: 8px;
font-size: 20px;
cursor: pointer;
border: 3px dashed #cccccc;
}
.look1{
transform-origin:50% 0;
width: 750px;
height: 1334px;
overflow-x: hidden;
overflow-y: auto;
margin: auto;
position: relative;
&.play1{
.bg-block{
width:1094px ;
height: 568px;
transform-origin: 340px 355px;
transform: rotate(90deg);
padding: 20px;
.radio-img{
position: absolute;
right: 10px;
top: 20px;
width: 80px;
}
.btn{
width: 60px;
position: absolute;
right: 10px;
bottom: 40px;
&.back{
bottom:120px
}
}
.video-block{
background: black;
border-radius: 8px;
height: 570px;
width: 1012px;
position: relative;
.icon-class{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
background: rgba(0,0,0,0.3);
}
img{
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
}
video{
width: 1000px;
}
}
}
}
&.radio1{
.bg-block{
background-color: transparent;
border: none;
box-shadow: none;
background-repeat: no-repeat;
background-size: 100% 100%;
.tab-video-img{
position: absolute;
bottom: 30px;
right: 30px;
}
.name-block{
margin-top: 40px;
font-family: PingFang-SC-Regular;
color: #333333;
.name{
height: 50px;
line-height: 50px;
font-size: 32px;
}
.ahtor{
font-size: 24px;
}
}
.play-block{
width: 544px;
margin: 40px auto auto auto;
position: relative;
.radius-icon{
position: absolute;
width: 25px;
top: -2px;
left: 0;
height: 25px;
background: #80952B ;
border-radius: 100px;
}
}
.btn-block{
line-height: 200px;
img{
vertical-align: middle;;
margin-right: 20px;
&:last-child{
margin-right: 0;
}
}
}
}
}
&.show1{
&>img{
position: absolute;
z-index: 2;
&.haiou{
bottom: 350px;
left: 70px;
}
&.riji{
top: 210px;
left: 0;
}
&.yeziyou{
bottom: 0;
right: 0;
}
&.yezizuo{
bottom: 0;
left: 0;
}
&.zhaopianqiang{
bottom: 350px;
left: 80px;
}
}
.bg-block{
position: relative;
background: none;
box-shadow: none;
.zhuangshi{
bottom: 0;
}
}
.title-block{
padding-top: 60px;
}
.textarea{
background: #FDFDFD;
height: 352px;
width: 626px;
margin: auto;
box-shadow: inset 1px 1px 3px 1px rgba(142,142,142,0.50);
border-radius: 8px;
position: relative;
.btn-block{
position: absolute;
bottom: 10px;
right: 10px;
img{
margin-right: 10px;
}
}
}
.text-block{
width: 600px;
margin: auto;
padding-top: 20px;
text-align: left;
font-family: PingFang-SC-Medium;
font-size: 28px;
color: #666666;
line-height: 40px;
.text-content{
font-family: PingFang-SC-Regular;
font-size: 24px;
color: #999999;
}
}
.sub-block{
position: absolute;
width: 100%;
text-align: center;
bottom: 160px;
}
}
&.refueling1{
.bottom-block{
position: static;
}
.bg-block{
height: auto;
min-height: 1080px;
}
.content-img{
position: relative;
min-height: 832px;
background-repeat: no-repeat;
background-size: 100% 100%;
margin: 20px;
border-radius: 8px;
.radio-icon{
position: absolute;
right: 20px;
top: 20px;
}
}
}
&.refueling2{
.bg-block{
width: 1154px;
height: 690px;
transform-origin: 355px 370px;
transform: rotate(90deg);
background: white;
.title{
position: relative;
top: -30px;
}
.content-img{
width: 1078px;
min-height: 550px;
margin: -40px auto 0 auto;
position: relative;
border-radius: 8px;
background-size: 100% 100%;
.radio-icon{
position: absolute;
bottom: 20px;
left: 20px;
}
.left-icon{
position: absolute;
top: 50%;
margin-top: -30px;
left: 20px;
}
.right-icon{
position: absolute;
top: 50%;
margin-top: -30px;
right: 20px;
}
}
}
}
&>div{
margin: auto;
text-align: center;
}
.bg-block{
width: 690px;
height: 1080px;
position: relative;
background: #FFFFFF;
box-shadow: 0 2px 3px 1px rgba(153,153,153,0.50);
border-radius: 8px;
margin: 150px auto 100px auto;
.today-block{
position: relative;
.today-text{
position: absolute;
top: 70px;
left: 0;
bottom: 0;
right: 0;
font-size: 28px;
line-height: 70px;
text-align: left;
padding-left: 40px;
padding-right: 30px;
z-index: 3;
overflow: hidden;
.zhanwei1{
float: left;
clear: left;
width: 30px;
height: 70px;
}
.zhanwei2{
float: left;
clear: left;
width: 120px;
height: 70px;
}
.zhanwei3{
float: left;
clear: left;
width: 140px;
height: 70px;
}
}
}
.reqiqiu{
position: absolute;
left: -30px;
z-index: 1;
}
.qiqiu{
position: absolute;
z-index: 1;
left: -30px;
top: 700px
}
.feiji{
position: absolute;
z-index: 1;
right: -30px;
top: 200px;
}
.title-block{
text-align: center;
width: 560px;
margin: auto;
height: 152px;
line-height: 152px;
img{
vertical-align: middle;
}
}
.radio{
text-align: center;
position: relative;
height: 55 * 2px;
.r1{
position: absolute;
bottom: 10 * 2px;
width: 225.5 * 2px;
right: 10 * 2px;
}
.r2{
position: absolute;
right: 45 * 2px;
width: 118*2px;
bottom: 13 * 2px;
}
.r3{
position: absolute;
left: 15 * 2px;
bottom: 10 * 2px;
width: 73 * 2px;
}
.rs{
position: absolute;
right: 190 * 2px;
bottom: 15 * 2px;
width: 22 * 2px;
}
.rp{
position: absolute;
right: 190 * 2px;
bottom: 15 * 2px;
width: 22 * 2px;
}
}
.title2-block{
background: #FFFFFF;
border: 2px solid #2E2E2E;
border-radius: 8px;
margin: 0 30px;
position: relative;
top: 35px;
height: 450px;
.directory-text{
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
font-size: 28px;
line-height: 70px;
text-align: left;
padding-left: 40px;
padding-right: 30px;
z-index: 3;
overflow: auto;
}
.title2{
position: absolute;
top: -45px;
left: 20px;
}
.redM{
position: absolute;
top: -4px;
right: -4px;
}
.flour{
position: absolute;
bottom: 0;
right: 0;
}
}
}
.bottom-block{
position: absolute;
bottom: 18px;
width: 100%;
text-align: center;
img:first-child{
margin-right: 50px;
}
}
}
.border {
border: 1px dashed red;
}
.box {
padding: 0px;
}
.list2-btn{
position: absolute;
top: 50%;
left: 50%;
transition: all 1s;
display: none;
i{
color: #444;
font-size: 26px;
margin-left: -13px;
&:hover{
color: #333;
}
}
z-index: 999;
}
.card-item {
position: relative;
}
.upload-demo{
text-align: left;
}
.el-upload{
text-align: left;
}
.card-item:hover .list2-btn{
display: inline-block;
}
</style>