|
@@ -1,9 +1,6 @@
|
|
|
<template>
|
|
|
<a-card :bordered="false">
|
|
|
-
|
|
|
-
|
|
|
<a-form @submit="handleSubmit" :form="form">
|
|
|
-
|
|
|
<!--<a-form-item
|
|
|
label="视频标识"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
@@ -11,11 +8,11 @@
|
|
|
<a-input v-model="videoName" placeholder="(必填) 区分视频的标识"></a-input>
|
|
|
</a-form-item>-->
|
|
|
|
|
|
-
|
|
|
<a-form-item
|
|
|
label="选择快手账户"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
- :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
|
|
|
+ :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
|
|
|
+ >
|
|
|
<a-select
|
|
|
v-model="accountId"
|
|
|
showSearch
|
|
@@ -24,93 +21,107 @@
|
|
|
placeholder="选择需创建的快手账户"
|
|
|
optionFilterProp="children"
|
|
|
style="width: 500px"
|
|
|
- :filterOption="filterOption"
|
|
|
+ :filterOption="true"
|
|
|
>
|
|
|
- <a-select-option v-for="userAccount in accountList" :key="userAccount.accountId"
|
|
|
- :value="userAccount.accountId">{{userAccount.authName}}
|
|
|
- </a-select-option>
|
|
|
+ <a-select-option
|
|
|
+ v-for="userAccount in accountList"
|
|
|
+ :key="userAccount.accountId"
|
|
|
+ :value="userAccount.accountId"
|
|
|
+ >{{userAccount.authName}}</a-select-option>
|
|
|
</a-select>
|
|
|
</a-form-item>
|
|
|
|
|
|
-
|
|
|
<a-form-item
|
|
|
label="素材投放位置"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
- :wrapperCol="{lg: {span: 8}, sm: {span: 8} }">
|
|
|
+ :wrapperCol="{lg: {span: 8}, sm: {span: 8} }"
|
|
|
+ >
|
|
|
<a-radio-group buttonStyle="solid" v-model="positionType">
|
|
|
<a-radio-button value="1">信息流广告</a-radio-button>
|
|
|
<a-radio-button value="2">视频后贴片广告</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
</a-form-item>
|
|
|
|
|
|
-
|
|
|
<a-form-item
|
|
|
label="素材格式"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
- :wrapperCol="{lg: {span: 8}, sm: {span: 8} }">
|
|
|
+ :wrapperCol="{lg: {span: 8}, sm: {span: 8} }"
|
|
|
+ >
|
|
|
<a-radio-group buttonStyle="solid" v-model="materialType">
|
|
|
<a-radio-button value="1">竖版</a-radio-button>
|
|
|
<a-radio-button value="2">横版</a-radio-button>
|
|
|
</a-radio-group>
|
|
|
</a-form-item>
|
|
|
|
|
|
-
|
|
|
<a-form-item
|
|
|
label="视频素材上传"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
- :wrapperCol="{lg: {span: 12}, sm: {span: 12} }">
|
|
|
- <upload-to-ali v-model="localUrl"
|
|
|
- :customDomain="customDomain"
|
|
|
- multiple
|
|
|
- preview
|
|
|
- :region="region"
|
|
|
- :bucket="bucket"
|
|
|
- :accept="acceptVideo"
|
|
|
- :max="5"
|
|
|
- :size="1024000"
|
|
|
- :accessKeyId="accessKeyId"
|
|
|
- :accessKeySecret="accessKeySecret"></upload-to-ali>
|
|
|
+ :wrapperCol="{lg: {span: 12}, sm: {span: 12} }"
|
|
|
+ >
|
|
|
+ <upload-to-ali
|
|
|
+ v-model="localUrl"
|
|
|
+ :customDomain="customDomain"
|
|
|
+ multiple
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptVideo"
|
|
|
+ :max="5"
|
|
|
+ :size="1024000"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"
|
|
|
+ :before-upload="file"
|
|
|
+ :dir="dirVideo"
|
|
|
+ @loaded="overUpload"
|
|
|
+ ></upload-to-ali>
|
|
|
</a-form-item>
|
|
|
|
|
|
-
|
|
|
- <a-form-item class="pic_upload_content"
|
|
|
- label="封面图素材上传"
|
|
|
- :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
- :wrapperCol="{lg: {span: 12}, sm: {span: 12} }">
|
|
|
- <upload-to-ali v-model="localImageUrl"
|
|
|
- :customDomain="customDomain"
|
|
|
- multiple
|
|
|
- preview
|
|
|
- :region="region"
|
|
|
- :bucket="bucket"
|
|
|
- :accept="acceptImage"
|
|
|
- :max="25"
|
|
|
- :size="1024000"
|
|
|
- :accessKeyId="accessKeyId"
|
|
|
- :accessKeySecret="accessKeySecret"></upload-to-ali>
|
|
|
+ <a-form-item
|
|
|
+ class="pic_upload_content"
|
|
|
+ label="封面图素材上传"
|
|
|
+ :labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
+ :wrapperCol="{lg: {span: 12}, sm: {span: 12} }"
|
|
|
+ >
|
|
|
+ <upload-to-ali
|
|
|
+ v-model="localImageUrl"
|
|
|
+ :customDomain="customDomain"
|
|
|
+ multiple
|
|
|
+ preview
|
|
|
+ :region="region"
|
|
|
+ :bucket="bucket"
|
|
|
+ :accept="acceptImage"
|
|
|
+ :max="25"
|
|
|
+ :size="1024000"
|
|
|
+ :accessKeyId="accessKeyId"
|
|
|
+ :accessKeySecret="accessKeySecret"
|
|
|
+ :before-upload="file"
|
|
|
+ :dir="dirImg"
|
|
|
+ @loaded="overUpload"
|
|
|
+ ></upload-to-ali>
|
|
|
</a-form-item>
|
|
|
|
|
|
-
|
|
|
<a-form-item
|
|
|
label="描述"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
- :wrapperCol="{lg: {span: 8}, sm: {span: 8} }">
|
|
|
- <a-textarea
|
|
|
- v-model="videoDesc" placeholder="(必填) 说点什么..." :rows="4"/>
|
|
|
+ :wrapperCol="{lg: {span: 8}, sm: {span: 8} }"
|
|
|
+ >
|
|
|
+ <a-textarea v-model="videoDesc" placeholder="(必填) 说点什么..." :rows="4" />
|
|
|
</a-form-item>
|
|
|
|
|
|
<!-- v-decorator="[
|
|
|
'confirm_videoDesc',
|
|
|
{rules: [{ required: true, message: 'error:' },
|
|
|
{validator: handleConfirmValue}]}
|
|
|
- ]"-->
|
|
|
+ ]"-->
|
|
|
<a-form-item
|
|
|
label="格式"
|
|
|
:labelCol="{lg: {span: 7}, sm: {span: 7}}"
|
|
|
- :wrapperCol="{lg: {span: 8}, sm: {span: 2} }">
|
|
|
+ :wrapperCol="{lg: {span: 8}, sm: {span: 2} }"
|
|
|
+ >
|
|
|
<span>视频上传需满足以下条件</span>
|
|
|
<ul siz>
|
|
|
- <li>视频格式为MPEG-4/H.264/HEVC编码的MP4,
|
|
|
+ <li>
|
|
|
+ 视频格式为MPEG-4/H.264/HEVC编码的MP4,
|
|
|
其中,分辨率不小于720p、码率不小于3000kbps以及帧率不小于20fps
|
|
|
</li>
|
|
|
<li>音频编码为AAC并且码率不小于64kbps</li>
|
|
@@ -118,103 +129,153 @@
|
|
|
</ul>
|
|
|
</a-form-item>
|
|
|
|
|
|
-
|
|
|
- <a-form-item :wrapperCol="{ span: 24 }"
|
|
|
- style="text-align: center">
|
|
|
+ <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
|
|
|
<a-button htmlType="submit" type="primary">提交</a-button>
|
|
|
<a-button style="margin-left: 8px">保存</a-button>
|
|
|
</a-form-item>
|
|
|
-
|
|
|
-
|
|
|
</a-form>
|
|
|
</a-card>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
- import UploadToAli from '@femessage/upload-to-ali';
|
|
|
- import {postAction, getAction} from '@/api/manage';
|
|
|
- import {mapActions, mapGetters} from 'vuex'
|
|
|
+import UploadToAli from '@femessage/upload-to-ali'
|
|
|
+import { postAction, getAction } from '@/api/manage'
|
|
|
+import { fileCheck, fileInsert } from '@/api/actor'
|
|
|
+import BMF from 'browser-md5-file'
|
|
|
+import { mapActions, mapGetters } from 'vuex'
|
|
|
|
|
|
- export default {
|
|
|
- name: 'BaseForm',
|
|
|
- components: {
|
|
|
- UploadToAli
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- accountId: '',
|
|
|
- accountList: {},
|
|
|
- localUrl: '',
|
|
|
- localImageUrl: '',
|
|
|
- positionType: '1',
|
|
|
- materialType: '1',
|
|
|
- videoDesc: '',
|
|
|
- customDomain: '',
|
|
|
- acceptVideo: 'video/mpeg,video/mp4',
|
|
|
- acceptImage: 'image/jpeg,jpg,image/png',
|
|
|
- accessKeyId: 'LTAIbNbqWzSOklQV',
|
|
|
- accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
- region: 'oss-cn-beijing',
|
|
|
- bucket: 'ctop-media',
|
|
|
- form: this.$form.createForm(this),
|
|
|
- url: {
|
|
|
- addUrl: '/kuaishou/kuaiShouVideo/insert',
|
|
|
- userAllocationList: '/ctop/userAllocation/list',
|
|
|
- }
|
|
|
+export default {
|
|
|
+ name: 'BaseForm',
|
|
|
+ components: {
|
|
|
+ UploadToAli
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ accountId: '',
|
|
|
+ accountList: {},
|
|
|
+ localUrl: [],
|
|
|
+ localImageUrl: [],
|
|
|
+ positionType: '1',
|
|
|
+ materialType: '1',
|
|
|
+ videoDesc: '',
|
|
|
+ customDomain: '',
|
|
|
+ acceptVideo: 'video/mpeg,video/mp4',
|
|
|
+ acceptImage: 'image/jpeg,jpg,image/png',
|
|
|
+ accessKeyId: 'LTAIbNbqWzSOklQV',
|
|
|
+ accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
|
|
|
+ region: 'oss-cn-beijing',
|
|
|
+ bucket: 'ctop-media',
|
|
|
+ form: this.$form.createForm(this),
|
|
|
+ url: {
|
|
|
+ addUrl: '/kuaishou/kuaiShouVideo/insert',
|
|
|
+ userAllocationList: '/ctop/userAllocation/list'
|
|
|
}
|
|
|
- },
|
|
|
+ }
|
|
|
+ },
|
|
|
|
|
|
- methods: {
|
|
|
- ...mapGetters(["nickname", "avatar", "userInfo"]),
|
|
|
- /*handleConfirmValue(rule, value, callback) {
|
|
|
+ methods: {
|
|
|
+ ...mapGetters(['nickname', 'avatar', 'userInfo']),
|
|
|
+ /*handleConfirmValue(rule, value, callback) {
|
|
|
value = this.videoDesc;
|
|
|
if (value == '') {
|
|
|
callback('请输入视频描述')
|
|
|
}
|
|
|
callback()
|
|
|
},*/
|
|
|
- handleSubmit(e) {
|
|
|
- console.log(this.localUrl);
|
|
|
- console.log(this.videoDesc);
|
|
|
- e.preventDefault()
|
|
|
- this.form.validateFields((err, values) => {
|
|
|
- if (!err) {
|
|
|
- console.log('Received values of form: ', values);
|
|
|
- let params = {};
|
|
|
- params.accountId = this.accountId;
|
|
|
- params.localUrl = this.localUrl;
|
|
|
- params.positionType = this.positionType;
|
|
|
- params.materialType = this.materialType;
|
|
|
- params.videoDesc = this.videoDesc;
|
|
|
- params.localImageUrl = this.localImageUrl;
|
|
|
- params.loginId = this.userInfo().id;
|
|
|
- console.log(params)
|
|
|
- postAction(this.url.addUrl, params).then((res) => {
|
|
|
- console.log(res)
|
|
|
- if (res.success) {
|
|
|
- alert("视频批量上传成功");
|
|
|
+ handleSubmit(e) {
|
|
|
+ console.log(this.localUrl)
|
|
|
+ console.log(this.videoDesc)
|
|
|
+ e.preventDefault()
|
|
|
+ this.form.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ console.log('Received values of form: ', values)
|
|
|
+ let params = {}
|
|
|
+ params.accountId = this.accountId
|
|
|
+ params.localUrl = this.localUrl
|
|
|
+ params.positionType = this.positionType
|
|
|
+ params.materialType = this.materialType
|
|
|
+ params.videoDesc = this.videoDesc
|
|
|
+ params.localImageUrl = this.localImageUrl
|
|
|
+ params.loginId = this.userInfo().id
|
|
|
+ console.log(params)
|
|
|
+ postAction(this.url.addUrl, params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ alert('视频批量上传成功')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ file(file) {
|
|
|
+ console.log(file)
|
|
|
+ var bmf = new BMF()
|
|
|
+ var that = this
|
|
|
+ return new Promise(function(resolve, reject) {
|
|
|
+ bmf.md5(file[0], (err, md5) => {
|
|
|
+ console.log(md5, 123123123)
|
|
|
+ that.md5 = md5
|
|
|
+ fileCheck({ code: md5 }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (file[0].type == 'image/jpeg' || file[0].type == 'jpg' || file[0].type == 'image/png') {
|
|
|
+ that.localImageUrl.push(res.url)
|
|
|
+ } else {
|
|
|
+ that.localUrl.push(res.url)
|
|
|
}
|
|
|
- });
|
|
|
- }
|
|
|
+ reject()
|
|
|
+ } else {
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+ })
|
|
|
})
|
|
|
- },
|
|
|
+ })
|
|
|
},
|
|
|
- created: function () {
|
|
|
- let params = {};
|
|
|
- params.pageSize = '1000';
|
|
|
- params.mediaId = '2';
|
|
|
- params.userId = this.userInfo().id;
|
|
|
- getAction(this.url.userAllocationList, params).then((res) => {
|
|
|
- if (res.success) {
|
|
|
- this.accountList = res.result.records
|
|
|
- }
|
|
|
- });
|
|
|
+ overUpload(url) {
|
|
|
+ // console.log(url,this.md5)
|
|
|
+ fileInsert({ code: this.md5, url: url[0] }).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created: function() {
|
|
|
+ let params = {}
|
|
|
+ params.pageSize = '1000'
|
|
|
+ params.mediaId = '2'
|
|
|
+ params.userId = this.userInfo().id
|
|
|
+ getAction(this.url.userAllocationList, params).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.accountList = res.result.records
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ dirImg() {
|
|
|
+ let date = new Date()
|
|
|
+ let y = date.getFullYear()
|
|
|
+ let MM = date.getMonth() + 1
|
|
|
+ MM = MM < 10 ? '0' + MM : MM
|
|
|
+ let d = date.getDate()
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
+
|
|
|
+ return 'image/' + y + '-' + MM + '-' + d + '/'
|
|
|
+ },
|
|
|
+ dirVideo() {
|
|
|
+ let date = new Date()
|
|
|
+ let y = date.getFullYear()
|
|
|
+ let MM = date.getMonth() + 1
|
|
|
+ MM = MM < 10 ? '0' + MM : MM
|
|
|
+ let d = date.getDate()
|
|
|
+ d = d < 10 ? '0' + d : d
|
|
|
+
|
|
|
+ return 'video/' + y + '-' + MM + '-' + d + '/'
|
|
|
}
|
|
|
}
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
- .pic_upload_content .draggable-list {
|
|
|
- display: block;
|
|
|
- }
|
|
|
+.pic_upload_content .draggable-list {
|
|
|
+ display: block;
|
|
|
+}
|
|
|
</style>
|