copyAllUnit.vue 35 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025102610271028102910301031103210331034103510361037103810391040104110421043104410451046104710481049105010511052105310541055105610571058105910601061106210631064106510661067106810691070107110721073107410751076107710781079108010811082108310841085108610871088108910901091109210931094109510961097109810991100110111021103110411051106110711081109111011111112111311141115111611171118111911201121112211231124112511261127112811291130113111321133113411351136113711381139114011411142114311441145114611471148114911501151115211531154115511561157115811591160116111621163116411651166116711681169117011711172117311741175117611771178117911801181118211831184118511861187118811891190119111921193119411951196119711981199120012011202120312041205120612071208120912101211121212131214
  1. <style>
  2. .display-none-selset {
  3. display: none !important;
  4. }
  5. #table_time_selected1 tr {
  6. border: 1px solid rgb(102, 162, 243);
  7. }
  8. .plug-timer-grid th {
  9. line-height: 25px;
  10. }
  11. .group-creat .ant-form-item-required::before {
  12. display: inline-block;
  13. margin-right: 4px;
  14. color: #f5222d;
  15. font-size: 14px;
  16. font-family: SimSun, sans-serif;
  17. line-height: 1;
  18. content: '';
  19. }
  20. .else-label .ant-form-item-label label::after {
  21. content: '';
  22. position: relative;
  23. top: -0.5px;
  24. margin: 0 8px 0 2px;
  25. }
  26. </style>
  27. <template>
  28. <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="group-creat">
  29. <a-form @submit="handleSubmit" :form="form">
  30. <a-form-item
  31. label="选择模板"
  32. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  33. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  34. >
  35. <a-select
  36. v-decorator="['templateId']"
  37. showSearch
  38. allowClear
  39. placeholder="选择定向模板"
  40. optionFilterProp="children"
  41. style="width: 500px"
  42. :filterOption="filterOption"
  43. >
  44. <a-select-option v-for="appModel in templateList" :key="appModel.templateId" :value="appModel.templateId">
  45. {{ appModel.templateName }}
  46. </a-select-option>
  47. </a-select>
  48. <a-button type="primary" @click="getTemplate(accountId)" :loading="templateLoading"> 刷新模板</a-button>
  49. <br />
  50. <a style="margin: 0 10px 0 0" @click="addTemplate(accountId)">新增模板</a>
  51. <a
  52. @click="lookTemplate(accountId, getData('templateId'))"
  53. :disabled="getData('templateId') == '' || getData('templateId') == null"
  54. >查看模板</a
  55. >
  56. </a-form-item>
  57. <div style="text-align: center; font-size: 16px">预算和排期</div>
  58. <a-form-item
  59. label="单日预算"
  60. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  61. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  62. >
  63. <a-radio-group buttonStyle="solid" v-model="allForm.dayBudget">
  64. <a-radio-button value="0">不限</a-radio-button>
  65. <a-radio-button value="1">统一预算</a-radio-button>
  66. </a-radio-group>
  67. </a-form-item>
  68. <a-form-item
  69. label=" "
  70. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  71. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  72. class="else-label"
  73. v-if="allForm.dayBudget == '1'"
  74. >
  75. <a-input
  76. placeholder="不小于100,不超过100000000,仅支持输入自然数"
  77. v-decorator="[
  78. 'dayBudget',
  79. {
  80. rules: [{ required: true, message: '请填写预算' }, { validator: budgetValue }],
  81. },
  82. ]"
  83. />
  84. </a-form-item>
  85. <a-form-item
  86. label="投放方式"
  87. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  88. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  89. >
  90. <a-radio-group buttonStyle="solid" v-decorator="['speed', { initialValue: '1' }]">
  91. <a-radio-button value="1">正常投放</a-radio-button>
  92. <a-radio-button value="2">平滑投放</a-radio-button>
  93. </a-radio-group>
  94. <br />
  95. <span>
  96. {{ getData('speed') == '2' ? '平滑匀速投放' : '尽快展示广告消耗预算' }}
  97. </span>
  98. </a-form-item>
  99. <a-form-item
  100. label="排期"
  101. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  102. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  103. >
  104. <a-radio-group buttonStyle="solid" v-model="allForm.time" @change="setTime">
  105. <a-radio-button value="1">从今天开始长期投放</a-radio-button>
  106. <a-radio-button value="2">设置开始和结束日期</a-radio-button>
  107. </a-radio-group>
  108. <br />
  109. <a-range-picker v-if="allForm.time == '2'" v-model="timeRange" format="YYYY-MM-DD" :allowClear="false" />
  110. </a-form-item>
  111. <a-form-item
  112. label="投放时段"
  113. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  114. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  115. >
  116. <a-radio-group buttonStyle="solid" v-model="allForm.scheduleTime" @change="setTimeAll">
  117. <a-radio-button value="1">全天</a-radio-button>
  118. <a-radio-button value="2">特定时间</a-radio-button>
  119. </a-radio-group>
  120. <br />
  121. <selectCheckAll
  122. style="width: 100%"
  123. v-show="allForm.scheduleTime == '2'"
  124. :scheduleTime.sync="allForm.scheduleTimeData"
  125. ref="selectCheck"
  126. />
  127. </a-form-item>
  128. <a-form-item
  129. label="创意展现方式"
  130. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  131. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  132. >
  133. <a-radio-group buttonStyle="solid" v-decorator="['showMode', { initialValue: '2' }]">
  134. <a-radio-button value="2">智能优选</a-radio-button>
  135. <a-radio-button value="1">随机轮播</a-radio-button>
  136. </a-radio-group>
  137. <br />
  138. <span>
  139. {{
  140. getData('showMode') == '1'
  141. ? '广告组包含的广告创意将随机展现'
  142. : '每一次展现的时候,系统会进行CTR预估,预估CTR高的会得到展现机会'
  143. }}
  144. </span>
  145. </a-form-item>
  146. <a-form-item
  147. label="场景广告位"
  148. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  149. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  150. >
  151. <checkBoxGroup
  152. :options="[
  153. { label: '优选广告位', value: 1 },
  154. { label: '信息流广告', value: 7 },
  155. { label: '上下滑大屏广告', value: 6 },
  156. { label: '视频播放页广告', value: 3 },
  157. ]"
  158. v-model="allForm.sceneId"
  159. @change="changeData"
  160. />
  161. </a-form-item>
  162. <div style="width: 100%" v-for="(item, index) of allForm.group" :key="index">
  163. <div style="clear: both"></div>
  164. <a-form-item
  165. label="优化目标"
  166. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  167. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  168. >
  169. <a-radio-group buttonStyle="solid" v-model="item.bidType" @change="resData(index)">
  170. <a-radio-button :value="1">点击数</a-radio-button>
  171. <a-radio-button :value="10">转化数</a-radio-button>
  172. </a-radio-group>
  173. </a-form-item>
  174. <a-form-item
  175. label="转化目标"
  176. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  177. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  178. v-if="item.bidType == 10"
  179. >
  180. <a-select v-model="item.ocpxActionType">
  181. <a-select-option :value="2">行为数</a-select-option>
  182. <a-select-option :value="180" v-if="campaignType == '2' && allForm.groupTypeData.isActivate == '1'"
  183. >激活</a-select-option
  184. >
  185. <a-select-option
  186. :value="53"
  187. v-if="(campaignType == '4' || campaignType == '5') && allForm.groupTypeData.isFormSubmit == '1'"
  188. >表单提交</a-select-option
  189. >
  190. <a-select-option :value="394" v-if="allForm.groupTypeData.isOrderSubmit == '1'">订单提交</a-select-option>
  191. <a-select-option :value="348" v-if="allForm.groupTypeData.isValidClue == '1'">使用有效线索</a-select-option>
  192. <a-select-option :value="383" v-if="allForm.groupTypeData.isCreditGrant == '1'">授信出价</a-select-option>
  193. <a-select-option :value="384" v-if="allForm.groupTypeData.isWanJian == '1'">完件出价</a-select-option>
  194. <a-select-option :value="190" v-if="allForm.groupTypeData.isPurchase == '1'">付费出价</a-select-option>
  195. <a-select-option :value="191" v-if="allForm.groupTypeData.isFirstdayRoi == '1'">首日ROI</a-select-option>
  196. <a-select-option :value="396" v-if="allForm.groupTypeData.isRegister == '1'">注册优化目标</a-select-option>
  197. </a-select>
  198. </a-form-item>
  199. <a-form-item
  200. label="深度转化目标"
  201. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  202. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  203. v-if="
  204. (item.ocpxActionType == 180 || item.ocpxActionType == 53) &&
  205. allForm.groupTypeData.deepConversionTypes.length > 0
  206. "
  207. >
  208. <a-select v-model="item.deepConversionType" allowClear>
  209. <a-select-option
  210. :value="items.deepConversionType"
  211. v-for="(items, index) of allForm.groupTypeData.deepConversionTypes"
  212. :key="index"
  213. >
  214. {{ items.desc }}</a-select-option
  215. >
  216. </a-select>
  217. </a-form-item>
  218. <a-form-item
  219. label="计费方式"
  220. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  221. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  222. >
  223. <a-radio-group defaultValue="1">
  224. <a-radio value="1">{{ item.bidType == 1 ? '点击计费' : '展示计费(oCPM)' }}</a-radio>
  225. </a-radio-group>
  226. </a-form-item>
  227. <a-form-item
  228. label="出价"
  229. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  230. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  231. v-if="item.bidType == 1"
  232. >
  233. <!-- v-model="item.bid" -->
  234. <a-input-number
  235. v-decorator="[
  236. 'bid',
  237. {
  238. rules: [{ required: true, message: '出价必填' }, { validator: bidCheck }],
  239. },
  240. ]"
  241. style="width: 100%"
  242. >
  243. </a-input-number>
  244. </a-form-item>
  245. <a-form-item
  246. label="目标成本"
  247. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  248. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  249. v-else
  250. >
  251. <!-- v-model="item.cpaBid" -->
  252. <a-input-number
  253. v-decorator="[
  254. 'cpaBid',
  255. {
  256. rules: [{ required: true, message: '目标成本必填' }, { validator: cpaBidCheck }],
  257. },
  258. ]"
  259. style="width: 100%"
  260. >
  261. </a-input-number>
  262. <span
  263. style="color: red; font-weight: 700"
  264. v-if="item.ocpxActionType == 2 && getData('cpaBid') && getData('cpaBid') > 1"
  265. >
  266. 行为出价大于1元,请注意!!!
  267. </span>
  268. </a-form-item>
  269. <a-form-item
  270. label="深度转化出价"
  271. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  272. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  273. v-if="
  274. (item.ocpxActionType == 180 || item.ocpxActionType == 53) &&
  275. allForm.groupTypeData.deepConversionTypes.length > 0 &&
  276. item.deepConversionType != ''
  277. "
  278. >
  279. <a-input-number
  280. v-model="item.deepConversionBid"
  281. @change="deep_conversion_bidTip(index)"
  282. :style="{ borderColor: item.deepConversionBidCheck ? 'red' : '#d9d9d9' }"
  283. style="width: 100%"
  284. :disabled="getData('cpaBid') == null || getData('cpaBid') == ''"
  285. ></a-input-number>
  286. <span style="color: red" v-if="item.deepConversionBidCheck"
  287. >深度转化目标成本必须高于优化目标成本,且不得高于3000元</span
  288. >
  289. </a-form-item>
  290. </div>
  291. </a-form>
  292. </a-card>
  293. </template>
  294. <script>
  295. import { getAction, postAction, deleteAction } from '@/api/manage'
  296. import moment from 'moment'
  297. import { mapGetters } from 'vuex'
  298. import jq from 'jquery'
  299. import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
  300. import templateModal from '@/views/modules/kuaishouapp/crossAccount/templateModal'
  301. import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
  302. let dateQuantumRangeConst = ''
  303. const columns = [
  304. {
  305. title: '人群',
  306. dataIndex: 'orientationName',
  307. scopedSlots: {
  308. customRender: 'orientationName',
  309. },
  310. width: 150,
  311. },
  312. {
  313. title: '属性',
  314. dataIndex: 'populationType',
  315. filters: [
  316. {
  317. text: '上传人群',
  318. value: '1',
  319. },
  320. {
  321. text: '广告人群',
  322. value: '2',
  323. },
  324. {
  325. text: '主题专区',
  326. value: '3',
  327. },
  328. {
  329. text: '逻辑规则',
  330. value: '4',
  331. },
  332. {
  333. text: '人群扩展',
  334. value: '5',
  335. },
  336. {
  337. text: '平台定制',
  338. value: '6',
  339. },
  340. {
  341. text: '定制付费',
  342. value: '7',
  343. },
  344. {
  345. text: '网红粉丝类别',
  346. value: '8',
  347. },
  348. {
  349. text: '内容付费行为',
  350. value: '9',
  351. },
  352. {
  353. text: '移动应用安装',
  354. value: '10',
  355. },
  356. {
  357. text: '快手使用活跃度',
  358. value: '11',
  359. },
  360. {
  361. text: '行业分类',
  362. value: '12',
  363. },
  364. {
  365. text: '商业兴趣',
  366. value: '13',
  367. },
  368. {
  369. text: '固化标签',
  370. value: '14',
  371. },
  372. {
  373. text: '行业偏好',
  374. value: '15',
  375. },
  376. {
  377. text: '第三方标签',
  378. value: '16',
  379. },
  380. {
  381. text: '产品关键词',
  382. value: '17',
  383. },
  384. ],
  385. onFilter: (value, record) => record.populationType.toString().toLowerCase().includes(value.toLowerCase()),
  386. scopedSlots: {
  387. customRender: 'populationType',
  388. },
  389. width: 150,
  390. },
  391. {
  392. title: '创建时间',
  393. dataIndex: 'createTime',
  394. scopedSlots: {
  395. customRender: 'createTime',
  396. },
  397. sorter: (a, b) => a.createTime - b.createTime,
  398. },
  399. ]
  400. function tqFun(qcArr1) {
  401. var tempArr = []
  402. function bbFun(qcArr) {
  403. for (var i = 0; i < qcArr.length; i++) {
  404. if (qcArr[i] instanceof Array) {
  405. bbFun(qcArr[i])
  406. } else {
  407. tempArr.push(qcArr[i])
  408. }
  409. }
  410. return tempArr
  411. }
  412. return bbFun(qcArr1)
  413. }
  414. export default {
  415. name: 'creat-unit',
  416. components: {
  417. selectCheckAll,
  418. templateModal,
  419. checkBoxGroup,
  420. },
  421. props: {
  422. campaignId: {
  423. type: String,
  424. default() {
  425. return null
  426. },
  427. },
  428. },
  429. data() {
  430. return {
  431. templateLoading: false,
  432. dataOne: [],
  433. trackName: '',
  434. trackUrlList: [],
  435. showSite: false,
  436. appList: [],
  437. siteList: [],
  438. fieldNames: {
  439. label: 'category_name',
  440. value: 'category_id',
  441. children: 'child',
  442. },
  443. defaultProps: {
  444. children: 'children',
  445. label: 'label',
  446. id: 'id',
  447. },
  448. showTrackUrlNameElse: true,
  449. clickTrackUrlList: false,
  450. spinning: false,
  451. trackUrlName: '',
  452. tagName: '',
  453. labelCol: {
  454. lg: {
  455. span: 6,
  456. },
  457. sm: {
  458. span: 6,
  459. },
  460. xs: {
  461. span: 6,
  462. },
  463. md: {
  464. span: 6,
  465. },
  466. },
  467. wrapperCol: {
  468. lg: {
  469. span: 18,
  470. },
  471. sm: {
  472. span: 18,
  473. },
  474. xs: {
  475. span: 14,
  476. },
  477. md: {
  478. span: 14,
  479. },
  480. },
  481. ipagination: {
  482. current: 1,
  483. pageSize: 5,
  484. // pageSizeOptions: ['10', '20', '30'],
  485. showTotal: (total, range) => {
  486. return range[0] + '-' + range[1] + ' 共' + total + '条'
  487. },
  488. showQuickJumper: true,
  489. // showSizeChanger: true,
  490. total: 0,
  491. onChange: (current) => {
  492. // 切换分页时的回调,
  493. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  494. this.ipagination.current = current
  495. },
  496. },
  497. showVideo: true,
  498. videoList: [],
  499. orderBy: 'time',
  500. visibleMatemal: false,
  501. loadingVideoList: false,
  502. checkVideo: [],
  503. checkVideoAll: [],
  504. checkVideoWai: [],
  505. dataSource: [],
  506. active: 0,
  507. time: [],
  508. channelType: 0,
  509. creativeMaterialType: '',
  510. tab: [
  511. {
  512. value: 0,
  513. label: '内部',
  514. },
  515. {
  516. value: 1,
  517. label: '外部',
  518. },
  519. ],
  520. templateList: [],
  521. allianceAccount: false,
  522. creativeCategorySwitch: false,
  523. actionbarClickUrlSwitch: false,
  524. tongbuLoading: false,
  525. convert: false,
  526. convertId: '',
  527. convertList: [],
  528. checkedTrue: false,
  529. nameValue: '',
  530. visible: false,
  531. timeRange: [],
  532. form: this.$form.createForm(this),
  533. step: 0,
  534. people: '2',
  535. targeted: '2',
  536. topMiddle: false,
  537. topMiddleNo: false,
  538. keyValue: '',
  539. keyValueNo: '',
  540. columns,
  541. selectedRowKeys: [],
  542. selectedRowKeysValue: [],
  543. selectedRowKeysNo: [],
  544. selectedRowKeysValueNo: [],
  545. data: [],
  546. populationData: {},
  547. url: {
  548. insertTemplateUrl: '/kuaishou/create/createGroups',
  549. userAllocationList: '/ctop/userAllocation/list',
  550. campaignList: '/kuaishou/kuaiShouCampaignTemplate/list',
  551. getDeepConversionUrl: '/kuaishou/kuaiShouConversionTypes/getIsActivate',
  552. getCampaignTemplate: '/kuaishou/kuaiShouCampaignTemplate/getKuaiShouCampaignTemplate',
  553. appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
  554. },
  555. appId: '',
  556. loading: false,
  557. campaignTemplateId: '',
  558. campaignType: null,
  559. maxBid: 0,
  560. allForm: {
  561. dayBudget: '0',
  562. time: '1',
  563. scheduleTime: '1',
  564. scheduleTimeData:
  565. '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
  566. group: [],
  567. groupTypeData: null,
  568. fail: [],
  569. success: [],
  570. sceneId: [1],
  571. appStore: ['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan'],
  572. allianceAccount: '1',
  573. description: '',
  574. },
  575. convertType: '1',
  576. clickTrackUrlShow: false,
  577. clickTrackUrlShowType: '1',
  578. optionsTag: [],
  579. creativeTagVisible: false,
  580. visibleVideo: false,
  581. videoUrlShow: '',
  582. sumContent: 0,
  583. titleVisible: false,
  584. options: [],
  585. value: '',
  586. title: [],
  587. cunTitleVisible: false,
  588. cunTitleList: [],
  589. tongbuLoading: false,
  590. accountId: '',
  591. oldCampaignId: '',
  592. oldCampaignName: '',
  593. newCampaignId: '',
  594. }
  595. },
  596. computed: {
  597. count() {
  598. return moment().startOf('day')
  599. },
  600. },
  601. filters: {
  602. getDate(value) {
  603. let date = new Date(value)
  604. let y = date.getFullYear()
  605. let MM = date.getMonth() + 1
  606. MM = MM < 10 ? '0' + MM : MM
  607. let d = date.getDate()
  608. d = d < 10 ? '0' + d : d
  609. return y + '-' + MM + '-' + d
  610. },
  611. platform(str) {
  612. var data = {
  613. 1: 'Android应用下载',
  614. 2: 'Android网页游戏',
  615. 3: 'iOS应用下载',
  616. 4: 'iOS网页游戏',
  617. }
  618. return data[str]
  619. },
  620. },
  621. methods: {
  622. changeData(data) {
  623. if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
  624. data.splice(
  625. data.findIndex((item) => item == 1),
  626. 1
  627. )
  628. } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
  629. data.splice(0, data.length - 1)
  630. } else if (data.length == 0) {
  631. data.push(1)
  632. }
  633. },
  634. handleOk(item) {
  635. this.accountId = item.accountId
  636. this.oldCampaignId = item.oldCampaignId
  637. this.oldCampaignName = item.oldCampaignName
  638. this.newCampaignId = item.newCampaignId
  639. this.getTemplate(item.accountId)
  640. this.campaignType = item.campaignType
  641. getAction('/kuaishou/batch/getIsActivate', {
  642. accountId: item.accountId,
  643. }).then((res) => {
  644. if (res.success) {
  645. this.allForm.groupTypeData = res.result
  646. this.addGroup()
  647. }
  648. })
  649. // getAction('/kuaishou/batch/getWhiteList', {
  650. // accountId: item.accountId,
  651. // }).then((res) => {
  652. // if (res.success) {
  653. // // console.log(res)
  654. // if (res.result) {
  655. // this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
  656. // this.allianceAccount = res.result.alliance_account == 1 ? true : false
  657. // this.actionbarClickUrlSwitch = res.result.actionbar_click_url_switch == 1 ? true : false
  658. // } else {
  659. // this.allianceAccount = false
  660. // this.creativeCategorySwitch = false
  661. // this.actionbarClickUrlSwitch = false
  662. // }
  663. // }
  664. // })
  665. getAction('/kuaishou/batch/getProjectMaxBid', {
  666. accountId: item.accountId,
  667. }).then((res) => {
  668. if (res.success) {
  669. this.maxBid = res.result / 1000
  670. }
  671. })
  672. },
  673. filter(inputValue, path) {
  674. return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
  675. },
  676. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  677. lookTemplate(accountId, templateId) {
  678. this.$refs.templateModal.handleOk(accountId, templateId, 'look')
  679. },
  680. addTemplate(accountId) {
  681. this.$refs.templateModal.create(accountId, 'add')
  682. },
  683. getTemplate(accountId) {
  684. var data = null
  685. if (accountId) {
  686. data = accountId
  687. } else {
  688. this.templateLoading = true
  689. data = accountId
  690. }
  691. getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
  692. accountId: data,
  693. }).then((res) => {
  694. if (res.success) {
  695. this.getTemplateList(data)
  696. }
  697. })
  698. },
  699. getTemplateList(accountId) {
  700. this.templateList = []
  701. getAction('/batch/kuaishouTemplate/list', {
  702. accountId: accountId,
  703. pageSize: 1000,
  704. pageNo: 1,
  705. }).then((res) => {
  706. if (res.success) {
  707. this.templateList = res.result.records.map((item, index) => {
  708. return {
  709. ...item,
  710. key: index,
  711. }
  712. })
  713. this.templateLoading = false
  714. } else {
  715. this.templateLoading = false
  716. }
  717. })
  718. },
  719. getCheck(e) {
  720. this.checkedTrue = e.target.checked
  721. },
  722. addGroup() {
  723. this.allForm.group.push({
  724. bidType: 10,
  725. // bid: '',
  726. // cpaBid: '',
  727. deepConversionBidCheck: false,
  728. // unitName: '',
  729. unitNameCheck: false,
  730. deepConversionType: '',
  731. deepConversionBid: '',
  732. ocpxActionType: this.campaignType == '2' && this.allForm.groupTypeData.isActivate == '1' ? 180 : 2,
  733. })
  734. },
  735. resData(index) {
  736. // this.allForm.group[index].bid = ''
  737. // this.allForm.group[index].cpaBid = ''
  738. this.allForm.group[index].showTipCheck = false
  739. this.allForm.group[index].deepConversionBidCheck = false
  740. this.allForm.group[index].deepConversionType = ''
  741. this.allForm.group[index].deepConversionBid = ''
  742. this.form.setFieldsValue({
  743. bid: undefined,
  744. })
  745. this.form.setFieldsValue({
  746. cpaBid: undefined,
  747. })
  748. },
  749. removeGroup(index) {
  750. this.allForm.group.splice(index, 1)
  751. },
  752. deep_conversion_bidTip(index) {
  753. if (
  754. this.allForm.group[index].deepConversionBid < this.getData('cpaBid') ||
  755. this.allForm.group[index].deepConversionBid > 3000
  756. ) {
  757. this.allForm.group[index].deepConversionBidCheck = true
  758. } else {
  759. this.allForm.group[index].deepConversionBidCheck = false
  760. }
  761. },
  762. checkGroup(e, index) {
  763. if (e.target.value != '') {
  764. getAction('/kuaishou/batch/checkUnitName', {
  765. campaignId: localStorage.getItem('campaignList'),
  766. unitName: e.target.value,
  767. }).then((res) => {
  768. if (res.success) {
  769. this.allForm.group[index].unitNameCheck = !res.result
  770. } else {
  771. this.allForm.group[index].unitNameCheck = false
  772. }
  773. })
  774. }
  775. },
  776. showTip(index) {
  777. if (this.allForm.group[index].bidType == 1) {
  778. if (this.getData('bid') < 0.2 || this.getData('bid') > this.maxBid) {
  779. this.allForm.group[index].showTipCheck = true
  780. } else {
  781. this.allForm.group[index].showTipCheck = false
  782. }
  783. } else {
  784. if (this.getData('cpaBid') < 1 || this.getData('cpaBid') > this.maxBid) {
  785. this.allForm.group[index].showTipCheck = true
  786. } else {
  787. this.allForm.group[index].showTipCheck = false
  788. }
  789. }
  790. },
  791. getScheduleTime(item) {
  792. this.allForm.scheduleTimeData = item
  793. },
  794. setTime(e) {
  795. if (e.target.value == '2') {
  796. this.timeRange[0] = moment().startOf('day')
  797. this.timeRange[1] = moment().add(1, 'months')
  798. }
  799. },
  800. setTimeAll(e) {
  801. if (e.target.value == '2') {
  802. this.$nextTick(() => {
  803. this.$refs.selectCheck.init()
  804. })
  805. } else {
  806. }
  807. },
  808. getData(className) {
  809. return this.form.getFieldValue(className)
  810. },
  811. bidCheck(rule, value, callback) {
  812. if (value < 0.2 || value > this.maxBid) {
  813. callback('不得低于0.2元,不得高于项目最高出价' + this.maxBid + '元')
  814. } else {
  815. callback()
  816. }
  817. },
  818. cpaBidCheck(rule, value, callback) {
  819. if (value < 1 || value > this.maxBid) {
  820. callback('不得低于1元,不得高于项目最高出价' + this.maxBid + '元')
  821. } else {
  822. callback()
  823. }
  824. },
  825. handleConfirmValue(rule, value, callback) {
  826. if (value != '' && value != undefined) {
  827. getAction('/kuaishou/batch/checkUnitName', {
  828. campaignId: localStorage.getItem('campaignList'),
  829. unitName: value + '_0',
  830. }).then((res) => {
  831. if (res.success) {
  832. if (!res.result) {
  833. callback('广告组名称重复')
  834. } else {
  835. callback()
  836. }
  837. } else {
  838. callback()
  839. }
  840. })
  841. } else {
  842. callback()
  843. }
  844. },
  845. budgetValue(rule, value, callback) {
  846. if (value < 100 || value > 100000000) {
  847. callback('不小于100,不超过100000000,仅支持输入自然数')
  848. }
  849. callback()
  850. },
  851. handleConfirmBid(rule, value, callback) {
  852. if (this.bid == 0 || this.bid <= 0.2 || this.bid >= 100) {
  853. callback('不得低于0.2元,不得高于100元')
  854. }
  855. callback()
  856. },
  857. handleConfirmCpaBid(rule, value, callback) {
  858. if (this.ocpxActionType == '2' && (this.cpaBid == 0 || this.cpaBid <= 1 || this.cpaBid >= 3000)) {
  859. callback('金额不得低于1元,不得高于3000元')
  860. }
  861. if (this.ocpxActionType == '180' && (this.cpaBid == 0 || this.cpaBid <= 5 || this.cpaBid >= 3000)) {
  862. callback('金额不得低于5元,不得高于3000元')
  863. }
  864. callback()
  865. },
  866. onSelectChange(selectedRowKeys, selectionRows) {
  867. this.selectedRowKeys = selectedRowKeys
  868. this.selectedRowKeysValue = selectionRows.map((item) => {
  869. return {
  870. orientationId: item.orientationId,
  871. orientationName: item.orientationName,
  872. }
  873. })
  874. },
  875. getCheckboxProps(record) {
  876. return {
  877. props: {
  878. disabled: this.selectedRowKeysValueNo.some((item) => item.orientationId === record.orientationId),
  879. },
  880. }
  881. },
  882. onSelectChangeNo(selectedRowKeys, selectionRows) {
  883. this.selectedRowKeysNo = selectedRowKeys
  884. this.selectedRowKeysValueNo = selectionRows.map((item) => {
  885. return {
  886. orientationId: item.orientationId,
  887. orientationName: item.orientationName,
  888. }
  889. })
  890. },
  891. getCheckboxPropsNo(record) {
  892. return {
  893. props: {
  894. disabled: this.selectedRowKeysValue.some((item) => item.orientationId === record.orientationId),
  895. },
  896. }
  897. },
  898. okSelect() {
  899. this.keyValue = ''
  900. this.topMiddle = false
  901. for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
  902. this.keyValue += this.selectedRowKeysValue[i].orientationName + ' '
  903. }
  904. },
  905. okSelectNo() {
  906. this.keyValueNo = ''
  907. this.topMiddleNo = false
  908. for (let i = 0; i < this.selectedRowKeysValueNo.length; i++) {
  909. this.keyValueNo += this.selectedRowKeysValueNo[i].orientationName + ' '
  910. }
  911. },
  912. radioChange() {
  913. this.selectedRowKeys = []
  914. this.selectedRowKeysValue = []
  915. this.selectedRowKeysNo = []
  916. this.selectedRowKeysValueNo = []
  917. this.keyValue = ''
  918. this.keyValueNo = ''
  919. },
  920. handleSubmit(e) {
  921. e.preventDefault()
  922. this.form.validateFieldsAndScroll((err, values) => {
  923. if (!err) {
  924. this.loading = true
  925. var groupArr = this.allForm.group.map((item) => {
  926. return {
  927. ...item,
  928. deepConversionBid: item.deepConversionBid != '' ? item.deepConversionBid * 1000 : '',
  929. ocpxActionType: item.ocpxActionType,
  930. bidType: item.bidType == 1 ? 2 : 10,
  931. }
  932. })
  933. var json = {
  934. ...values,
  935. cpaBid: values.cpaBid && values.cpaBid != '' ? values.cpaBid * 1000 : null,
  936. bid: values.bid && values.bid != '' ? values.bid * 1000 : null,
  937. dayBudget: values.dayBudget * 1000,
  938. }
  939. var params = {
  940. userId: this.userInfo().id,
  941. ...json,
  942. ...groupArr[0],
  943. accountId: this.accountId,
  944. oldCampaignId: this.oldCampaignId,
  945. oldCampaignName: this.oldCampaignName,
  946. newCampaignId: this.newCampaignId,
  947. beginTime: moment(this.timeRange[0]).format('YYYY-MM-DD'),
  948. endTime: this.allForm.time == '2' ? moment(this.timeRange[1]).format('YYYY-MM-DD') : '',
  949. sceneId: this.allForm.allianceAccount == '1' ? this.allForm.sceneId : [5],
  950. scheduleTime:
  951. this.allForm.scheduleTime == '2'
  952. ? this.allForm.scheduleTimeData
  953. : '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
  954. }
  955. postAction('/kuaishouCampaignCopyData/add', params).then((res) => {
  956. if (res.success) {
  957. this.$emit('getUnitData')
  958. } else {
  959. this.$message.error(res.message)
  960. }
  961. })
  962. }
  963. })
  964. },
  965. onChange(value) {
  966. // console.log(value)
  967. },
  968. handleChange(value) {
  969. // this.$refs.population.getAppList(value)
  970. this.getSiteList(value)
  971. },
  972. getPlatForm(appId) {
  973. if (appId) {
  974. var data = this.appList.filter((item) => {
  975. return item.appId == appId
  976. })
  977. return data[0].platform
  978. }
  979. },
  980. handleBlur() {
  981. // console.log('blur')
  982. },
  983. handleFocus() {
  984. // console.log('focus')
  985. },
  986. getPageSize(data) {
  987. if (data.target.value == '0') {
  988. this.ipagination.pageSize = 5
  989. } else if (data.target.value == '1') {
  990. this.ipagination.pageSize = 15
  991. }
  992. this.videoList = []
  993. this.checkVideo = []
  994. this.checkVideoAll = []
  995. this.checkVideoWai = []
  996. this.sumContent = 0
  997. },
  998. filterOption(input, option) {
  999. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  1000. },
  1001. prevStep() {
  1002. this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignList'))
  1003. },
  1004. getData(className) {
  1005. return this.form.getFieldValue(className)
  1006. },
  1007. showVideoList(url, params) {
  1008. this.dataSource = []
  1009. this.loadingVideoList = true
  1010. getAction(url, params).then((res) => {
  1011. // console.log(res)
  1012. if (res.success) {
  1013. this.dataSource = res.result.list
  1014. this.ipagination.total = res.result.total
  1015. this.loadingVideoList = false
  1016. } else {
  1017. this.loadingVideoList = false
  1018. }
  1019. })
  1020. },
  1021. getSiteList(appId) {
  1022. getAction('/kuaishou/batch/getPageList', {
  1023. accountId: localStorage.getItem('campaignAccountId'),
  1024. appId: appId,
  1025. viewComp: 7,
  1026. }).then((res) => {
  1027. if (res.success) {
  1028. this.siteList = res.result
  1029. if (this.siteList.length > 0) {
  1030. this.showSite = true
  1031. }
  1032. } else {
  1033. this.showSite = false
  1034. }
  1035. })
  1036. },
  1037. },
  1038. watch: {
  1039. timeSeries(val) {
  1040. // console.log(val)
  1041. },
  1042. checkVideo(n, o) {},
  1043. checkVideoAll(n, o) {
  1044. // this.checkVideoAll = [...new Set(n)]
  1045. // console.log(n,o)
  1046. // this.checkVideo = [...new Set(n)]
  1047. },
  1048. time(n, o) {
  1049. if (n.length > 0) {
  1050. var params = {}
  1051. params.accountId = localStorage.getItem('campaignAccountId')
  1052. params.materialType = this.creativeMaterialType
  1053. params.pageSize = this.ipagination.pageSize
  1054. params.pageNo = 1
  1055. params.status = 0
  1056. params.channelType = this.channelType
  1057. params.startDate = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00'
  1058. params.endDate = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59'
  1059. params.orderBy = this.orderBy
  1060. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  1061. } else {
  1062. var params = {}
  1063. params.accountId = localStorage.getItem('campaignAccountId')
  1064. params.materialType = this.creativeMaterialType
  1065. params.pageSize = this.ipagination.pageSize
  1066. params.pageNo = 1
  1067. params.status = 0
  1068. params.channelType = this.channelType
  1069. params.orderBy = this.orderBy
  1070. this.ipagination.current = 1
  1071. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  1072. }
  1073. },
  1074. },
  1075. mounted: function () {},
  1076. }
  1077. </script>
  1078. <style type="text/css" scoped lang="scss">
  1079. .width-video {
  1080. width: calc(20% - 10px);
  1081. margin-right: 10px;
  1082. margin-bottom: 10px;
  1083. }
  1084. .chouzhen {
  1085. border-style: solid;
  1086. border-width: 1px;
  1087. border-color: #e4e4e4;
  1088. width: calc(20% - 10px);
  1089. padding: 10px;
  1090. margin-right: 10px;
  1091. margin-bottom: 10px;
  1092. display: flex;
  1093. align-items: center;
  1094. background: #fff;
  1095. position: relative;
  1096. z-index: 99;
  1097. float: left;
  1098. }
  1099. li.chouzhen.first:before {
  1100. font-size: 12px;
  1101. content: '首帧';
  1102. position: absolute;
  1103. top: 7px;
  1104. left: 5px;
  1105. width: 36px;
  1106. height: 20px;
  1107. color: rgb(255, 255, 255);
  1108. line-height: 20px;
  1109. text-align: center;
  1110. background: rgba(0, 0, 0, 0.5);
  1111. border-radius: 2px;
  1112. z-index: 1000;
  1113. }
  1114. .actor-photo-list {
  1115. display: flex;
  1116. padding-left: 0;
  1117. li {
  1118. width: 25%;
  1119. margin: 10px;
  1120. position: relative;
  1121. height: 250px;
  1122. border: 1px solid #f2f2f2;
  1123. list-style: none;
  1124. img,
  1125. video {
  1126. width: 100%;
  1127. margin-top: auto;
  1128. margin-bottom: auto;
  1129. top: 0;
  1130. bottom: 0;
  1131. position: absolute;
  1132. max-height: 250px;
  1133. }
  1134. }
  1135. }
  1136. .plug-timer-grid {
  1137. width: 100%;
  1138. }
  1139. .plug-timer-grid td,
  1140. .plug-timer-grid th {
  1141. border: 1px solid #97b4d1;
  1142. text-align: center;
  1143. /*cursor:pointer;*/
  1144. font-size: 10px;
  1145. line-height: 10px;
  1146. }
  1147. .Selected {
  1148. background-color: rgb(102, 162, 243);
  1149. opacity: 0.5;
  1150. }
  1151. .plug-timer-grid {
  1152. border-collapse: collapse;
  1153. z-index: 4;
  1154. }
  1155. .plug-timer-grid thead tr {
  1156. display: table-row;
  1157. vertical-align: inherit;
  1158. border-color: inherit;
  1159. }
  1160. .group-creat table td {
  1161. height: 20px;
  1162. max-width: 5px;
  1163. font-size: 12px;
  1164. text-align: center;
  1165. vertical-align: middle;
  1166. overflow: hidden;
  1167. transition: background 0.5s;
  1168. -webkit-transition: background 0.5s;
  1169. }
  1170. .plug-timer-grid tbody th {
  1171. width: 4%;
  1172. }
  1173. .plug-timer-grid tbody tr td {
  1174. width: 2%;
  1175. }
  1176. /*.clear{*/
  1177. /* margin:20px 0px 20px 0px;*/
  1178. /*}*/
  1179. </style>