12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214121512161217121812191220122112221223122412251226122712281229123012311232123312341235123612371238123912401241124212431244124512461247124812491250125112521253125412551256125712581259126012611262126312641265126612671268126912701271127212731274127512761277127812791280128112821283128412851286128712881289129012911292129312941295129612971298129913001301130213031304130513061307130813091310131113121313131413151316131713181319132013211322132313241325132613271328132913301331133213331334133513361337133813391340 |
- <template xmlns="http://www.w3.org/1999/html">
- <a-card :body-style="{padding: '24px 32px'}" :bordered="false">
- <a-form @submit="handleSubmit" :form="form">
- <a-form-item label="选择快手账户" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-select
- v-model="accountId"
- @change="actionGroups"
- showSearch
- showArrow
- allowClear
- placeholder="选择需创建的快手账户"
- optionFilterProp="children"
- style="width: 650px"
- :filterOption="filterOption"
- >
- <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="labelCol" :wrapperCol="wrapperCol">
- <a-cascader
- style="width: 650px"
- v-model="ids"
- :options="options"
- @change="onChangeActionBarText"
- :loadData="loadData"
- placeholder="Please select"
- changeOnSelect
- />
- </a-form-item>
- <a-form-item label="视频类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-radio-group v-model="creativeMaterialType" @change="changeVideoList">
- <a-radio-button value="1">竖版视频</a-radio-button>
- <a-radio-button value="2">横版视频</a-radio-button>
- <a-radio-button value="3" v-if="singlePicture">单张图片</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="贴片类型"
- v-if="showSinglePicTiepianType"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <a-radio-group v-model="singlePicTiepianType" @change="changeSinglePicTiepianTypeFun">
- <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="视频上传方式"
- v-if="showUploadType"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <a-radio-group v-model="videoUploadType" @change="changeUploadVideo">
- <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="上传封面(贴片)"
- v-if="showUploadSinglePicType"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <a-radio-group v-model="changeSinglePicType" @change="changeSinglePicTypeFun">
- <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="选择本地视频文件进行上传"
- v-if="localUpload"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <upload-to-ali
- v-model="localUrl"
- :customDomain="customDomain"
- preview
- :region="region"
- :bucket="bucket"
- :accept="acceptVideo"
- :max="10"
- :size="1024000"
- :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret"
- ></upload-to-ali>
- </a-form-item>
- <a-form-item
- label="选择作品进行上传"
- v-if="selectVideoUpload"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <div>
- <a type="primary" @click="showModalVideo">点击选中已上传作品</a>
- <a-modal
- class="ant_modal_body_container"
- title="选择作品"
- v-model="visibleVideo"
- @ok="handleOkVideo"
- :width="860"
- @cancel="handleCancelVideo"
- >
- <template>
- <a-radio-group
- @change="getDescription"
- v-model="videoUrl"
- class="image_item_container"
- >
- <div class="image_item" v-for="(video,index) of videoList" :key="index">
- <video class="video" :src="video.localUrl" controls="controls">您的浏览器不支持 video 标签。</video>
- <a-radio :style="radioStyle" :value="video.localUrl">
- <div class="item_text">{{video.videoName}}</div>
- </a-radio>
- </div>
- </a-radio-group>
- </template>
- </a-modal>
- <div class="checkbox_item_container checkbox_item_container_size" v-if="videoUrl">
- <div class="item_ul">
- <div class="item_li" style="width:130px;height:180px;">
- <a-col class="item">
- <a-icon
- type="close-circle"
- style="position:absolute;top:-5px;right:-5px;color:red"
- @click="deteleRadio"
- />
- <video
- class="video"
- :src="videoUrl"
- controls="controls"
- style="min-height:160px"
- >您的浏览器不支持 video 标签。
- </video>
- </a-col>
- </div>
- </div>
- </div>
- </div>
- </a-form-item>
- <!-- 贴片,上传作品 -->
- <a-form-item
- label="选择作品进行上传(贴片)"
- v-if="hasSinglePicVideoUpload"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <div>
- <a type="primary" @click="showSinglePicModalVideo">点击选中已上传作品</a>
- <a-modal
- class="ant_modal_body_container"
- title="选择作品"
- v-model="visibleSinglePicVideo"
- @ok="handleOkSinglePicVideo"
- :width="860"
- @cancel="handleCancelSinglePicVideo"
- >
- <template>
- <div>
- <a-checkbox-group @change="VideoOnChange" class="checkbox_item_container">
- <div class="item_ul">
- <div class="item_li" v-for="(video,index) of videoList" :key="index">
- <a-col class="item">
- <video
- class="video"
- :src="video.localUrl"
- controls="controls"
- >您的浏览器不支持 video 标签。
- </video>
- <a-checkbox :value="video.localUrl" class="checkbox_item">
- <div class="item_txt">{{video.videoName}}</div>
- </a-checkbox>
- </a-col>
- </div>
- </div>
- </a-checkbox-group>
- </div>
- </template>
- </a-modal>
- <div class="checkbox_item_container checkbox_item_container_size">
- <div class="item_ul">
- <div
- class="item_li"
- v-for="(item,index) of haveSinglePicVideoUrl"
- :key="index"
- style="width:130px;height:180px;"
- >
- <a-col class="item">
- <a-icon
- type="close-circle"
- style="position:absolute;top:-5px;right:-5px;color:red"
- @click="detele(index)"
- />
- <video
- class="video"
- :src="item"
- controls="controls"
- style="min-height:160px"
- >您的浏览器不支持 video 标签。
- </video>
- </a-col>
- </div>
- </div>
- </div>
- </div>
- </a-form-item>
- <!-- 贴片,本地上传视频,可上传多个视频 -->
- <a-form-item
- label="选择本地视频文件进行上传(贴片)"
- v-if="tiepianVideoLocalUpload"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <upload-to-ali
- v-model="tiepianVideoLocalUploadList"
- :customDomain="customDomain"
- preview
- multiple
- :region="region"
- :bucket="bucket"
- :accept="acceptVideo"
- :max="10"
- :size="1024000"
- :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret"
- ></upload-to-ali>
- </a-form-item>
- <!-- 贴片,上传封面图片 -->
- <a-form-item
- v-if="hasSinglePicCoverUpload"
- label="选择封面(贴片)"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <div>
- <a type="primary" @click="showSinglePicCoverModal">点击选中已上传封面</a>
- <a-modal
- class="ant_modal_body_container"
- title="选择封面"
- v-model="visibleSinglePicCover"
- @ok="handleOkSinglePicCover"
- @cancel="handleCancelSinglePicCover"
- :width="860"
- >
- <template>
- <div>
- <input
- v-model="isAllChecked"
- type="checkbox"
- @click="checkAll($event)"
- class="select_all"
- /> 全选
- <div class="image_item_container">
- <div v-for="(item ,index) in imageList" class="image_item" :key="index">
- <label :for="item.id" class="label_item">
- <img :src="item.src" alt class="item_img"/>
- <p class="item_text">{{item.name}}</p>
- <p class="item_checkbox">
- <input
- class="checkItem"
- type="checkbox"
- v-model="checkeds"
- :value="item.id"
- @onClick="checkeda(item.id)"
- @change="changChecked"
- :id="item.id"
- />
- </p>
- </label>
- </div>
- </div>
- </div>
- </template>
- </a-modal>
- <div class="checkbox_item_container checkbox_item_container_size">
- <div class="item_ul">
- <div
- class="item_li"
- v-for="(item,index) of imageList"
- :key="index"
- style="width:100px;height:150px;margin:15px 0;"
- v-if="checkeds.indexOf( item.id )!=-1"
- >
- <a-col class="item">
- <a-icon
- type="close-circle"
- style="position:absolute;top:-5px;right:-5px;color:red"
- @click="deteleImg(item.id)"
- />
- <img :src="item.src" alt style="width:100%"/>
- </a-col>
- </div>
- </div>
- </div>
- </div>
- </a-form-item>
- <!-- 贴片,本地上传图片,可上传多个图片 -->
- <a-form-item
- label="选择本地图片进行上传(贴片)"
- v-if="tiepianImageLocalUpload"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <upload-to-ali
- v-model="tiepianImageLocalUploadList"
- :customDomain="customDomain"
- preview
- multiple
- :region="region"
- :bucket="bucket"
- :accept="acceptImage"
- :max="10"
- :size="1024000"
- :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret"
- ></upload-to-ali>
- </a-form-item>
- <a-form-item
- v-if="showImageUpload"
- label="图片上传"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <upload-to-ali
- v-model="localImageUrl"
- :customDomain="customDomain"
- multiple
- preview
- :region="region"
- :bucket="bucket"
- :accept="acceptImage"
- :max="10"
- :size="1024000"
- :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret"
- ></upload-to-ali>
- </a-form-item>
- <a-form-item
- label="上传封面"
- v-if="showUploadImageRadio"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <a-radio-group v-model="imageType" @change="changeImageType">
- <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 v-if="showCover" label="选择封面" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <div>
- <a type="primary" @click="showModal">点击选中已上传封面</a>
- <a-modal
- title="选择封面"
- v-model="visible"
- @ok="handleOk"
- :width="860"
- class="ant_modal_body_container"
- >
- <template>
- <input
- v-model="isAllChecked"
- type="checkbox"
- @click="checkAll($event)"
- class="select_all"
- /> 全选
- <br/>
- <br/>
- <div class="image_item_container">
- <div v-for="(item ,index) in imageList" class="image_item" :key="index">
- <label :for="item.id" class="label_item">
- <img :src="item.src" alt class="item_img"/>
- <p class="item_text">{{item.name}}</p>
- <p class="item_checkbox">
- <input
- class="checkItem"
- type="checkbox"
- v-model="checkeds"
- :value="item.id"
- @onClick="checkeda(item.id)"
- @change="changChecked"
- :id="item.id"
- />
- </p>
- </label>
- </div>
- </div>
- </template>
- </a-modal>
- <div class="checkbox_item_container checkbox_item_container_size">
- <div class="item_ul">
- <div
- class="item_li"
- v-for="(item,index) of imageList"
- :key="index"
- style="width:100px;height:150px;margin:15px 0;"
- v-if="checkeds.indexOf( item.id )!=-1"
- >
- <a-col class="item">
- <a-icon
- type="close-circle"
- style="position:absolute;top:-5px;right:-5px;color:red"
- @click="deteleImg(item.id)"
- />
- <img :src="item.src" alt style="width:100%"/>
- </a-col>
- </div>
- </div>
- </div>
- </div>
- </a-form-item>
- <a-form-item
- v-if="showLocalImageUpload"
- label="本地封面上传"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <upload-to-ali
- v-model="imageUrl"
- :customDomain="customDomain"
- multiple
- preview
- :region="region"
- :bucket="bucket"
- :accept="acceptImage"
- :max="10"
- :size="1024000"
- :accessKeyId="accessKeyId"
- :accessKeySecret="accessKeySecret"
- ></upload-to-ali>
- </a-form-item>
- <a-form-item label="行动号召按钮" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-select
- v-model="actionBarTextDesc"
- showSearch
- allowClear
- placeholder="选择应用目标"
- optionFilterProp="children"
- style="width: 650px"
- @focus="handleFocus"
- @blur="handleBlur"
- :filterOption="filterOption"
- >
- <a-select-option
- v-for="actionBar in actionBarTextList"
- :key="actionBar.id"
- :value="actionBar.actionBarText"
- >{{actionBar.actionBarText}}
- </a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item label="作品广告语" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-textarea style="width: 650px" v-model="description" :rows="2"/>
- </a-form-item>
- <a-form-item label="创意名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
- <a-input v-model="creativeName" placeholder="请填写广告创意名称" style="width: 650px"></a-input>
- </a-form-item>
- <a-form-item
- v-if="showClickTrackUrl"
- label="第三方点击监测链接"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <a-input v-model="clickTrackUrl" placeholder="请填写第三方点击监测链接" style="width: 650px"></a-input>
- </a-form-item>
- <a-form-item
- v-if="showImpressionUrl"
- label="第三方开始播放监测链接"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol"
- >
- <a-input v-model="impressionUrl" placeholder="请填写第三方开始播放监测链接" style="width: 650px"></a-input>
- </a-form-item>
- <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
- <a-button htmlType="submit" type="primary" :loading="loading">提交</a-button>
- <a-button style="margin-left: 8px">保存</a-button>
- </a-form-item>
- </a-form>
- </a-card>
- </template>
- <script>
- import {getAction, postAction} from '@/api/manage'
- import {mapGetters} from 'vuex'
- import UploadToAli from '@femessage/upload-to-ali'
- import moment from 'moment'
- import VuePreview from 'vue-preview'
- import jq from 'jquery'
- import {stopOtherVideo, closeAllVideoFun} from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
- export default {
- name: 'BaseForm',
- components: {
- UploadToAli,
- VuePreview
- },
- data() {
- return {
- accountId: '', // 快手 accountId
- accountList: {},
- campaignId: '', //广告计划id
- targetPopulation: '',
- changeOnSelectValue: true,
- ids: [],
- showDeliveryType: false,
- deliveryType: '1',
- creativeMaterialType: '1',
- singlePicture: false, // 展示单张图片
- videoUploadType: '1',
- showSinglePicTiepianType: false, // 贴片类型
- showSinglePicType: false, //
- singlePicTiepianType: '1', // 贴片方式
- singlePicType: '1', //
- localUpload: false,
- localUrl: '', // 本地上传地址
- selectVideoUpload: true,
- hasSinglePicVideoUpload: false, // 有单张图片的作品上传
- hasSinglePicCoverUpload: false, // 有单张图片的封面上传
- videoUrl: '', // 视频id
- haveSinglePicVideoUrl: [], // 有单张图片的视频id集合
- haveSinglePicimagesList: [], // // 有单张图片的图片集合
- tiepianVideoLocalUpload: false, // 贴片视频本地上传
- tiepianVideoLocalUploadList: [], // 贴片视频本地上传id集合
- tiepianImageLocalUpload: false, // 贴片视频本地上传
- tiepianImageLocalUploadList: [], // 贴片视频本地上传id集合
- videoList: [],
- radioStyle: {
- // 视频单选样式
- display: 'block',
- height: '30px',
- lineHeight: '30px'
- },
- showUploadType: true,
- localImageUrl: [], //图片地址
- showImageUpload: false,
- imageList: [],
- imageUrl: [],
- sceneId: '', // 资源位置
- showCover: true,
- imageType: '1',
- actionBarTextList: [],
- actionBarTextDesc: '',
- description: '', // 作品广告语
- creativeName: '', //创意名称
- clickTrackUrl: '', // 第三方检测链接
- showLocalImageUpload: false,
- showUploadImageRadio: true,
- showUploadSinglePicType: false, // 单张图片上传类型
- changeSinglePicType: '1', // 单张图片上传方式
- visible: false,
- visibleVideo: false,
- visibleSinglePicVideo: false,
- visibleSinglePicCover: false,
- isAllChecked: false,
- showClickTrackUrl: true,
- showImpressionUrl: false,
- loading: false,
- impressionUrl: '',
- positionType: '',
- checkeds: [],
- customDomain: '',
- acceptVideo: 'video/mpeg,video/mp4',
- acceptImage: 'image/jpeg,image,jpg/png',
- accessKeyId: 'LTAIbNbqWzSOklQV',
- accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
- region: 'oss-cn-beijing',
- bucket: 'ctop-media',
- options: [],
- labelCol: {
- xs: {
- span: 7
- },
- sm: {
- span: 7
- }
- },
- wrapperCol: {
- xs: {
- span: 10
- },
- sm: {
- span: 17
- }
- },
- form: this.$form.createForm(this),
- url: {
- userAllocationList: '/ctop/userAllocation/list',
- getOptionsUrl: '/kuaishou/create/getOptions',
- getChildrenUrl: '/kuaishou/create/getChildren',
- videoListUrl: '/kuaishou/kuaiShouVideo/list',
- imageListUrl: '/kuaishou/kuaiShouImage/image/list',
- actionBarTextListUrl: '/kuaishou/kuaiShouActionBarText/list',
- getDescriptionUrl: '/kuaishou/kuaiShouVideo/queryShouVideo',
- creativeUrl: '/kuaishou/create/createCreative',
- selectGroupCreate: '/kuaishou/kuaiShouGroupCreateLog/select/group'
- }
- }
- },
- methods: {
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- handleOk(e) {
- console.log(e)
- this.visible = false
- this.imageUrl = []
- if (this.checkeds.length > 0) {
- for (let i = 0; i < this.checkeds.length; i++) {
- let imageId = this.checkeds[i]
- for (let j = 0; j < this.imageList.length; j++) {
- let imageVo = this.imageList[j]
- if (imageId == imageVo.id) {
- this.imageUrl.push(imageVo.src)
- }
- }
- }
- }
- },
- showModal() {
- this.visible = true
- },
- // 上传视频弹窗
- handleOkVideo(e) {
- this.visibleVideo = false
- closeAllVideoFun()
- },
- showModalVideo() {
- this.visibleVideo = true
- stopOtherVideo()
- },
- handleCancelVideo() {
- closeAllVideoFun()
- this.videoUrl = ''
- },
- // 有单张图片的上传视频弹窗,多选
- handleOkSinglePicVideo(e) {
- this.visibleSinglePicVideo = false
- closeAllVideoFun()
- },
- showSinglePicModalVideo() {
- this.visibleSinglePicVideo = true
- stopOtherVideo()
- },
- handleCancelSinglePicVideo() {
- closeAllVideoFun()
- this.videoUrl = ''
- },
- // 视频多选
- VideoOnChange(checkedValues) {
- this.haveSinglePicVideoUrl = checkedValues
- console.log(this.haveSinglePicVideoUrl)
- },
- changChecked() {
- if (this.imageList.length == this.checkeds.length) {
- this.isAllChecked = true
- } else {
- this.isAllChecked = false
- }
- },
- // 有单张图片的上传封面
- showSinglePicCoverModal() {
- this.visibleSinglePicCover = true
- },
- handleOkSinglePicCover() {
- this.haveSinglePicimagesList = []
- if (this.checkeds.length > 0) {
- for (let i = 0; i < this.checkeds.length; i++) {
- let imageId = this.checkeds[i]
- for (let j = 0; j < this.imageList.length; j++) {
- let imageVo = this.imageList[j]
- if (imageId == imageVo.id) {
- this.haveSinglePicimagesList.push(imageVo.src)
- }
- }
- }
- }
- this.visibleSinglePicCover = false
- },
- handleCancelSinglePicCover() {
- this.visibleSinglePicCover = false
- this.haveSinglePicimagesList = []
- },
- checkeda: function (id) {
- let indexOf = this.checkeds.indexOf(id)
- if (indexOf >= 0) {
- this.$delete(this.checkeds, id)
- } else {
- this.checkeds.push(id)
- }
- console.log(this.checkeds)
- },
- checkAll(e) {
- // 点击全选事件函数
- let checkObj = document.querySelectorAll('.checkItem') // 获取所有checkbox项
- if (e.target.checked) {
- // 判定全选checkbox的勾选状态
- for (let i = 0; i < this.imageList.length; i++) {
- if (!checkObj[i].checked) {
- // 将未勾选的checkbox选项push到绑定数组中
- this.checkeds.push(parseFloat(checkObj[i].value))
- console.log(this.checkeds)
- }
- }
- } else {
- // 如果是去掉全选则清空checkbox选项绑定数组
- this.checkeds = []
- }
- },
- changeImageType() {
- if (this.imageType == '2') {
- this.showLocalImageUpload = true
- this.showCover = false
- } else {
- this.showLocalImageUpload = false
- this.showCover = true
- }
- },
- handleChange(value) {
- console.log(`selected ${value}`)
- },
- handleBlur() {
- console.log('blur')
- },
- handleFocus() {
- console.log('focus')
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- // 视频类型
- changeVideoList() {
- if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2') && this.sceneId == '2') {
- // 横版竖版并且无单张图片
- this.imageUrl = []
- this.showImageUpload = false
- this.showUploadType = true
- this.selectVideoUpload = true
- this.localUpload = false
- this.showUploadImageRadio = true
- this.showCover = true
- this.showLocalImageUpload = false
- this.videoUrl = ''
- this.hasSinglePicVideoUpload = false
- this.hasSinglePicCoverUpload = false
- this.showSinglePicType = false
- this.showSinglePicTiepianType = false
- if (this.videoUploadType == '1') {
- // 选择作品
- this.localUpload = false
- } else if (this.videoUploadType == '2') {
- // 本地上传
- this.localUpload = true
- }
- let params = {}
- params.pageSize = '1000'
- params.loginId = this.userInfo().id
- params.positionType = '1'
- params.accountId = this.accountId
- if (this.creativeMaterialType == '1') {
- // 竖版视频
- params.materialType = '1'
- }
- if (this.creativeMaterialType == '2') {
- params.materialType = '2'
- }
- getAction(this.url.videoListUrl, params).then(res => {
- if (res.success) {
- this.videoList = res.result.records
- // 设置默认选中的视频
- if (this.videoList.length > 0) {
- this.videoUrl = this.videoList[0].localUrl
- }
- }
- })
- getAction(this.url.imageListUrl, params).then(res => {
- this.imageList = res
- })
- } else if ((this.creativeMaterialType == '1' || this.creativeMaterialType == '2' || this.creativeMaterialType == '3') && this.sceneId == '3') {
- // 横版竖版有单张图片
- if (this.creativeMaterialType == '1' || this.creativeMaterialType == '2') {
- // 切换横版或竖版
- this.showUploadType = true
- this.localUpload = false
- this.selectVideoUpload = false
- this.showImageUpload = false
- this.showUploadImageRadio = false
- this.showUploadSinglePicType = false
- this.tiepianImageLocalUpload = false
- this.haveSinglePicimagesList = []
- this.haveSinglePicVideoUrl = []
- let params = {}
- params.accountId = this.accountId
- params.pageSize = '1000'
- params.loginId = this.userInfo().id
- params.positionType = '2'
- if (this.creativeMaterialType == '2') {
- params.materialType = '2'
- } else if (this.creativeMaterialType == '1') {
- params.materialType = '1'
- }
- if (this.videoUploadType == '1') {
- // 选择作品
- this.tiepianVideoLocalUpload = false
- this.hasSinglePicVideoUpload = true
- } else if (this.videoUploadType == '2') {
- // 本地上传
- this.tiepianVideoLocalUpload = true
- this.hasSinglePicVideoUpload = false
- this.tiepianImageLocalUpload = false
- }
- getAction(this.url.videoListUrl, params).then(res => {
- if (res.success) {
- this.videoList = res.result.records
- // 设置默认选中的视频
- if (this.videoList.length > 0) {
- this.videoUrl = this.videoList[0].localUrl
- }
- }
- })
- } else if (this.creativeMaterialType == '3') {
- // 切换单张图片
- this.positionType = '2'
- this.singlePicTiepianType = '1'
- this.showImageUpload = true
- this.showUploadType = false
- this.selectVideoUpload = false
- this.showSinglePicType = false
- this.showSinglePicTiepianType = false
- this.hasSinglePicVideoUpload = false
- this.tiepianVideoLocalUpload = false
- this.hasSinglePicCoverUpload = false
- if (this.changeSinglePicType == '1') {
- // 选择封面
- this.tiepianImageLocalUpload = false
- } else if (this.changeSinglePicType == '2') {
- // 本地上传
- this.tiepianImageLocalUpload = true
- this.hasSinglePicCoverUpload = false
- }
- }
- }
- if (this.creativeMaterialType == '1' || this.creativeMaterialType == '2') {
- this.hasSinglePicCoverUpload = false
- this.showSinglePicTiepianType = false
- }
- if (this.creativeMaterialType == '3') {
- // 单张图片时
- this.hasSinglePicVideoUpload = false
- this.showSinglePicType = true
- this.showUploadSinglePicType = true
- this.showImageUpload = false
- this.showSinglePicTiepianType = true
- if (this.changeSinglePicType == '1') {
- this.hasSinglePicCoverUpload = true
- } else if (this.changeSinglePicType == '2') {
- this.hasSinglePicCoverUpload = false
- }
- }
- },
- // 视频上传方式
- changeUploadVideo() {
- if (this.sceneId == '2') {
- // 无单张图片时
- this.hasSinglePicVideoUpload = false
- this.hasSinglePicCoverUpload = false
- this.tiepianVideoLocalUpload = false
- this.tiepianImageLocalUpload = false
- if (this.videoUploadType == '2') {
- this.localUpload = true
- this.selectVideoUpload = false
- } else {
- this.selectVideoUpload = true
- this.localUpload = false
- }
- } else if (this.sceneId == '3') {
- if (this.materialType == '3') {
- if (this.changeSinglePicType == '2') {
- this.hasSinglePicCoverUpload = false
- this.tiepianImageLocalUpload = true
- } else if (this.changeSinglePicType == '1') {
- this.hasSinglePicCoverUpload = true
- this.tiepianImageLocalUpload = false
- }
- } else {
- this.showUploadImageRadio = false
- this.tiepianVideoLocalUpload = false
- if (this.videoUploadType == '1') {
- this.hasSinglePicVideoUpload = true
- this.tiepianVideoLocalUpload = false
- } else if (this.videoUploadType == '2') {
- this.hasSinglePicVideoUpload = false
- this.tiepianVideoLocalUpload = true
- }
- }
- }
- },
- getDescription() {
- let params = {}
- params.localUrl = this.videoUrl
- params.loginId = this.userInfo().id
- postAction(this.url.getDescriptionUrl, params).then(res => {
- if (res.success) {
- this.description = res.result.videoDesc
- this.creativeName = res.result.videoName + '_' + moment().format('YYYY-MM-DD_HH:mm')
- }
- })
- this.imageUrl = []
- this.checkeds = []
- },
- // 有单张图片的贴片方式
- changeSinglePicTiepianTypeFun() {
- if (this.creativeMaterialType == '3' && this.singlePicTiepianType == '1') {
- this.positionType = '1'
- } else if (this.creativeMaterialType == '3' && this.singlePicTiepianType == '2') {
- this.positionType = '2'
- }
- let params = {}
- params.pageSize = '1000'
- params.accountId = this.accountId
- params.loginId = this.userInfo().id
- if (this.singlePicTiepianType == '1') {
- params.materialType = '2'
- params.positionType = '1'
- }
- if (this.singlePicTiepianType == '2') {
- params.materialType = '2'
- params.positionType = '2'
- }
- getAction(this.url.imageListUrl, params).then(res => {
- this.imageList = res
- console.log(res)
- })
- },
- // 有单张图片的图片上传方式
- changeSinglePicTypeFun() {
- if (this.changeSinglePicType == '1') {
- // 选择封面
- this.hasSinglePicCoverUpload = true
- this.tiepianImageLocalUpload = false
- }
- if (this.changeSinglePicType == '2') {
- // 本地上传
- this.hasSinglePicCoverUpload = false
- this.tiepianImageLocalUpload = true
- }
- },
- onChangeActionBarText() {
- this.creativeMaterialType = '1'
- if (this.ids.length == 2) {
- let id = this.ids[0]
- let params = {}
- params.campaignId = id
- getAction(this.url.actionBarTextListUrl, params).then(res => {
- if (res.success) {
- this.actionBarTextList = res.result.records
- }
- })
- let unitId = this.ids[1]
- let unitParams = {}
- unitParams.unitId = unitId
- getAction(this.url.selectGroupCreate, unitParams).then(res => {
- this.sceneId = res.sceneId
- if (res.sceneId == '2') {
- // 无单张图片的时候
- this.singlePicture = false
- this.showImageUpload = false
- this.showImpressionUrl = false
- this.showClickTrackUrl = true
- this.showUploadImageRadio = true
- this.showCover = true
- this.showLocalImageUpload = false
- this.selectVideoUpload = true
- this.hasSinglePicVideoUpload = false
- this.hasSinglePicCoverUpload = false
- this.showSinglePicTiepianType = false
- this.showUploadSinglePicType = false
- this.positionType = '1'
- this.tiepianVideoLocalUpload = false
- this.tiepianImageLocalUpload = false
- let params2 = {}
- params2.pageSize = '1000'
- params2.accountId = this.accountId
- params2.materialType = '1'
- params2.positionType = '1'
- params2.loginId = this.userInfo().id
- getAction(this.url.videoListUrl, params2).then(res => {
- if (res.success) {
- this.videoList = res.result.records
- // 设置默认选中的视频
- if (this.videoList.length > 0) {
- this.videoUrl = this.videoList[0].localUrl
- this.description = this.videoList[0].videoDesc
- }
- }
- })
- // 图片列表
- getAction(this.url.imageListUrl, params2).then(res => {
- this.imageList = res
- console.log(res)
- })
- } else if (res.sceneId == '3') {
- // 有单张图片的时候
- this.singlePicture = true
- this.showImpressionUrl = true
- this.showClickTrackUrl = false
- this.showUploadImageRadio = false
- this.showCover = false
- this.selectVideoUpload = false
- this.showLocalImageUpload = false
- this.positionType = '2'
- // 如果有单张图片,上传作品方式为多选
- this.hasSinglePicVideoUpload = true
- let params2 = {}
- params2.accountId = this.accountId
- params2.pageSize = '1000'
- params2.materialType = '1'
- params2.positionType = '2'
- params2.loginId = this.userInfo().id
- getAction(this.url.videoListUrl, params2).then(res => {
- if (res.success) {
- this.videoList = res.result.records
- // 设置默认选中的视频
- if (this.videoList.length > 0) {
- this.videoUrl = this.videoList[0].localUrl
- this.description = this.videoList[0].videoDesc
- }
- }
- })
- // 图片列表
- getAction(this.url.imageListUrl, params2).then(res => {
- this.imageList = res
- })
- }
- })
- }
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- loadData(selectedOptions) {
- const targetOption = selectedOptions[selectedOptions.length - 1]
- targetOption.loading = true
- this.campaignId = `${targetOption.value}`
- let params = {}
- params.campaignId = this.campaignId
- params.loginId = this.userInfo().id
- params.accountId = this.accountId
- postAction(this.url.getChildrenUrl, params).then(res => {
- console.log(res, 10000000)
- targetOption.children = res
- this.options = [...this.options]
- targetOption.loading = false
- })
- },
- actionGroups() {
- let params = {}
- params.loginId = this.userInfo().id
- params.accountId = this.accountId
- postAction(this.url.getOptionsUrl, params).then(res => {
- this.options = res
- })
- },
- handleSubmit(e) {
- e.preventDefault()
- this.form.validateFields((err, values) => {
- if (!err) {
- this.loading = true
- let params = {}
- params.accountId = this.accountId
- if (this.ids.length == 2) {
- params.unitId = this.ids[1]
- }
- params.videoUploadType = this.videoUploadType
- params.imageUrl = this.imageUrl
- params.actionBarText = this.actionBarTextDesc
- params.description = this.description
- params.clickTrackUrl = this.clickTrackUrl
- params.creativeName = this.creativeName
- params.creativeMaterialType = this.creativeMaterialType
- params.impressionUrl = this.impressionUrl
- params.sceneId = this.sceneId
- params.loginId = this.userInfo().id
- params.positionType = this.positionType
- if (this.sceneId == '2') {
- params.imageType = this.imageType
- params.localImageUrl = this.localImageUrl
- if (this.videoUploadType == '1') {
- params.videoUrl = this.videoUrl
- } else if (this.videoUploadType == '2') {
- params.videoUrl = this.localUrl
- }
- } else if (this.sceneId == '3') {
- if (this.creativeMaterialType != '3') {
- if (this.videoUploadType == '1') {
- params.haveSinglePicVideoUrl = this.haveSinglePicVideoUrl
- } else if (this.videoUploadType == '2') {
- params.haveSinglePicVideoUrl = this.tiepianVideoLocalUploadList
- }
- } else if (this.creativeMaterialType == '3') {
- params.singlePicTiepianType = this.singlePicTiepianType
- if (this.changeSinglePicType == '1') {
- params.haveSinglePicimagesList = this.haveSinglePicimagesList
- } else if (this.changeSinglePicType == '2') {
- params.haveSinglePicimagesList = this.tiepianImageLocalUploadList
- }
- }
- }
- postAction(this.url.creativeUrl, params).then(res => {
- console.log(res)
- if (res.success) {
- this.loading = false
- alert('广告创意创建成功')
- } else {
- this.loading = false
- alert(res.message)
- }
- })
- }
- })
- },
- detele(index) {
- this.haveSinglePicVideoUrl.splice(index, 1)
- },
- deteleRadio() {
- this.videoUrl = null
- },
- deteleImg(item) {
- var index = this.checkeds.findIndex(v => v === item)
- this.checkeds.splice(index, 1)
- this.imageUrl.splice(index, 1)
- this.haveSinglePicimagesList.splice(index, 1)
- }
- },
- 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
- }
- })
- }
- }
- </script>
- <style lang="scss">
- .select_all {
- margin-bottom: 10px;
- }
- .ant_modal_body_container {
- .ant-modal-body {
- max-height: 650px;
- overflow-y: scroll;
- .image_item_container {
- margin: 0 -10px;
- width: 100%;
- .image_item {
- display: inline-block;
- width: 20%;
- padding: 0 10px;
- box-sizing: border-box;
- margin-bottom: 20px;
- .label_item {
- display: block;
- cursor: pointer;
- }
- .item_img {
- width: 100%;
- margin-bottom: 10px;
- }
- .item_text {
- height: 42px;
- overflow: hidden;
- margin-bottom: 0;
- }
- .item_checkbox {
- margin-bottom: 0;
- }
- .video {
- width: 100%;
- }
- }
- }
- }
- .video_item_container {
- .video {
- width: 100%;
- }
- }
- }
- // 多选框
- .checkbox_item_container {
- .item_ul {
- margin: 0 -10px;
- .item_li {
- width: 20%;
- float: left;
- padding: 0 10px;
- box-sizing: border-box;
- .item:hover i {
- display: block;
- cursor: pointer;
- }
- .item {
- position: relative;
- i {
- display: none;
- }
- video {
- width: 100%;
- min-height: 255px;
- }
- .checkbox_item {
- display: block;
- .ant-checkbox {
- display: inline-block;
- }
- span {
- display: block;
- padding: 0;
- .item_txt {
- text-align: left;
- height: 42px;
- overflow: hidden;
- }
- }
- }
- }
- }
- }
- }
- // @media (min-width: 1024px){
- // .checkbox_item_container {
- // width:70%
- // }
- // } /*>=1024的设备*/
- // @media (min-width: 1100px) {
- // .checkbox_item_container {
- // width:70%
- // }
- // } /*>=1100的设备*/
- @media (min-width: 1280px) {
- .checkbox_item_container_size {
- width: 70%
- }
- }
- /*>=1280的设备*/
- // @media (min-width: 1366px) {
- // }
- // @media (min-width: 1440px) {
- // }
- // @media (min-width: 1680px) {
- // }
- @media (min-width: 1920px) {
- .checkbox_item_container_size {
- width: 50%
- }
- }
- </style>
|