add_source.php 44 KB

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