add_source.php 38 KB

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