|
@@ -49,6 +49,7 @@
|
|
|
<div class="dynamically_add_form_item">
|
|
|
<a-form-item label="">
|
|
|
<a @click="getVideoList('video', index, item, bestIndex)">选择视频</a>
|
|
|
+ <a @click="uploadVideo(index,bestIndex)" style="margin-left:10px">上传视频</a>
|
|
|
<br />
|
|
|
<video :src="item.videoList.url" controls="controls" style="width:25%"
|
|
|
v-if="item.videoList"></video>
|
|
@@ -68,9 +69,15 @@
|
|
|
</div>
|
|
|
<a-form-item label="">
|
|
|
<a @click="getVideoList('image', index, item, bestIndex)">选择封面</a>
|
|
|
+ <a @click="uploadImages(index,bestIndex)" style="margin-left:10px">上传封面</a>
|
|
|
<br />
|
|
|
- <img :src="item.url" style="width:18%;margin:1%;" v-for="item of item.imageList"
|
|
|
- :key="item.url" />
|
|
|
+ <span v-for="(item,deleteIndex) of item.imageList" style="position:relative;">
|
|
|
+ <img :src="item.url" style="width:18%;margin:1%;" :key="item.url" />
|
|
|
+ <a-icon type="close-circle" @click="deleteData(index,bestIndex,deleteIndex)"
|
|
|
+ style="position: absolute;right: 0px;" />
|
|
|
+ </span>
|
|
|
+
|
|
|
+
|
|
|
</a-form-item>
|
|
|
<a-form-item label="广告语">
|
|
|
<a-textarea class="rending" placeholder="请输入广告语" v-model="item.description"
|
|
@@ -141,6 +148,42 @@
|
|
|
</a-button>
|
|
|
</template>
|
|
|
</a-modal>
|
|
|
+ <a-modal title="封面上传" @cancel="closeImage" @afterClose="closeImage" v-model="addImageVisible">
|
|
|
+ <template slot="footer">
|
|
|
+ <a-button key="back" @click="closeImage">取消</a-button>
|
|
|
+ <a-button key="submit" type="primary" @click="handleOkImage" :loading="loadingImage">
|
|
|
+ 确定
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+ <a-form-item label="" class="add-image-material">
|
|
|
+ <upload-to-ali style="width:100%" v-model="urlListImage.url" :customDomain="customDomain" :multiple="true"
|
|
|
+ preview :region="region" :bucket="bucket" :accept="acceptImage" :max="10" :size="1024000"
|
|
|
+ :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret" :before-upload="fileWater" :dir="dirImg"
|
|
|
+ @delete='deleteImage' @loaded="overUploadImage"></upload-to-ali>
|
|
|
+ <span v-if="material.filter(item => item == false).length > 0 && urlListImage.url.length > 0"
|
|
|
+ style="color:red">上传素材的尺寸不符,请修改(<span v-for="(item, index) of material" :key="index"
|
|
|
+ v-show="!item">第{{ index + 1 }}张</span>出错)</span>
|
|
|
+ <span v-else-if="urlListImage.url.length > 0 && material.filter(item => item == false).length == 0"
|
|
|
+ style="color:green">上传成功</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ <a-modal title="视频上传" @cancel="closeVideo" @afterClose="closeVideo" v-model="addVideoVisible">
|
|
|
+ <template slot="footer">
|
|
|
+ <a-button key="back" @click="closeVideo">取消</a-button>
|
|
|
+ <a-button key="submit" type="primary" @click="handleOkVideo" :loading="loadingVideo">
|
|
|
+ 确定
|
|
|
+ </a-button>
|
|
|
+ </template>
|
|
|
+ <a-form-item label="" class="add-image-material">
|
|
|
+ <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>
|
|
|
+ <span v-if="messageTip" style="color:red">{{messageTip}}</span>
|
|
|
+ </a-form-item>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
</a-card>
|
|
|
</template>
|
|
|
|
|
@@ -161,6 +204,12 @@
|
|
|
closeAllVideoFun
|
|
|
} from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
|
|
|
import checkMatemal from './stepModule/checkMatemal'
|
|
|
+ import BMF from 'browser-md5-file'
|
|
|
+
|
|
|
+
|
|
|
+ let nowIndex = 0
|
|
|
+ let bestIndex = 0
|
|
|
+ let showRemove = false
|
|
|
export default {
|
|
|
name: 'BaseForm',
|
|
|
components: {
|
|
@@ -172,6 +221,10 @@
|
|
|
return {
|
|
|
pans: [],
|
|
|
pansKey: '',
|
|
|
+ addImageVisible: false,
|
|
|
+ addVideoVisible: false,
|
|
|
+ loadingVideo: false,
|
|
|
+ loadingImage: false,
|
|
|
allForm: {
|
|
|
videoList: '',
|
|
|
imageList: [],
|
|
@@ -216,7 +269,27 @@
|
|
|
imageUrlList: [],
|
|
|
checkAllImage: false,
|
|
|
checkArrImage: [],
|
|
|
- content: 0
|
|
|
+ content: 0,
|
|
|
+ urlListImage: {
|
|
|
+ url: [],
|
|
|
+ md5: []
|
|
|
+ },
|
|
|
+ urlList: {
|
|
|
+ url: '',
|
|
|
+ md5: "",
|
|
|
+ photoId: ""
|
|
|
+ },
|
|
|
+ imageArrList: [],
|
|
|
+ material: [],
|
|
|
+ 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',
|
|
|
+ messageTip: null
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -431,6 +504,249 @@
|
|
|
},
|
|
|
filterOption(input, option) {
|
|
|
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
|
|
|
+ },
|
|
|
+ uploadVideo(index, bestIndex) {
|
|
|
+ nowIndex = index
|
|
|
+ bestIndex = bestIndex
|
|
|
+ this.addVideoVisible = true
|
|
|
+ },
|
|
|
+ uploadImages(index, bestIndex) {
|
|
|
+ nowIndex = index
|
|
|
+ bestIndex = bestIndex
|
|
|
+ this.addImageVisible = true
|
|
|
+ },
|
|
|
+ closeImage() {
|
|
|
+ this.addImageVisible = false
|
|
|
+ this.urlListImage = {
|
|
|
+ url: [],
|
|
|
+ md5: [],
|
|
|
+ }
|
|
|
+ this.imageArrList = []
|
|
|
+ nowIndex = 0
|
|
|
+ bestIndex = 0
|
|
|
+
|
|
|
+ },
|
|
|
+ closeVideo() {
|
|
|
+ this.addVideoVisible = false
|
|
|
+ this.urlList = {
|
|
|
+ url: "",
|
|
|
+ md5: "",
|
|
|
+ photoId: ""
|
|
|
+ }
|
|
|
+ nowIndex = 0
|
|
|
+ bestIndex = 0
|
|
|
+ this.messageTip = null
|
|
|
+ },
|
|
|
+ handleOkImage(e) {
|
|
|
+ this.loadingImage = true
|
|
|
+ var params = {
|
|
|
+ accountId: localStorage.getItem('accountId'),
|
|
|
+ uploadImageArr: this.imageArrList
|
|
|
+ }
|
|
|
+ postAction("/kusiShouUpload/image", params).then(res => {
|
|
|
+ if (res.success) {
|
|
|
+ this.pans[nowIndex].list[bestIndex].imageList = res.result
|
|
|
+ this.closeImage()
|
|
|
+ this.loadingImage = false
|
|
|
+ } else {
|
|
|
+ this.$message.error('封面上传失败')
|
|
|
+ this.loadingImage = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ deleteImage(url) {
|
|
|
+ console.log(url, this.urlListImage.url)
|
|
|
+ var index = this.imageArrList.findIndex(v => v.url === url)
|
|
|
+ this.imageArrList.splice(index, 1)
|
|
|
+ console.log(index)
|
|
|
+ },
|
|
|
+ overUploadImage(urlAll) {
|
|
|
+ // var index = this.urlList.url.findIndex(item => item === urlAll[0])
|
|
|
+ // var data = { url: urlAll[0], code: this.urlList.md5[index], name: this.urlList.name[index] }
|
|
|
+ // this.imageArr.push(data)
|
|
|
+ var that = this
|
|
|
+ that.material = []
|
|
|
+ that.imageArrList = []
|
|
|
+ var img
|
|
|
+ if (urlAll.length > 0) {
|
|
|
+ for (var i = 0; i < this.urlListImage.url.length; i++) {
|
|
|
+ that.imageArrList.push({
|
|
|
+ // width: img.width,
|
|
|
+ // height: img.height,
|
|
|
+ // size: this.urlListImage.size[i],
|
|
|
+ signature: this.urlListImage.md5[i],
|
|
|
+ url: this.urlListImage.url[i],
|
|
|
+ })
|
|
|
+
|
|
|
+ img = new Image()
|
|
|
+ img.src = this.urlListImage.url[i]
|
|
|
+ if (img.complete) {
|
|
|
+ // 打印
|
|
|
+ if (img.width == 720) {
|
|
|
+ if (img.height == 1280) {
|
|
|
+ that.material.push(true)
|
|
|
+ } else {
|
|
|
+ that.material.push(false)
|
|
|
+ }
|
|
|
+ } else if (img.width == 1080) {
|
|
|
+ if (img.height == 1920) {
|
|
|
+ that.material.push(true)
|
|
|
+ } else {
|
|
|
+ that.material.push(false)
|
|
|
+ }
|
|
|
+ } else if (img.width == 1280) {
|
|
|
+ if (img.height == 720) {
|
|
|
+ that.material.push(true)
|
|
|
+ } else {
|
|
|
+ that.material.push(false)
|
|
|
+ }
|
|
|
+ } else if (img.width == 1920) {
|
|
|
+ if (img.height == 1080) {
|
|
|
+ that.material.push(true)
|
|
|
+ } else {
|
|
|
+ that.material.push(false)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ that.material.push(false)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+
|
|
|
+ img.onload = () => {
|
|
|
+ if (img.width == 720) {
|
|
|
+ if (img.height == 1280) {
|
|
|
+ that.material.push(true)
|
|
|
+ } else {
|
|
|
+ that.material.push(false)
|
|
|
+ }
|
|
|
+ } else if (img.width == 1080) {
|
|
|
+ if (img.height == 1920) {
|
|
|
+ that.material.push(true)
|
|
|
+ } else {
|
|
|
+ that.material.push(false)
|
|
|
+ }
|
|
|
+ } else if (img.width == 1280) {
|
|
|
+ if (img.height == 720) {
|
|
|
+ that.material.push(true)
|
|
|
+ } else {
|
|
|
+ that.material.push(false)
|
|
|
+ }
|
|
|
+ } else if (img.width == 1920) {
|
|
|
+ if (img.height == 1080) {
|
|
|
+ that.material.push(true)
|
|
|
+ } else {
|
|
|
+ that.material.push(false)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ that.material.push(false)
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ },
|
|
|
+ fileWater(file) {
|
|
|
+ var bmf = new BMF()
|
|
|
+ var that = this
|
|
|
+ this.urlListImage = {
|
|
|
+ url: [],
|
|
|
+ md5: []
|
|
|
+ }
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ for (let i = 0; i < file.length; i++) {
|
|
|
+ bmf.md5(file[i], (err, md5) => {
|
|
|
+ // that.urlListImage.name.push(file[i].name)
|
|
|
+ that.urlListImage.md5.push(md5)
|
|
|
+ resolve()
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ overUpload(urlAll) {
|
|
|
+ console.log(this.urlList)
|
|
|
+ },
|
|
|
+ file(file) {
|
|
|
+ var bmf = new BMF()
|
|
|
+ var that = this
|
|
|
+ return new Promise(function (resolve, reject) {
|
|
|
+ bmf.md5(file[0], (err, md5) => {
|
|
|
+
|
|
|
+
|
|
|
+ getAction('/kusiShouUpload/checkVideo', {
|
|
|
+ signature: md5,
|
|
|
+ accountId: localStorage.getItem('accountId')
|
|
|
+ }).then(res => {
|
|
|
+ if (res.code == 0) {
|
|
|
+ if (res.result.isExistence) {
|
|
|
+ showRemove = res.result.isExistence
|
|
|
+ that.urlList.md5 = res.result.signature
|
|
|
+ that.urlList.url = res.result.videoUrl
|
|
|
+ that.urlList.photoId = res.result.photoId
|
|
|
+ reject()
|
|
|
+ } else {
|
|
|
+ showRemove = res.result.isExistence
|
|
|
+ that.urlList.md5 = md5
|
|
|
+ resolve()
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ } else {
|
|
|
+
|
|
|
+ reject()
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleOkVideo(e) {
|
|
|
+ this.loadingVideo = true
|
|
|
+ if (showRemove) {
|
|
|
+ this.pans[nowIndex].list[bestIndex].videoList = {
|
|
|
+ photoId: this.urlList.photoId,
|
|
|
+ url: this.urlList.url
|
|
|
+ }
|
|
|
+ this.loadingVideo = false
|
|
|
+ this.closeVideo()
|
|
|
+ } else {
|
|
|
+ var params = {
|
|
|
+ url: this.urlList.url,
|
|
|
+ type: this.getData('creativeMaterialType'),
|
|
|
+ signature: this.urlList.md5,
|
|
|
+ accountId: localStorage.getItem('accountId')
|
|
|
+ }
|
|
|
+ postAction("/kusiShouUpload/video", params).then(res => {
|
|
|
+ console.log(res)
|
|
|
+ if (res.success) {
|
|
|
+ this.pans[nowIndex].list[bestIndex].videoList = {
|
|
|
+ photoId: res.result.photoId,
|
|
|
+ url: this.urlList.url
|
|
|
+ }
|
|
|
+ this.loadingVideo = false
|
|
|
+ this.closeVideo()
|
|
|
+ } else {
|
|
|
+ this.messageTip = res.message
|
|
|
+ this.loadingVideo = false
|
|
|
+ this.urlList = {
|
|
|
+ url: "",
|
|
|
+ md5: "",
|
|
|
+ photoId: ""
|
|
|
+ }
|
|
|
+ nowIndex = 0
|
|
|
+ bestIndex = 0
|
|
|
+ }
|
|
|
+
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ },
|
|
|
+ deleteData(index, bestIndex, deleteIndex) {
|
|
|
+ this.pans[index].list[bestIndex].imageList.splice(deleteIndex, 1)
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
@@ -442,7 +758,7 @@
|
|
|
let d = date.getDate()
|
|
|
d = d < 10 ? '0' + d : d
|
|
|
|
|
|
- return 'image/' + y + '-' + MM + '-' + d + '/'
|
|
|
+ return 'image/Operate/' + y + '-' + MM + '-' + d + '/'
|
|
|
},
|
|
|
dirVideo() {
|
|
|
let date = new Date()
|
|
@@ -452,14 +768,14 @@
|
|
|
let d = date.getDate()
|
|
|
d = d < 10 ? '0' + d : d
|
|
|
|
|
|
- return 'video/' + y + '-' + MM + '-' + d + '/'
|
|
|
+ return 'video/Operate/' + y + '-' + MM + '-' + d + '/'
|
|
|
},
|
|
|
contentAll() {
|
|
|
var count, arr = []
|
|
|
if (this.pans[0].list.length > 0) {
|
|
|
for (let i = 0; i < this.pans[0].list.length; i++) {
|
|
|
|
|
|
- arr.push(...this.pans[0].list[i].imageUrlList, ...this.pans[0].list[i].imageList)
|
|
|
+ arr.push(...this.pans[0].list[i].checkArrImage, ...this.pans[0].list[i].imageList)
|
|
|
}
|
|
|
return arr.length + this.content
|
|
|
} else {
|