videoTemplate.vue 14 KB

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