tabBtn19.js 39 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958
  1. $(document).ready(function () {
  2. let url = window.location.search;
  3. let id;
  4. let data;
  5. let videoSrc;
  6. var theRequest = new Object();
  7. if (url.indexOf("?") != -1) {
  8. var str = url.substr(1);
  9. strs = str.split("&");
  10. for (var i = 0; i < strs.length; i++) {
  11. theRequest[strs[i].split("=")[0]] = unescape(
  12. decodeURI(strs[i].split("=")[1])
  13. );
  14. }
  15. }
  16. let tabId = theRequest.TabId || 1;
  17. // 上传文件-视频
  18. let spFilesArr = [];
  19. let spInputFile1 = document.getElementById("uploadVideo1");
  20. let spTheFile1;
  21. spInputFile1.onchange = function () {
  22. // 获取用户上传的文件对象
  23. spTheFile1 = spInputFile1.files;
  24. // 回显
  25. // 实例化一个文件读取器
  26. let fileReader = new FileReader();
  27. fileReader.onload = function () {
  28. spFilesArr.push(spTheFile1[0]);
  29. };
  30. //读取文件
  31. fileReader.readAsDataURL(spTheFile1[0]);
  32. fileReader.onprogress = updateProgress1;
  33. };
  34. let spInputFile2 = document.getElementById("uploadVideo2");
  35. let spTheFile2;
  36. spInputFile2.onchange = function () {
  37. // 获取用户上传的文件对象
  38. spTheFile2 = spInputFile2.files;
  39. // 回显
  40. // 实例化一个文件读取器
  41. let fileReader = new FileReader();
  42. fileReader.onload = function () {
  43. spFilesArr.push(spTheFile2[0]);
  44. };
  45. //读取文件
  46. fileReader.readAsDataURL(spTheFile2[0]);
  47. fileReader.onprogress = updateProgress2;
  48. };
  49. let spInputFile3 = document.getElementById("uploadVideo3");
  50. let spTheFile3;
  51. spInputFile3.onchange = function () {
  52. // 获取用户上传的文件对象
  53. spTheFile3 = spInputFile3.files;
  54. // 回显
  55. // 实例化一个文件读取器
  56. let fileReader = new FileReader();
  57. fileReader.onload = function () {
  58. spFilesArr.push(spTheFile3[0]);
  59. };
  60. //读取文件
  61. fileReader.readAsDataURL(spTheFile3[0]);
  62. fileReader.onprogress = updateProgress3;
  63. };
  64. let spInputFile4 = document.getElementById("uploadVideo4");
  65. let spTheFile4;
  66. spInputFile4.onchange = function () {
  67. // 获取用户上传的文件对象
  68. spTheFile4 = spInputFile4.files;
  69. // 回显
  70. // 实例化一个文件读取器
  71. let fileReader = new FileReader();
  72. fileReader.onload = function () {
  73. spFilesArr.push(spTheFile4[0]);
  74. };
  75. //读取文件
  76. fileReader.readAsDataURL(spTheFile4[0]);
  77. fileReader.onprogress = updateProgress4;
  78. };
  79. let spInputFile5 = document.getElementById("uploadVideo5");
  80. let spTheFile5;
  81. spInputFile5.onchange = function () {
  82. // 获取用户上传的文件对象
  83. spTheFile5 = spInputFile5.files;
  84. // 回显
  85. // 实例化一个文件读取器
  86. let fileReader = new FileReader();
  87. fileReader.onload = function () {
  88. spFilesArr.push(spTheFile5[0]);
  89. };
  90. //读取文件
  91. fileReader.readAsDataURL(spTheFile5[0]);
  92. fileReader.onprogress = updateProgress5;
  93. };
  94. let spInputFile6 = document.getElementById("uploadVideo6");
  95. let spTheFile6;
  96. spInputFile6.onchange = function () {
  97. // 获取用户上传的文件对象
  98. spTheFile6 = spInputFile6.files;
  99. // 回显
  100. // 实例化一个文件读取器
  101. let fileReader = new FileReader();
  102. fileReader.onload = function () {
  103. spFilesArr.push(spTheFile6[0]);
  104. };
  105. //读取文件
  106. fileReader.readAsDataURL(spTheFile6[0]);
  107. fileReader.onprogress = updateProgress6;
  108. };
  109. let spInputFile7 = document.getElementById("uploadVideo7");
  110. let spTheFile7;
  111. spInputFile7.onchange = function () {
  112. // 获取用户上传的文件对象
  113. spTheFile7 = spInputFile7.files;
  114. // 回显
  115. // 实例化一个文件读取器
  116. let fileReader = new FileReader();
  117. fileReader.onload = function () {
  118. spFilesArr.push(spTheFile7[0]);
  119. };
  120. //读取文件
  121. fileReader.readAsDataURL(spTheFile7[0]);
  122. fileReader.onprogress = updateProgress7;
  123. };
  124. let spInputFile8 = document.getElementById("uploadVideo8");
  125. let spTheFile8;
  126. spInputFile8.onchange = function () {
  127. // 获取用户上传的文件对象
  128. spTheFile8 = spInputFile8.files;
  129. // 回显
  130. // 实例化一个文件读取器
  131. let fileReader = new FileReader();
  132. fileReader.onload = function () {
  133. spFilesArr.push(spTheFile8[0]);
  134. };
  135. //读取文件
  136. fileReader.readAsDataURL(spTheFile8[0]);
  137. fileReader.onprogress = updateProgress8;
  138. };
  139. let spInputFile9 = document.getElementById("uploadVideo9");
  140. let spTheFile9;
  141. spInputFile9.onchange = function () {
  142. // 获取用户上传的文件对象
  143. spTheFile9 = spInputFile9.files;
  144. // 回显
  145. // 实例化一个文件读取器
  146. let fileReader = new FileReader();
  147. fileReader.onload = function () {
  148. spFilesArr.push(spTheFile9[0]);
  149. };
  150. //读取文件
  151. fileReader.readAsDataURL(spTheFile9[0]);
  152. fileReader.onprogress = updateProgress9;
  153. };
  154. // 上传文件-图片
  155. let tpFilesArr = [];
  156. let tpInputFile1 = document.getElementById("uploadImg1");
  157. let tpTheFile1;
  158. tpInputFile1.onchange = function () {
  159. // 获取用户上传的文件对象
  160. tpTheFile1 = tpInputFile1.files;
  161. // 实例化一个文件读取器
  162. let fileReader = new FileReader();
  163. // 文件读取器方法执行完毕后调用函数
  164. fileReader.onload = function () {
  165. $("#TPImg1").attr("src", fileReader.result);
  166. tpFilesArr.push(tpTheFile1[0]);
  167. };
  168. // 将用户上传的文件对象作为参数,传入文件读取器的方法readAsDateURL
  169. fileReader.readAsDataURL(tpTheFile1[0]);
  170. };
  171. let tpInputFile2 = document.getElementById("uploadImg2");
  172. let tpTheFile2;
  173. tpInputFile2.onchange = function () {
  174. // 获取用户上传的文件对象
  175. tpTheFile2 = tpInputFile2.files;
  176. // 实例化一个文件读取器
  177. let fileReader = new FileReader();
  178. // 文件读取器方法执行完毕后调用函数
  179. fileReader.onload = function () {
  180. $("#TPImg2").attr("src", fileReader.result);
  181. tpFilesArr.push(tpTheFile2[0]);
  182. };
  183. // 将用户上传的文件对象作为参数,传入文件读取器的方法readAsDateURL
  184. fileReader.readAsDataURL(tpTheFile2[0]);
  185. };
  186. let tpInputFile3 = document.getElementById("uploadImg3");
  187. let tpTheFile3;
  188. tpInputFile3.onchange = function () {
  189. // 获取用户上传的文件对象
  190. tpTheFile3 = tpInputFile3.files;
  191. // 实例化一个文件读取器
  192. let fileReader = new FileReader();
  193. // 文件读取器方法执行完毕后调用函数
  194. fileReader.onload = function () {
  195. $("#TPImg3").attr("src", fileReader.result);
  196. tpFilesArr.push(tpTheFile3[0]);
  197. };
  198. // 将用户上传的文件对象作为参数,传入文件读取器的方法readAsDateURL
  199. fileReader.readAsDataURL(tpTheFile3[0]);
  200. };
  201. let tpInputFile4 = document.getElementById("uploadImg4");
  202. let tpTheFile4;
  203. tpInputFile4.onchange = function () {
  204. // 获取用户上传的文件对象
  205. tpTheFile4 = tpInputFile4.files;
  206. // 实例化一个文件读取器
  207. let fileReader = new FileReader();
  208. // 文件读取器方法执行完毕后调用函数
  209. fileReader.onload = function () {
  210. $("#TPImg4").attr("src", fileReader.result);
  211. tpFilesArr.push(tpTheFile4[0]);
  212. };
  213. // 将用户上传的文件对象作为参数,传入文件读取器的方法readAsDateURL
  214. fileReader.readAsDataURL(tpTheFile4[0]);
  215. };
  216. let tpInputFile5 = document.getElementById("uploadImg5");
  217. let tpTheFile5;
  218. tpInputFile5.onchange = function () {
  219. // 获取用户上传的文件对象
  220. tpTheFile5 = tpInputFile5.files;
  221. // 实例化一个文件读取器
  222. let fileReader = new FileReader();
  223. // 文件读取器方法执行完毕后调用函数
  224. fileReader.onload = function () {
  225. $("#TPImg5").attr("src", fileReader.result);
  226. tpFilesArr.push(tpTheFile5[0]);
  227. };
  228. // 将用户上传的文件对象作为参数,传入文件读取器的方法readAsDateURL
  229. fileReader.readAsDataURL(tpTheFile5[0]);
  230. };
  231. let tpInputFile6 = document.getElementById("uploadImg6");
  232. let tpTheFile6;
  233. tpInputFile6.onchange = function () {
  234. // 获取用户上传的文件对象
  235. tpTheFile6 = tpInputFile6.files;
  236. // 实例化一个文件读取器
  237. let fileReader = new FileReader();
  238. // 文件读取器方法执行完毕后调用函数
  239. fileReader.onload = function () {
  240. $("#TPImg6").attr("src", fileReader.result);
  241. tpFilesArr.push(tpTheFile6[0]);
  242. };
  243. // 将用户上传的文件对象作为参数,传入文件读取器的方法readAsDateURL
  244. fileReader.readAsDataURL(tpTheFile6[0]);
  245. };
  246. let tpInputFile7 = document.getElementById("uploadImg7");
  247. let tpTheFile7;
  248. tpInputFile7.onchange = function () {
  249. // 获取用户上传的文件对象
  250. tpTheFile7 = tpInputFile7.files;
  251. // 实例化一个文件读取器
  252. let fileReader = new FileReader();
  253. // 文件读取器方法执行完毕后调用函数
  254. fileReader.onload = function () {
  255. $("#TPImg7").attr("src", fileReader.result);
  256. tpFilesArr.push(tpTheFile7[0]);
  257. };
  258. // 将用户上传的文件对象作为参数,传入文件读取器的方法readAsDateURL
  259. fileReader.readAsDataURL(tpTheFile7[0]);
  260. };
  261. let tpInputFile8 = document.getElementById("uploadImg8");
  262. let tpTheFile8;
  263. tpInputFile8.onchange = function () {
  264. // 获取用户上传的文件对象
  265. tpTheFile8 = tpInputFile8.files;
  266. // 实例化一个文件读取器
  267. let fileReader = new FileReader();
  268. // 文件读取器方法执行完毕后调用函数
  269. fileReader.onload = function () {
  270. $("#TPImg8").attr("src", fileReader.result);
  271. tpFilesArr.push(tpTheFile8[0]);
  272. };
  273. // 将用户上传的文件对象作为参数,传入文件读取器的方法readAsDateURL
  274. fileReader.readAsDataURL(tpTheFile8[0]);
  275. };
  276. let tpInputFile9 = document.getElementById("uploadImg9");
  277. let tpTheFile9;
  278. tpInputFile9.onchange = function () {
  279. // 获取用户上传的文件对象
  280. tpTheFile9 = tpInputFile9.files;
  281. // 实例化一个文件读取器
  282. let fileReader = new FileReader();
  283. // 文件读取器方法执行完毕后调用函数
  284. fileReader.onload = function () {
  285. $("#TPImg9").attr("src", fileReader.result);
  286. tpFilesArr.push(tpTheFile9[0]);
  287. };
  288. // 将用户上传的文件对象作为参数,传入文件读取器的方法readAsDateURL
  289. fileReader.readAsDataURL(tpTheFile9[0]);
  290. };
  291. // 功能-上传视频-打开上传视频窗口
  292. $("#SPImg1").on("click", function () {
  293. $("#uploadVideo1").click();
  294. });
  295. // 功能-上传视频-打开上传视频窗口
  296. $("#SPImg2").on("click", function () {
  297. $("#uploadVideo2").click();
  298. });
  299. // 功能-上传视频-打开上传视频窗口
  300. $("#SPImg3").on("click", function () {
  301. $("#uploadVideo3").click();
  302. });
  303. // 功能-上传视频-打开上传视频窗口
  304. $("#SPImg4").on("click", function () {
  305. $("#uploadVideo4").click();
  306. });
  307. // 功能-上传视频-打开上传视频窗口
  308. $("#SPImg5").on("click", function () {
  309. $("#uploadVideo5").click();
  310. });
  311. // 功能-上传视频-打开上传视频窗口
  312. $("#SPImg6").on("click", function () {
  313. $("#uploadVideo6").click();
  314. });
  315. // 功能-上传视频-打开上传视频窗口
  316. $("#SPImg7").on("click", function () {
  317. $("#uploadVideo7").click();
  318. });
  319. // 功能-上传视频-打开上传视频窗口
  320. $("#SPImg8").on("click", function () {
  321. $("#uploadVideo8").click();
  322. });
  323. // 功能-上传视频-打开上传视频窗口
  324. $("#SPImg9").on("click", function () {
  325. $("#uploadVideo9").click();
  326. });
  327. // 功能-上传图片-打开上传图片窗口
  328. $("#TPImg1").on("click", function () {
  329. $("#uploadImg1").click();
  330. });
  331. // 功能-上传图片-打开上传图片窗口
  332. $("#TPImg2").on("click", function () {
  333. $("#uploadImg2").click();
  334. });
  335. // 功能-上传图片-打开上传图片窗口
  336. $("#TPImg3").on("click", function () {
  337. $("#uploadImg3").click();
  338. });
  339. // 功能-上传图片-打开上传图片窗口
  340. $("#TPImg4").on("click", function () {
  341. $("#uploadImg4").click();
  342. });
  343. // 功能-上传图片-打开上传图片窗口
  344. $("#TPImg5").on("click", function () {
  345. $("#uploadImg5").click();
  346. });
  347. // 功能-上传图片-打开上传图片窗口
  348. $("#TPImg6").on("click", function () {
  349. $("#uploadImg6").click();
  350. });
  351. // 功能-上传图片-打开上传图片窗口
  352. $("#TPImg7").on("click", function () {
  353. $("#uploadImg7").click();
  354. });
  355. // 功能-上传图片-打开上传图片窗口
  356. $("#TPImg8").on("click", function () {
  357. $("#uploadImg8").click();
  358. });
  359. // 功能-上传图片-打开上传图片窗口
  360. $("#TPImg9").on("click", function () {
  361. $("#uploadImg9").click();
  362. });
  363. // 功能-修改图片-修改上传图片
  364. $("#GTPImg1").on("click", function () {
  365. $("#uploadImg1").click();
  366. });
  367. // 功能-修改图片-修改上传图片
  368. $("#GTPImg2").on("click", function () {
  369. $("#uploadImg2").click();
  370. });
  371. // 功能-修改图片-修改上传图片
  372. $("#GTPImg3").on("click", function () {
  373. $("#uploadImg3").click();
  374. });
  375. // 功能-修改图片-修改上传图片
  376. $("#GTPImg4").on("click", function () {
  377. $("#uploadImg4").click();
  378. });
  379. // 功能-修改图片-修改上传图片
  380. $("#GTPImg5").on("click", function () {
  381. $("#uploadImg5").click();
  382. });
  383. // 功能-修改图片-修改上传图片
  384. $("#GTPImg6").on("click", function () {
  385. $("#uploadImg6").click();
  386. });
  387. // 功能-修改图片-修改上传图片
  388. $("#GTPImg7").on("click", function () {
  389. $("#uploadImg7").click();
  390. });
  391. // 功能-修改图片-修改上传图片
  392. $("#GTPImg8").on("click", function () {
  393. $("#uploadImg8").click();
  394. });
  395. // 功能-修改图片-修改上传图片
  396. $("#GTPImg9").on("click", function () {
  397. $("#uploadImg9").click();
  398. });
  399. // 更新进度条
  400. function updateProgress1(e) {
  401. // e 是一个 ProgressEvent.
  402. if (e.lengthComputable) {
  403. var percentLoaded = Math.round((e.loaded / e.total) * 100);
  404. // 更新进度条长度
  405. if (percentLoaded <= 100) {
  406. $(`#uploadNum1`).text(`进度: ${percentLoaded}%`);
  407. }
  408. if (percentLoaded == 100) {
  409. $("#uploadNum1").addClass("uploadDel");
  410. $("#uploadNum1").text("删除");
  411. // 功能-添加中删除-反差内容-视频
  412. $("#uploadNum1").on("click", function () {
  413. console.log($(this).parent().index());
  414. spFilesArr.splice($(this).parent().index(), 1);
  415. console.log(spFilesArr);
  416. $(this).text("进度: 0%");
  417. $(this).removeClass("uploadDel");
  418. });
  419. }
  420. }
  421. }
  422. function updateProgress2(e) {
  423. // e 是一个 ProgressEvent.
  424. if (e.lengthComputable) {
  425. var percentLoaded = Math.round((e.loaded / e.total) * 100);
  426. // 更新进度条长度
  427. if (percentLoaded <= 100) {
  428. $(`#uploadNum2`).text(`进度: ${percentLoaded}%`);
  429. }
  430. if (percentLoaded == 100) {
  431. $("#uploadNum2").addClass("uploadDel");
  432. $("#uploadNum2").text("删除");
  433. // 功能-添加中删除-反差内容-视频
  434. $("#uploadNum2").on("click", function () {
  435. console.log($(this).parent().index());
  436. spFilesArr.splice($(this).parent().index(), 1);
  437. console.log(spFilesArr);
  438. $(this).text("进度: 0%");
  439. $(this).removeClass("uploadDel");
  440. });
  441. }
  442. }
  443. }
  444. function updateProgress3(e) {
  445. // e 是一个 ProgressEvent.
  446. if (e.lengthComputable) {
  447. var percentLoaded = Math.round((e.loaded / e.total) * 100);
  448. // 更新进度条长度
  449. if (percentLoaded <= 100) {
  450. $(`#uploadNum3`).text(`进度: ${percentLoaded}%`);
  451. }
  452. if (percentLoaded == 100) {
  453. $("#uploadNum3").addClass("uploadDel");
  454. $("#uploadNum3").text("删除");
  455. // 功能-添加中删除-反差内容-视频
  456. $("#uploadNum3").on("click", function () {
  457. console.log($(this).parent().index());
  458. spFilesArr.splice($(this).parent().index(), 1);
  459. console.log(spFilesArr);
  460. $(this).text("进度: 0%");
  461. $(this).removeClass("uploadDel");
  462. });
  463. }
  464. }
  465. }
  466. function updateProgress4(e) {
  467. // e 是一个 ProgressEvent.
  468. if (e.lengthComputable) {
  469. var percentLoaded = Math.round((e.loaded / e.total) * 100);
  470. // 更新进度条长度
  471. if (percentLoaded <= 100) {
  472. $(`#uploadNum4`).text(`进度: ${percentLoaded}%`);
  473. }
  474. if (percentLoaded == 100) {
  475. $("#uploadNum4").addClass("uploadDel");
  476. $("#uploadNum4").text("删除");
  477. // 功能-添加中删除-反差内容-视频
  478. $("#uploadNum4").on("click", function () {
  479. console.log($(this).parent().index());
  480. spFilesArr.splice($(this).parent().index(), 1);
  481. console.log(spFilesArr);
  482. $(this).text("进度: 0%");
  483. $(this).removeClass("uploadDel");
  484. });
  485. }
  486. }
  487. }
  488. function updateProgress5(e) {
  489. // e 是一个 ProgressEvent.
  490. if (e.lengthComputable) {
  491. var percentLoaded = Math.round((e.loaded / e.total) * 100);
  492. // 更新进度条长度
  493. if (percentLoaded <= 100) {
  494. $(`#uploadNum5`).text(`进度: ${percentLoaded}%`);
  495. }
  496. if (percentLoaded == 100) {
  497. $("#uploadNum5").addClass("uploadDel");
  498. $("#uploadNum5").text("删除");
  499. // 功能-添加中删除-反差内容-视频
  500. $("#uploadNum5").on("click", function () {
  501. console.log($(this).parent().index());
  502. spFilesArr.splice($(this).parent().index(), 1);
  503. console.log(spFilesArr);
  504. $(this).text("进度: 0%");
  505. $(this).removeClass("uploadDel");
  506. });
  507. }
  508. }
  509. }
  510. function updateProgress6(e) {
  511. // e 是一个 ProgressEvent.
  512. if (e.lengthComputable) {
  513. var percentLoaded = Math.round((e.loaded / e.total) * 100);
  514. // 更新进度条长度
  515. if (percentLoaded <= 100) {
  516. $(`#uploadNum6`).text(`进度: ${percentLoaded}%`);
  517. }
  518. if (percentLoaded == 100) {
  519. $("#uploadNum6").addClass("uploadDel");
  520. $("#uploadNum6").text("删除");
  521. // 功能-添加中删除-反差内容-视频
  522. $("#uploadNum6").on("click", function () {
  523. console.log($(this).parent().index());
  524. spFilesArr.splice($(this).parent().index(), 1);
  525. console.log(spFilesArr);
  526. $(this).text("进度: 0%");
  527. $(this).removeClass("uploadDel");
  528. });
  529. }
  530. }
  531. }
  532. function updateProgress7(e) {
  533. // e 是一个 ProgressEvent.
  534. if (e.lengthComputable) {
  535. var percentLoaded = Math.round((e.loaded / e.total) * 100);
  536. // 更新进度条长度
  537. if (percentLoaded <= 100) {
  538. $(`#uploadNum7`).text(`进度: ${percentLoaded}%`);
  539. }
  540. if (percentLoaded == 100) {
  541. $("#uploadNum7").addClass("uploadDel");
  542. $("#uploadNum7").text("删除");
  543. // 功能-添加中删除-反差内容-视频
  544. $("#uploadNum7").on("click", function () {
  545. console.log($(this).parent().index());
  546. spFilesArr.splice($(this).parent().index(), 1);
  547. console.log(spFilesArr);
  548. $(this).text("进度: 0%");
  549. $(this).removeClass("uploadDel");
  550. });
  551. }
  552. }
  553. }
  554. function updateProgress8(e) {
  555. // e 是一个 ProgressEvent.
  556. if (e.lengthComputable) {
  557. var percentLoaded = Math.round((e.loaded / e.total) * 100);
  558. // 更新进度条长度
  559. if (percentLoaded <= 100) {
  560. $(`#uploadNum8`).text(`进度: ${percentLoaded}%`);
  561. }
  562. if (percentLoaded == 100) {
  563. $("#uploadNum8").addClass("uploadDel");
  564. $("#uploadNum8").text("删除");
  565. // 功能-添加中删除-反差内容-视频
  566. $("#uploadNum8").on("click", function () {
  567. console.log($(this).parent().index());
  568. spFilesArr.splice($(this).parent().index(), 1);
  569. console.log(spFilesArr);
  570. $(this).text("进度: 0%");
  571. $(this).removeClass("uploadDel");
  572. });
  573. }
  574. }
  575. }
  576. function updateProgress9(e) {
  577. // e 是一个 ProgressEvent.
  578. if (e.lengthComputable) {
  579. var percentLoaded = Math.round((e.loaded / e.total) * 100);
  580. // 更新进度条长度
  581. if (percentLoaded <= 100) {
  582. $(`#uploadNum9`).text(`进度: ${percentLoaded}%`);
  583. }
  584. if (percentLoaded == 100) {
  585. $("#uploadNum9").addClass("uploadDel");
  586. $("#uploadNum9").text("删除");
  587. // 功能-添加中删除-反差内容-视频
  588. $("#uploadNum9").on("click", function () {
  589. console.log($(this).parent().index());
  590. spFilesArr.splice($(this).parent().index(), 1);
  591. console.log(spFilesArr);
  592. $(this).text("进度: 0%");
  593. $(this).removeClass("uploadDel");
  594. });
  595. }
  596. }
  597. }
  598. // 功能-新增-反差内容-弹窗展示
  599. $(".SLHeaderCreate").on("click", function () {
  600. $(".HoutaiContainerDialogAdd").show();
  601. });
  602. // 功能-新增-反差内容-弹窗隐藏
  603. $(".HoutaiContainerDialogLine5LeftAdd").on("click", function () {
  604. $(".HoutaiContainerDialogAdd").hide();
  605. });
  606. // 功能-新增-反差内容-确认新增
  607. $(".HoutaiContainerDialogLine5RightAdd").on("click", function () {
  608. if ($(this).text() == "正在上传中") {
  609. alert("正在上传中!请耐心等待!!!");
  610. return;
  611. }
  612. $(this).text("正在上传中");
  613. $(this).css("background", "#575f6e");
  614. var formFile = new FormData();
  615. formFile.append("title", $("#inputtext1").val());
  616. formFile.append("uploader", "7");
  617. formFile.append("token", "b8e3bb6ef8747d7");
  618. console.log(spFilesArr);
  619. for (let i in spFilesArr) {
  620. formFile.append("mp4[]", spFilesArr[i]);
  621. console.log(spFilesArr[i]);
  622. }
  623. console.log(tpFilesArr);
  624. for (let i in tpFilesArr) {
  625. formFile.append("img[]", tpFilesArr[i]);
  626. console.log(tpFilesArr[i]);
  627. }
  628. for (let value of formFile.values()) {
  629. console.log(value);
  630. }
  631. $.ajax({
  632. type: "post",
  633. url: "https://api.9169kkxstzsjkdd222.app/Admin/Adminbackonenine/pengyouquan_add",
  634. dataType: "json",
  635. data: formFile,
  636. async: true,
  637. cache: false,
  638. contentType: false,
  639. processData: false,
  640. success: function (res) {
  641. // alert("添加成功");
  642. console.log(res);
  643. window.location.reload();
  644. },
  645. });
  646. });
  647. // 接口调用-数据获取-反差列表
  648. function getData() {
  649. $.ajax({
  650. type: "post",
  651. url: "https://api.9169kkxstzsjkdd222.app/Admin/Adminbackonenine/take_photo_on_street_list",
  652. dataType: "json",
  653. data: {
  654. type: "7",
  655. page: tabId,
  656. },
  657. success: function (res) {
  658. console.log(res);
  659. data = res.data;
  660. $(".SLHeader p").text(`鉴臀( ${res.all_num} )`);
  661. let AppleListHTML = "";
  662. $.each(data, function (index, value) {
  663. let splitImgArray = [];
  664. if (value.img_url) {
  665. splitImgArray = value.img_url.split(",");
  666. }
  667. console.log(splitImgArray);
  668. AppleListHTML += `
  669. <div id="${value.id}" class="HoutaiContainerBottomAppleListHeaders">`;
  670. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderBT">${value.title}</p>`;
  671. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderTP">${splitImgArray[0] ? `<img type="${value.type}" url="${value.m3u8_url}" imgurl="${splitImgArray[0]}" src="${splitImgArray[0]}" alt="">` : ""}</p>`;
  672. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderTP">${splitImgArray[1] ? `<img type="${value.type}" url="${value.m3u8_url}" imgurl="${splitImgArray[1]}" src="${splitImgArray[1]}" alt="">` : ""}</p>`;
  673. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderTP">${splitImgArray[2] ? `<img type="${value.type}" url="${value.m3u8_url}" imgurl="${splitImgArray[2]}" src="${splitImgArray[2]}" alt="">` : ""}</p>`;
  674. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderTP">${splitImgArray[3] ? `<img type="${value.type}" url="${value.m3u8_url}" imgurl="${splitImgArray[3]}" src="${splitImgArray[3]}" alt="">` : ""}</p>`;
  675. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderTP">${splitImgArray[4] ? `<img type="${value.type}" url="${value.m3u8_url}" imgurl="${splitImgArray[4]}" src="${splitImgArray[4]}" alt="">` : ""}</p>`;
  676. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderTP">${splitImgArray[5] ? `<img type="${value.type}" url="${value.m3u8_url}" imgurl="${splitImgArray[5]}" src="${splitImgArray[5]}" alt="">` : ""}</p>`;
  677. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderTP">${splitImgArray[6] ? `<img type="${value.type}" url="${value.m3u8_url}" imgurl="${splitImgArray[6]}" src="${splitImgArray[6]}" alt="">` : ""}</p>`;
  678. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderTP">${splitImgArray[7] ? `<img type="${value.type}" url="${value.m3u8_url}" imgurl="${splitImgArray[7]}" src="${splitImgArray[7]}" alt="">` : ""}</p>`;
  679. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderTP">${splitImgArray[8] ? `<img type="${value.type}" url="${value.m3u8_url}" imgurl="${splitImgArray[8]}" src="${splitImgArray[8]}" alt="">` : ""}</p>`;
  680. // }
  681. if (value.type == "0") {
  682. AppleListHTML += ` <p class="HoutaiContainerBottomAppleListHeaderNR chulizhong">待处理`;
  683. } else if (value.type == "1") {
  684. AppleListHTML += ` <p class="HoutaiContainerBottomAppleListHeaderNR chulizhong">处理中`;
  685. } else {
  686. AppleListHTML += `<p class="HoutaiContainerBottomAppleListHeaderNR">完成`;
  687. }
  688. AppleListHTML += `
  689. </p>
  690. <div class="HoutaiContainerBottomAppleListHeaderCZ">
  691. <p class="HoutaiContainerBottomAppleListHeaderCZsc">删除</p>
  692. </div>
  693. </div>
  694. `;
  695. });
  696. $("#AppleList").html(AppleListHTML);
  697. },
  698. complete: function (res, status) {
  699. console.log(res);
  700. $("#page").paging({
  701. pageNo: tabId,
  702. totalPage: Math.ceil(res.responseJSON.all_num / 50),
  703. callback: function (num) {
  704. window.location.href =
  705. "https://api.9169kkxstzsjkdd222.app/tabBtn19?TabId=" + num;
  706. },
  707. });
  708. // 看图||看视频
  709. $(".HoutaiContainerBottomAppleListHeaderTP img").on(
  710. "click",
  711. function () {
  712. let type = $(this).attr("type");
  713. if (type == 1) {
  714. $(".bannerImgBJ").show();
  715. let imgurl = $(this).attr("imgurl");
  716. $(".bannerImg").attr("src", imgurl);
  717. } else {
  718. let url = $(this).attr("url");
  719. let type = $(this).attr("type");
  720. if (type == "2") {
  721. let videoHTML = `
  722. <div>
  723. <div id="h5">
  724. <img class="toogleImg" src="/Public/Admin/img/end.png" alt="">
  725. </div>
  726. </div>
  727. <div class="HoutaiContainerDialogLine4Check">
  728. <p class="HoutaiContainerDialogLine4CheckBtn btn checkbtn" id="qr">确认</p>
  729. </div>
  730. `;
  731. $(".HoutaiContainerDialogDeputyCheck").html(
  732. videoHTML
  733. );
  734. let videoSrc = url;
  735. let videoImg = "";
  736. var md = new MuiPlayer({
  737. container: "#h5",
  738. title: "",
  739. // autoplay: true,
  740. initFullFixed: true,
  741. autoplay: false,
  742. themeColor: "#FF6A00",
  743. lang: "en",
  744. poster: videoImg,
  745. src: videoSrc,
  746. // src: 'https://www.9169slck.com/video/414958811/test/test.m3u8',
  747. parse: {
  748. type: "hls",
  749. loader: Hls,
  750. config: {
  751. debug: false,
  752. },
  753. },
  754. videoAttribute: [
  755. {
  756. attrKey: "webkit-playsinline",
  757. attrValue: "webkit-playsinline",
  758. },
  759. {
  760. attrKey: "playsinline",
  761. attrValue: "playsinline",
  762. },
  763. {
  764. attrKey: "x5-video-player-type",
  765. attrValue: "h5-page",
  766. },
  767. ],
  768. plugins: [
  769. new MuiPlayerMobilePlugin({
  770. key: "01F01D01G01I01F01H01H01K01C01J01F01J01D01H01K",
  771. showMenuButton: true,
  772. }),
  773. ],
  774. });
  775. md.on("ready", function () {
  776. $("#h5").show();
  777. $(".quanquan").hide();
  778. document.querySelector(
  779. ".mplayer-header"
  780. ).style.display = "none";
  781. md.on("seek-progress", function (e) {
  782. // console.log("names");
  783. md.video().play();
  784. });
  785. md.video().onended = function () {
  786. console.log("播放完成");
  787. // if (ad.video.currentTime > '33') {//视频时间,单位’秒‘,建议减1秒
  788. $("#mui-player").remove();
  789. };
  790. $(".toogleImg").on("click", function (e) {
  791. e.stopPropagation();
  792. console.log($(this).attr("src"));
  793. let toogleStatus = $(this).attr("src");
  794. if (
  795. toogleStatus ==
  796. "/Public/Admin/img/end.png"
  797. ) {
  798. md.video().play();
  799. $(".toogleImg").attr(
  800. "src",
  801. "/Public/Admin/img/star.png"
  802. );
  803. } else {
  804. md.video().pause();
  805. $(".toogleImg").attr(
  806. "src",
  807. "/Public/Admin/img/end.png"
  808. );
  809. }
  810. });
  811. md.video().addEventListener(
  812. "playing",
  813. function () {
  814. $(".toogleImg").attr(
  815. "src",
  816. "/Public/Admin/img/star.png"
  817. );
  818. console.log("开始播放");
  819. md.toggleControls(false);
  820. }
  821. );
  822. md.video().addEventListener(
  823. "pause",
  824. function () {
  825. console.log("暂停播放");
  826. md.video().pause();
  827. $(".toogleImg").attr(
  828. "src",
  829. "/Public/Admin/img/end.png"
  830. );
  831. }
  832. );
  833. });
  834. $(".HoutaiContainerDialogCheck").show();
  835. // 功能-查看-反差内容-弹窗隐藏
  836. $(".HoutaiContainerDialogLine4CheckBtn").on(
  837. "click",
  838. function () {
  839. $(
  840. ".HoutaiContainerDialogDeputyCheck"
  841. ).html("");
  842. $(".HoutaiContainerDialogCheck").hide();
  843. }
  844. );
  845. }
  846. }
  847. }
  848. );
  849. $(".bannerImgBJ").on("click", function () {
  850. $(this).fadeOut(300);
  851. });
  852. // 功能-删除-反差内容-弹窗展示
  853. $(".HoutaiContainerBottomAppleListHeaderCZsc").on(
  854. "click",
  855. function () {
  856. id = $(this).parent().parent().attr("id");
  857. $(".HoutaiContainerDialogSC").show();
  858. }
  859. );
  860. // 功能-删除-反差内容-取消删除
  861. $(".HoutaiContainerDialogASCdvertLeft").on(
  862. "click",
  863. function () {
  864. $(".HoutaiContainerDialogSC").hide();
  865. }
  866. );
  867. // 功能-删除-反差内容-确定删除
  868. $(".HoutaiContainerDialogSCAdvertRight").on(
  869. "click",
  870. function () {
  871. $.ajax({
  872. type: "post",
  873. url: "https://api.9169kkxstzsjkdd222.app/Admin/Adminback/delete_take_photo",
  874. dataType: "json",
  875. data: {
  876. id: id,
  877. },
  878. success: function (res) {
  879. console.log(res);
  880. window.location.reload();
  881. },
  882. });
  883. }
  884. );
  885. },
  886. });
  887. }
  888. getData();
  889. });