<template>
<div class="idea-container">
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px">
<el-form-item label="创意名称" prop="name" class="form-container">
<el-input v-model="ruleForm.name" placeholder="请输入创意名称" maxlength="40"></el-input>
</el-form-item>
<el-form-item label="创意类型" prop="form">
<el-radio-group v-model="ruleForm.form" @change="ideaTypeChange(ruleForm.form)" :disabled="isEdit">
<el-radio-button :label="item.id" v-for="(item,index) in ext.formList" :key="`o${index}`">{{ item.name }}
</el-radio-button>
</el-radio-group>
</el-form-item>
<!--1. 创意类型--开屏-->
<template v-if="ruleForm.form === 8">
<el-form-item label="上传素材" prop="material" class="form-container">
<el-upload
action=""
class="avatar-uploader"
:http-request="((file) => { handleUpload(file,ruleForm.style) })"
:show-file-list="false"
:before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })">
<img v-if="imgUrlObj.screenMaterialUrl" class="avatar"
:src="`http://ssp-api.2345.cn/${imgUrlObj.screenMaterialUrl}`">
<template v-if="!imgUrlObj.screenMaterialUrl">
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">点击添加图片</div>
<div class="el-upload__size">图片大小1080*1620</div>
<div class="el-upload__wh">支持png/jpg/gif,小于200KB</div>
<span
class="el-upload-list__item-delete"
@click="handleRemove(file)"
>
<i class="el-icon-delete"></i>
</span>
</template>
</el-upload>
</el-form-item>
</template>
<!--2. 创意类型--信息流-->
<template v-if="ruleForm.form === 10">
<el-form-item label="样式控制" prop="style">
<el-col>
<el-radio-group v-model="flowStyle" @change="styleTypeChange(flowStyle,'flowStyle')">
<el-radio-button :label="item.id" v-for="(item,index) in ext.flowStyleList" :key="`o${index}`">
{{ item.name }}
</el-radio-button>
</el-radio-group>
</el-col>
</el-form-item>
<!--2-1 样式控制-一图一文-->
<template v-if="ruleForm.style === 1">
<el-form-item label="上传素材" prop="material" class="form-container">
<el-upload
action=""
class="avatar-uploader"
:http-request="((file) => { handleUpload(file,ruleForm.style) })"
:show-file-list="false"
:before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })">
<img v-if="imgUrlObj.flowMaterialUrl1" class="avatar"
:src="`http://ssp-api.2345.cn/${imgUrlObj.flowMaterialUrl1}`">
<template v-if="!imgUrlObj.flowMaterialUrl1">
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">点击添加图片</div>
<div class="el-upload__size">图片大小480*360</div>
<div class="el-upload__wh">支持png/jpg/gif,小于200KB</div>
</template>
</el-upload>
</el-form-item>
</template>
<!--2-2 样式控制-三图一文-->
<template v-if="ruleForm.style === 2">
<el-form-item label="上传素材" prop="material">
<el-upload
v-for="(item,index) in imgArr"
:key="`o${index}`"
style="display: inline-block; margin-right: 20px;"
action=""
class="avatar-uploader"
:http-request="((data) => { handleUpload(data,`2${index + 1}`) })"
:show-file-list="false"
:before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })">
<img v-if="`${imgUrlObj['flowMaterialUrl2' + (index + 1)]}`" class="avatar"
:src="`http://ssp-api.2345.cn/${imgUrlObj['flowMaterialUrl2' + (index + 1)]}`">
<template v-if="!`${imgUrlObj['flowMaterialUrl2' + (index + 1)]}`">
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">点击添加图片</div>
<div class="el-upload__size">图片大小{{ item }}</div>
<div class="el-upload__wh">支持png/jpg/gif,小于200KB</div>
</template>
</el-upload>
</el-form-item>
</template>
<!--2-3 样式控制-大图一文-->
<template v-if="ruleForm.style === 3">
<el-form-item label="上传素材" prop="material" class="form-container">
<el-upload
action=""
class="avatar-uploader"
:http-request="((file) => { handleUpload(file,ruleForm.style) })"
:show-file-list="false"
:before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })">
<img v-if="imgUrlObj.flowMaterialUrl3" class="avatar"
:src="`http://ssp-api.2345.cn/${imgUrlObj.flowMaterialUrl3}`">
<template v-if="!imgUrlObj.flowMaterialUrl3">
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">点击添加图片</div>
<div class="el-upload__size">图片大小720*360</div>
<div class="el-upload__wh">支持png/jpg/gif,小于200KB</div>
</template>
</el-upload>
</el-form-item>
</template>
<el-form-item label="广告标题" prop="title" class="form-container">
<el-input v-model="ruleForm.title" placeholder="请输入广告标题"></el-input>
</el-form-item>
<el-form-item label="广告来源" prop="origin" class="form-container">
<el-input v-model="ruleForm.origin" placeholder="请输入广告来源"></el-input>
</el-form-item>
</template>
<!--3. 创意类型--激励视频-->
<template v-if="ruleForm.form === 11">
<el-form-item label="样式控制" prop="style">
<el-col>
<el-radio-group v-model="inspireStyle" @change="styleTypeChange(inspireStyle,'inspireStyle')">
<el-radio-button :label="item.id"
v-for="item in ext.inspireStyleList"
:key="item.id">{{ item.name }}
</el-radio-button>
</el-radio-group>
</el-col>
</el-form-item>
<el-form-item label="上传素材" prop="material" class="form-container">
<el-upload
action=""
class="avatar-uploader"
:http-request="((file) => { handleVideoUpload(file,'') })"
:show-file-list="false"
:before-upload="((file) => { beforeVideoUpload(file,628,228,200) })">
<video v-if="imgUrlObj.videoMaterialUrl" class="avatar"
:src="`http://ssp-api.2345.cn/${imgUrlObj.videoMaterialUrl}`"/>
<template v-if="!imgUrlObj.videoMaterialUrl">
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">点击添加视频</div>
<div class="el-upload__size">图片大小{{videoWidth}}*{{videoHeight}}</div>
<div class="el-upload__wh">支持png/jpg/gif,小于200KB</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="广告icon" prop="icon" class="form-container">
<el-upload
action=""
class="avatar-uploader"
:http-request="((file) => { handleUpload(file,'icon') })"
:show-file-list="false"
:before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })">
<img v-if="imgUrlObj.iconUrl" class="avatar"
:src="`http://ssp-api.2345.cn/${imgUrlObj.iconUrl}`">
<template v-if="!imgUrlObj.iconUrl">
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">点击添加图片</div>
<div class="el-upload__size">图片大小96*96</div>
<div class="el-upload__wh">支持png/jpg/gif,小于200KB</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="背景图" prop="bgUrl" class="form-container">
<el-upload
action=""
class="avatar-uploader"
:http-request="((file) => { handleUpload(file,'bg') })"
:show-file-list="false"
:before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })">
<img v-if="imgUrlObj.bgUrl" class="avatar"
:src="`http://ssp-api.2345.cn/${imgUrlObj.bgUrl}`">
<template v-if="!imgUrlObj.bgUrl">
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">点击添加图片</div>
<div class="el-upload__size">图片大小1280*720</div>
<div class="el-upload__wh">支持png/jpg/gif,小于200KB</div>
</template>
</el-upload>
</el-form-item>
<el-form-item label="广告标题" prop="title" class="form-container">
<el-input v-model="ruleForm.title" placeholder="请输入广告标题" maxlength="33"></el-input>
</el-form-item>
<el-form-item label="广告描述" prop="desc" class="form-container">
<el-input v-model="ruleForm.desc" placeholder="请输入广告来源" maxlength="10"></el-input>
</el-form-item>
</template>
<!--4. 创意类型--插屏-->
<template v-if="ruleForm.form === 7">
<el-form-item label="上传素材" prop="material" class="form-container">
<el-upload
action=""
class="avatar-uploader"
:http-request="((file) => { handleUpload(file,'') })"
:show-file-list="false"
:before-upload="((file) => { beforeAvatarUpload(file,628,228,200) })">
<img v-if="imgUrlObj.insertMaterialUrl" class="avatar"
:src="`http://ssp-api.2345.cn/${imgUrlObj.insertMaterialUrl}`">
<template v-if="!imgUrlObj.insertMaterialUrl">
<i class="el-icon-plus avatar-uploader-icon"></i>
<div class="el-upload__text">点击添加图片</div>
<div class="el-upload__size">图片大小960*1200</div>
<div class="el-upload__wh">支持png/jpg/gif,小于200KB</div>
</template>
</el-upload>
</el-form-item>
</template>
<!--跳转类型-->
<div style="display: flex;">
<el-form-item label="跳转类型" prop="urlType" class="form-container wid40">
<el-radio v-model="ruleForm.urlType"
:label="item.id"
@change="skipTypeChange"
v-for="(item,index) in ext.urlType"
:key="`o${index}`">{{ item.name }}
</el-radio>
</el-form-item>
</div>
<template v-if="ruleForm.urlType === 1">
<el-form-item label="" prop="url" class="form-container">
<el-input v-model="ruleForm.url" placeholder="请输入链接"></el-input>
</el-form-item>
</template>
<template v-if="ruleForm.urlType === 2">
<div class="extra">
<el-form-item label="" prop="downloadUrlAndroid" class="form-container fa-node">
<el-input v-model="ruleForm.downloadUrlAndroid" placeholder="请输入Android下载地址"
class="inline-input"></el-input>
<span class="child-node">Android</span>
</el-form-item>
</div>
<div class="extra">
<el-form-item label="" prop="downloadUrlIos" class="form-container fa-node">
<el-input v-model="ruleForm.downloadUrlIos" placeholder="请输入iOS下载地址"></el-input>
<span class="child-node">iOS</span>
</el-form-item>
</div>
<div class="extra">
<el-form-item label="安卓包名" prop="downloadUrlIos" class="form-container fa-node">
<el-input v-model="ruleForm.downloadNameAndroid" placeholder="请输入安卓包名"></el-input>
<span class="child-node">Android</span>
</el-form-item>
</div>
</template>
<!--deeplink链接-->
<el-form-item label="deeplink链接" prop="deeplinkAndroid" class="form-container fa-node">
<el-input v-model="ruleForm.deeplinkAndroid" placeholder="请输入Android的deeplink链接"></el-input>
<span class="child-node">Android</span>
</el-form-item>
<el-form-item label="" prop="deeplinkIos" class="form-container fa-node">
<el-input v-model="ruleForm.deeplinkIos" placeholder="请输入iOS的deeplink链接"></el-input>
<span class="child-node">iOS</span>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit">提交</el-button>
<el-button @click="cancelSubmit">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
name: 'EditIdea',
data() {
return {
disabled: false,
width: 100,
height: 200,
videoWidth: 1280,
videoHeight: 720,
inspireStyle: 1,
flowStyle: 1,
isEdit: false,
imgArr: ['480*360', '480*360', '480*360'],
ruleForm: {
name: '',
form: 8,
material: [],
urlType: 1,
url: '',
downloadUrlAndroid: '',
downloadUrlIos: '',
downloadNameAndroid: '',
deeplinkAndroid: '',
deeplinkIos: '',
style: 1,
title: '',
desc: '',
origin: '',
},
rules: {
name: [
{
required: true,
message: '请输入创意名称',
trigger: 'blur'
},
],
form: [
{
required: true,
message: '请选择创意类型',
trigger: 'change'
},
],
style: [
{
required: true,
message: '请选择样式控制',
trigger: 'blur'
},
],
title: [
{
required: true,
message: '请输入广告标题',
trigger: 'blur'
},
],
origin: [
{
required: true,
message: '请输入广告来源',
trigger: 'blur'
},
],
desc: [
{
required: true,
message: '请输入广告描述',
trigger: 'blur'
},
],
deeplinkAndroid: [
{
required: true,
message: '请输入Android的deeplink链接',
trigger: 'blur'
},
],
deeplinkIos: [
{
required: true,
message: '请输入iOS的deeplink链接',
trigger: 'blur'
},
],
},
ext: {},
imgUrlObj: {
screenMaterialUrl: '',
flowMaterialUrl1: '',
flowMaterialUrl21: '',
flowMaterialUrl22: '',
flowMaterialUrl23: '',
flowMaterialUrl3: '',
videoMaterialUrl: '',
insertMaterialUrl: '',
iconUrl: '',
bgUrl: '',
},
uploadSuccessflag: false,
isSize: null
}
},
created() {
this.$route.query.isEdit === '1' ? this.isEdit = true : this.isEdit = false
// 获取额外配置信息
this.getExtConfigInfo()
// 获取详情-编辑页面
this.isEdit && this.getEditDetail()
},
methods: {
// 拉取额外配置信息
getExtConfigInfo() {
let params = {}
this.$request.get('admin/creative/add', params).then((res) => {
this.ext = res.ext
})
},
// 根据id，获取页面详情数据
getEditDetail() {
let params = {
id: this.$route.query.id,
}
this.$request.get('/admin/creative/edit', params).then((res) => {
// 回显数据
let creativeList = res.creativeList
creativeList.creative_config.name = creativeList.name
creativeList.creative_config.id = creativeList.id
creativeList.creative_config.form = creativeList.form
this.ruleForm = creativeList.creative_config
if (creativeList.form === 8) {
// 开屏图
this.imgUrlObj.screenMaterialUrl = this.ruleForm.material[0]
} else if (creativeList.form === 10) {
// ----------信息流 ------------- 回显图片
if (this.ruleForm.style === 1) {
// 信息流 一图一文
this.imgUrlObj.flowMaterialUrl1 = this.ruleForm.material[0]
} else if (this.ruleForm.style === 2) {
// 信息流 三图一文
this.imgUrlObj.flowMaterialUrl21 = this.ruleForm.material[0]
this.imgUrlObj.flowMaterialUrl22 = this.ruleForm.material[1]
this.imgUrlObj.flowMaterialUrl23 = this.ruleForm.material[2]
} else {
// 信息流 大图一文
this.imgUrlObj.flowMaterialUrl3 = this.ruleForm.material[0]
}
this.flowStyle = this.ruleForm.style
} else if (creativeList.form === 11) {
// 激励视频
this.imgUrlObj.iconUrl = this.ruleForm.icon
this.imgUrlObj.bgUrl = this.ruleForm.bgUrl
this.imgUrlObj.videoMaterialUrl = this.ruleForm.material[0]
this.inspireStyle = this.ruleForm.style
} else if (creativeList.form === 7) {
// 插屏
this.imgUrlObj.insertMaterialUrl = this.ruleForm.material[0]
}
})
},
// 封装公共校验方法：上传图片前校验上传规则
beforeAvatarUpload(file, ruleWidth, ruleHeight, size) {
let width = ruleWidth
let height = ruleHeight
const isJPG = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif'
const isLt2M = file.size / 1024 <= size
!isJPG && this.$message.error('上传的图片接受JPG，PNG格式，GIF')
!isLt2M && this.$message.error(`上传的图片大小不能超过 ${size}KB!`)
// 校验宽高
this.isSize = new Promise(function(resolve, reject) {
let _URL = window.URL || window.webkitURL
let img = new Image()
img.onload = function() {
let valid = img.width >= width && img.height >= height
valid ? resolve() : reject(new Error('error..'))
}
img.src = _URL.createObjectURL(file)
}).then(() => {
if (isJPG && isLt2M) {
// 图片格式，大小，宽高都为true
this.uploadSuccessflag = true
}
return file
}, () => {
this.uploadSuccessflag = false
this.$message.error(`上传文件的图片大小不符合标准,宽需要为${ruleWidth}px，高需要为${ruleHeight}px`)
return Promise.reject(new Error('error..'))
})
},
// 视频上传前
beforeVideoUpload(file) {
console.log(file, '.......beforeVideoUpload........')
},
// 视频上传操作
handleVideoUpload(file) {
console.log(file, '.......video...upload.....')
},
handleRemove(file, fileList) {
console.log(file, fileList)
},
// 上传图片
handleUpload(file, type) {
console.log('handleUpload....start.....')
console.log(this.uploadSuccessflag, 'handleUpload...this.flag...')
const formData = new FormData()
formData.append('file', file.file)
// 判断图片宽高时，图片onload是异步的，ajax请求时机需要在此后执行
this.isSize.then(() => {
if (this.uploadSuccessflag) {
this.$request.post('/admin/upload/index', formData, { mock: false }).then((res) => {
console.log(type, '----------------type---------------')
console.log(this.ruleForm.form, 'handleUpload...this.ruleForm.form....')
if (this.ruleForm.form === 8) {
// 开屏图
console.log(type, '-------------开屏图------------------')
this.imgUrlObj.screenMaterialUrl = res.fileName
this.ruleForm.material = [this.imgUrlObj.screenMaterialUrl]
} else if (this.ruleForm.form === 10 && this.ruleForm.style === 1) {
// 信息流--一图一文
this.imgUrlObj.flowMaterialUrl1 = res.fileName
this.ruleForm.material = [this.imgUrlObj.flowMaterialUrl1]
} else if (this.ruleForm.form === 10 && this.ruleForm.style === 2 && parseInt(type) === 21) {
// 信息流--三图一文
console.log(type, '---------------信息流--三图一文1----------------')
this.imgUrlObj.flowMaterialUrl21 = res.fileName
this.ruleForm.material[0] = this.imgUrlObj.flowMaterialUrl21
} else if (this.ruleForm.form === 10 && this.ruleForm.style === 2 && parseInt(type) === 22) {
// 信息流--三图一文
console.log(type, '------------信息流--三图一文2-------------------')
this.imgUrlObj.flowMaterialUrl22 = res.fileName
this.ruleForm.material[1] = this.imgUrlObj.flowMaterialUrl22
} else if (this.ruleForm.form === 10 && this.ruleForm.style === 2 && parseInt(type) === 23) {
// 信息流--三图一文
console.log(type, '------------信息流--三图一文3-------------------')
this.imgUrlObj.flowMaterialUrl23 = res.fileName
this.ruleForm.material[2] = this.imgUrlObj.flowMaterialUrl23
} else if (this.ruleForm.form === 10 && this.ruleForm.style === 3) {
// 信息流--大图一文
console.log(type, '------------信息流--三图一文3-------------------')
this.imgUrlObj.flowMaterialUrl3 = res.fileName
this.ruleForm.material = [this.imgUrlObj.flowMaterialUrl3]
} else if (this.ruleForm.form === 11 && type !== 'icon' && type !== 'bg') {
// 激励视频
this.imgUrlObj.videoMaterialUrl = res.fileName
this.ruleForm.material = [this.imgUrlObj.videoMaterialUrl]
} else if (this.ruleForm.form === 7) {
// 插屏
this.imgUrlObj.insertMaterialUrl = res.fileName
this.ruleForm.material = [this.imgUrlObj.insertMaterialUrl]
} else if (this.ruleForm.form === 11 && type === 'icon') {
// 广告icon
this.imgUrlObj.iconUrl = res.fileName
this.ruleForm.icon = this.imgUrlObj.iconUrl
} else if (this.ruleForm.form === 11 && type === 'bg') {
// 背景图
this.imgUrlObj.bgUrl = res.fileName
this.ruleForm.bgUrl = this.imgUrlObj.bgUrl
}
console.log(this.isSize, 'isSize....3..')
})
}
})
console.log(this.imgUrlObj, 1)
console.log(this.ruleForm, 2)
console.log(this.isSize, 'isSize...2...')
},
// tab选项卡切换的时候，清空已经上传的图片
clearImage() {
this.imgUrlObj = {
screenMaterialUrl: '',
flowMaterialUrl1: '',
flowMaterialUrl21: '',
flowMaterialUrl22: '',
flowMaterialUrl23: '',
flowMaterialUrl3: '',
videoMaterialUrl: '',
insertMaterialUrl: '',
}
},
// 提交表单信息
onSubmit() {
// 当选择三图一文的时候校验是否为3张图片
if (this.ruleForm.form === 10 && this.ruleForm.style === 2) {
if (this.ruleForm.material.length !== 3) {
return this.$message.warning('信息流素材需要上传3张图片')
}
}
let addApi = '/admin/creative/add'
let editApi = '/admin/creative/edit'
let params = {
...this.ruleForm
}
this.$request.post(this.isEdit ? editApi : addApi, params).then((res) => {
console.log(res, 'res.....')
this.$route.query.isEdit === '1' ? this.$message.success('编辑成功') : this.$message.success('新增成功')
// 返回列表页
this.$router.go(-1)
})
},
// 创意类型发生变化
ideaTypeChange(val) {
this.clearImage()
console.log(val, 'form....')
},
// 跳转类型发生变化，需要置空下载链接表单
skipTypeChange(val) {
if (val === 2) {
this.ruleForm.url = ''
} else {
this.ruleForm.downloadUrlAndroid = ''
this.ruleForm.downloadUrlIos = ''
this.ruleForm.downloadNameAndroid = ''
}
},
// 样式类型发生变化
styleTypeChange(val, source) {
if (source === 'inspireStyle' && val === 1) {
// 改变图片宽高显示
this.videoWidth = 1280
this.videoHeight = 720
} else {
this.videoWidth = 720
this.videoHeight = 1280
}
if (source === 'flowStyle') {
console.log('flowStyle....')
}
console.log(val, 'style....')
this.ruleForm.style = val
// 只要选项卡发生变化，则清空图片
this.clearImage()
},
cancelSubmit() {
this.$router.go(-1)
},
resetForm(formName) {
this.$refs[formName].resetFields()
}
}
}
</script>
<style scoped lang="scss">
.fa-node {
position: relative;
.child-node {
position: absolute;
top: 0;
left: 502px;
color: #8c939d;
}
}
.avatar-uploader {
width: 200px;
height: 160px;
border: 1px dashed #d9d9d9;
border-radius: 6px;
cursor: pointer;
position: relative;
overflow: hidden;
.el-upload__text {
position: absolute;
top: 48px;
left: 58px;
line-height: 18px;
color: #8c939d;
}
.el-upload__size {
position: absolute;
top: 75px;
left: 40px;
line-height: 18px;
color: #8c939d;
}
.el-upload__wh {
position: absolute;
top: 105px;
left: 16px;
line-height: 14px;
color: #999;
}
}
.avatar-uploader:hover {
border-color: #409eff;
}
.avatar-uploader-icon {
font-size: 28px;
color: #8c939d;
width: 200px;
height: 160px;
line-height: 50px;
text-align: center;
}
.avatar {
width: 200px;
height: 160px;
display: block;
}
.idea-container {
background: #ffffff;
padding: 30px 0;
}
.form-container {
width: 80%;
min-width: 460px;
max-width: 600px;
}
.wid40 {
width: 40px;
}
</style>
