add_source.php 37 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709
  1. {extend name="public/container"}
  2. {block name='head_top'}
  3. <style>
  4. .layui-form-item .special-label{
  5. width: 50px;
  6. float: left;
  7. height: 30px;
  8. line-height: 38px;
  9. margin-left: 10px;
  10. margin-top: 5px;
  11. border-radius: 5px;
  12. background-color: #0092DC;
  13. text-align: center;
  14. }
  15. .layui-form-item .special-label i{
  16. display: inline-block;
  17. width: 18px;
  18. height: 18px;
  19. font-size: 18px;
  20. color: #fff;
  21. }
  22. .layui-form-item .label-box{
  23. border: 1px solid;
  24. border-radius: 10px;
  25. position: relative;
  26. padding: 10px;
  27. height: 30px;
  28. color: #fff;
  29. background-color: #393D49;
  30. text-align: center;
  31. cursor: pointer;
  32. display: inline-block;
  33. line-height: 10px;
  34. }
  35. .layui-form-item .label-box p{
  36. line-height: inherit;
  37. }
  38. .layui-form-mid{
  39. margin-left: 18px;
  40. }
  41. .m-t-5{
  42. margin-top:5px;
  43. }
  44. .edui-default .edui-for-image .edui-icon{
  45. background-position: -380px 0px;
  46. }
  47. .file {
  48. position: relative;
  49. background: #0092DC;
  50. border: 1px solid #99D3F5;
  51. border-radius: 4px;
  52. padding: 7px 12px;
  53. overflow: hidden;
  54. color: #fff;
  55. text-decoration: none;
  56. text-indent: 0;
  57. line-height: 20px;
  58. width: 120px;
  59. }
  60. .file input {
  61. width: 100%;
  62. position: absolute;
  63. font-size: 5px;
  64. right: 0;
  65. top: 0;
  66. opacity: 0;
  67. }
  68. .file:hover {
  69. background: #AADFFD;
  70. border-color: #78C3F3;
  71. color: #004974;
  72. text-decoration: none;
  73. }
  74. [v-cloak]{
  75. display: none;
  76. }
  77. .layui-form-select dl {
  78. z-index: 1000;
  79. }
  80. </style>
  81. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/third-party/zeroclipboard/ZeroClipboard.js"></script>
  82. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.config.js"></script>
  83. <script type="text/javascript" charset="utf-8" src="{__ADMIN_PATH}plug/ueditor/ueditor.all.min.js"></script>
  84. <script src="{__ADMIN_PATH}plug/aliyun-upload-sdk/aliyun-upload-sdk-1.5.0.min.js"></script>
  85. <script src="{__ADMIN_PATH}plug/aliyun-upload-sdk/lib/es6-promise.min.js"></script>
  86. <script src="{__ADMIN_PATH}plug/aliyun-upload-sdk/lib/aliyun-oss-sdk-5.3.1.min.js"></script>
  87. {/block}
  88. {block name="content"}
  89. <div class="layui-fluid" style="background: #fff">
  90. <div class="layui-row layui-col-space15" id="app" v-cloak="">
  91. <form action="" class="layui-form">
  92. <div class="layui-col-md12">
  93. <div class="layui-card" v-cloak="">
  94. <div class="layui-card-header">基本信息</div>
  95. <div class="layui-card-body" style="padding: 10px 150px;">
  96. <div class="layui-form-item">
  97. <label class="layui-form-label" >素材名称:</label>
  98. <div class="layui-input-block">
  99. <input type="text" name="title" v-model="formData.title" autocomplete="off" placeholder="请输入素材名称" class="layui-input">
  100. </div>
  101. </div>
  102. <div class="layui-form-item submit">
  103. <label class="layui-form-label">素材分类</label>
  104. <div class="layui-input-block">
  105. <select name="pid" v-model="formData.pid" lay-search="" lay-filter="pid" >
  106. <option v-for="item in cateList" :value="item.id" >{{item.html}}{{item.title}}</option>
  107. </select>
  108. </div>
  109. </div>
  110. <div class="layui-form-item m-t-5">
  111. <label class="layui-form-label">素材排序</label>
  112. <div class="layui-input-block">
  113. <input type="number" style="width: 20%" name="sort" v-model="formData.sort" autocomplete="off" class="layui-input">
  114. </div>
  115. </div>
  116. <div class="layui-form-item m-t-5" v-cloak="">
  117. <label class="layui-form-label">
  118. <div>素材封面</div>
  119. <div>(710*400px)</div>
  120. </label>
  121. <div class="layui-input-block">
  122. <div class="upload-image-box" v-if="formData.image" @mouseenter="mask.image = true" @mouseleave="mask.image = false">
  123. <img :src="formData.image" alt="">
  124. <div class="mask" v-show="mask.image" style="display: block">
  125. <p><i class="fa fa-eye" @click="look(formData.image)"></i><i class="fa fa-trash-o" @click="delect('image')"></i></p>
  126. </div>
  127. </div>
  128. <div class="upload-image" v-show="!formData.image" @click="upload('image')">
  129. <div class="fiexd"><i class="fa fa-plus"></i></div>
  130. <p>选择图片</p>
  131. </div>
  132. </div>
  133. {if condition="$special_type eq 3"}
  134. <div class="layui-form-item m-t-5" >
  135. <label class="layui-form-label">插入视频</label>
  136. <div class="layui-input-block">
  137. <input type="text" name="title" v-model="link" style="width:50%;display:inline-block;margin-right: 10px;" autocomplete="off" placeholder="请输入视频链接" class="layui-input">
  138. <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="confirmAdd()" v-show="is_upload==false">确认添加</button>
  139. <label style="display: inline;" class="file" v-show="is_upload==false">
  140. <input style="display: none;" id="ossupload" type="file" class="layui-btn layui-btn-sm layui-btn-normal" >上传视频
  141. </label>
  142. <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" v-show="is_upload" @click="delVideo()">删除</button>
  143. </div>
  144. <div class="layui-input-block" style="width: 50%;margin-top: 20px" v-show="is_video">
  145. <div class="layui-progress" style="margin-bottom: 10px">
  146. <div class="layui-progress-bar layui-bg-blue" :style="'width:'+videoWidth+'%'"></div>
  147. </div>
  148. <button type="button" class="layui-btn layui-btn-sm layui-btn-danger"
  149. @click="cancelUpload" v-show="demand_switch==2 && is_video">取消
  150. </button>
  151. <button type="button" id="authUpload" class="layui-btn layui-btn-sm layui-btn-danger" v-show="demand_switch==1 && is_video">开始上传
  152. </button>
  153. <button type="button" class="layui-btn layui-btn-sm layui-btn-danger"
  154. id="pauseUpload" v-show="demand_switch==1 && is_video">暂停
  155. </button>
  156. <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" v-show="is_suspend"
  157. id="resumeUpload">恢复上传
  158. </button>
  159. </div>
  160. <div class="layui-form-mid layui-word-aux">输入链接将视为添加视频直接添加,请确保视频链接的正确性</div>
  161. </div>
  162. {else/}
  163. <div class="layui-form-item m-t-5">
  164. <label class="layui-form-label">插入音频</label>
  165. <div class="layui-input-block">
  166. <input type="text" name="title" v-model="link" style="width:50%;display:inline-block;margin-right: 10px;" autocomplete="off" placeholder="请输入音频链接" class="layui-input">
  167. <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" @click="confirmAdd()" v-show="is_upload==false">确认添加</button>
  168. <label style="display: inline;" class="file" v-show="is_upload==false">
  169. <input style="display: none;" id="ossupload" type="file" class="layui-btn layui-btn-sm layui-btn-normal" >上传音频
  170. </label>
  171. <button type="button" class="layui-btn layui-btn-sm layui-btn-normal" v-show="is_upload" @click="delVideo()">删除</button>
  172. </div>
  173. <div class="layui-input-block" style="width: 50%;margin-top: 20px" v-show="is_video">
  174. <div class="layui-progress" style="margin-bottom: 10px">
  175. <div class="layui-progress-bar layui-bg-blue" :style="'width:'+videoWidth+'%'"></div>
  176. </div>
  177. <button type="button" class="layui-btn layui-btn-sm layui-btn-danger"
  178. @click="cancelUpload" v-show="demand_switch==2 && is_video">取消
  179. </button>
  180. <button type="button" id="authUpload" class="layui-btn layui-btn-sm layui-btn-danger" v-show="demand_switch==1 && is_video">开始上传
  181. </button>
  182. <button type="button" class="layui-btn layui-btn-sm layui-btn-danger"
  183. id="pauseUpload" v-show="demand_switch==1 && is_video">暂停
  184. </button>
  185. <button type="button" class="layui-btn layui-btn-sm layui-btn-danger" v-show="is_suspend"
  186. id="resumeUpload">恢复上传
  187. </button>
  188. </div>
  189. <div class="layui-form-mid layui-word-aux">输入链接将视为添加音频直接添加,请确保音频链接的正确性</div>
  190. </div>
  191. {/if}
  192. <div class="layui-form-item m-t-5" >
  193. <label class="layui-form-label">素材内容</label>
  194. <div class="layui-input-block">
  195. <textarea id="myEditorContent" style="width:100%;height: 500px">{{formData.content}}</textarea>
  196. </div>
  197. </div>
  198. <div class="layui-form-item m-t-5">
  199. <label class="layui-form-label">素材简介</label>
  200. <div class="layui-input-block">
  201. <textarea id="myEditorDetail" style="width:100%;height: 500px">{{formData.detail}}</textarea>
  202. </div>
  203. </div>
  204. </div>
  205. </div>
  206. </div>
  207. <div class="layui-col-md12">
  208. <div class="layui-form-item submit" style="margin-bottom: 10px">
  209. <div class="layui-input-block">
  210. <button class="layui-btn layui-btn-normal" style="margin-left: 10%;" type="button" @click="save">{$id ? '确认修改':'立即提交'}</button>
  211. <button class="layui-btn layui-btn-primary clone" type="button" @click="clone_form">取消</button>
  212. </div>
  213. </div>
  214. </div>
  215. </form>
  216. </div>
  217. </div>
  218. <script type="text/javascript" src="{__ADMIN_PATH}js/layuiList.js"></script>
  219. {/block}
  220. {block name='script'}
  221. <script>
  222. var id={$id},alicloud_account_id="{$alicloud_account_id}",configuration_item_region="{$configuration_item_region}",demand_switch="{$demand_switch}",
  223. special=<?=isset($special) ? $special : "{}"?>,
  224. special_type= <?=isset($special_type) ? $special_type : 6?>;
  225. require(['vue','zh-cn','request','aliyun-oss','plupload','OssUpload'],function(Vue) {
  226. new Vue({
  227. el: "#app",
  228. data: {
  229. special_type_name:special_type == 2 ? "音频" : "视频",
  230. formData:{
  231. title:special.title || '',
  232. image:special.image ? special.image['pic'] : '',
  233. sort:special.sort || 0,
  234. pid:special.pid || 0,
  235. content:special.link ? (special.content ? special.content : '') :'',
  236. detail:special.detail ? (special.detail || '') : '',
  237. link:special.link ? (special.link || '') : '',
  238. videoId:special.videoId ? (special.videoId || '') : '',
  239. file_type:special.file_type ? (special.file_type || '') : '',
  240. file_name:special.file_name ? (special.file_name || '') : '',
  241. },
  242. but_title:'上传音频',
  243. link:'',
  244. host: ossUpload.host + '/',
  245. mask:{
  246. image:false,
  247. },
  248. ue:null,
  249. is_video:false,
  250. is_suspend:false,
  251. is_upload:false,
  252. demand_switch:demand_switch,
  253. //上传类型
  254. mime_types:{
  255. Image:"jpg,gif,png,JPG,GIF,PNG",
  256. Video:"mp4,MP4,mp3,MP3",
  257. },
  258. videoWidth:0,
  259. uploader:null,
  260. cateList:[]
  261. },
  262. methods:{
  263. //取消
  264. cancelUpload:function(){
  265. this.uploader.stop();
  266. this.is_video = false;
  267. this.videoWidth = 0;
  268. this.is_upload = false;
  269. },
  270. //删除图片
  271. delect:function(key,index){
  272. var that = this;
  273. if(index != undefined){
  274. that.formData[key].splice(index,1);
  275. that.$set(that.formData,key,that.formData[key]);
  276. }else{
  277. that.$set(that.formData,key,'');
  278. }
  279. },
  280. //查看图片
  281. look:function(pic){
  282. parent.$eb.openImage(pic);
  283. },
  284. //鼠标移入事件
  285. enter:function(item){
  286. if(item){
  287. item.is_show = true;
  288. }else{
  289. this.mask = true;
  290. }
  291. },
  292. //鼠标移出事件
  293. leave:function(item){
  294. if(item){
  295. item.is_show = false;
  296. }else{
  297. this.mask = false;
  298. }
  299. },
  300. changeIMG:function(key,value,multiple){
  301. if(multiple){
  302. var that = this;
  303. value.map(function (v) {
  304. that.formData[key].push({pic:v,is_show:false});
  305. });
  306. this.$set(this.formData,key,this.formData[key]);
  307. }else{
  308. this.$set(this.formData,key,value);
  309. }
  310. },
  311. confirmAdd:function(){
  312. var that = this;
  313. if(that.link.substr(0,7).toLowerCase() == "http://" || that.link.substr(0,8).toLowerCase() == "https://"){
  314. that.is_upload=true;
  315. that.uploadVideo();
  316. }else{
  317. layList.msg('请输入正确的'+that.special_type_name+'链接');
  318. }
  319. },
  320. uploadVideo:function(){
  321. if(this.link.substr(0,7).toLowerCase() == "http://" || this.link.substr(0,8).toLowerCase() == "https://"){
  322. this.setContent(this.link);
  323. }else{
  324. layList.msg('请输入正确的'+this.special_type_name+'链接');
  325. }
  326. },
  327. setContent:function(link){
  328. switch(special_type){
  329. case 2://音频
  330. this.ueC.setContent('<div><audio style="width: 100%" src="'+link+'" class="video-ue" controls="controls"><source src="'+link+'" type="audio/mpeg"></source></audio></div><span style="color:white">.</span>',true);
  331. this.formData.link = link;
  332. break;
  333. case 3://视频
  334. this.ueC.setContent('<div><video style="width: 100%" src="'+link+'" class="video-ue" controls="controls"><source src="'+link+'"></source></video></div><span style="color:white">.</span>',true);
  335. this.formData.link = link;
  336. break;
  337. }
  338. },
  339. //上传图片
  340. upload:function(key,count){
  341. ossUpload.createFrame('请选择图片',{fodder:key,max_count:count === undefined ? 0 : count},{w:800,h:550});
  342. },
  343. save:function () {
  344. var that=this;
  345. that.formData.content = that.ueC.getContent();
  346. that.formData.detail = that.ueD.getContent();
  347. if(!that.formData.title) return layList.msg('请输入素材标题');
  348. if(!that.formData.image) return layList.msg('请输入素材封面');
  349. if(!that.formData.content) return layList.msg('请编辑素材内容再进行保存');
  350. if(!that.formData.detail) return layList.msg('请编辑素材简介再进行保存');
  351. if(that.demand_switch=='1' && that.formData.videoId){
  352. that.formData.link ='';
  353. }else if(that.demand_switch=='1' && that.formData.link){
  354. that.formData.videoId='';
  355. that.formData.file_type='';
  356. that.formData.file_name='';
  357. }else if(that.demand_switch=='2' && that.formData.videoId==''){
  358. if(!that.formData.link) return layList.msg('请上传素材');
  359. that.formData.videoId='';
  360. that.formData.file_type='';
  361. that.formData.file_name='';
  362. }else if(that.demand_switch=='2' && that.formData.videoId){
  363. that.formData.link ='';
  364. }
  365. if(that.formData.link =='' && that.formData.videoId=='') return layList.msg('上传音视频素材');
  366. layList.loadFFF();
  367. layList.basePost(layList.U({a:'save_source',q:{id:id,special_type:'{$special_type}'}}),that.formData,function (res) {
  368. layList.loadClear();
  369. if(parseInt(id) == 0) {
  370. layList.layer.confirm('添加成功,您要继续添加素材吗?', {
  371. btn: ['继续添加', '立即提交'] //按钮
  372. }, function () {
  373. window.location.reload();
  374. }, function () {
  375. parent.layer.closeAll();
  376. });
  377. }else{
  378. layer.msg('修改成功',{icon:1},function () {
  379. parent.layer.closeAll();
  380. });
  381. }
  382. },function (res) {
  383. layList.msg(res.msg);
  384. layList.loadClear();
  385. });
  386. },
  387. clone_form:function () {
  388. if(parseInt(id) == 0){
  389. var that = this;
  390. if(that.formData.image) return layList.msg('请先删除上传的图片在尝试取消');
  391. parent.layer.closeAll();
  392. }
  393. parent.layer.closeAll();
  394. },
  395. //获取素材分类
  396. get_subject_list: function () {
  397. var that = this;
  398. layList.baseGet(layList.U({c:'special.special_task_category',a: 'get_cate_list'}), function (res) {
  399. that.$set(that, 'cateList', res.data);
  400. that.$nextTick(function () {
  401. layList.form.render('select');
  402. })
  403. });
  404. },
  405. createUploader:function () {
  406. var that=this;
  407. var uploader = new AliyunUpload.Vod({
  408. timeout: 60000,//请求过期时间(配置项 timeout, 默认 60000)
  409. partSize: 1048576,//分片大小(配置项 partSize, 默认 1048576)
  410. parallel: 5,//上传分片数(配置项 parallel, 默认 5)
  411. retryCount:3,//网络失败重试次数(配置项 retryCount, 默认 3)
  412. retryDuration:2,//网络失败重试间隔(配置项 retryDuration, 默认 2)
  413. region: configuration_item_region,//配置项 region, 默认 cn-shanghai
  414. userId: alicloud_account_id,//阿里云账号ID
  415. // 添加文件成功
  416. addFileSuccess: function (uploadInfo) {
  417. if (alicloud_account_id=='') {
  418. return layList.msg('请配置阿里云账号ID!');
  419. }
  420. var type=uploadInfo.file.type;
  421. var arr=type.split('/');
  422. if(special_type==2 && arr[0]!='audio'){
  423. that.is_video=false;
  424. that.videoWidth = 0;
  425. return layList.msg('请上传音频');
  426. }else if(special_type==3 && arr[0]!='video'){
  427. that.is_video=false;
  428. that.videoWidth = 0;
  429. return layList.msg('请上传视频');
  430. }else{
  431. that.is_video=true;
  432. that.videoWidth = 0;
  433. }
  434. },
  435. // 开始上传
  436. onUploadstarted: function (uploadInfo) {
  437. var videoId='';
  438. if(uploadInfo.videoId){
  439. videoId= uploadInfo.videoId;
  440. }
  441. layList.basePost(layList.U({a: 'video_upload_address_voucher'}),
  442. {
  443. FileName:uploadInfo.file.name,type:1,image:that.formData.image,videoId:videoId
  444. }, function (res) {
  445. var url=res.msg;
  446. $.ajax({
  447. url:url,
  448. data:{},
  449. type:"GET",
  450. dataType:'json',
  451. success:function (data) {
  452. if(data.RequestId){
  453. var uploadAuth = data.UploadAuth;
  454. var uploadAddress = data.UploadAddress;
  455. var videoId = data.VideoId;
  456. uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress,videoId)
  457. }
  458. },
  459. error:function (err) {
  460. return layList.msg(err.responseJSON.Message);
  461. }
  462. });
  463. });
  464. },
  465. // 文件上传成功
  466. onUploadSucceed: function (uploadInfo) {
  467. that.formData.videoId=uploadInfo.videoId;
  468. that.formData.file_name=uploadInfo.file.name;
  469. that.formData.file_type=uploadInfo.file.type;
  470. that.videoWidth = 0;
  471. that.is_video = false;
  472. that.is_suspend = false;
  473. that.is_upload = true;
  474. that.playbackAddress(uploadInfo.videoId);
  475. },
  476. // 文件上传失败
  477. onUploadFailed: function (uploadInfo, code, message) {
  478. },
  479. // 取消文件上传
  480. onUploadCanceled: function (uploadInfo, code, message) {
  481. that.formData.file_name='';
  482. that.is_suspend = false;
  483. },
  484. // 文件上传进度,单位:字节, 可以在这个函数中拿到上传进度并显示在页面上
  485. onUploadProgress: function (uploadInfo, totalSize, progress) {
  486. that.videoWidth = Math.ceil(progress * 100);
  487. },
  488. // 上传凭证超时
  489. onUploadTokenExpired: function (uploadInfo) {
  490. var videoId='';
  491. if(uploadInfo.videoId){
  492. videoId= uploadInfo.videoId;
  493. }
  494. layList.basePost(layList.U({a: 'video_upload_address_voucher'}),{
  495. FileName:uploadInfo.file.name,type:1,image:that.formData.image,videoId:videoId
  496. }, function (res) {
  497. var url=res.msg;
  498. $.ajax({
  499. url:url,
  500. data:{},
  501. type:"GET",
  502. dataType:'json',
  503. success:function (data) {
  504. if(data.RequestId){
  505. var uploadAuth = data.UploadAuth;
  506. uploader.resumeUploadWithAuth(uploadAuth);
  507. }
  508. },
  509. error:function (err) {
  510. return layList.msg(err.responseJSON.Message);
  511. }
  512. });
  513. });
  514. },
  515. // 全部文件上传结束
  516. onUploadEnd: function (uploadInfo) {
  517. that.videoWidth = 0;
  518. that.is_video = false;
  519. that.is_suspend = false;
  520. that.is_upload = true;
  521. console.log("onUploadEnd: uploaded all the files")
  522. }
  523. });
  524. return uploader;
  525. },
  526. delVideo:function(){
  527. var that=this;
  528. if(that.demand_switch=='1' && that.formData.videoId){
  529. layList.basePost(layList.U({a: 'video_upload_address_voucher'}),{
  530. FileName:'',type:4,image:'',videoId:that.formData.videoId
  531. }, function (res) {
  532. var url=res.msg;
  533. $.ajax({
  534. url:url,
  535. data:{},
  536. type:"GET",
  537. dataType:'json',
  538. success:function (data) {
  539. if(data.RequestId){
  540. that.link='';
  541. that.formData.content='';
  542. that.formData.videoId='';
  543. that.formData.file_type='';
  544. that.formData.file_name='';
  545. that.ueC.setContent('');
  546. $("input[type='file']").val('');
  547. that.is_upload = false;
  548. }
  549. },
  550. error:function (err) {
  551. return layList.msg(err.responseJSON.Message);
  552. }
  553. });
  554. });
  555. }else{
  556. that.formData.videoId='';
  557. that.link='';
  558. that.ueC.setContent('');
  559. that.is_upload = false;
  560. }
  561. },
  562. playbackAddress:function (videoId) {
  563. var that=this;
  564. if(videoId=='') return false;
  565. layList.basePost(layList.U({a: 'video_upload_address_voucher'}), {
  566. FileName: '', type: 3, image: '', videoId: videoId
  567. }, function (res) {
  568. var url = res.msg;
  569. $.ajax({
  570. url: url,
  571. data: {},
  572. type: "GET",
  573. dataType: 'json',
  574. success: function (data) {
  575. that.link = data.PlayInfoList.PlayInfo[0].PlayURL;
  576. that.uploadVideo();
  577. },
  578. error: function (err) {
  579. that.link = '';
  580. that.formData.content = '';
  581. that.formData.videoId = '';
  582. that.formData.file_type = '';
  583. that.formData.file_name = '';
  584. that.is_upload = false;
  585. return layList.msg(err.responseJSON.Message);
  586. }
  587. });
  588. });
  589. }
  590. },
  591. mounted:function () {
  592. var that=this;
  593. that.get_subject_list();
  594. window.changeIMG = that.changeIMG;
  595. //实例化form
  596. layList.date({
  597. elem:'#live_time',
  598. theme:'#393D49',
  599. type:'datetime',
  600. done:function (value) {
  601. that.formData.live_time = value;
  602. }
  603. });
  604. //选择图片
  605. function changeIMG(index,pic){
  606. $(".image_img").css('background-image',"url("+pic+")");
  607. $(".active").css('background-image',"url("+pic+")");
  608. $('#image_input').val(pic);
  609. }
  610. //选择图片插入到编辑器中
  611. window.insertEditor = function(list,fodder){
  612. that.editorActive.execCommand('insertimage', list);
  613. };
  614. if(that.formData.link && that.formData.videoId==''){
  615. that.is_upload=true;
  616. that.link = that.formData.link;
  617. }else if(that.formData.videoId && that.formData.link== ''){
  618. that.is_upload=true;
  619. that.playbackAddress(that.formData.videoId);
  620. }
  621. layList.select('pid', function (obj) {
  622. that.formData.pid = obj.value;
  623. });
  624. this.$nextTick(function () {
  625. layList.form.render();
  626. //实例化编辑器
  627. UE.registerUI('imagenone',function(editor,name){
  628. var $btn = new UE.ui.Button({
  629. name : 'image',
  630. onclick : function(){
  631. console.log(editor);
  632. that.editorActive = editor;
  633. ossUpload.createFrame('选择图片',{fodder:'editor'},{w:800,h:550});
  634. },
  635. title: '选择图片'
  636. });
  637. return $btn;
  638. });
  639. that.ueC = UE.getEditor('myEditorContent');
  640. that.ueD = UE.getEditor('myEditorDetail');
  641. });
  642. //图片上传和视频上传
  643. var uploader = null;
  644. if(that.demand_switch=='1'){
  645. $('#ossupload').on('change', function (e) {
  646. var file = e.target.files[0];
  647. if (!file) {
  648. return layList.msg('请先选择需要上传的文件!');
  649. }
  650. var Title = file.name;
  651. var userData = '{"Vod":{}}';
  652. uploader = that.createUploader();
  653. uploader.addFile(file, null, null, null, userData);
  654. });
  655. }else{
  656. that.uploader = ossUpload.upload({
  657. id: 'ossupload',
  658. FilesAddedSuccess: function () {
  659. that.is_video = true;
  660. },
  661. uploadIng: function (file) {
  662. that.videoWidth = file.percent;
  663. },
  664. success: function (res) {
  665. layList.msg('上传成功');
  666. that.videoWidth = 0;
  667. that.is_video = false;
  668. that.formData.videoId='';
  669. that.is_upload = true;
  670. that.link = res.url;
  671. that.uploadVideo();
  672. },
  673. fail: function (err) {
  674. that.videoWidth = 0;
  675. that.is_video = false;
  676. that.is_upload = false;
  677. layList.msg(err);
  678. }
  679. })
  680. }
  681. // 第一种方式 UploadAuth 上传
  682. $('#authUpload').on('click', function () {
  683. if (uploader !== null) {
  684. uploader.startUpload();
  685. }
  686. });
  687. // 暂停上传
  688. $('#pauseUpload').on('click', function () {
  689. if (uploader !== null) {
  690. uploader.stopUpload();
  691. that.is_suspend = true;
  692. that.formData.file_name='';
  693. layList.msg('暂停上传!');
  694. }
  695. });
  696. //恢复上传
  697. $('#resumeUpload').on('click', function () {
  698. if (uploader !== null) {
  699. uploader.startUpload();
  700. that.is_suspend = false;
  701. layList.msg('恢复上传成功!');
  702. }
  703. });
  704. }
  705. })
  706. })
  707. </script>
  708. {/block}