vedio.php 26 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470
  1. <!DOCTYPE html>
  2. <!--suppress JSAnnotator -->
  3. <html lang="zh-CN">
  4. <head>
  5. <link href="{__PLUG_PATH}layui/css/layui.css" rel="stylesheet">
  6. <script src="{__PLUG_PATH}jquery-1.10.2.min.js"></script>
  7. <script src="{__PLUG_PATH}layui/layui.all.js"></script>
  8. <script src="{__PLUG_PATH}vue/dist/vue.min.js"></script>
  9. <script src="{__MODULE_PATH}widget/aliyun-oss-sdk-4.4.4.min.js"></script>
  10. <script src="{__MODULE_PATH}widget/cos-js-sdk-v5.min.js"></script>
  11. <script src="{__MODULE_PATH}widget/qiniu-js-sdk-2.5.5.js"></script>
  12. <script src="{__MODULE_PATH}widget/plupload.full.min.js"></script>
  13. <script src="{__MODULE_PATH}widget/vedio-upload.js"></script>
  14. </head>
  15. <style>
  16. body{-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;user-select:none;}
  17. .layui-fluid{margin:0;padding: 0;}
  18. .layadmin-homepage-shadow{box-shadow: 0 1px 1px rgba(0,0,0,.05);background-color: #fff;border-radius: 0;border: 1px solid #e7ecf3;}
  19. .layui-tree-txt{cursor: pointer;}
  20. .clearfix:after{content:"";display:block;visibility:hidden;clear:both;height:0;}
  21. .image-box{padding-top: 10px}
  22. .image-box .image .layui-img-box{margin: 5px;border: 2px solid #ffffff;height: 100px;line-height: 100px;text-align: center;}
  23. .image-box .image .layui-img-box.on{border: 2px solid #5FB878;}
  24. .image-box .image .layui-img-box img{width: 90%;max-height:90%;vertical-align:middle;}
  25. .page .image_page{text-align: right;}
  26. .page .layui-box{text-align: left;}
  27. .layui-tree-txt.on{color:#1E9FFF}
  28. .line1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width: 90%;}
  29. .layadmin-homepage-panel.left ::-webkit-scrollbar{width: 3px;height: auto;background-color: #ddd;}
  30. .layadmin-homepage-panel.left ::-webkit-scrollbar-thumb {border-radius: 1px;-webkit-box-shadow: inset 0 0 6px rgba(255,255,255,.3);background-color: #333;}
  31. .layadmin-homepage-panel.left ::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);border-radius: 1px;background: #e5e5e5;}
  32. #app .layui-tree-btnGroup{color: #ffffff;padding: 3px 7px;position: absolute;top: -28px;left: 30px;background-color: #1E9FFF;}
  33. #app .layui-tree-btnGroup .layui-layer-TipsT{border-right-color: #1E9FFF;color: #ffffff}
  34. #app .layui-tree-iconClick{margin:0 0 0 9px;}
  35. @media screen and (min-width:1000px){
  36. .image-box .image .layui-img-box{
  37. height: 200px;
  38. line-height: 200px;
  39. }
  40. }
  41. </style>
  42. <body style="background-color: #f2f2f2">
  43. <div class="layui-fluid" id="app">
  44. <div class="layui-row">
  45. <div class="layui-col-md2 layui-col-xs2 layui-col-sm2">
  46. <div class="layadmin-homepage-panel layadmin-homepage-shadow left">
  47. <div class="layui-card text-center">
  48. <div class="layui-card-header">
  49. <div class="layui-unselect layui-form-select layui-form-selected">
  50. <div class="layui-select-title">
  51. <!-- <input type="text" name="title" v-model="searchTitle" placeholder="搜索分类" style="height: 24px;line-height:24px;padding-left:7px;font-size: 12px;display: inline;padding-right: 0;width: 100%;" autocomplete="off" class="layui-input layui-input-search" @keydown="search">-->
  52. <!-- <i class="layui-icon layui-icon-search" @click="search" style="cursor: pointer;margin:0 3px;"></i>-->
  53. </div>
  54. </div>
  55. </div>
  56. <div class="layui-card-body" style="padding: 0;height: 455px;overflow:auto;">
  57. <!-- <div class="layadmin-homepage-pad-ver">-->
  58. <!-- <button type="button" class="layui-btn layui-btn-normal layui-btn-xs" style="width: 80%" @click="addCategory">添加</button>-->
  59. <!-- </div>-->
  60. <div ref="tree" class="demo-tree demo-tree-box">
  61. <div class="layui-tree layui-tree-line">
  62. <div class="layui-tree-set layui-tree-setHide">
  63. <div class="layui-tree-entry">
  64. <div class="layui-tree-main" @click="OpenTree({child:[],id:0})">
  65. <span class="layui-tree-iconClick">
  66. <i class="layui-icon">&nbsp;&nbsp;&nbsp;</i>
  67. </span>
  68. <span class="layui-tree-txt" :class="pid == 0 ? 'on' : '' ">全部视频</span>
  69. </div>
  70. </div>
  71. </div>
  72. <div class="layui-tree-set layui-tree-setHide" :class=" value.isOpen ? 'layui-tree-spread' : '' " v-for="(value,k) in categoryList">
  73. <div class="layui-tree-entry" @mouseover.stop="changeActive(value,k)" @mouseout.stop="removeActive(value,k)">
  74. <div class="layui-tree-main" @click="OpenTree(value,k)">
  75. <span class="layui-tree-iconClick">
  76. <i class="layui-icon layui-icon-triangle-d" v-if="value.child.length && value.isOpen"></i>
  77. <i class="layui-icon layui-icon-triangle-r" v-else-if="value.child.length && !value.isOpen"></i>
  78. <i class="layui-icon " v-else>&nbsp;&nbsp;&nbsp;</i>
  79. </span>
  80. <span class="layui-tree-txt line1" :class="pid == value.id ? 'on': '' " v-text="value.name"></span>
  81. </div>
  82. <div class="layui-btn-group layui-tree-btnGroup layui-layer layui-layer-tips" v-show="value.isShow">
  83. <div>
  84. <i class="layui-icon layui-icon-add-1" @click.stop ="addCategory(value)" title="添加"></i>
  85. <i class="layui-icon layui-icon-edit" @click.stop ="updateCategory(value)" title="编辑"></i>
  86. <i class="layui-icon layui-icon-delete" v-if="!value.child.length" title="删除" @click.stop ="delCategory(value)"></i>
  87. </div>
  88. <i class="layui-layer-TipsG layui-layer-TipsT"></i>
  89. </div>
  90. </div>
  91. <div class="layui-tree-pack layui-tree-lineExtend layui-tree-showLine" v-show="value.isOpen" style="display: block">
  92. <div class="layui-tree-set" v-for="(item,key) in value.child">
  93. <div class="layui-tree-entry">
  94. <div class="layui-tree-main" @click="OpenTree(item,key)">
  95. <span class="layui-tree-iconClick">
  96. <i class="layui-icon"></i>
  97. </span>
  98. <span class="layui-tree-txt line1" :class="pid == item.id ? 'on': '' " v-text="item.name"></span>
  99. </div>
  100. <div class="layui-btn-group layui-tree-btnGroup layui-layer layui-layer-tips" @mouseover.stop ="changeActive(item,k,key)" @mouseout.stop ="removeActive(item,k,key)">
  101. <div>
  102. <i class="layui-icon layui-icon-edit" @click.stop ="updateCategory(item,value.pid)" title="编辑"></i>
  103. <i class="layui-icon layui-icon-delete" @click.stop ="delCategory(item,value.pid)" title="删除"></i>
  104. </div>
  105. <i class="layui-layer-TipsG layui-layer-TipsT"></i>
  106. </div>
  107. </div>
  108. </div>
  109. </div>
  110. </div>
  111. </div>
  112. </div>
  113. </div>
  114. </div>
  115. </div>
  116. </div>
  117. <div class="layui-col-md10 layui-col-xs10 layui-col-sm10">
  118. <div class="layadmin-homepage-panel layadmin-homepage-shadow">
  119. <div class="layui-card text-center">
  120. <div class="layui-card-header">
  121. <div class="layadmin-homepage-pad-ver" style="text-align: left">
  122. <div class="layui-btn-group" id="container">
  123. <!-- <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" @click="addCategory">添加分类</button>-->
  124. <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" ref="upload">上传视频</button>
  125. <!-- <button type="button" class="layui-btn layui-btn-warm layui-btn-sm" :class="selectImages.length ? '':'layui-btn-disabled' " @click="moveCate">移动分类</button>-->
  126. <!-- <button type="button" class="layui-btn layui-btn-danger layui-btn-sm" :class="selectImages.length ? '':'layui-btn-disabled' " @click="delImage">删除图片</button>-->
  127. </div>
  128. </div>
  129. </div>
  130. <div class="layui-card-body clearfix image-box" style="padding: 10px;height: 360px;z-index:10;">
  131. <div class="layui-col-md2 layui-col-xs2 layui-col-sm2 image" v-for="(item,index) in imageList">
  132. <span class="layui-badge layui-bg-cyan" style="position: absolute;" v-if="item.sort">{{ item.sort }}</span>
  133. <div class="layui-img-box" :class="item.isSelect ? 'on': '' ">
  134. <video :src="item.att_dir" width="80;" v-if="small == 1" @click="changImage(item)"></video>
  135. <video :src="item.att_dir" width="80;" v-else @click="changImage(item)"></video>
  136. </div>
  137. </div>
  138. <div class="empty-image" style="width: 100%;height: 100%;text-align: center;" v-if="!imageList.length && loading == false">
  139. <div class="layui-img-box">
  140. <img src="{__ADMIN_PATH}images/empty.jpg" style="height: 400px;" alt="" >
  141. </div>
  142. </div>
  143. </div>
  144. <div class="layui-card-body clearfix page">
  145. <div class="layui-col-md4 layui-col-xs4 layui-col-sm4">
  146. <div class="layui-box" style="margin: 10px 0;">
  147. <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" :class="selectImages.length ? '':'layui-btn-disabled' " @click="useImages">使用选中的图片</button>
  148. </div>
  149. </div>
  150. <div class="layui-col-md8 layui-col-xs8 layui-col-sm8 image_page" ref="image_page"></div>
  151. </div>
  152. </div>
  153. </div>
  154. </div>
  155. </div>
  156. </div>
  157. </body>
  158. </html>
  159. <script src="{__ADMIN_PATH}js/layuiList.js?id=dsfwef"></script>
  160. <script>
  161. var pid = {$pid},small = {$Request.param.small ? : 0} ,parentinputname = '{$Request.param.fodder}';//当前图片分类ID
  162. new Vue({
  163. el: "#app",
  164. data: {
  165. categoryList:[],
  166. searchTitle:'',
  167. pid:pid,
  168. imageList:[],
  169. page:1,
  170. limit:18,
  171. loading:false,
  172. small:small,
  173. selectImages:[],
  174. selectImagesIDS:[],
  175. uploadInst:null,
  176. vedio:{},
  177. },
  178. watch:{
  179. page:function () {
  180. this.getImageList();
  181. },
  182. },
  183. methods:{
  184. //删除图片
  185. delImage:function(){
  186. var that=this;
  187. if(!this.selectImages.length) return;
  188. layList.layer.confirm('是否要删除选中图片?', {
  189. btn: ['是的我要删除','我想想把'] //按钮
  190. }, function(){
  191. layList.basePost(that.U({a:'delete'}),{imageid:that.selectImagesIDS},function (res) {
  192. layList.msg(res.msg);
  193. that.getImageList();
  194. },function (res) {
  195. layList.msg(res.msg);
  196. })
  197. })
  198. },
  199. //移动图片分类
  200. moveCate:function(){
  201. if(!this.selectImages.length) return;
  202. return this.getOpenWindow('移动图片',this.U({a:'moveimg'})+'?imgaes='+this.selectImagesIDS);
  203. },
  204. //使用选中图片
  205. useImages:function(){
  206. if(!this.selectImages.length) return;
  207. //判断表单限制图片个数
  208. if(typeof parent.$f != 'undefined'){
  209. //已有图片个数
  210. var nowpics = parent.$f.getValue(parentinputname).length,
  211. props = parent.$f.model()[parentinputname].props || {},
  212. maxlength = props.maxLength || 0;
  213. //已选图片个数
  214. var selectlength = this.selectImages.length;
  215. //还可以选择多少张
  216. var surplus = maxlength-nowpics;
  217. if(nowpics+selectlength > maxlength){
  218. return layList.msg('最多只能选择 '+ surplus +' 张');
  219. }
  220. }
  221. //编辑器中
  222. if(parentinputname == 'editor'){
  223. if(parentinputname == 'editor' && this.selectImages.length > 1) {
  224. return layList.msg('最多只能选择1张');
  225. }
  226. var src = this.selectImages[0];
  227. // var list = [];console.log(this.selectImages);
  228. // for(var i = 0;i < this.selectImages.length;i++){
  229. // list.push({
  230. // _src: this.selectImages[i],
  231. // src:this.selectImages[i]
  232. // });
  233. // }
  234. parent.insertEditorVideo(src);
  235. var index = parent.layer.getFrameIndex(window.name);
  236. parent.layer.close(index);
  237. }else{
  238. //form表单中
  239. if(parent.$f){
  240. var value = parent.$f.getValue(parentinputname);//父级input 值
  241. var list = value || [];
  242. for(var i = 0;i < this.selectImages.length;i++){
  243. if(value.indexOf(this.selectImages[i]) == -1) list.push(this.selectImages[i]);
  244. }
  245. parent.$f.changeField(parentinputname,list);
  246. console.log(nowpics);
  247. console.log(maxlength);
  248. console.log(selectlength);
  249. parent.$f.closeModal(parentinputname);
  250. }else{
  251. //独立图片选择页面
  252. if(parentinputname == 'image' && this.selectImages.length > 1) {
  253. return layList.msg('最多只能选择1张');
  254. }
  255. if(parent.$vm){
  256. var rule = parent.$vm.getRule(parentinputname)
  257. if(rule.maxLength !== undefined){
  258. if(this.selectImages.length > rule.maxLength){
  259. return layList.msg('最多只能选择'+rule.maxLength+'张');
  260. }
  261. parent.changeVEDIO(parentinputname,this.selectImages);
  262. var index = parent.layer.getFrameIndex(window.name);
  263. parent.layer.close(index);
  264. return;
  265. }
  266. }
  267. parent.changeVEDIO(this.selectImages[0]);
  268. var index = parent.layer.getFrameIndex(window.name);
  269. parent.layer.close(index);
  270. }
  271. }
  272. },
  273. //图片选中和取消
  274. changImage:function(item,index){
  275. this.$set(item,'isSelect',item.isSelect == undefined ? true : !item.isSelect);
  276. var val = small == 1 ? item['satt_dir'] : item['att_dir'];
  277. if(item.isSelect === true) {
  278. this.selectImages[this.selectImages.length] = val;
  279. this.selectImagesIDS[this.selectImages.length] = item['att_id'];
  280. item.sort = this.selectImages.length;
  281. }else{
  282. this.selectImages.splice(this.selectImages.indexOf(val),1);
  283. this.selectImagesIDS.splice(this.selectImages.indexOf(item['att_id']),1);
  284. for (var i=0;i<this.imageList.length;i++){
  285. if(this.imageList[i].sort > item.sort) {
  286. this.imageList[i].sort = (this.imageList[i].sort-1)>=0? this.imageList[i].sort-1 : 0;
  287. }
  288. }
  289. item.sort = 0;
  290. }
  291. // console.log(this.selectImagesIDS)
  292. this.$set(this,'selectImages',this.selectImages);
  293. this.$set(this,'selectImagesIDS',this.selectImagesIDS);
  294. },
  295. //获取图片列表
  296. getImageList:function(){
  297. var that = this;
  298. if(that.loading) return;
  299. that.loading = true;
  300. var index = layList.layer.load(1, {shade: [0.1,'#fff']});
  301. layList.baseGet(this.U({a:'get_image_list',q:{pid:20,page:this.page,limit:this.limit}}),function (res) {
  302. that.loading = false;
  303. that.$set(that,'imageList',res.data.list);
  304. layList.layer.close(index);
  305. if(that.page == 1){
  306. layList.laypage.render({
  307. elem: that.$refs.image_page
  308. ,count: res.data.count
  309. ,limit:that.limit
  310. ,theme: '#1E9FFF',
  311. jump:function (obj) {
  312. that.page=obj.curr;
  313. }
  314. });
  315. }
  316. },function () {
  317. that.loading = false;
  318. layList.layer.close(index);
  319. });
  320. },
  321. //查询分类
  322. search:function(){
  323. // if(!this.searchTitle) return layList.msg('请输入搜索内容!');
  324. this.getCategoryList();
  325. },
  326. //打开和关闭树形
  327. OpenTree:function(item,index){
  328. this.pid = item.id;
  329. if(item.child.length){
  330. item.isOpen == undefined ? false : item.isOpen;
  331. this.$set(this.categoryList[index],'isOpen',!item.isOpen);
  332. }else{
  333. this.page = 1;
  334. this.$set(this,'selectImages',[]);
  335. this.$set(this,'selectImagesIDS',[]);
  336. this.getImageList();
  337. }
  338. this.uploadInst.reload({
  339. url:this.U({a:'upload'})+'?pid='+this.pid
  340. });
  341. },
  342. //组装URL
  343. U:function(opt){
  344. opt = typeof opt == 'object' ? opt : {};
  345. return layList.U({m:'admin',c:"widget.vedio",a:opt.a || '',q:opt.q || {},p:opt.q || {}});
  346. },
  347. //获取分类
  348. getCategoryList:function(){
  349. var that=this;
  350. layList.baseGet(that.U({a:'get_image_cate',q:{name:this.searchTitle}}),function (res) {
  351. that.$set(that,'categoryList',res.data);
  352. });
  353. },
  354. //鼠标移入显示图标
  355. changeActive:function(item,indexK,index){
  356. if(index)
  357. this.$set(this.categoryList[indexK]['child'],'isShow',true);
  358. else
  359. this.$set(this.categoryList[indexK],'isShow',true);
  360. },
  361. //鼠标移出隐藏
  362. removeActive:function(item,indexK,index){
  363. if(index)
  364. this.$set(this.categoryList[indexK]['child'],'isShow',false);
  365. else
  366. this.$set(this.categoryList[indexK],'isShow',false);
  367. },
  368. //添加分类
  369. addCategory:function (item,pid) {
  370. item = item == undefined ? {} : item;
  371. var id = item.id == undefined ? 0 : item.id,
  372. pid = pid == undefined ? 0 : pid;
  373. return this.getOpenWindow(item.name ? item.name+'编辑' : '新增分类',this.U({a:'addcate',q:{id:pid ==0 ? id : pid }}));
  374. },
  375. //修改分类
  376. updateCategory:function(item,pid){
  377. item = item == undefined ? {} : item ;
  378. pid = pid == undefined ? 0 : pid;
  379. return this.getOpenWindow(item.name+'编辑',this.U({a:'editcate',q:{id:item.id}}));
  380. },
  381. //删除分类
  382. delCategory:function (item,pid) {
  383. var that=this;
  384. if(item.child.length) return layList.msg('请先删除子分类再尝试删除此分类!');
  385. layList.layer.confirm('是否要删除['+item.name+']分类?', {
  386. btn: ['是的我要删除','我想想把'] //按钮
  387. }, function(){
  388. layList.baseGet(that.U({a:'deletecate',q:{id:item.id}}),function (res) {
  389. layList.msg(res.msg,function () {
  390. that.getCategoryList();
  391. });
  392. });
  393. });
  394. },
  395. //打开一个窗口
  396. getOpenWindow:function(title,url,opt){
  397. opt = opt == undefined ? {w:340,h:265} : opt;
  398. return layList.layer.open({
  399. type: 2,
  400. title: title,
  401. shade: [0],
  402. area: [opt.w+"px" , opt.h+'px'],
  403. anim: 2,
  404. content: [url, 'no'],
  405. });
  406. },
  407. //回调
  408. SuccessCateg:function () {
  409. this.getCategoryList();
  410. },
  411. uploal:function () {
  412. var that = this;
  413. this.uploadInst=layList.upload.render({
  414. elem: this.$refs.upload,
  415. url: this.U({a:'TempKeys'}),
  416. accept: 'video', //视频
  417. auto: true,
  418. choose:function(obj){
  419. obj.preview(function(index, file){
  420. that.$set(that,'vedio',file);
  421. });
  422. },
  423. done:function(res){
  424. if(res.type=="OSS"){
  425. var client = new OSS.Wrapper({
  426. region: res.region,
  427. accessKeyId: res.id,
  428. accessKeySecret: res.key,
  429. bucket: res.bucket,
  430. });
  431. }else if(res.type=='COS'){
  432. var client = new COS({
  433. SecretId: res.id,
  434. SecretKey: res.key,
  435. })
  436. }else if(res.type=='QINIU'){
  437. var client = res.uploadToken;
  438. console.log(client);
  439. }
  440. UserFactory(res.type,that.vedio,client,res,function(src,file,is){
  441. console.log(src,file.size,file.type);
  442. layList.basePost(that.U({a:'save'}),{src:src,size:file.size,type:file.type,is:is},function (res) {
  443. layList.msg(res.msg);
  444. that.getImageList();
  445. },function (res) {
  446. layList.msg(res.msg);
  447. })
  448. });
  449. }
  450. });
  451. },
  452. },
  453. mounted:function () {
  454. this.getCategoryList();
  455. this.getImageList();
  456. window.SuccessCateg = this.SuccessCateg;
  457. this.uploal();
  458. }
  459. })
  460. </script>