videoTemplate.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454
  1. <style scoped lang="scss">
  2. .template-content {
  3. width: 100%;
  4. overflow: hidden;
  5. padding: 10px 0px;
  6. display: flex;
  7. flex-wrap: wrap;
  8. margin-right: -10px;
  9. }
  10. @media (min-width: 1024px) {
  11. .home-item {
  12. border-style: solid;
  13. border-width: 1px;
  14. border-color: #e4e4e4;
  15. width: calc(50% - 10px);
  16. padding: 10px;
  17. margin-right: 10px;
  18. margin-bottom: 10px;
  19. display: flex;
  20. align-items: center;
  21. background: #fff;
  22. position: relative;
  23. z-index: 99;
  24. }
  25. }
  26. /*>=1024的设备*/
  27. // @media (min-width: 1100px) {
  28. // .checkbox_item_container {
  29. // width:70%
  30. // }
  31. // } /*>=1100的设备*/
  32. @media (min-width: 1600px) {
  33. .home-item {
  34. border-style: solid;
  35. border-width: 1px;
  36. border-color: #e4e4e4;
  37. width: calc(25% - 10px);
  38. padding: 10px;
  39. margin-right: 10px;
  40. margin-bottom: 10px;
  41. display: flex;
  42. align-items: center;
  43. background: #fff;
  44. position: relative;
  45. z-index: 99;
  46. }
  47. }
  48. /*>=1280的设备*/
  49. // @media (min-width: 1366px) {
  50. // }
  51. // @media (min-width: 1440px) {
  52. // }
  53. // @media (min-width: 1680px) {
  54. // }
  55. @media (min-width: 1920px) {
  56. .home-item {
  57. border-style: solid;
  58. border-width: 1px;
  59. border-color: #e4e4e4;
  60. width: calc(25% - 10px);
  61. padding: 10px;
  62. margin-right: 10px;
  63. margin-bottom: 10px;
  64. display: flex;
  65. align-items: center;
  66. background: #fff;
  67. position: relative;
  68. z-index: 99;
  69. cursor: pointer;
  70. }
  71. }
  72. .bhShow {
  73. height: 100px;
  74. line-height: 25px;
  75. text-align: center;
  76. }
  77. .bhShow span {
  78. font-size: 14px;
  79. }
  80. .show-data {
  81. width: 50%;
  82. display: flex;
  83. flex-direction: column;
  84. align-items: flex-start;
  85. }
  86. </style>
  87. <template>
  88. <a-card :bordered="false">
  89. <!-- <a-steps :current="current" style="width:50%;margin:auto">
  90. <a-step v-for="item in steps" :key="item.title" :title="item.title" />
  91. </a-steps> -->
  92. <a-button type="primary" icon="plus" @click="visible = true">新增模板</a-button>
  93. <div class="steps-content">
  94. <div style="margin-bottom:10px">
  95. <span>
  96. 视频尺寸&nbsp;&nbsp;&nbsp;&nbsp;
  97. </span>
  98. <!-- sizeType -->
  99. <a-radio-group defaultValue="1" buttonStyle="solid" v-model="queryParam.sizeType" @change="changData()">
  100. <a-radio-button value="1">竖版</a-radio-button>
  101. <a-radio-button value="2">横板</a-radio-button>
  102. </a-radio-group>
  103. </div>
  104. <!-- <div style="margin-bottom:10px">
  105. <span>
  106. 行业类别&nbsp;&nbsp;&nbsp;&nbsp;
  107. </span>
  108. <a-radio-group defaultValue="a" buttonStyle="solid">
  109. <a-radio-button value="a">Hangzhou</a-radio-button>
  110. <a-radio-button value="b">Shanghai</a-radio-button>
  111. <a-radio-button value="c">Beijing</a-radio-button>
  112. <a-radio-button value="d">Chengdu</a-radio-button>
  113. <a-radio-button value="o">Beijing</a-radio-button>
  114. <a-radio-button value="p">Chengdu</a-radio-button>
  115. <a-radio-button value="e">Beijing</a-radio-button>
  116. <a-radio-button value="f">Chengdu</a-radio-button>
  117. </a-radio-group>
  118. </div> -->
  119. <div style="margin-bottom:10px">
  120. <span>
  121. 模板排序&nbsp;&nbsp;&nbsp;&nbsp;
  122. </span>
  123. <a-radio-group defaultValue="1" buttonStyle="solid" v-model="queryParam.orderType" @change="changData()">
  124. <a-radio-button value="1">默认排序</a-radio-button>
  125. <a-radio-button value="2">时间排序</a-radio-button>
  126. </a-radio-group>
  127. </div>
  128. <div class="template-content" v-if="dataSource.length>0">
  129. <div v-for="item of dataSource" :key="item.id" class="home-item">
  130. <div class="home-right" style="width:100%">
  131. <div style="display:flex;justify-content:center;width:100%;position:relative;">
  132. <video class="video" :src="item.modelVideoUrl" controls="controls" style="height:auto;max-width:100%;"
  133. controlsList="nodownload">
  134. 您的浏览器不支持 video 标签。
  135. </video>
  136. </div>
  137. <span
  138. style="color: #999; fontSize: 16px;padding-top:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;">
  139. {{ item.title }}
  140. <a-button type="primary" style="float:right" @click="visibleMergeShow(item)">使用模板</a-button>
  141. </span>
  142. </div>
  143. </div>
  144. </div>
  145. <div class="template-content" v-else
  146. style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
  147. <img
  148. src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
  149. alt="" />
  150. </div>
  151. </div>
  152. <a-modal title='添加素材' v-model="visible" @cancel="close" @afterClose="close" :maskClosable="false" :width="800">
  153. <template slot="footer">
  154. <a-button key="back" @click="close">取消</a-button>
  155. <a-button key="submit" type="primary" @click="handleOk">
  156. 确定
  157. </a-button>
  158. </template>
  159. <a-form :form="form">
  160. <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传">
  161. <upload-to-ali v-model="urlList.url" :customDomain="customDomain" preview :region="region" :bucket="bucket"
  162. :accept="acceptVideo" :max="10" :size="1024000" :accessKeyId="accessKeyId"
  163. :accessKeySecret="accessKeySecret" :before-upload="file" :dir="dirVideo" @loaded="overUpload">
  164. </upload-to-ali>
  165. </a-form-item>
  166. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板标题">
  167. <a-input placeholder="请输入模板标题" v-decorator="['title',{ rules: [{ required: true, message: '请输入模板标题' }]}]" />
  168. </a-form-item>
  169. <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="视频尺寸">
  170. <a-radio-group placeholder="请选择模板视频尺寸" v-decorator="[
  171. 'sizeType',
  172. { rules: [{ required: true, message: '请选择模板视频尺寸' }], initialValue: '1' }
  173. ]">
  174. <a-radio-button value="1">竖版</a-radio-button>
  175. <a-radio-button value="2">横板</a-radio-button>
  176. </a-radio-group>
  177. </a-form-item>
  178. </a-form>
  179. </a-modal>
  180. <a-modal title='模板视频合成' v-model="visibleMerge" @cancel="closeMerge" @afterClose="closeMerge" :maskClosable="false"
  181. :width="800">
  182. <template slot="footer">
  183. <a-button key="back" @click="closeMerge">取消</a-button>
  184. <a-button key="submit" type="primary" @click="handleOkMerge">
  185. 确定
  186. </a-button>
  187. </template>
  188. <div style="display:flex;height:600px" v-if="showData">
  189. <div class="video-content"
  190. style="position:relative;width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2">
  191. <video class="video" :src="showData.modelVideoUrl" controls="controls" style="height:90%"
  192. controlsList="nodownload">
  193. 您的浏览器不支持 video 标签。
  194. </video>
  195. <div v-if="showLoading"
  196. style="font-size:30px;font-weight:700;width:100%;height:100%;position:absolute;top:0;background:white;z-index:2;text-align:center;line-height:500px">
  197. 视频合成中...
  198. </div>
  199. </div>
  200. <div style="flex:3;padding:10px;box-sizing:border-box;">
  201. <span style="color:black;font-size:18px;text-align:center;width:100%">合成视频上传</span>
  202. <upload-to-ali v-model="urlListMerge.url" :customDomain="customDomain" preview :region="region"
  203. :bucket="bucket" :accept="acceptVideo" :max="10" :size="1024000" :accessKeyId="accessKeyId"
  204. :accessKeySecret="accessKeySecret" :before-upload="file" :dir="dirMerge" @loaded="overUploadMerge">
  205. </upload-to-ali>
  206. </div>
  207. </div>
  208. </a-modal>
  209. </a-card>
  210. </template>
  211. <script>
  212. import {
  213. getAction,
  214. postAction,
  215. postFile,
  216. deleteAction,
  217. putAction
  218. } from '@/api/manage'
  219. import {
  220. JeecgListMixin
  221. } from '@/mixins/JeecgListMixin'
  222. import BMF from 'browser-md5-file'
  223. import UploadToAli from '@femessage/upload-to-ali'
  224. import {
  225. stopOtherVideo,
  226. closeAllVideoFun
  227. } from '@/utils/videoControl'
  228. export default {
  229. mixins: [JeecgListMixin],
  230. components: {
  231. UploadToAli,
  232. },
  233. data() {
  234. return {
  235. current: 0,
  236. sizeType: '1',
  237. orderType: '1',
  238. visible: false,
  239. visibleMerge: false,
  240. showData: null,
  241. showLoading: false,
  242. url: {
  243. list: '/ctop/modelVideoInfo/list'
  244. },
  245. urlList: {
  246. url: '',
  247. md5: ''
  248. },
  249. urlListMerge: {
  250. url: '',
  251. md5: ''
  252. },
  253. labelCol: {
  254. xs: {
  255. span: 24
  256. },
  257. sm: {
  258. span: 5
  259. }
  260. },
  261. wrapperCol: {
  262. xs: {
  263. span: 24
  264. },
  265. sm: {
  266. span: 12
  267. }
  268. },
  269. form: this.$form.createForm(this),
  270. steps: [{
  271. title: '选择模板',
  272. content: 'First-content'
  273. },
  274. {
  275. title: '上传物料',
  276. content: 'Second-content'
  277. }
  278. ],
  279. creativeCopywriter: '',
  280. customDomain: '',
  281. region: 'oss-cn-beijing',
  282. bucket: 'ctop-media',
  283. acceptVideo: 'video/mpeg,video/mp4',
  284. acceptImage: 'image/jpeg,image/jpg,image/png',
  285. accessKeyId: 'LTAIbNbqWzSOklQV',
  286. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  287. labelCol: {
  288. xs: {
  289. span: 24
  290. },
  291. sm: {
  292. span: 5
  293. }
  294. },
  295. wrapperCol: {
  296. xs: {
  297. span: 24
  298. },
  299. sm: {
  300. span: 16
  301. }
  302. },
  303. dirMerge: "model/part/"
  304. }
  305. },
  306. computed: {
  307. dirVideo() {
  308. return 'model/video/'
  309. }
  310. },
  311. methods: {
  312. next() {
  313. this.current++
  314. },
  315. prev() {
  316. this.current--
  317. },
  318. changData() {
  319. this.loadData(1)
  320. },
  321. visibleMergeShow(item) {
  322. this.visibleMerge = true
  323. this.showLoading = false
  324. // this.showData = item
  325. this.showData = JSON.parse(JSON.stringify(item))
  326. },
  327. closeMerge() {
  328. this.visibleMerge = false
  329. this.urlListMerge = {
  330. url: '',
  331. md5: ''
  332. }
  333. this.showData = null
  334. },
  335. handleOkMerge() {
  336. },
  337. close() {
  338. this.visible = false
  339. },
  340. handleOk() {
  341. this.form.validateFieldsAndScroll((err, values) => {
  342. if (err) {
  343. // 这里做逻辑处理
  344. } else {
  345. var params = {
  346. ...values
  347. }
  348. params.signature = this.urlList.md5
  349. params.modelVideoUrl = this.urlList.url
  350. postAction('/ctop/modelVideoInfo/add', params).then(res => {
  351. console.log(res)
  352. if (res.success) {
  353. this.visible = false
  354. this.form.resetFields()
  355. this.urlList = {
  356. url: '',
  357. md5: '',
  358. }
  359. this.loadData()
  360. }
  361. })
  362. }
  363. })
  364. },
  365. overUpload(urlAll) {
  366. this.$message.success('上传成功')
  367. },
  368. overUploadMerge(urlAll) {
  369. this.showLoading = true
  370. postAction('/ctop/modelVideoInfoConfig/videoMerge', {
  371. modelId: this.showData.id,
  372. url: urlAll
  373. }).then(res => {
  374. // console.log(res)
  375. if (res.success) {
  376. this.showLoading = false
  377. this.showData.modelVideoUrl = res.url
  378. }
  379. })
  380. },
  381. file(file) {
  382. var bmf = new BMF()
  383. var that = this
  384. return new Promise(function (resolve, reject) {
  385. bmf.md5(file[0], (err, md5) => {
  386. that.urlList.md5 = md5
  387. resolve()
  388. // fileCheck({
  389. // code: md5,
  390. // projectId: that.getData('projectId')
  391. // }).then(res => {
  392. // if (res.code == 0) {
  393. // that.$message.error('此素材已经上传')
  394. // that.repeat = true
  395. // reject()
  396. // } else {
  397. // that.repeat = false
  398. // resolve()
  399. // // reject()
  400. // }
  401. // })
  402. })
  403. })
  404. },
  405. },
  406. mounted() {
  407. // getAction('/ctop/modelVideoInfo/list', {
  408. // sizeType: this.sizeType,
  409. // orderType: this.orderType
  410. // }).then(res => {
  411. // console.log(res)
  412. // })
  413. },
  414. created() {
  415. this.queryParam.sizeType = this.sizeType
  416. this.queryParam.orderType = this.orderType
  417. // this.queryParam.status = key
  418. this.ipagination.pageSize = 8
  419. },
  420. }
  421. </script>
  422. <style scoped>
  423. .steps-content {
  424. margin-top: 16px;
  425. border: 1px dashed #e9e9e9;
  426. border-radius: 6px;
  427. background-color: #fafafa;
  428. min-height: 200px;
  429. padding: 30px;
  430. }
  431. .steps-action {
  432. margin-top: 24px;
  433. }
  434. </style>