| 12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214 |
- <style>
- .display-none-selset {
- display: none !important;
- }
- #table_time_selected1 tr {
- border: 1px solid rgb(102, 162, 243);
- }
- .plug-timer-grid th {
- line-height: 25px;
- }
- .group-creat .ant-form-item-required::before {
- display: inline-block;
- margin-right: 4px;
- color: #f5222d;
- font-size: 14px;
- font-family: SimSun, sans-serif;
- line-height: 1;
- content: '';
- }
- .else-label .ant-form-item-label label::after {
- content: '';
- position: relative;
- top: -0.5px;
- margin: 0 8px 0 2px;
- }
- </style>
- <template>
- <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
- <a-form @submit="handleSubmit" :form="form">
- <a-form-item
- label="选择模板"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-select
- v-decorator="['templateId']"
- showSearch
- allowClear
- placeholder="选择定向模板"
- optionFilterProp="children"
- style="width: 500px"
- :filterOption="filterOption"
- >
- <a-select-option v-for="appModel in templateList" :key="appModel.templateId" :value="appModel.templateId">
- {{ appModel.templateName }}
- </a-select-option>
- </a-select>
- <a-button type="primary" @click="getTemplate(accountId)" :loading="templateLoading"> 刷新模板</a-button>
- <br />
- <a style="margin: 0 10px 0 0" @click="addTemplate(accountId)">新增模板</a>
- <a
- @click="lookTemplate(accountId, getData('templateId'))"
- :disabled="getData('templateId') == '' || getData('templateId') == null"
- >查看模板</a
- >
- </a-form-item>
- <div style="text-align: center; font-size: 16px">预算和排期</div>
- <a-form-item
- label="单日预算"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group buttonStyle="solid" v-model="allForm.dayBudget">
- <a-radio-button value="0">不限</a-radio-button>
- <a-radio-button value="1">统一预算</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label=" "
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- class="else-label"
- v-if="allForm.dayBudget == '1'"
- >
- <a-input
- placeholder="不小于100,不超过100000000,仅支持输入自然数"
- v-decorator="[
- 'dayBudget',
- {
- rules: [{ required: true, message: '请填写预算' }, { validator: budgetValue }],
- },
- ]"
- />
- </a-form-item>
- <a-form-item
- label="投放方式"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group buttonStyle="solid" v-decorator="['speed', { initialValue: '1' }]">
- <a-radio-button value="1">正常投放</a-radio-button>
- <a-radio-button value="2">平滑投放</a-radio-button>
- </a-radio-group>
- <br />
- <span>
- {{ getData('speed') == '2' ? '平滑匀速投放' : '尽快展示广告消耗预算' }}
- </span>
- </a-form-item>
- <a-form-item
- label="排期"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group buttonStyle="solid" v-model="allForm.time" @change="setTime">
- <a-radio-button value="1">从今天开始长期投放</a-radio-button>
- <a-radio-button value="2">设置开始和结束日期</a-radio-button>
- </a-radio-group>
- <br />
- <a-range-picker v-if="allForm.time == '2'" v-model="timeRange" format="YYYY-MM-DD" :allowClear="false" />
- </a-form-item>
- <a-form-item
- label="投放时段"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group buttonStyle="solid" v-model="allForm.scheduleTime" @change="setTimeAll">
- <a-radio-button value="1">全天</a-radio-button>
- <a-radio-button value="2">特定时间</a-radio-button>
- </a-radio-group>
- <br />
- <selectCheckAll
- style="width: 100%"
- v-show="allForm.scheduleTime == '2'"
- :scheduleTime.sync="allForm.scheduleTimeData"
- ref="selectCheck"
- />
- </a-form-item>
- <a-form-item
- label="创意展现方式"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group buttonStyle="solid" v-decorator="['showMode', { initialValue: '2' }]">
- <a-radio-button value="2">智能优选</a-radio-button>
- <a-radio-button value="1">随机轮播</a-radio-button>
- </a-radio-group>
- <br />
- <span>
- {{
- getData('showMode') == '1'
- ? '广告组包含的广告创意将随机展现'
- : '每一次展现的时候,系统会进行CTR预估,预估CTR高的会得到展现机会'
- }}
- </span>
- </a-form-item>
- <a-form-item
- label="场景广告位"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <checkBoxGroup
- :options="[
- { label: '优选广告位', value: 1 },
- { label: '信息流广告', value: 7 },
- { label: '上下滑大屏广告', value: 6 },
- { label: '视频播放页广告', value: 3 },
- ]"
- v-model="allForm.sceneId"
- @change="changeData"
- />
- </a-form-item>
- <div style="width: 100%" v-for="(item, index) of allForm.group" :key="index">
- <div style="clear: both"></div>
- <a-form-item
- label="优化目标"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group buttonStyle="solid" v-model="item.bidType" @change="resData(index)">
- <a-radio-button :value="1">点击数</a-radio-button>
- <a-radio-button :value="10">转化数</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="转化目标"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- v-if="item.bidType == 10"
- >
- <a-select v-model="item.ocpxActionType">
- <a-select-option :value="2">行为数</a-select-option>
- <a-select-option :value="180" v-if="campaignType == '2' && allForm.groupTypeData.isActivate == '1'"
- >激活</a-select-option
- >
- <a-select-option
- :value="53"
- v-if="(campaignType == '4' || campaignType == '5') && allForm.groupTypeData.isFormSubmit == '1'"
- >表单提交</a-select-option
- >
- <a-select-option :value="394" v-if="allForm.groupTypeData.isOrderSubmit == '1'">订单提交</a-select-option>
- <a-select-option :value="348" v-if="allForm.groupTypeData.isValidClue == '1'">使用有效线索</a-select-option>
- <a-select-option :value="383" v-if="allForm.groupTypeData.isCreditGrant == '1'">授信出价</a-select-option>
- <a-select-option :value="384" v-if="allForm.groupTypeData.isWanJian == '1'">完件出价</a-select-option>
- <a-select-option :value="190" v-if="allForm.groupTypeData.isPurchase == '1'">付费出价</a-select-option>
- <a-select-option :value="191" v-if="allForm.groupTypeData.isFirstdayRoi == '1'">首日ROI</a-select-option>
- <a-select-option :value="396" v-if="allForm.groupTypeData.isRegister == '1'">注册优化目标</a-select-option>
- </a-select>
- </a-form-item>
- <a-form-item
- label="深度转化目标"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- v-if="
- (item.ocpxActionType == 180 || item.ocpxActionType == 53) &&
- allForm.groupTypeData.deepConversionTypes.length > 0
- "
- >
- <a-select v-model="item.deepConversionType" allowClear>
- <a-select-option
- :value="items.deepConversionType"
- v-for="(items, index) of allForm.groupTypeData.deepConversionTypes"
- :key="index"
- >
- {{ items.desc }}</a-select-option
- >
- </a-select>
- </a-form-item>
- <a-form-item
- label="计费方式"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group defaultValue="1">
- <a-radio value="1">{{ item.bidType == 1 ? '点击计费' : '展示计费(oCPM)' }}</a-radio>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="出价"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- v-if="item.bidType == 1"
- >
- <!-- v-model="item.bid" -->
- <a-input-number
- v-decorator="[
- 'bid',
- {
- rules: [{ required: true, message: '出价必填' }, { validator: bidCheck }],
- },
- ]"
- style="width: 100%"
- >
- </a-input-number>
- </a-form-item>
- <a-form-item
- label="目标成本"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- v-else
- >
- <!-- v-model="item.cpaBid" -->
- <a-input-number
- v-decorator="[
- 'cpaBid',
- {
- rules: [{ required: true, message: '目标成本必填' }, { validator: cpaBidCheck }],
- },
- ]"
- style="width: 100%"
- >
- </a-input-number>
- <span
- style="color: red; font-weight: 700"
- v-if="item.ocpxActionType == 2 && getData('cpaBid') && getData('cpaBid') > 1"
- >
- 行为出价大于1元,请注意!!!
- </span>
- </a-form-item>
- <a-form-item
- label="深度转化出价"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- v-if="
- (item.ocpxActionType == 180 || item.ocpxActionType == 53) &&
- allForm.groupTypeData.deepConversionTypes.length > 0 &&
- item.deepConversionType != ''
- "
- >
- <a-input-number
- v-model="item.deepConversionBid"
- @change="deep_conversion_bidTip(index)"
- :style="{ borderColor: item.deepConversionBidCheck ? 'red' : '#d9d9d9' }"
- style="width: 100%"
- :disabled="getData('cpaBid') == null || getData('cpaBid') == ''"
- ></a-input-number>
- <span style="color: red" v-if="item.deepConversionBidCheck"
- >深度转化目标成本必须高于优化目标成本,且不得高于3000元</span
- >
- </a-form-item>
- </div>
- </a-form>
- </a-card>
- </template>
- <script>
- import { getAction, postAction, deleteAction } from '@/api/manage'
- import moment from 'moment'
- import { mapGetters } from 'vuex'
- import jq from 'jquery'
- import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
- import templateModal from '@/views/modules/kuaishouapp/crossAccount/templateModal'
- import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
- let dateQuantumRangeConst = ''
- const columns = [
- {
- title: '人群',
- dataIndex: 'orientationName',
- scopedSlots: {
- customRender: 'orientationName',
- },
- width: 150,
- },
- {
- title: '属性',
- dataIndex: 'populationType',
- filters: [
- {
- text: '上传人群',
- value: '1',
- },
- {
- text: '广告人群',
- value: '2',
- },
- {
- text: '主题专区',
- value: '3',
- },
- {
- text: '逻辑规则',
- value: '4',
- },
- {
- text: '人群扩展',
- value: '5',
- },
- {
- text: '平台定制',
- value: '6',
- },
- {
- text: '定制付费',
- value: '7',
- },
- {
- text: '网红粉丝类别',
- value: '8',
- },
- {
- text: '内容付费行为',
- value: '9',
- },
- {
- text: '移动应用安装',
- value: '10',
- },
- {
- text: '快手使用活跃度',
- value: '11',
- },
- {
- text: '行业分类',
- value: '12',
- },
- {
- text: '商业兴趣',
- value: '13',
- },
- {
- text: '固化标签',
- value: '14',
- },
- {
- text: '行业偏好',
- value: '15',
- },
- {
- text: '第三方标签',
- value: '16',
- },
- {
- text: '产品关键词',
- value: '17',
- },
- ],
- onFilter: (value, record) => record.populationType.toString().toLowerCase().includes(value.toLowerCase()),
- scopedSlots: {
- customRender: 'populationType',
- },
- width: 150,
- },
- {
- title: '创建时间',
- dataIndex: 'createTime',
- scopedSlots: {
- customRender: 'createTime',
- },
- sorter: (a, b) => a.createTime - b.createTime,
- },
- ]
- function tqFun(qcArr1) {
- var tempArr = []
- function bbFun(qcArr) {
- for (var i = 0; i < qcArr.length; i++) {
- if (qcArr[i] instanceof Array) {
- bbFun(qcArr[i])
- } else {
- tempArr.push(qcArr[i])
- }
- }
- return tempArr
- }
- return bbFun(qcArr1)
- }
- export default {
- name: 'creat-unit',
- components: {
- selectCheckAll,
- templateModal,
- checkBoxGroup,
- },
- props: {
- campaignId: {
- type: String,
- default() {
- return null
- },
- },
- },
- data() {
- return {
- templateLoading: false,
- dataOne: [],
- trackName: '',
- trackUrlList: [],
- showSite: false,
- appList: [],
- siteList: [],
- fieldNames: {
- label: 'category_name',
- value: 'category_id',
- children: 'child',
- },
- defaultProps: {
- children: 'children',
- label: 'label',
- id: 'id',
- },
- showTrackUrlNameElse: true,
- clickTrackUrlList: false,
- spinning: false,
- trackUrlName: '',
- tagName: '',
- labelCol: {
- lg: {
- span: 6,
- },
- sm: {
- span: 6,
- },
- xs: {
- span: 6,
- },
- md: {
- span: 6,
- },
- },
- wrapperCol: {
- lg: {
- span: 18,
- },
- sm: {
- span: 18,
- },
- xs: {
- span: 14,
- },
- md: {
- span: 14,
- },
- },
- ipagination: {
- current: 1,
- pageSize: 5,
- // pageSizeOptions: ['10', '20', '30'],
- showTotal: (total, range) => {
- return range[0] + '-' + range[1] + ' 共' + total + '条'
- },
- showQuickJumper: true,
- // showSizeChanger: true,
- total: 0,
- onChange: (current) => {
- // 切换分页时的回调,
- // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
- this.ipagination.current = current
- },
- },
- showVideo: true,
- videoList: [],
- orderBy: 'time',
- visibleMatemal: false,
- loadingVideoList: false,
- checkVideo: [],
- checkVideoAll: [],
- checkVideoWai: [],
- dataSource: [],
- active: 0,
- time: [],
- channelType: 0,
- creativeMaterialType: '',
- tab: [
- {
- value: 0,
- label: '内部',
- },
- {
- value: 1,
- label: '外部',
- },
- ],
- templateList: [],
- allianceAccount: false,
- creativeCategorySwitch: false,
- actionbarClickUrlSwitch: false,
- tongbuLoading: false,
- convert: false,
- convertId: '',
- convertList: [],
- checkedTrue: false,
- nameValue: '',
- visible: false,
- timeRange: [],
- form: this.$form.createForm(this),
- step: 0,
- people: '2',
- targeted: '2',
- topMiddle: false,
- topMiddleNo: false,
- keyValue: '',
- keyValueNo: '',
- columns,
- selectedRowKeys: [],
- selectedRowKeysValue: [],
- selectedRowKeysNo: [],
- selectedRowKeysValueNo: [],
- data: [],
- populationData: {},
- url: {
- insertTemplateUrl: '/kuaishou/create/createGroups',
- userAllocationList: '/ctop/userAllocation/list',
- campaignList: '/kuaishou/kuaiShouCampaignTemplate/list',
- getDeepConversionUrl: '/kuaishou/kuaiShouConversionTypes/getIsActivate',
- getCampaignTemplate: '/kuaishou/kuaiShouCampaignTemplate/getKuaiShouCampaignTemplate',
- appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
- },
- appId: '',
- loading: false,
- campaignTemplateId: '',
- campaignType: null,
- maxBid: 0,
- allForm: {
- dayBudget: '0',
- time: '1',
- scheduleTime: '1',
- scheduleTimeData:
- '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
- group: [],
- groupTypeData: null,
- fail: [],
- success: [],
- sceneId: [1],
- appStore: ['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan'],
- allianceAccount: '1',
- description: '',
- },
- convertType: '1',
- clickTrackUrlShow: false,
- clickTrackUrlShowType: '1',
- optionsTag: [],
- creativeTagVisible: false,
- visibleVideo: false,
- videoUrlShow: '',
- sumContent: 0,
- titleVisible: false,
- options: [],
- value: '',
- title: [],
- cunTitleVisible: false,
- cunTitleList: [],
- tongbuLoading: false,
- accountId: '',
- oldCampaignId: '',
- oldCampaignName: '',
- newCampaignId: '',
- }
- },
- computed: {
- count() {
- return moment().startOf('day')
- },
- },
- filters: {
- getDate(value) {
- let date = new Date(value)
- 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 y + '-' + MM + '-' + d
- },
- platform(str) {
- var data = {
- 1: 'Android应用下载',
- 2: 'Android网页游戏',
- 3: 'iOS应用下载',
- 4: 'iOS网页游戏',
- }
- return data[str]
- },
- },
- methods: {
- changeData(data) {
- if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
- data.splice(
- data.findIndex((item) => item == 1),
- 1
- )
- } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
- data.splice(0, data.length - 1)
- } else if (data.length == 0) {
- data.push(1)
- }
- },
- handleOk(item) {
- this.accountId = item.accountId
- this.oldCampaignId = item.oldCampaignId
- this.oldCampaignName = item.oldCampaignName
- this.newCampaignId = item.newCampaignId
- this.getTemplate(item.accountId)
- this.campaignType = item.campaignType
- getAction('/kuaishou/batch/getIsActivate', {
- accountId: item.accountId,
- }).then((res) => {
- if (res.success) {
- this.allForm.groupTypeData = res.result
- this.addGroup()
- }
- })
- // getAction('/kuaishou/batch/getWhiteList', {
- // accountId: item.accountId,
- // }).then((res) => {
- // if (res.success) {
- // // console.log(res)
- // if (res.result) {
- // this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
- // this.allianceAccount = res.result.alliance_account == 1 ? true : false
- // this.actionbarClickUrlSwitch = res.result.actionbar_click_url_switch == 1 ? true : false
- // } else {
- // this.allianceAccount = false
- // this.creativeCategorySwitch = false
- // this.actionbarClickUrlSwitch = false
- // }
- // }
- // })
- getAction('/kuaishou/batch/getProjectMaxBid', {
- accountId: item.accountId,
- }).then((res) => {
- if (res.success) {
- this.maxBid = res.result / 1000
- }
- })
- },
- filter(inputValue, path) {
- return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
- },
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- lookTemplate(accountId, templateId) {
- this.$refs.templateModal.handleOk(accountId, templateId, 'look')
- },
- addTemplate(accountId) {
- this.$refs.templateModal.create(accountId, 'add')
- },
- getTemplate(accountId) {
- var data = null
- if (accountId) {
- data = accountId
- } else {
- this.templateLoading = true
- data = accountId
- }
- getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
- accountId: data,
- }).then((res) => {
- if (res.success) {
- this.getTemplateList(data)
- }
- })
- },
- getTemplateList(accountId) {
- this.templateList = []
- getAction('/batch/kuaishouTemplate/list', {
- accountId: accountId,
- pageSize: 1000,
- pageNo: 1,
- }).then((res) => {
- if (res.success) {
- this.templateList = res.result.records.map((item, index) => {
- return {
- ...item,
- key: index,
- }
- })
- this.templateLoading = false
- } else {
- this.templateLoading = false
- }
- })
- },
- getCheck(e) {
- this.checkedTrue = e.target.checked
- },
- addGroup() {
- this.allForm.group.push({
- bidType: 10,
- // bid: '',
- // cpaBid: '',
- deepConversionBidCheck: false,
- // unitName: '',
- unitNameCheck: false,
- deepConversionType: '',
- deepConversionBid: '',
- ocpxActionType: this.campaignType == '2' && this.allForm.groupTypeData.isActivate == '1' ? 180 : 2,
- })
- },
- resData(index) {
- // this.allForm.group[index].bid = ''
- // this.allForm.group[index].cpaBid = ''
- this.allForm.group[index].showTipCheck = false
- this.allForm.group[index].deepConversionBidCheck = false
- this.allForm.group[index].deepConversionType = ''
- this.allForm.group[index].deepConversionBid = ''
- this.form.setFieldsValue({
- bid: undefined,
- })
- this.form.setFieldsValue({
- cpaBid: undefined,
- })
- },
- removeGroup(index) {
- this.allForm.group.splice(index, 1)
- },
- deep_conversion_bidTip(index) {
- if (
- this.allForm.group[index].deepConversionBid < this.getData('cpaBid') ||
- this.allForm.group[index].deepConversionBid > 3000
- ) {
- this.allForm.group[index].deepConversionBidCheck = true
- } else {
- this.allForm.group[index].deepConversionBidCheck = false
- }
- },
- checkGroup(e, index) {
- if (e.target.value != '') {
- getAction('/kuaishou/batch/checkUnitName', {
- campaignId: localStorage.getItem('campaignList'),
- unitName: e.target.value,
- }).then((res) => {
- if (res.success) {
- this.allForm.group[index].unitNameCheck = !res.result
- } else {
- this.allForm.group[index].unitNameCheck = false
- }
- })
- }
- },
- showTip(index) {
- if (this.allForm.group[index].bidType == 1) {
- if (this.getData('bid') < 0.2 || this.getData('bid') > this.maxBid) {
- this.allForm.group[index].showTipCheck = true
- } else {
- this.allForm.group[index].showTipCheck = false
- }
- } else {
- if (this.getData('cpaBid') < 1 || this.getData('cpaBid') > this.maxBid) {
- this.allForm.group[index].showTipCheck = true
- } else {
- this.allForm.group[index].showTipCheck = false
- }
- }
- },
- getScheduleTime(item) {
- this.allForm.scheduleTimeData = item
- },
- setTime(e) {
- if (e.target.value == '2') {
- this.timeRange[0] = moment().startOf('day')
- this.timeRange[1] = moment().add(1, 'months')
- }
- },
- setTimeAll(e) {
- if (e.target.value == '2') {
- this.$nextTick(() => {
- this.$refs.selectCheck.init()
- })
- } else {
- }
- },
- getData(className) {
- return this.form.getFieldValue(className)
- },
- bidCheck(rule, value, callback) {
- if (value < 0.2 || value > this.maxBid) {
- callback('不得低于0.2元,不得高于项目最高出价' + this.maxBid + '元')
- } else {
- callback()
- }
- },
- cpaBidCheck(rule, value, callback) {
- if (value < 1 || value > this.maxBid) {
- callback('不得低于1元,不得高于项目最高出价' + this.maxBid + '元')
- } else {
- callback()
- }
- },
- handleConfirmValue(rule, value, callback) {
- if (value != '' && value != undefined) {
- getAction('/kuaishou/batch/checkUnitName', {
- campaignId: localStorage.getItem('campaignList'),
- unitName: value + '_0',
- }).then((res) => {
- if (res.success) {
- if (!res.result) {
- callback('广告组名称重复')
- } else {
- callback()
- }
- } else {
- callback()
- }
- })
- } else {
- callback()
- }
- },
- budgetValue(rule, value, callback) {
- if (value < 100 || value > 100000000) {
- callback('不小于100,不超过100000000,仅支持输入自然数')
- }
- callback()
- },
- handleConfirmBid(rule, value, callback) {
- if (this.bid == 0 || this.bid <= 0.2 || this.bid >= 100) {
- callback('不得低于0.2元,不得高于100元')
- }
- callback()
- },
- handleConfirmCpaBid(rule, value, callback) {
- if (this.ocpxActionType == '2' && (this.cpaBid == 0 || this.cpaBid <= 1 || this.cpaBid >= 3000)) {
- callback('金额不得低于1元,不得高于3000元')
- }
- if (this.ocpxActionType == '180' && (this.cpaBid == 0 || this.cpaBid <= 5 || this.cpaBid >= 3000)) {
- callback('金额不得低于5元,不得高于3000元')
- }
- callback()
- },
- onSelectChange(selectedRowKeys, selectionRows) {
- this.selectedRowKeys = selectedRowKeys
- this.selectedRowKeysValue = selectionRows.map((item) => {
- return {
- orientationId: item.orientationId,
- orientationName: item.orientationName,
- }
- })
- },
- getCheckboxProps(record) {
- return {
- props: {
- disabled: this.selectedRowKeysValueNo.some((item) => item.orientationId === record.orientationId),
- },
- }
- },
- onSelectChangeNo(selectedRowKeys, selectionRows) {
- this.selectedRowKeysNo = selectedRowKeys
- this.selectedRowKeysValueNo = selectionRows.map((item) => {
- return {
- orientationId: item.orientationId,
- orientationName: item.orientationName,
- }
- })
- },
- getCheckboxPropsNo(record) {
- return {
- props: {
- disabled: this.selectedRowKeysValue.some((item) => item.orientationId === record.orientationId),
- },
- }
- },
- okSelect() {
- this.keyValue = ''
- this.topMiddle = false
- for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
- this.keyValue += this.selectedRowKeysValue[i].orientationName + ' '
- }
- },
- okSelectNo() {
- this.keyValueNo = ''
- this.topMiddleNo = false
- for (let i = 0; i < this.selectedRowKeysValueNo.length; i++) {
- this.keyValueNo += this.selectedRowKeysValueNo[i].orientationName + ' '
- }
- },
- radioChange() {
- this.selectedRowKeys = []
- this.selectedRowKeysValue = []
- this.selectedRowKeysNo = []
- this.selectedRowKeysValueNo = []
- this.keyValue = ''
- this.keyValueNo = ''
- },
- handleSubmit(e) {
- e.preventDefault()
- this.form.validateFieldsAndScroll((err, values) => {
- if (!err) {
- this.loading = true
- var groupArr = this.allForm.group.map((item) => {
- return {
- ...item,
- deepConversionBid: item.deepConversionBid != '' ? item.deepConversionBid * 1000 : '',
- ocpxActionType: item.ocpxActionType,
- bidType: item.bidType == 1 ? 2 : 10,
- }
- })
- var json = {
- ...values,
- cpaBid: values.cpaBid && values.cpaBid != '' ? values.cpaBid * 1000 : null,
- bid: values.bid && values.bid != '' ? values.bid * 1000 : null,
- dayBudget: values.dayBudget * 1000,
- }
- var params = {
- userId: this.userInfo().id,
- ...json,
- ...groupArr[0],
- accountId: this.accountId,
- oldCampaignId: this.oldCampaignId,
- oldCampaignName: this.oldCampaignName,
- newCampaignId: this.newCampaignId,
- beginTime: moment(this.timeRange[0]).format('YYYY-MM-DD'),
- endTime: this.allForm.time == '2' ? moment(this.timeRange[1]).format('YYYY-MM-DD') : '',
- sceneId: this.allForm.allianceAccount == '1' ? this.allForm.sceneId : [5],
- scheduleTime:
- this.allForm.scheduleTime == '2'
- ? this.allForm.scheduleTimeData
- : '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
- }
- postAction('/kuaishouCampaignCopyData/add', params).then((res) => {
- if (res.success) {
- this.$emit('getUnitData')
- } else {
- this.$message.error(res.message)
- }
- })
- }
- })
- },
- onChange(value) {
- // console.log(value)
- },
- handleChange(value) {
- // this.$refs.population.getAppList(value)
- this.getSiteList(value)
- },
- getPlatForm(appId) {
- if (appId) {
- var data = this.appList.filter((item) => {
- return item.appId == appId
- })
- return data[0].platform
- }
- },
- handleBlur() {
- // console.log('blur')
- },
- handleFocus() {
- // console.log('focus')
- },
- getPageSize(data) {
- if (data.target.value == '0') {
- this.ipagination.pageSize = 5
- } else if (data.target.value == '1') {
- this.ipagination.pageSize = 15
- }
- this.videoList = []
- this.checkVideo = []
- this.checkVideoAll = []
- this.checkVideoWai = []
- this.sumContent = 0
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- prevStep() {
- this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignList'))
- },
- getData(className) {
- return this.form.getFieldValue(className)
- },
- showVideoList(url, params) {
- this.dataSource = []
- this.loadingVideoList = true
- getAction(url, params).then((res) => {
- // console.log(res)
- if (res.success) {
- this.dataSource = res.result.list
- this.ipagination.total = res.result.total
- this.loadingVideoList = false
- } else {
- this.loadingVideoList = false
- }
- })
- },
- getSiteList(appId) {
- getAction('/kuaishou/batch/getPageList', {
- accountId: localStorage.getItem('campaignAccountId'),
- appId: appId,
- viewComp: 7,
- }).then((res) => {
- if (res.success) {
- this.siteList = res.result
- if (this.siteList.length > 0) {
- this.showSite = true
- }
- } else {
- this.showSite = false
- }
- })
- },
- },
- watch: {
- timeSeries(val) {
- // console.log(val)
- },
- checkVideo(n, o) {},
- checkVideoAll(n, o) {
- // this.checkVideoAll = [...new Set(n)]
- // console.log(n,o)
- // this.checkVideo = [...new Set(n)]
- },
- time(n, o) {
- if (n.length > 0) {
- var params = {}
- params.accountId = localStorage.getItem('campaignAccountId')
- params.materialType = this.creativeMaterialType
- params.pageSize = this.ipagination.pageSize
- params.pageNo = 1
- params.status = 0
- params.channelType = this.channelType
- params.startDate = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00'
- params.endDate = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59'
- params.orderBy = this.orderBy
- this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
- } else {
- var params = {}
- params.accountId = localStorage.getItem('campaignAccountId')
- params.materialType = this.creativeMaterialType
- params.pageSize = this.ipagination.pageSize
- params.pageNo = 1
- params.status = 0
- params.channelType = this.channelType
- params.orderBy = this.orderBy
- this.ipagination.current = 1
- this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
- }
- },
- },
- mounted: function () {},
- }
- </script>
- <style type="text/css" scoped lang="scss">
- .width-video {
- width: calc(20% - 10px);
- margin-right: 10px;
- margin-bottom: 10px;
- }
- .chouzhen {
- border-style: solid;
- border-width: 1px;
- border-color: #e4e4e4;
- width: calc(20% - 10px);
- padding: 10px;
- margin-right: 10px;
- margin-bottom: 10px;
- display: flex;
- align-items: center;
- background: #fff;
- position: relative;
- z-index: 99;
- float: left;
- }
- li.chouzhen.first:before {
- font-size: 12px;
- content: '首帧';
- position: absolute;
- top: 7px;
- left: 5px;
- width: 36px;
- height: 20px;
- color: rgb(255, 255, 255);
- line-height: 20px;
- text-align: center;
- background: rgba(0, 0, 0, 0.5);
- border-radius: 2px;
- z-index: 1000;
- }
- .actor-photo-list {
- display: flex;
- padding-left: 0;
- li {
- width: 25%;
- margin: 10px;
- position: relative;
- height: 250px;
- border: 1px solid #f2f2f2;
- list-style: none;
- img,
- video {
- width: 100%;
- margin-top: auto;
- margin-bottom: auto;
- top: 0;
- bottom: 0;
- position: absolute;
- max-height: 250px;
- }
- }
- }
- .plug-timer-grid {
- width: 100%;
- }
- .plug-timer-grid td,
- .plug-timer-grid th {
- border: 1px solid #97b4d1;
- text-align: center;
- /*cursor:pointer;*/
- font-size: 10px;
- line-height: 10px;
- }
- .Selected {
- background-color: rgb(102, 162, 243);
- opacity: 0.5;
- }
- .plug-timer-grid {
- border-collapse: collapse;
- z-index: 4;
- }
- .plug-timer-grid thead tr {
- display: table-row;
- vertical-align: inherit;
- border-color: inherit;
- }
- .group-creat table td {
- height: 20px;
- max-width: 5px;
- font-size: 12px;
- text-align: center;
- vertical-align: middle;
- overflow: hidden;
- transition: background 0.5s;
- -webkit-transition: background 0.5s;
- }
- .plug-timer-grid tbody th {
- width: 4%;
- }
- .plug-timer-grid tbody tr td {
- width: 2%;
- }
- /*.clear{*/
- /* margin:20px 0px 20px 0px;*/
- /*}*/
- </style>
|