123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454 |
- <style scoped lang="scss">
- .template-content {
- width: 100%;
- overflow: hidden;
- padding: 10px 0px;
- display: flex;
- flex-wrap: wrap;
- margin-right: -10px;
- }
- @media (min-width: 1024px) {
- .home-item {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(50% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- }
- }
- /*>=1024的设备*/
- // @media (min-width: 1100px) {
- // .checkbox_item_container {
- // width:70%
- // }
- // } /*>=1100的设备*/
- @media (min-width: 1600px) {
- .home-item {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(25% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- }
- }
- /*>=1280的设备*/
- // @media (min-width: 1366px) {
- // }
- // @media (min-width: 1440px) {
- // }
- // @media (min-width: 1680px) {
- // }
- @media (min-width: 1920px) {
- .home-item {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(25% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- cursor: pointer;
- }
- }
- .bhShow {
- height: 100px;
- line-height: 25px;
- text-align: center;
- }
- .bhShow span {
- font-size: 14px;
- }
- .show-data {
- width: 50%;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- }
- </style>
- <template>
- <a-card :bordered="false">
- <!-- <a-steps :current="current" style="width:50%;margin:auto">
- <a-step v-for="item in steps" :key="item.title" :title="item.title" />
- </a-steps> -->
- <a-button type="primary" icon="plus" @click="visible = true">新增模板</a-button>
- <div class="steps-content">
- <div style="margin-bottom:10px">
- <span>
- 视频尺寸
- </span>
- <!-- sizeType -->
- <a-radio-group defaultValue="1" buttonStyle="solid" v-model="queryParam.sizeType" @change="changData()">
- <a-radio-button value="1">竖版</a-radio-button>
- <a-radio-button value="2">横板</a-radio-button>
- </a-radio-group>
- </div>
- <!-- <div style="margin-bottom:10px">
- <span>
- 行业类别
- </span>
- <a-radio-group defaultValue="a" buttonStyle="solid">
- <a-radio-button value="a">Hangzhou</a-radio-button>
- <a-radio-button value="b">Shanghai</a-radio-button>
- <a-radio-button value="c">Beijing</a-radio-button>
- <a-radio-button value="d">Chengdu</a-radio-button>
- <a-radio-button value="o">Beijing</a-radio-button>
- <a-radio-button value="p">Chengdu</a-radio-button>
- <a-radio-button value="e">Beijing</a-radio-button>
- <a-radio-button value="f">Chengdu</a-radio-button>
- </a-radio-group>
- </div> -->
- <div style="margin-bottom:10px">
- <span>
- 模板排序
- </span>
- <a-radio-group defaultValue="1" buttonStyle="solid" v-model="queryParam.orderType" @change="changData()">
- <a-radio-button value="1">默认排序</a-radio-button>
- <a-radio-button value="2">时间排序</a-radio-button>
- </a-radio-group>
- </div>
- <div class="template-content" v-if="dataSource.length>0">
- <div v-for="item of dataSource" :key="item.id" class="home-item">
- <div class="home-right" style="width:100%">
- <div style="display:flex;justify-content:center;width:100%;position:relative;">
- <video class="video" :src="item.modelVideoUrl" controls="controls" style="height:auto;max-width:100%;"
- controlsList="nodownload">
- 您的浏览器不支持 video 标签。
- </video>
- </div>
- <span
- style="color: #999; fontSize: 16px;padding-top:10px;display:block;width:100%;overflow: hidden;text-overflow: ellipsis;">
- {{ item.title }}
- <a-button type="primary" style="float:right" @click="visibleMergeShow(item)">使用模板</a-button>
- </span>
- </div>
- </div>
- </div>
- <div class="template-content" v-else
- style="width:100%;height:400px;display:flex;justify-content: center;align-items: center;">
- <img
- 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"
- alt="" />
- </div>
- </div>
- <a-modal title='添加素材' v-model="visible" @cancel="close" @afterClose="close" :maskClosable="false" :width="800">
- <template slot="footer">
- <a-button key="back" @click="close">取消</a-button>
- <a-button key="submit" type="primary" @click="handleOk">
- 确定
- </a-button>
- </template>
- <a-form :form="form">
- <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" label="视频素材上传">
- <upload-to-ali v-model="urlList.url" :customDomain="customDomain" preview :region="region" :bucket="bucket"
- :accept="acceptVideo" :max="10" :size="1024000" :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret" :before-upload="file" :dir="dirVideo" @loaded="overUpload">
- </upload-to-ali>
- </a-form-item>
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="模板标题">
- <a-input placeholder="请输入模板标题" v-decorator="['title',{ rules: [{ required: true, message: '请输入模板标题' }]}]" />
- </a-form-item>
- <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="视频尺寸">
- <a-radio-group placeholder="请选择模板视频尺寸" v-decorator="[
- 'sizeType',
- { rules: [{ required: true, message: '请选择模板视频尺寸' }], initialValue: '1' }
- ]">
- <a-radio-button value="1">竖版</a-radio-button>
- <a-radio-button value="2">横板</a-radio-button>
- </a-radio-group>
- </a-form-item>
- </a-form>
- </a-modal>
- <a-modal title='模板视频合成' v-model="visibleMerge" @cancel="closeMerge" @afterClose="closeMerge" :maskClosable="false"
- :width="800">
- <template slot="footer">
- <a-button key="back" @click="closeMerge">取消</a-button>
- <a-button key="submit" type="primary" @click="handleOkMerge">
- 确定
- </a-button>
- </template>
- <div style="display:flex;height:600px" v-if="showData">
- <div class="video-content"
- style="position:relative;width:50%;padding:10px;box-sizing:border-box;display:flex;justify-content:center;border-right:1px solid #f2f2f2">
- <video class="video" :src="showData.modelVideoUrl" controls="controls" style="height:90%"
- controlsList="nodownload">
- 您的浏览器不支持 video 标签。
- </video>
- <div v-if="showLoading"
- 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">
- 视频合成中...
- </div>
- </div>
- <div style="flex:3;padding:10px;box-sizing:border-box;">
- <span style="color:black;font-size:18px;text-align:center;width:100%">合成视频上传</span>
- <upload-to-ali v-model="urlListMerge.url" :customDomain="customDomain" preview :region="region"
- :bucket="bucket" :accept="acceptVideo" :max="10" :size="1024000" :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret" :before-upload="file" :dir="dirMerge" @loaded="overUploadMerge">
- </upload-to-ali>
- </div>
- </div>
- </a-modal>
- </a-card>
- </template>
- <script>
- import {
- getAction,
- postAction,
- postFile,
- deleteAction,
- putAction
- } from '@/api/manage'
- import {
- JeecgListMixin
- } from '@/mixins/JeecgListMixin'
- import BMF from 'browser-md5-file'
- import UploadToAli from '@femessage/upload-to-ali'
- import {
- stopOtherVideo,
- closeAllVideoFun
- } from '@/utils/videoControl'
- export default {
- mixins: [JeecgListMixin],
- components: {
- UploadToAli,
- },
- data() {
- return {
- current: 0,
- sizeType: '1',
- orderType: '1',
- visible: false,
- visibleMerge: false,
- showData: null,
- showLoading: false,
- url: {
- list: '/ctop/modelVideoInfo/list'
- },
- urlList: {
- url: '',
- md5: ''
- },
- urlListMerge: {
- url: '',
- md5: ''
- },
- labelCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 5
- }
- },
- wrapperCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 12
- }
- },
- form: this.$form.createForm(this),
- steps: [{
- title: '选择模板',
- content: 'First-content'
- },
- {
- title: '上传物料',
- content: 'Second-content'
- }
- ],
- creativeCopywriter: '',
- customDomain: '',
- region: 'oss-cn-beijing',
- bucket: 'ctop-media',
- acceptVideo: 'video/mpeg,video/mp4',
- acceptImage: 'image/jpeg,image/jpg,image/png',
- accessKeyId: 'LTAIbNbqWzSOklQV',
- accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
- labelCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 5
- }
- },
- wrapperCol: {
- xs: {
- span: 24
- },
- sm: {
- span: 16
- }
- },
- dirMerge: "model/part/"
- }
- },
- computed: {
- dirVideo() {
- return 'model/video/'
- }
- },
- methods: {
- next() {
- this.current++
- },
- prev() {
- this.current--
- },
- changData() {
- this.loadData(1)
- },
- visibleMergeShow(item) {
- this.visibleMerge = true
- this.showLoading = false
- // this.showData = item
- this.showData = JSON.parse(JSON.stringify(item))
- },
- closeMerge() {
- this.visibleMerge = false
- this.urlListMerge = {
- url: '',
- md5: ''
- }
- this.showData = null
- },
- handleOkMerge() {
- },
- close() {
- this.visible = false
- },
- handleOk() {
- this.form.validateFieldsAndScroll((err, values) => {
- if (err) {
- // 这里做逻辑处理
- } else {
- var params = {
- ...values
- }
- params.signature = this.urlList.md5
- params.modelVideoUrl = this.urlList.url
- postAction('/ctop/modelVideoInfo/add', params).then(res => {
- console.log(res)
- if (res.success) {
- this.visible = false
- this.form.resetFields()
- this.urlList = {
- url: '',
- md5: '',
- }
- this.loadData()
- }
- })
- }
- })
- },
- overUpload(urlAll) {
- this.$message.success('上传成功')
- },
- overUploadMerge(urlAll) {
- this.showLoading = true
- postAction('/ctop/modelVideoInfoConfig/videoMerge', {
- modelId: this.showData.id,
- url: urlAll
- }).then(res => {
- // console.log(res)
- if (res.success) {
- this.showLoading = false
- this.showData.modelVideoUrl = res.url
- }
- })
- },
- file(file) {
- var bmf = new BMF()
- var that = this
- return new Promise(function (resolve, reject) {
- bmf.md5(file[0], (err, md5) => {
- that.urlList.md5 = md5
- resolve()
- // fileCheck({
- // code: md5,
- // projectId: that.getData('projectId')
- // }).then(res => {
- // if (res.code == 0) {
- // that.$message.error('此素材已经上传')
- // that.repeat = true
- // reject()
- // } else {
- // that.repeat = false
- // resolve()
- // // reject()
- // }
- // })
- })
- })
- },
- },
- mounted() {
- // getAction('/ctop/modelVideoInfo/list', {
- // sizeType: this.sizeType,
- // orderType: this.orderType
- // }).then(res => {
- // console.log(res)
- // })
- },
- created() {
- this.queryParam.sizeType = this.sizeType
- this.queryParam.orderType = this.orderType
- // this.queryParam.status = key
- this.ipagination.pageSize = 8
- },
- }
- </script>
- <style scoped>
- .steps-content {
- margin-top: 16px;
- border: 1px dashed #e9e9e9;
- border-radius: 6px;
- background-color: #fafafa;
- min-height: 200px;
- padding: 30px;
- }
- .steps-action {
- margin-top: 24px;
- }
- </style>
|