creatUnit.vue 85 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510151115121513151415151516151715181519152015211522152315241525152615271528152915301531153215331534153515361537153815391540154115421543154415451546154715481549155015511552155315541555155615571558155915601561156215631564156515661567156815691570157115721573157415751576157715781579158015811582158315841585158615871588158915901591159215931594159515961597159815991600160116021603160416051606160716081609161016111612161316141615161616171618161916201621162216231624162516261627162816291630163116321633163416351636163716381639164016411642164316441645164616471648164916501651165216531654165516561657165816591660166116621663166416651666166716681669167016711672167316741675167616771678167916801681168216831684168516861687168816891690169116921693169416951696169716981699170017011702170317041705170617071708170917101711171217131714171517161717171817191720172117221723172417251726172717281729173017311732173317341735173617371738173917401741174217431744174517461747174817491750175117521753175417551756175717581759176017611762176317641765176617671768176917701771177217731774177517761777177817791780178117821783178417851786178717881789179017911792179317941795179617971798179918001801180218031804180518061807180818091810181118121813181418151816181718181819182018211822182318241825182618271828182918301831183218331834183518361837183818391840184118421843184418451846184718481849185018511852185318541855185618571858185918601861186218631864186518661867186818691870187118721873187418751876187718781879188018811882188318841885188618871888188918901891189218931894189518961897189818991900190119021903190419051906190719081909191019111912191319141915191619171918191919201921192219231924192519261927192819291930193119321933193419351936193719381939194019411942194319441945194619471948194919501951195219531954195519561957195819591960196119621963196419651966196719681969197019711972197319741975197619771978197919801981198219831984198519861987198819891990199119921993199419951996199719981999200020012002200320042005200620072008200920102011201220132014201520162017201820192020202120222023202420252026202720282029203020312032203320342035203620372038203920402041204220432044204520462047204820492050205120522053205420552056205720582059206020612062206320642065206620672068206920702071207220732074207520762077207820792080208120822083208420852086208720882089209020912092209320942095209620972098209921002101210221032104210521062107210821092110211121122113211421152116211721182119212021212122212321242125212621272128212921302131213221332134213521362137213821392140214121422143214421452146214721482149215021512152215321542155215621572158215921602161216221632164216521662167216821692170217121722173217421752176217721782179218021812182218321842185218621872188218921902191219221932194219521962197219821992200220122022203220422052206220722082209221022112212221322142215221622172218221922202221222222232224222522262227222822292230223122322233223422352236223722382239224022412242224322442245224622472248224922502251225222532254225522562257225822592260226122622263226422652266226722682269227022712272227322742275227622772278227922802281228222832284228522862287228822892290229122922293229422952296229722982299230023012302230323042305230623072308230923102311231223132314231523162317231823192320232123222323232423252326232723282329233023312332233323342335233623372338233923402341234223432344234523462347234823492350235123522353235423552356235723582359236023612362236323642365236623672368236923702371237223732374237523762377237823792380238123822383238423852386238723882389239023912392239323942395239623972398239924002401240224032404240524062407240824092410241124122413241424152416241724182419242024212422242324242425242624272428242924302431243224332434243524362437243824392440244124422443244424452446244724482449245024512452245324542455245624572458245924602461246224632464246524662467246824692470247124722473247424752476247724782479248024812482248324842485248624872488248924902491249224932494249524962497249824992500250125022503250425052506250725082509251025112512251325142515251625172518251925202521252225232524252525262527252825292530253125322533253425352536253725382539254025412542254325442545254625472548254925502551255225532554255525562557255825592560256125622563256425652566256725682569257025712572257325742575257625772578257925802581
  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. <div style="color:red">
  36. {{createCount}}
  37. </div>
  38. </a-form-item>
  39. <a-form-item
  40. label="目标应用"
  41. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  42. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  43. v-if="campaignType == '2'"
  44. >
  45. <a-select
  46. v-decorator="['appId', { rules: [{ required: true, message: '请选择目标应用' }] }]"
  47. showSearch
  48. allowClear
  49. placeholder="选择应用目标"
  50. optionFilterProp="children"
  51. style="width: 500px"
  52. @focus="handleFocus"
  53. @blur="handleBlur"
  54. @change="handleChange"
  55. :filterOption="filterOption"
  56. >
  57. <a-select-option value="0">请选择目标应用</a-select-option>
  58. <a-select-option v-for="appModel in appList" :key="appModel.appId" :value="appModel.appId">
  59. {{ appModel.appName }}&#12288;&nbsp;&#12288; {{ appModel.appVersion }}&#12288;&#12288;&#12288;{{
  60. appModel.platform | platform
  61. }}
  62. </a-select-option>
  63. </a-select>
  64. <!-- <a @click="addApplication" style="margin-left:10px">刷新应用</a> -->
  65. <a-button type="primary" @click="addApplication" :loading="tongbuLoading"> 刷新应用</a-button>
  66. </a-form-item>
  67. <a-form-item
  68. label="转化类型"
  69. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  70. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  71. v-if="campaignType == '3'"
  72. >
  73. <a-radio-group
  74. buttonStyle="solid"
  75. v-decorator="['urlType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '1' }]"
  76. >
  77. <a-radio-button value="1">淘宝商品</a-radio-button>
  78. <a-radio-button value="2">淘客商品</a-radio-button>
  79. </a-radio-group>
  80. </a-form-item>
  81. <a-form-item
  82. :label="campaignType == 3 ? ' ' : '链接'"
  83. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  84. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  85. v-if="campaignType == 3||campaignType == 4||campaignType == 5||campaignType == 6||campaignType == 7"
  86. :class="{ 'else-label': campaignType == 3 }"
  87. >
  88. <a-input
  89. placeholder="请填写链接"
  90. v-decorator="['url', { rules: [{ required: true, message: '链接不能为空' }] }]"
  91. />
  92. </a-form-item>
  93. <a-form-item
  94. label="转化目标"
  95. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  96. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  97. v-if="campaignType == 2 || campaignType == 4 || campaignType == 5"
  98. >
  99. <span v-if="convertId && !convert" style="display: block; font-size: 16px"
  100. >已选择转化目标: {{ convertId.label }}</span
  101. >
  102. <a-button type="primary" @click="showConvert">{{ convertId ? '更换转化目标' : '选择转化目标' }}</a-button>
  103. </a-form-item>
  104. <a-modal v-model="convert" title="选择转化目标">
  105. <template slot="footer">
  106. <a-button key="back" @click="convert = false">取消</a-button>
  107. <a-button key="submit" type="primary" @click="convert = false"> 确定 </a-button>
  108. </template>
  109. <a-form-item
  110. label="追踪方式"
  111. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  112. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  113. >
  114. <a-radio-group buttonStyle="solid" v-model="convertType" @change="convertChange">
  115. <a-radio-button value="1" v-show="campaignType == 4 || campaignType == 5">JS布玛</a-radio-button>
  116. <a-radio-button value="2" v-show="campaignType == 4 || campaignType == 5">Xpath</a-radio-button>
  117. <a-radio-button
  118. value="3"
  119. v-show="campaignType == 2 && (getPlatForm(getData('appId')) == 1 || getPlatForm(getData('appId')) == 2)"
  120. >应用-SDK
  121. </a-radio-button>
  122. <a-radio-button value="7" v-show="campaignType == 2">应用-API</a-radio-button>
  123. </a-radio-group>
  124. </a-form-item>
  125. <a-form-item
  126. label="选择转化"
  127. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  128. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  129. >
  130. <a-select allowClear labelInValue style="width: 100%" v-model="convertId" @focus="getConvertList">
  131. <a-select-option :value="item.convert_id" v-for="(item, index) in convertList" :key="item.convert_id">
  132. {{ item.convert_name }}</a-select-option
  133. >
  134. </a-select>
  135. </a-form-item>
  136. </a-modal>
  137. <a-form-item
  138. label=" "
  139. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  140. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  141. class="else-label"
  142. v-if="campaignType == '2' && (getPlatForm(getData('appId')) == '1' || getPlatForm(getData('appId')) == '2')"
  143. >
  144. <a-checkbox
  145. v-decorator="[
  146. 'useAppMarket',
  147. {
  148. valuePropName: 'checked',
  149. initialValue: false,
  150. },
  151. ]"
  152. >
  153. 优先从系统应用商店下载
  154. </a-checkbox>
  155. </a-form-item>
  156. <a-form-item
  157. label=" "
  158. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  159. :wrapperCol="{ lg: { span: 10 }, sm: { span: 16 } }"
  160. class="else-label"
  161. v-if="getData('useAppMarket')"
  162. >
  163. 请勾选投放应用已上架的应用商店(默认全选)
  164. <a-checkbox-group v-model="allForm.appStore">
  165. <a-checkbox value="huawei">华为</a-checkbox>
  166. <a-checkbox value="oppo">OPPO</a-checkbox>
  167. <a-checkbox value="vivo">VIVO</a-checkbox>
  168. <a-checkbox value="xiaomi">小米</a-checkbox>
  169. <a-checkbox value="meizu">魅族</a-checkbox>
  170. <a-checkbox value="smartisan">锤子</a-checkbox>
  171. </a-checkbox-group>
  172. </a-form-item>
  173. <a-form-item label="投放范围" :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  174. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  175. v-if="allianceAccount">
  176. <a-radio-group buttonStyle="solid" v-model="allForm.allianceAccount">
  177. <a-radio-button value="1">默认</a-radio-button>
  178. <a-radio-button value="2">联盟广告</a-radio-button>
  179. </a-radio-group>
  180. </a-form-item>
  181. <a-form-item
  182. label="创建数量"
  183. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  184. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  185. >
  186. <a-input-number
  187. v-decorator="[
  188. 'createCount',
  189. {
  190. rules: [{ required: true, message: '创建数量必填' }],
  191. initialValue: 1,
  192. },
  193. ]"
  194. style="width: 150px"
  195. >
  196. </a-input-number>
  197. </a-form-item>
  198. <div style="text-align: center; font-size: 16px; margin-bottom: 10px">目标人群</div>
  199. <a-form-item
  200. label="选择模板"
  201. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  202. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  203. >
  204. <a-select
  205. v-decorator="['templateId']"
  206. showSearch
  207. allowClear
  208. placeholder="选择定向模板"
  209. optionFilterProp="children"
  210. style="width: 500px"
  211. :filterOption="filterOption"
  212. >
  213. <a-select-option v-for="appModel in templateList" :key="appModel.templateId" :value="appModel.templateId">
  214. {{ appModel.templateName }}
  215. </a-select-option>
  216. </a-select>
  217. <a-button type="primary" @click="getTemplate(null)" :loading="templateLoading"> 刷新模板</a-button>
  218. <br>
  219. <a style="margin: 0 10px 0 0" @click="addTemplate(null)">新增模板</a>
  220. <a
  221. @click="lookTemplate(null, getData('templateId'))"
  222. :disabled="getData('templateId') == '' || getData('templateId') == null"
  223. >查看模板</a
  224. >
  225. </a-form-item>
  226. <div style="text-align: center; font-size: 16px">预算和排期</div>
  227. <a-form-item
  228. label="单日预算"
  229. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  230. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  231. >
  232. <a-radio-group buttonStyle="solid" v-model="allForm.dayBudget">
  233. <a-radio-button value="0">不限</a-radio-button>
  234. <a-radio-button value="1">统一预算</a-radio-button>
  235. </a-radio-group>
  236. </a-form-item>
  237. <a-form-item
  238. label=" "
  239. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  240. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  241. class="else-label"
  242. v-if="allForm.dayBudget == '1'"
  243. >
  244. <a-input
  245. placeholder="不小于100,不超过100000000,仅支持输入自然数"
  246. v-decorator="[
  247. 'dayBudget',
  248. {
  249. rules: [{ required: true, message: '请填写预算' }, { validator: budgetValue }],
  250. },
  251. ]"
  252. />
  253. </a-form-item>
  254. <a-form-item
  255. label="投放方式"
  256. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  257. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  258. >
  259. <a-radio-group buttonStyle="solid" v-decorator="['speed', { initialValue: '1' }]">
  260. <a-radio-button value="1">正常投放</a-radio-button>
  261. <a-radio-button value="2">平滑投放</a-radio-button>
  262. </a-radio-group>
  263. <br />
  264. <span>
  265. {{ getData('speed') == '2' ? '平滑匀速投放' : '尽快展示广告消耗预算' }}
  266. </span>
  267. </a-form-item>
  268. <a-form-item
  269. label="排期"
  270. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  271. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  272. >
  273. <a-radio-group buttonStyle="solid" v-model="allForm.time" @change="setTime">
  274. <a-radio-button value="1">从今天开始长期投放</a-radio-button>
  275. <a-radio-button value="2">设置开始和结束日期</a-radio-button>
  276. </a-radio-group>
  277. <br />
  278. <a-range-picker v-if="allForm.time == '2'" v-model="timeRange" format="YYYY-MM-DD" :allowClear="false" />
  279. </a-form-item>
  280. <a-form-item
  281. label="投放时段"
  282. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  283. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  284. >
  285. <a-radio-group buttonStyle="solid" v-model="allForm.scheduleTime" @change="setTimeAll">
  286. <a-radio-button value="1">全天</a-radio-button>
  287. <a-radio-button value="2">特定时间</a-radio-button>
  288. </a-radio-group>
  289. <br />
  290. <selectCheckAll
  291. style="width: 100%"
  292. v-show="allForm.scheduleTime == '2'"
  293. :scheduleTime.sync="allForm.scheduleTimeData"
  294. ref="selectCheck"
  295. />
  296. </a-form-item>
  297. <a-form-item
  298. label="创意展现方式"
  299. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  300. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  301. >
  302. <a-radio-group buttonStyle="solid" v-decorator="['showMode', { initialValue: '2' }]">
  303. <a-radio-button value="2">智能优选</a-radio-button>
  304. <a-radio-button value="1">随机轮播</a-radio-button>
  305. </a-radio-group>
  306. <br />
  307. <span>
  308. {{
  309. getData('showMode') == '1'
  310. ? '广告组包含的广告创意将随机展现'
  311. : '每一次展现的时候,系统会进行CTR预估,预估CTR高的会得到展现机会'
  312. }}
  313. </span>
  314. </a-form-item>
  315. <a-form-item
  316. label="场景广告位"
  317. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  318. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  319. >
  320. <checkBoxGroup
  321. :options="[
  322. { label: '优选广告位', value: 1 },
  323. { label: '信息流广告', value: 7 },
  324. { label: '上下滑大屏广告', value: 6 },
  325. { label: '视频播放页广告', value: 3 },
  326. ]"
  327. v-model="allForm.sceneId"
  328. @change="changeData"
  329. />
  330. </a-form-item>
  331. <!-- <a-form-item
  332. label="场景广告位"
  333. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  334. :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
  335. v-if="allForm.allianceAccount == '1'"
  336. >
  337. <a-radio-group buttonStyle="solid" v-decorator="['sceneId', { initialValue: '1' }]">
  338. <a-radio-button value="1">优选广告位</a-radio-button>
  339. <a-radio-button value="2">按场景选择广告位</a-radio-button>
  340. </a-radio-group>
  341. <br />
  342. </a-form-item>
  343. <a-form-item
  344. label=" "
  345. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  346. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  347. class="else-label"
  348. v-if="getData('sceneId') == '2'"
  349. >
  350. <a-checkbox-group :defaultValue="[7]" v-model="allForm.sceneId">
  351. <a-checkbox :value="7">信息流广告</a-checkbox>
  352. <a-checkbox :value="6">上下滑大屏广告</a-checkbox>
  353. <a-checkbox :value="3">视频播放页广告</a-checkbox>
  354. </a-checkbox-group>
  355. </a-form-item> -->
  356. <div style="text-align: center; font-size: 16px">优化目标和计费</div>
  357. <div style="width: 100%" v-for="(item, index) of allForm.group" :key="index">
  358. <div style="clear: both"></div>
  359. <a-form-item
  360. label="优化目标"
  361. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  362. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  363. >
  364. <a-radio-group buttonStyle="solid" v-model="item.bidType" @change="resData(index)">
  365. <a-radio-button :value="1">点击数</a-radio-button>
  366. <a-radio-button :value="10">转化数</a-radio-button>
  367. </a-radio-group>
  368. </a-form-item>
  369. <a-form-item
  370. label="转化目标"
  371. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  372. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  373. v-if="item.bidType == 10"
  374. >
  375. <a-select v-model="item.ocpxActionType">
  376. <a-select-option :value="2">行为数</a-select-option>
  377. <a-select-option :value="180" v-if="campaignType == '2' && allForm.groupTypeData.isActivate == '1'"
  378. >激活</a-select-option
  379. >
  380. <a-select-option
  381. :value="53"
  382. v-if="(campaignType == '4' || campaignType == '5') && allForm.groupTypeData.isFormSubmit == '1'"
  383. >表单提交</a-select-option
  384. >
  385. <a-select-option :value="394" v-if="allForm.groupTypeData.isOrderSubmit == '1'">订单提交</a-select-option>
  386. <a-select-option :value="348" v-if="allForm.groupTypeData.isValidClue == '1'">使用有效线索</a-select-option>
  387. <a-select-option :value="383" v-if="allForm.groupTypeData.isCreditGrant == '1'">授信出价</a-select-option>
  388. <a-select-option :value="384" v-if="allForm.groupTypeData.isWanJian == '1'">完件出价</a-select-option>
  389. <a-select-option :value="190" v-if="allForm.groupTypeData.isPurchase == '1'">付费出价</a-select-option>
  390. <a-select-option :value="191" v-if="allForm.groupTypeData.isFirstdayRoi == '1'">首日ROI</a-select-option>
  391. <a-select-option :value="396" v-if="allForm.groupTypeData.isRegister == '1'">注册优化目标</a-select-option>
  392. </a-select>
  393. </a-form-item>
  394. <a-form-item
  395. label="深度转化目标"
  396. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  397. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  398. v-if="
  399. (item.ocpxActionType == 180 || item.ocpxActionType == 53) &&
  400. allForm.groupTypeData.deepConversionTypes.length > 0
  401. "
  402. >
  403. <a-select v-model="item.deepConversionType" allowClear>
  404. <a-select-option
  405. :value="items.deepConversionType"
  406. v-for="(items, index) of allForm.groupTypeData.deepConversionTypes"
  407. :key="index"
  408. >
  409. {{ items.desc }}</a-select-option
  410. >
  411. </a-select>
  412. </a-form-item>
  413. <a-form-item
  414. label="计费方式"
  415. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  416. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  417. >
  418. <a-radio-group defaultValue="1">
  419. <a-radio value="1">{{ item.bidType == 1 ? '点击计费' : '展示计费(oCPM)' }}</a-radio>
  420. </a-radio-group>
  421. </a-form-item>
  422. <a-form-item
  423. label="出价"
  424. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  425. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  426. v-if="item.bidType == 1"
  427. >
  428. <!-- v-model="item.bid" -->
  429. <a-input-number
  430. v-decorator="[
  431. 'bid',
  432. {
  433. rules: [{ required: true, message: '出价必填' }, {validator: bidCheck}],
  434. },
  435. ]"
  436. :style="{ borderColor: item.showTipCheck ? 'red' : '#d9d9d9' }"
  437. style="width: 100%"
  438. >
  439. </a-input-number>
  440. <!-- <span style="color: red" v-if="item.showTipCheck && item.ocpxActionType == 180"
  441. >不得低于0.2元,不得高于项目最高出价{{ maxBid }}元</span
  442. > -->
  443. </a-form-item>
  444. <a-form-item
  445. label="目标成本"
  446. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  447. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  448. v-else
  449. >
  450. <!-- v-model="item.cpaBid" -->
  451. <a-input-number
  452. v-decorator="[
  453. 'cpaBid',
  454. {
  455. rules: [{ required: true, message: '目标成本必填' }, {validator: cpaBidCheck}],
  456. },]"
  457. style="width: 100%"
  458. >
  459. </a-input-number>
  460. <!-- <span style="color: red" v-if="item.showTipCheck">{{
  461. item.bidType == 1
  462. ? '不得低于1元,不得高于项目最高出价' + maxBid + '元'
  463. : '不得低于1元,不得高于项目最高出价' + maxBid + '元'
  464. }}</span> -->
  465. <span
  466. style="color: red; font-weight: 700"
  467. v-if="item.ocpxActionType == 2 && getData('cpaBid') && getData('cpaBid') > 1"
  468. >
  469. 行为出价大于1元,请注意!!!
  470. </span>
  471. </a-form-item>
  472. <a-form-item
  473. label="深度转化出价"
  474. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  475. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  476. v-if="
  477. (item.ocpxActionType == 180 || item.ocpxActionType == 53) &&
  478. allForm.groupTypeData.deepConversionTypes.length > 0 &&
  479. item.deepConversionType != ''
  480. "
  481. >
  482. <a-input-number
  483. v-model="item.deepConversionBid"
  484. @change="deep_conversion_bidTip(index)"
  485. :style="{ borderColor: item.deepConversionBidCheck ? 'red' : '#d9d9d9' }"
  486. style="width: 100%"
  487. :disabled="getData('cpaBid')==null||getData('cpaBid') == ''"
  488. ></a-input-number>
  489. <span style="color: red" v-if="item.deepConversionBidCheck"
  490. >深度转化目标成本必须高于优化目标成本,且不得高于3000元</span
  491. >
  492. </a-form-item>
  493. <a-form-item
  494. label="广告组名称"
  495. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  496. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  497. >
  498. <!-- v-model="item.unitName" -->
  499. <a-input v-decorator="[
  500. 'unitName',
  501. {
  502. rules: [{ required: true, message: '广告组必填' }, {validator: handleConfirmValue}],
  503. },]" @change="checkGroup($event, index)"></a-input>
  504. <span style="color: red" v-if="item.unitNameCheck">广告组名称重复</span>
  505. </a-form-item>
  506. </div>
  507. <div style="text-align: center; font-size: 16px">创意素材</div>
  508. <a-form-item
  509. label="素材类型"
  510. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  511. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  512. >
  513. <a-radio-group
  514. buttonStyle="solid"
  515. v-decorator="['creativeMaterialType', { initialValue: '1' }]"
  516. @change="changeType()"
  517. >
  518. <a-radio-button value="1">竖版视频</a-radio-button>
  519. <a-radio-button value="2">横版视频</a-radio-button>
  520. <!-- <a-radio-button value="4" v-if="JSON.parse(pane.sceneId).indexOf(7)>0">便利贴创意</a-radio-button> -->
  521. </a-radio-group>
  522. </a-form-item>
  523. <a-form-item
  524. label="创意标题"
  525. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  526. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  527. >
  528. <a-input
  529. v-decorator="[
  530. 'creativeName',
  531. {
  532. rules: [{ required: true, message: '创意标题必填' }],
  533. initialValue: '自定义创意_竖版视频',
  534. },
  535. ]"
  536. ></a-input>
  537. </a-form-item>
  538. <a-form-item
  539. label="创建类型"
  540. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  541. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  542. >
  543. <a-radio-group
  544. buttonStyle="solid"
  545. v-decorator="['createType', { rules: [{ required: true, message: '请选择目标应用' }], initialValue: '0' }]"
  546. @change="getPageSize"
  547. >
  548. <a-radio-button value="0">单品</a-radio-button>
  549. <a-radio-button value="1">混搭</a-radio-button>
  550. </a-radio-group>
  551. </a-form-item>
  552. <a-form-item
  553. label="选择视频"
  554. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  555. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  556. >
  557. <a @click="getVideoList()">选择视频</a> {{ videoList.length + '/' + (getData('createType')=='0'?getData('createCount'):getData('createCount')*15) }}
  558. <br />
  559. <div v-if="videoList.length > 0 && showVideo" style="display:flex;flex-wrap:wrap">
  560. <span v-for="(item, index) of videoList" :key="index" style="position: relative" class="width-video">
  561. <a-icon type="close-circle" @click="deleteData(index, item)" style="position: absolute;right:0;color:red" />
  562. <img :src="item.coverUrl" controls="controls" style="width:100%" @click="matemalVideo(item)"></img>
  563. </span>
  564. </div>
  565. </a-form-item>
  566. <a-form-item
  567. label="广告语"
  568. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  569. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  570. >
  571. <!-- v-model.trim="allForm.description" -->
  572. <!-- @keyup="getData('description')?getData('description')=this.value.replace(/^ +| +$/g,'')" -->
  573. <a @click="showTitle()">推荐广告语</a>
  574. <div class="step4-else" style="display: inline-block; position: relative; border-radius: 4px; width: 100%; border: 1px solid #d9d9d9;">
  575. <a-textarea
  576. class="rending"
  577. placeholder="请输入广告语"
  578. v-decorator="['description',{ rules: [{ required: true, message: '广告语必填' }] }]"
  579. @keyup="getData('description')?form.setFieldsValue({
  580. description: getData('description').replace(/\s/g,'')
  581. }):null"
  582. @change="getData('description')?form.setFieldsValue({
  583. description: getData('description').replace(/\s/g,'')
  584. }):null"
  585. :autosize="{ minRows: 2, maxRows: 6 }"
  586. :max-length="30"
  587. ></a-textarea>
  588. <p
  589. style="
  590. font-size: 12px;
  591. color: #b6bbc7;
  592. letter-spacing: 0.3px;
  593. text-align: right;
  594. line-height: 20px;
  595. position: absolute;
  596. bottom: 0;
  597. right: 6px;
  598. width: 100%;
  599. margin-bottom: 0;
  600. "
  601. >
  602. {{ (getData('description')?getData('description').length:0) + '/30' }}
  603. </p>
  604. </div>
  605. <br />
  606. <a @click="cunTitle()">收藏</a>
  607. <a @click="showCunTitle()" style="margin-left: 10px">收藏列表</a>
  608. <!--
  609. <br />
  610. <a-tag v-for="(itemTag, indexTag) of tags" :key="indexTag" @click="getChange(item, itemTag, index)">{{
  611. itemTag.name
  612. }}</a-tag> -->
  613. </a-form-item>
  614. <a-form-item
  615. label="创意分类"
  616. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  617. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  618. v-if="creativeCategorySwitch"
  619. >
  620. <a-cascader
  621. :options="createOptions"
  622. v-decorator="['creativeCategory',{ rules: [{ required: true, message: '创意分类必选' }] }]"
  623. :fieldNames="fieldNames"
  624. placeholder="请选择创意分类"
  625. />
  626. </a-form-item>
  627. <a-form-item
  628. label="创意标签"
  629. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  630. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  631. v-if="creativeCategorySwitch"
  632. >
  633. <a-select
  634. mode="tags"
  635. style="width: 100%"
  636. placeholder="按回车生成标签"
  637. v-decorator="['creativeTag',{ rules: [{ required: true, message: '创意标签必填' }] }]"
  638. dropdownClassName="display-none-selset"
  639. :token-separators="[',', ' ', ',']"
  640. >
  641. </a-select>
  642. <span v-if="getData('creativeTag') && getData('creativeTag').length > 10" style="color: red"
  643. >创意标签最多填写10个,请删减</span>
  644. <br />
  645. <a-popconfirm @confirm="getInfo()">
  646. <div slot="title">
  647. <div>
  648. 分类名称:
  649. <a-input placeholder="请输入" v-model="tagName" style="display: inline-block; width: 300px" />
  650. </div>
  651. </div>
  652. <a style="margin-right: 10px" :disabled="!getData('creativeTag')">收藏</a>
  653. </a-popconfirm>
  654. <a @click="showCunTag('creativeTag')">收藏列表</a>
  655. </a-form-item>
  656. <a-form-item
  657. label="行动号召"
  658. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  659. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  660. >
  661. <a-select
  662. v-decorator="['actionBarText', { rules: [{ required: true, message: '行动号召按钮文案' }] }]"
  663. showSearch
  664. allowClear
  665. placeholder="选择行动号召按钮文案"
  666. optionFilterProp="children"
  667. :filterOption="filterOption"
  668. >
  669. <a-select-option v-for="appModel in actionBarTextList" :key="appModel.id" :value="appModel.actionBarText">
  670. {{ appModel.actionBarText }}
  671. </a-select-option>
  672. </a-select>
  673. </a-form-item>
  674. <a-form-item
  675. label="下载详情"
  676. v-if="showSite"
  677. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  678. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  679. >
  680. <a-select
  681. v-decorator="['siteId']"
  682. showSearch
  683. allowClear
  684. placeholder="选择应用下载详情页"
  685. optionFilterProp="children"
  686. :filterOption="filterOption"
  687. >
  688. <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
  689. {{ appModel.name }}
  690. </a-select-option>
  691. </a-select>
  692. </a-form-item>
  693. <a-form-item
  694. label="第三方点击监测链接"
  695. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  696. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  697. >
  698. <a-input v-decorator="['clickTrackUrl']" placeholder="请输入第三方检测链接"> </a-input>
  699. <a
  700. v-if="getData('clickTrackUrl')"
  701. @click="
  702. clickTrackUrlShow = true
  703. clickTrackUrlShowType == '1'
  704. "
  705. style="margin-right: 10px"
  706. >收藏监测链接</a
  707. >
  708. <a
  709. @click="
  710. getClickTrackUrlList('1')
  711. clickTrackUrlShowType = '1'
  712. "
  713. >监测链接列表</a
  714. >
  715. </a-form-item>
  716. <a-form-item
  717. label="第三方ActionBar点击监控链接"
  718. :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
  719. :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
  720. v-if="actionbarClickUrlSwitch"
  721. >
  722. <a-input v-decorator="['actionbarClickUrl']" placeholder="请输入第三方点击监控链接"> </a-input>
  723. <span style="color: red; position: relative; top: -10px">仅加白使用</span>
  724. <br />
  725. <a
  726. v-if="getData('actionbarClickUrl')"
  727. @click="
  728. clickTrackUrlShow = true
  729. clickTrackUrlShowType = '2'
  730. "
  731. style="margin-right: 10px; position: relative; top: -20px"
  732. >收藏监测链接</a
  733. >
  734. <a
  735. @click="
  736. getClickTrackUrlList('2')
  737. clickTrackUrlShowType = '2'
  738. "
  739. style="margin-right: 10px; position: relative; top: -20px"
  740. >监测链接列表</a
  741. >
  742. </a-form-item>
  743. <a-form-item :wrapperCol="{ span: 20 }" style="text-align: center">
  744. <a-button htmlType="submit" type="primary" :loading="loading">确定</a-button>
  745. <!-- <a-button style="margin-left: 8px" @click="prevStep" v-show="step == 1">上一步</a-button> -->
  746. </a-form-item>
  747. </a-form>
  748. <a-modal v-model="visible" title="广告组创建信息">
  749. <div>创建成功:{{ allForm.success }}条</div>
  750. <template slot="footer">
  751. <a-button key="submit" type="primary" @click="handleOk"> 返回列表 </a-button>
  752. </template>
  753. </a-modal>
  754. <templateModal ref="templateModal" @getData="getTemplateList" />
  755. <a-modal title="查看视频" v-model="visibleVideo" :width="400" :footer="null">
  756. <video class="video" :src="videoUrlShow" controls="controls" style="width: 100%">
  757. 您的浏览器不支持 video 标签。
  758. </video>
  759. </a-modal>
  760. <a-modal
  761. :maskClosable="false"
  762. title="选择素材"
  763. v-model="visibleMatemal"
  764. @ok="handleOkShow"
  765. @cancel="cancelAll"
  766. :width="1000"
  767. >
  768. <a-tabs type="card" @change="callback" v-model="active" class="check-video">
  769. <div slot="tabBarExtraContent">
  770. 当前选择数量
  771. {{ sumContent + '/' + (getData('createType')=='0'?getData('createCount'):getData('createCount')*15) }}
  772. <a-button type="primary" @click="tongbu()" :loading="tongbuLoading" style="margin-left:10px">
  773. 刷新素材</a-button
  774. >
  775. </div>
  776. <a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
  777. <a-row :gutter="24">
  778. <a-col :span="12">
  779. <a-form-item label="日期选择" :labelCol="labelCol" :wrapperCol="wrapperCol">
  780. <a-range-picker name="buildTime" v-model="time" />
  781. </a-form-item>
  782. </a-col>
  783. <a-col :span="12">
  784. <a-button style="position: relative;top: 4px;" @click="selectAllVideo">
  785. 全选
  786. </a-button>
  787. </a-col>
  788. <!-- <a-col :span="12">
  789. <a-form-item label="筛选条件" :labelCol="labelCol" :wrapperCol="wrapperCol">
  790. <a-select v-model="orderBy" style="width: 100%">
  791. <a-select-option value="time"> 按时间排序 </a-select-option>
  792. <a-select-option value="cost"> 按消耗排序</a-select-option>
  793. </a-select>
  794. </a-form-item>
  795. </a-col> -->
  796. </a-row>
  797. <ul v-if="dataSource.length > 0" style="overflow: auto; padding-left: 0">
  798. <a-checkbox-group v-model="checkVideo" style="width: 100%" @change="setData">
  799. <li v-for="(item, index) of dataSource" :key="index" class="chouzhen" style="height: 400px">
  800. <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
  801. 您的浏览器不支持 video 标签。
  802. </video> -->
  803. <a-checkbox
  804. :value="item.photoId"
  805. style="width: 100%; position: absolute; z-index: 100; right: 0; top: 0"
  806. >
  807. <img :src="item.coverUrl" alt="" style="width: 90%; margin-bottom: 30px" />
  808. <div style="width: 100%; text-align: center">
  809. {{ item.statDate ? '时间:' + item.statDate.split(' ')[0] : '消耗:' + item.charge }}
  810. </div>
  811. </a-checkbox>
  812. <a @click="matemalVideo(item, index)" style="position: absolute; z-index: 100; right: 56px; bottom: 5px"
  813. >查看视频</a
  814. >
  815. </li>
  816. </a-checkbox-group>
  817. </ul>
  818. <div v-else style="width: 100%; height: 400px; display: flex; justify-content: center; align-items: center">
  819. <img
  820. src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575627350102&di=02972956f2243933bffc0d85099adbfe&imgtype=jpg&src=http%3A%2F%2Fimg0.imgtn.bdimg.com%2Fit%2Fu%3D1095310825%2C1528244349%26fm%3D214%26gp%3D0.jpg"
  821. alt=""
  822. v-if="!loadingVideoList"
  823. />
  824. <img v-else src="@/views/modules/material/loading.gif" />
  825. </div>
  826. </a-tab-pane>
  827. <!-- <a-button slot="tabBarExtraContent" type="primary" @click="tongbu()" :loading="tongbuLoading">
  828. 刷新素材</a-button
  829. > -->
  830. </a-tabs>
  831. <div style="text-align: right">
  832. <a-pagination
  833. size="small"
  834. :showTotal="ipagination.showTotal"
  835. style="float: right"
  836. v-if="dataSource.length > 0"
  837. showQuickJumper
  838. :pageSize.sync="ipagination.pageSize"
  839. :total="ipagination.total"
  840. v-model="ipagination.current"
  841. @change="getDataSource"
  842. />
  843. </div>
  844. </a-modal>
  845. <a-modal title="监测链接名称" v-model="clickTrackUrlShow">
  846. <template slot="footer">
  847. <a-button
  848. key="submit"
  849. :disabled="trackUrlName == '' && !showTrackUrlNameElse"
  850. type="primary"
  851. @click="clickTrackUrlOk"
  852. >
  853. 确定
  854. </a-button>
  855. </template>
  856. <a-input placeholder="请输入监测链接名称" v-model="trackUrlName" @blur="changeTrackUrlName" style="width: 100%" />
  857. <span style="color: red" v-if="!showTrackUrlNameElse">名称重复</span>
  858. </a-modal>
  859. <a-modal title="监测链接列表" v-model="clickTrackUrlList" :width="1000" :footer="null">
  860. <a-spin :spinning="spinning">
  861. <a-row :gutter="10" class="onlny-click-track">
  862. <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
  863. <a-card class="search-box" style="over-flow: auto">
  864. <!-- <a-input v-model="trackName"></a-input> -->
  865. <a-input-search
  866. placeholder="请输入监测链接名称"
  867. enter-button="Search"
  868. size="large"
  869. @search="onSearch"
  870. style="width: 40%; margin-bottom: 20px"
  871. v-model="trackName"
  872. />
  873. <a-list size="large" bordered :dataSource="trackUrlList">
  874. <a-list-item slot="renderItem" slot-scope="item" :title="item.trackUrl" style="line-height: 50px">
  875. <div slot="actions">
  876. <a @click="okClickTrackUrl(item)">选择</a>
  877. <a-divider type="vertical" />
  878. <a @click="removeClickTrackUrl(item)">删除</a>
  879. </div>
  880. {{ item.trackName }}
  881. <a-input v-model="item.trackUrl" readOnly style="margin: 10px; width: 70%"></a-input>
  882. </a-list-item>
  883. </a-list>
  884. </a-card>
  885. </a-col>
  886. </a-row>
  887. </a-spin>
  888. </a-modal>
  889. <a-modal title="收藏标题" v-model="creativeTagVisible" :width="1000" @ok="okTag">
  890. <el-tree :data="optionsTag" show-checkbox node-key="id" :props="defaultProps" :check-strictly="true" ref="tree">
  891. </el-tree>
  892. </a-modal>
  893. <a-modal title="推荐标题" v-model="titleVisible" :width="1000" :footer="null">
  894. <a-row :gutter="10">
  895. <a-col :sm="10" style="margin-bottom: 20px; z-index: 10">
  896. <a-card class="search-box" style="min-height: 500px">
  897. <div style="margin-bottom: 30px">
  898. <span style="display: inline-block; width: 80px">行业</span>
  899. <a-cascader
  900. style="margin-top: 1rem; width: 300px"
  901. v-model="dataOne"
  902. :options="options"
  903. :showSearch="{ filter }"
  904. expandTrigger="hover"
  905. @change="onChangeTitle"
  906. placeholder="请选择行业"
  907. >
  908. <a-icon type="smile" slot="suffixIcon" class="test" />
  909. </a-cascader>
  910. </div>
  911. <div style="margin-bottom: 30px">
  912. <span style="display: inline-block; width: 80px">关键词</span>
  913. <a-input placeholder="请输入关键词" v-model="value" style="width: 300px" />
  914. </div>
  915. <span style="display: inline-block; width: 80px; float: left"></span>
  916. <a-button type="primary" @click="searchQuery" :disabled="value == ''">生成</a-button>
  917. </a-card>
  918. </a-col>
  919. <a-col :sm="14" style="margin-bottom: 20px; z-index: 10">
  920. <a-card class="search-box" style="over-flow: auto">
  921. <a-list size="large" bordered :dataSource="title">
  922. <a-list-item slot="renderItem" slot-scope="item">
  923. <a slot="actions" @click="okTitle(item)">选择</a>
  924. {{ item }}
  925. </a-list-item>
  926. </a-list>
  927. </a-card>
  928. </a-col>
  929. </a-row>
  930. </a-modal>
  931. <a-modal title="收藏标题" v-model="cunTitleVisible" :width="1000" :footer="null">
  932. <a-row :gutter="10">
  933. <a-col :sm="24" style="margin-bottom: 20px; z-index: 10">
  934. <a-card class="search-box" style="over-flow: auto">
  935. <a-list size="large" bordered :dataSource="cunTitleList">
  936. <a-list-item slot="renderItem" slot-scope="item">
  937. <div slot="actions">
  938. <a @click="okTitleCun(item)">选择</a>
  939. <a-divider type="vertical" />
  940. <a @click="removeTitleCun(item)">删除</a>
  941. </div>
  942. {{ item.title }}
  943. </a-list-item>
  944. </a-list>
  945. </a-card>
  946. </a-col>
  947. </a-row>
  948. </a-modal>
  949. </a-card>
  950. </template>
  951. <script>
  952. import { getAction, postAction, deleteAction } from '@/api/manage'
  953. import moment from 'moment'
  954. import { mapGetters } from 'vuex'
  955. import jq from 'jquery'
  956. import selectCheckAll from '@/views/modules/kuaishouapp/account/stepForm/stepModule/test'
  957. import templateModal from '@/views/modules/kuaishouapp/crossAccount/templateModal'
  958. import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
  959. let dateQuantumRangeConst = ''
  960. const columns = [
  961. {
  962. title: '人群',
  963. dataIndex: 'orientationName',
  964. scopedSlots: {
  965. customRender: 'orientationName',
  966. },
  967. width: 150,
  968. },
  969. {
  970. title: '属性',
  971. dataIndex: 'populationType',
  972. filters: [
  973. {
  974. text: '上传人群',
  975. value: '1',
  976. },
  977. {
  978. text: '广告人群',
  979. value: '2',
  980. },
  981. {
  982. text: '主题专区',
  983. value: '3',
  984. },
  985. {
  986. text: '逻辑规则',
  987. value: '4',
  988. },
  989. {
  990. text: '人群扩展',
  991. value: '5',
  992. },
  993. {
  994. text: '平台定制',
  995. value: '6',
  996. },
  997. {
  998. text: '定制付费',
  999. value: '7',
  1000. },
  1001. {
  1002. text: '网红粉丝类别',
  1003. value: '8',
  1004. },
  1005. {
  1006. text: '内容付费行为',
  1007. value: '9',
  1008. },
  1009. {
  1010. text: '移动应用安装',
  1011. value: '10',
  1012. },
  1013. {
  1014. text: '快手使用活跃度',
  1015. value: '11',
  1016. },
  1017. {
  1018. text: '行业分类',
  1019. value: '12',
  1020. },
  1021. {
  1022. text: '商业兴趣',
  1023. value: '13',
  1024. },
  1025. {
  1026. text: '固化标签',
  1027. value: '14',
  1028. },
  1029. {
  1030. text: '行业偏好',
  1031. value: '15',
  1032. },
  1033. {
  1034. text: '第三方标签',
  1035. value: '16',
  1036. },
  1037. {
  1038. text: '产品关键词',
  1039. value: '17',
  1040. },
  1041. ],
  1042. onFilter: (value, record) => record.populationType.toString().toLowerCase().includes(value.toLowerCase()),
  1043. scopedSlots: {
  1044. customRender: 'populationType',
  1045. },
  1046. width: 150,
  1047. },
  1048. {
  1049. title: '创建时间',
  1050. dataIndex: 'createTime',
  1051. scopedSlots: {
  1052. customRender: 'createTime',
  1053. },
  1054. sorter: (a, b) => a.createTime - b.createTime,
  1055. },
  1056. ]
  1057. function tqFun(qcArr1) {
  1058. var tempArr = []
  1059. function bbFun(qcArr) {
  1060. for (var i = 0; i < qcArr.length; i++) {
  1061. if (qcArr[i] instanceof Array) {
  1062. bbFun(qcArr[i])
  1063. } else {
  1064. tempArr.push(qcArr[i])
  1065. }
  1066. }
  1067. return tempArr
  1068. }
  1069. return bbFun(qcArr1)
  1070. }
  1071. export default {
  1072. name: 'creat-unit',
  1073. components: {
  1074. selectCheckAll,
  1075. templateModal,
  1076. checkBoxGroup,
  1077. },
  1078. props: {
  1079. campaignId: {
  1080. type: String,
  1081. default() {
  1082. return null
  1083. },
  1084. },
  1085. },
  1086. data() {
  1087. return {
  1088. templateLoading: false,
  1089. dataOne: [],
  1090. actionBarTextList: [],
  1091. trackName: '',
  1092. trackUrlList: [],
  1093. showSite: false,
  1094. appList: [],
  1095. siteList: [],
  1096. createOptions: [],
  1097. fieldNames: {
  1098. label: 'category_name',
  1099. value: 'category_id',
  1100. children: 'child',
  1101. },
  1102. defaultProps: {
  1103. children: 'children',
  1104. label: 'label',
  1105. id: 'id',
  1106. },
  1107. showTrackUrlNameElse: true,
  1108. clickTrackUrlList: false,
  1109. spinning: false,
  1110. trackUrlName: '',
  1111. tagName: '',
  1112. labelCol: {
  1113. lg: {
  1114. span: 6,
  1115. },
  1116. sm: {
  1117. span: 6,
  1118. },
  1119. xs: {
  1120. span: 6,
  1121. },
  1122. md: {
  1123. span: 6,
  1124. },
  1125. },
  1126. wrapperCol: {
  1127. lg: {
  1128. span: 18,
  1129. },
  1130. sm: {
  1131. span: 18,
  1132. },
  1133. xs: {
  1134. span: 14,
  1135. },
  1136. md: {
  1137. span: 14,
  1138. },
  1139. },
  1140. ipagination: {
  1141. current: 1,
  1142. pageSize: 5,
  1143. // pageSizeOptions: ['10', '20', '30'],
  1144. showTotal: (total, range) => {
  1145. return range[0] + '-' + range[1] + ' 共' + total + '条'
  1146. },
  1147. showQuickJumper: true,
  1148. // showSizeChanger: true,
  1149. total: 0,
  1150. onChange: (current) => {
  1151. // 切换分页时的回调,
  1152. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  1153. this.ipagination.current = current
  1154. },
  1155. },
  1156. showVideo: true,
  1157. videoList: [],
  1158. orderBy: 'time',
  1159. visibleMatemal: false,
  1160. loadingVideoList: false,
  1161. checkVideo: [],
  1162. checkVideoAll: [],
  1163. checkVideoWai: [],
  1164. checkVideoWhole:[],
  1165. dataSource: [],
  1166. active: 0,
  1167. time: [],
  1168. channelType: 0,
  1169. creativeMaterialType: '',
  1170. tab: [
  1171. // {
  1172. // value: 2,
  1173. // label: '全部',
  1174. // },
  1175. {
  1176. value: 0,
  1177. label: '内部',
  1178. },
  1179. {
  1180. value: 1,
  1181. label: '外部',
  1182. },
  1183. ],
  1184. templateList: [],
  1185. allianceAccount: false,
  1186. creativeCategorySwitch: false,
  1187. actionbarClickUrlSwitch: false,
  1188. tongbuLoading: false,
  1189. convert: false,
  1190. convertId: '',
  1191. convertList: [],
  1192. checkedTrue: false,
  1193. nameValue: '',
  1194. visible: false,
  1195. timeRange: [],
  1196. form: this.$form.createForm(this),
  1197. step: 0,
  1198. people: '2',
  1199. targeted: '2',
  1200. topMiddle: false,
  1201. topMiddleNo: false,
  1202. keyValue: '',
  1203. keyValueNo: '',
  1204. columns,
  1205. selectedRowKeys: [],
  1206. selectedRowKeysValue: [],
  1207. selectedRowKeysNo: [],
  1208. selectedRowKeysValueNo: [],
  1209. data: [],
  1210. populationData: {},
  1211. url: {
  1212. insertTemplateUrl: '/kuaishou/create/createGroups',
  1213. userAllocationList: '/ctop/userAllocation/list',
  1214. campaignList: '/kuaishou/kuaiShouCampaignTemplate/list',
  1215. getDeepConversionUrl: '/kuaishou/kuaiShouConversionTypes/getIsActivate',
  1216. getCampaignTemplate: '/kuaishou/kuaiShouCampaignTemplate/getKuaiShouCampaignTemplate',
  1217. appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
  1218. },
  1219. appList: [],
  1220. appId: '',
  1221. loading: false,
  1222. campaignTemplateId: '',
  1223. campaignType: null,
  1224. maxBid: 0,
  1225. allForm: {
  1226. dayBudget: '0',
  1227. time: '1',
  1228. scheduleTime: '1',
  1229. scheduleTimeData:
  1230. '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
  1231. group: [],
  1232. groupTypeData: null,
  1233. fail: [],
  1234. success: [],
  1235. sceneId: [1],
  1236. appStore: ['huawei', 'oppo', 'vivo', 'xiaomi', 'meizu', 'smartisan'],
  1237. allianceAccount: '1',
  1238. description: '',
  1239. },
  1240. convertType: '1',
  1241. dataList: [],
  1242. clickTrackUrlShow: false,
  1243. clickTrackUrlShowType: '1',
  1244. optionsTag: [],
  1245. creativeTagVisible: false,
  1246. visibleVideo: false,
  1247. videoUrlShow: '',
  1248. sumContent: 0,
  1249. titleVisible: false,
  1250. options: [],
  1251. value: '',
  1252. title: [],
  1253. cunTitleVisible: false,
  1254. cunTitleList: [],
  1255. createCount: 0,
  1256. tongbuLoading: false,
  1257. }
  1258. },
  1259. computed: {
  1260. count() {
  1261. return moment().startOf('day')
  1262. },
  1263. },
  1264. filters: {
  1265. getDate(value) {
  1266. let date = new Date(value)
  1267. let y = date.getFullYear()
  1268. let MM = date.getMonth() + 1
  1269. MM = MM < 10 ? '0' + MM : MM
  1270. let d = date.getDate()
  1271. d = d < 10 ? '0' + d : d
  1272. return y + '-' + MM + '-' + d
  1273. },
  1274. platform(str) {
  1275. var data = {
  1276. 1: 'Android应用下载',
  1277. 2: 'Android网页游戏',
  1278. 3: 'iOS应用下载',
  1279. 4: 'iOS网页游戏',
  1280. }
  1281. return data[str]
  1282. },
  1283. },
  1284. methods: {
  1285. tongbu() {
  1286. this.tongbuLoading = true
  1287. getAction('/kuaishou/batch/syncVideo', {
  1288. accountId: localStorage.getItem('campaignAccountId'),
  1289. }).then((res) => {
  1290. if (res.success) {
  1291. this.$message.success(res.message)
  1292. this.tongbuLoading = false
  1293. var params = {}
  1294. params.accountId = localStorage.getItem('campaignAccountId')
  1295. params.materialType = this.creativeMaterialType
  1296. params.pageSize = this.ipagination.pageSize
  1297. params.pageNo = 1
  1298. params.status = 0
  1299. params.channelType = this.channelType
  1300. params.orderBy = this.orderBy
  1301. if (this.time.length > 0) {
  1302. // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
  1303. // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  1304. params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
  1305. params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
  1306. }
  1307. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  1308. } else {
  1309. this.$message.error(res.message)
  1310. this.tongbuLoading = false
  1311. }
  1312. })
  1313. },
  1314. removeTitleCun(item) {
  1315. deleteAction('/kuaishou/kuaiShouTitleCollection/delete', {
  1316. id: item.id,
  1317. }).then((res) => {
  1318. if (res.success) {
  1319. this.getCunTitle()
  1320. }
  1321. })
  1322. },
  1323. okTitleCun(item) {
  1324. this.allForm.description = item.title
  1325. this.form.setFieldsValue({
  1326. description: item.title,
  1327. })
  1328. this.cunTitleVisible = false
  1329. this.cunTitleList = []
  1330. },
  1331. cunTitle() {
  1332. if (this.getData('description') && this.getData('description') == '') {
  1333. this.$message.error('请填写广告语后再进行收藏')
  1334. } else {
  1335. var params = {}
  1336. params.accountId = localStorage.getItem('campaignAccountId')
  1337. params.userId = this.userInfo().id
  1338. params.title = this.getData('description')
  1339. postAction('/kuaishou/kuaiShouTitleCollection/add', params).then((res) => {
  1340. if (res.success) {
  1341. this.$message.success('收藏成功')
  1342. } else {
  1343. this.$message.error(res.message)
  1344. }
  1345. })
  1346. }
  1347. },
  1348. showCunTitle() {
  1349. this.cunTitleVisible = true
  1350. this.getCunTitle()
  1351. },
  1352. getCunTitle() {
  1353. var params = {}
  1354. params.accountId = localStorage.getItem('campaignAccountId')
  1355. params.userId = this.userInfo().id
  1356. params.pageNo = 1
  1357. params.pageSize = 500
  1358. getAction('/kuaishou/kuaiShouTitleCollection/list', params).then((res) => {
  1359. if (res.success) {
  1360. this.cunTitleList = res.result.records
  1361. }
  1362. })
  1363. },
  1364. okTitle(item) {
  1365. this.allForm.description = item
  1366. this.$nextTick(() => {
  1367. this.form.setFieldsValue({
  1368. description: item,
  1369. })
  1370. })
  1371. this.titleVisible = false
  1372. this.dataOne = []
  1373. this.value = ''
  1374. this.title = []
  1375. },
  1376. searchQuery() {
  1377. // /ctop/creativeTitle/titleSuggestion
  1378. getAction('/ctop/creativeTitle/titleSearch', {
  1379. firstCategory: this.dataOne[0],
  1380. secondCategory: this.dataOne[1],
  1381. keywords: this.value,
  1382. }).then((res) => {
  1383. console.log(res)
  1384. this.title = res.result ? res.result : []
  1385. })
  1386. // firstCategory,secondCategory,keywords
  1387. },
  1388. onChangeTitle(value, selectedOptions) {
  1389. this.dataOne = value
  1390. this.value = ''
  1391. this.title = []
  1392. },
  1393. filter(inputValue, path) {
  1394. return path.some((option) => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
  1395. },
  1396. showTitle() {
  1397. this.titleVisible = true
  1398. this.getHangye()
  1399. },
  1400. getHangye() {
  1401. getAction('/ctop/creativeTitle/getTitleLabel', '').then((res) => {
  1402. if (res.success) {
  1403. this.options = res.result.map((item) => {
  1404. return {
  1405. label: item.label,
  1406. value: item.value,
  1407. children:
  1408. item.children.length > 0
  1409. ? [
  1410. {
  1411. label: '不限',
  1412. value: 0,
  1413. },
  1414. ].concat(item.children)
  1415. : [
  1416. {
  1417. label: '不限',
  1418. value: 0,
  1419. },
  1420. ],
  1421. }
  1422. })
  1423. this.options = [
  1424. {
  1425. label: '不限',
  1426. value: 0,
  1427. },
  1428. ].concat(this.options)
  1429. if (this.dataOne.length > 0) {
  1430. return
  1431. } else {
  1432. this.dataOne = [0]
  1433. }
  1434. }
  1435. })
  1436. },
  1437. matemalVideo(item) {
  1438. this.visibleVideo = true
  1439. this.videoUrlShow = item.url
  1440. },
  1441. showCunTag(type) {
  1442. this.creativeTagVisible = true
  1443. var params = {}
  1444. params.accountId = localStorage.getItem('campaignAccountId')
  1445. params.userId = this.userInfo().id
  1446. params.pageSize = 1000
  1447. params.pageNo = 1
  1448. getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
  1449. if (res.success) {
  1450. // console.log(res.result)
  1451. this.optionsTag = res.result.records.map((item) => {
  1452. return {
  1453. id: item.id,
  1454. label: item.tagName,
  1455. children: JSON.parse(item.tagArray).map((item) => {
  1456. return {
  1457. id: item,
  1458. label: item,
  1459. disabled: true,
  1460. }
  1461. }),
  1462. }
  1463. })
  1464. }
  1465. })
  1466. },
  1467. okTag() {
  1468. var data = this.$refs.tree.getCheckedKeys()
  1469. if (data.length > 1) {
  1470. this.$message.error('只能选择一个选项')
  1471. // this.$refs.tree.setCheckedKeys([]);
  1472. } else {
  1473. var params = {}
  1474. params.accountId = localStorage.getItem('campaignAccountId')
  1475. params.userId = this.userInfo().id
  1476. params.pageSize = 1000
  1477. params.pageNo = 1
  1478. params.id = data[0]
  1479. getAction('/tag/kuaiShouCreativeTagCollection/list', params).then((res) => {
  1480. if (res.success) {
  1481. // console.log(res.result)
  1482. this.$nextTick(() => {
  1483. this.form.setFieldsValue({
  1484. creativeTag: JSON.parse(res.result.records[0].tagArray).map((item) => {
  1485. return item
  1486. }),
  1487. })
  1488. this.form.validateFields(['creativeTag'])
  1489. })
  1490. this.creativeTagVisible = false
  1491. } else {
  1492. this.$message.error('选择出错,请稍后选择或自行手填')
  1493. }
  1494. })
  1495. }
  1496. },
  1497. getInfo() {
  1498. if (this.tagName == '') {
  1499. this.$message.error('请输入分类名称')
  1500. return
  1501. } else {
  1502. let params = {}
  1503. params.tagName = this.tagName
  1504. // params.campaignBudget = this.campaignBudget
  1505. params.tagArray = JSON.stringify(this.getData('creativeTag'))
  1506. params.userId = this.userInfo().id
  1507. params.accountId = localStorage.getItem('campaignAccountId')
  1508. postAction('/tag/kuaiShouCreativeTagCollection/add', params).then((res) => {
  1509. if (res.success) {
  1510. this.$message.success('添加成功')
  1511. this.tagName = ''
  1512. } else {
  1513. this.$message.error(res.message)
  1514. }
  1515. })
  1516. }
  1517. },
  1518. onSearch(value) {
  1519. var params = {}
  1520. params.accountId = localStorage.getItem('campaignAccountId')
  1521. params.userId = this.userInfo().id
  1522. params.trackType = this.clickTrackUrlShowType
  1523. params.pageNo = 1
  1524. params.pageSize = 500
  1525. params.trackName = value
  1526. getAction('/kuaishou/kuaiShouTrackUrlCollection/list', params).then((res) => {
  1527. if (res.success) {
  1528. this.trackUrlList = res.result.records
  1529. } else {
  1530. this.$message.error(res.message)
  1531. }
  1532. })
  1533. },
  1534. okClickTrackUrl(item) {
  1535. this.clickTrackUrlList = false
  1536. if (this.clickTrackUrlShowType == '1') {
  1537. this.form.setFieldsValue({
  1538. clickTrackUrl: item.trackUrl,
  1539. })
  1540. } else {
  1541. this.form.setFieldsValue({
  1542. actionbarClickUrl: item.trackUrl,
  1543. })
  1544. }
  1545. },
  1546. removeClickTrackUrl(item) {
  1547. deleteAction('/kuaishou/kuaiShouTrackUrlCollection/delete', {
  1548. id: item.id,
  1549. }).then((res) => {
  1550. if (res.success) {
  1551. this.getClickTrackUrlList(this.clickTrackUrlShowType)
  1552. }
  1553. })
  1554. },
  1555. getClickTrackUrlList(type) {
  1556. this.spinning = true
  1557. this.clickTrackUrlList = true
  1558. this.trackUrlList = []
  1559. var params = {}
  1560. params.accountId = localStorage.getItem('campaignAccountId')
  1561. params.trackType = type
  1562. params.userId = this.userInfo().id
  1563. params.pageNo = 1
  1564. params.pageSize = 500
  1565. getAction('/kuaishou/kuaiShouTrackUrlCollection/list', params).then((res) => {
  1566. if (res.success) {
  1567. this.spinning = false
  1568. this.trackUrlList = res.result.records
  1569. } else {
  1570. this.spinning = false
  1571. this.$message.error(res.message)
  1572. }
  1573. })
  1574. },
  1575. ...mapGetters(['nickname', 'avatar', 'userInfo']),
  1576. changeTrackUrlName() {
  1577. var params = {}
  1578. params.accountId = localStorage.getItem('campaignAccountId')
  1579. params.userId = this.userInfo().id
  1580. params.trackName = this.trackUrlName
  1581. getAction('/kuaishou/kuaiShouTrackUrlCollection/checkTrackName', params).then((res) => {
  1582. this.showTrackUrlNameElse = res.result
  1583. })
  1584. },
  1585. clickTrackUrlOk() {
  1586. var params = {}
  1587. params.accountId = localStorage.getItem('campaignAccountId')
  1588. params.userId = this.userInfo().id
  1589. params.trackName = this.trackUrlName
  1590. params.trackType = this.clickTrackUrlShowType
  1591. params.trackUrl =
  1592. this.clickTrackUrlShowType == '1' ? this.getData('clickTrackUrl') : this.getData('actionbarClickUrl')
  1593. postAction('/kuaishou/kuaiShouTrackUrlCollection/add', params).then((res) => {
  1594. if (res.success) {
  1595. this.clickTrackUrlShow = false
  1596. this.trackUrlName = ''
  1597. this.$message.success('添加成功')
  1598. } else {
  1599. this.$message.error(res.message)
  1600. }
  1601. })
  1602. },
  1603. deleteData(index, item) {
  1604. this.videoList.splice(index, 1)
  1605. var deleteIndex = this.checkVideo.findIndex((c) => c == item.photoId)
  1606. this.checkVideo.splice(deleteIndex, 1)
  1607. for (let i = 0; i < this.checkVideoAll.length; i++) {
  1608. for (let j = 0; j < this.checkVideoAll[i].length; j++) {
  1609. if (this.checkVideoAll[i][j] == item.photoId) {
  1610. this.checkVideoAll[i] = this.checkVideo
  1611. }
  1612. }
  1613. }
  1614. for (let i = 0; i < this.checkVideoWai.length; i++) {
  1615. for (let j = 0; j < this.checkVideoWai[i].length; j++) {
  1616. if (this.checkVideoWai[i][j] == item.photoId) {
  1617. this.checkVideoWai[i] = this.checkVideo
  1618. }
  1619. }
  1620. }
  1621. this.sumContent = this.checkVideo.length
  1622. // var deleteIndexAll = this.checkVideoAll.findIndex((c) => c == item.photoId)
  1623. // this.checkVideoAll.splice(deleteIndexAll, 1)
  1624. },
  1625. setVideUrl(photoId) {
  1626. this.videoList = []
  1627. getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
  1628. if (res.success) {
  1629. this.videoList.push({ url: res.result.url, photoId: photoId, coverUrl: res.result.coverUrl })
  1630. } else {
  1631. }
  1632. })
  1633. },
  1634. changeData(data) {
  1635. if (data.length > 1 && data.findIndex((item) => item == 1) == 0) {
  1636. data.splice(
  1637. data.findIndex((item) => item == 1),
  1638. 1
  1639. )
  1640. } else if (data.length > 1 && data.findIndex((item) => item == 1) == data.length - 1) {
  1641. data.splice(0, data.length - 1)
  1642. } else if (data.length == 0) {
  1643. data.push(1)
  1644. }
  1645. },
  1646. selectAllVideo() {
  1647. this.checkVideo = this.dataSource.map((item) => {
  1648. return item.photoId
  1649. })
  1650. if (this.active == 0) {
  1651. for (let i = 0; i < this.ipagination.current; i++) {
  1652. this.checkVideoAll.push([])
  1653. }
  1654. this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
  1655. } else if (this.active == 1) {
  1656. for (let i = 0; i < this.ipagination.current; i++) {
  1657. this.checkVideoWai.push([])
  1658. }
  1659. this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
  1660. }
  1661. var sum = 0
  1662. for (let i = 0; i < this.checkVideoAll.length; i++) {
  1663. sum += this.checkVideoAll[i].length
  1664. }
  1665. for (let i = 0; i < this.checkVideoWai.length; i++) {
  1666. sum += this.checkVideoWai[i].length
  1667. }
  1668. this.sumContent = sum
  1669. if (this.getData('createType') == '0') {
  1670. if (sum > this.getData('createCount')) {
  1671. this.$message.error('最多选择' + this.getData('createCount') + '个素材')
  1672. this.checkVideo = []
  1673. this.sumContent = this.sumContent - 5
  1674. if (this.active == 0) {
  1675. this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
  1676. } else if (this.active == 1) {
  1677. this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
  1678. }
  1679. }
  1680. } else {
  1681. if (sum > this.getData('createCount') * 15) {
  1682. this.$message.error('最多选择' + this.getData('createCount') * 15 + '个素材')
  1683. this.checkVideo = []
  1684. this.sumContent = this.sumContent - 15
  1685. if (this.active == 0) {
  1686. this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
  1687. } else if (this.active == 1) {
  1688. this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
  1689. }
  1690. }
  1691. }
  1692. },
  1693. setData(data) {
  1694. if (this.active == 0) {
  1695. for (let i = 0; i < this.ipagination.current; i++) {
  1696. this.checkVideoAll.push([])
  1697. }
  1698. this.checkVideoAll[this.ipagination.current - 1] = data
  1699. } else if (this.active == 1) {
  1700. for (let i = 0; i < this.ipagination.current; i++) {
  1701. this.checkVideoWai.push([])
  1702. }
  1703. this.checkVideoWai[this.ipagination.current - 1] = data
  1704. }
  1705. var sum = 0
  1706. for (let i = 0; i < this.checkVideoAll.length; i++) {
  1707. sum += this.checkVideoAll[i].length
  1708. }
  1709. for (let i = 0; i < this.checkVideoWai.length; i++) {
  1710. sum += this.checkVideoWai[i].length
  1711. }
  1712. this.sumContent = sum
  1713. if (this.getData('createType') == '0') {
  1714. if (sum > this.getData('createCount')) {
  1715. this.$message.error('最多选择' + this.getData('createCount') + '个素材')
  1716. this.checkVideo.pop()
  1717. this.sumContent--
  1718. if (this.active == 0) {
  1719. this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
  1720. } else if (this.active == 1) {
  1721. this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
  1722. }
  1723. }
  1724. } else {
  1725. if (sum > this.getData('createCount') * 15) {
  1726. this.$message.error('最多选择' + this.getData('createCount') * 15 + '个素材')
  1727. this.checkVideo.pop()
  1728. this.sumContent--
  1729. if (this.active == 0) {
  1730. this.checkVideoAll[this.ipagination.current - 1] = this.checkVideo
  1731. } else if (this.active == 1) {
  1732. this.checkVideoWai[this.ipagination.current - 1] = this.checkVideo
  1733. }
  1734. }
  1735. }
  1736. },
  1737. getVideoList() {
  1738. this.orderBy = 'time'
  1739. this.visibleMatemal = true
  1740. if (this.checkVideo.length > 0) {
  1741. } else {
  1742. this.showVideo = false
  1743. this.checkVideo = []
  1744. }
  1745. this.active = 0
  1746. this.time = []
  1747. this.channelType = 0
  1748. this.creativeMaterialType = this.getData('creativeMaterialType')
  1749. },
  1750. getDataSource(page, pageSize) {
  1751. if (this.active == 0) {
  1752. this.checkVideo = this.checkVideoAll[page - 1]
  1753. } else if (this.active == 1) {
  1754. this.checkVideo = this.checkVideoWai[page - 1]
  1755. }
  1756. this.ipagination.current = page
  1757. var params = {}
  1758. params.accountId = localStorage.getItem('campaignAccountId')
  1759. params.materialType = this.creativeMaterialType
  1760. params.pageSize = this.ipagination.pageSize
  1761. params.pageNo = page
  1762. params.channelType = this.channelType
  1763. params.status = 0
  1764. params.orderBy = this.orderBy
  1765. if (this.time.length > 0) {
  1766. // params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
  1767. // params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  1768. params.startDate = moment(this.time[0]).format('YYYY-MM-DD') + ' 00:00:00'
  1769. params.endDate = moment(this.time[1]).format('YYYY-MM-DD') + ' 23:59:59'
  1770. }
  1771. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  1772. },
  1773. cancelAll() {
  1774. // this.checkVideoAll = []
  1775. // this.checkVideoWei = []
  1776. },
  1777. handleOkShow() {
  1778. // this.checkVideoAll = [...new Set(this.checkVideoAll)]
  1779. var data = tqFun(this.checkVideoAll).concat(tqFun(this.checkVideoWai))
  1780. this.checkVideo = data
  1781. // console.log(this.checkVideoAll, this.checkVideo)
  1782. for (let i = 0; i < this.checkVideo.length; i++) {
  1783. this.setVideUrl(this.checkVideo[i])
  1784. if (i == this.checkVideo.length - 1) {
  1785. this.showVideo = true
  1786. this.visibleMatemal = false
  1787. }
  1788. }
  1789. },
  1790. callback(key) {
  1791. this.channelType = key
  1792. this.checkVideo = []
  1793. this.ipagination.current = 1
  1794. this.time = []
  1795. if (key == 0) {
  1796. this.checkVideo = this.checkVideoAll[this.ipagination.current - 1]
  1797. } else if (key == 1) {
  1798. this.checkVideo = this.checkVideoWai[this.ipagination.current - 1]
  1799. }
  1800. },
  1801. changeType() {
  1802. this.$nextTick(() => {
  1803. if (this.getData('creativeMaterialType') == '1') {
  1804. this.form.setFieldsValue({
  1805. name: '自定义创意_竖版视频',
  1806. })
  1807. } else {
  1808. this.form.setFieldsValue({
  1809. name: '自定义创意_横版视频',
  1810. })
  1811. }
  1812. })
  1813. },
  1814. lookTemplate(accountId, templateId) {
  1815. this.$refs.templateModal.handleOk(localStorage.getItem('campaignAccountId'), templateId, 'look')
  1816. },
  1817. addTemplate(accountId) {
  1818. this.$refs.templateModal.create(localStorage.getItem('campaignAccountId'), 'add')
  1819. },
  1820. getTemplate(accountId) {
  1821. var data = null
  1822. if (accountId) {
  1823. data = accountId
  1824. } else {
  1825. this.templateLoading = true
  1826. data = localStorage.getItem('campaignAccountId')
  1827. }
  1828. getAction('/batch/kuaishouTemplate/getTemplateByAccountId', {
  1829. accountId: data,
  1830. }).then((res) => {
  1831. if (res.success) {
  1832. this.getTemplateList(data)
  1833. }
  1834. })
  1835. },
  1836. getTemplateList(accountId) {
  1837. this.templateList = []
  1838. getAction('/batch/kuaishouTemplate/list', {
  1839. accountId: accountId,
  1840. pageSize: 1000,
  1841. pageNo: 1,
  1842. }).then((res) => {
  1843. if (res.success) {
  1844. this.templateList = res.result.records.map((item, index) => {
  1845. return {
  1846. ...item,
  1847. key: index,
  1848. }
  1849. })
  1850. this.templateLoading = false
  1851. } else {
  1852. this.templateLoading = false
  1853. }
  1854. })
  1855. },
  1856. showConvert() {
  1857. this.convertChange()
  1858. if (this.campaignType == 2) {
  1859. if (this.getData('appId')) {
  1860. this.convert = true
  1861. if (this.getPlatForm(this.getData('appId')) == 1 || this.getPlatForm(this.getData('appId')) == 2) {
  1862. this.convertType = '3'
  1863. } else {
  1864. this.convertType = '7'
  1865. }
  1866. } else {
  1867. this.$message.error('请选择应用')
  1868. }
  1869. } else {
  1870. this.convert = true
  1871. this.convertType = '1'
  1872. }
  1873. this.getConvertList()
  1874. },
  1875. convertChange() {
  1876. this.convertId = ''
  1877. },
  1878. getConvertList() {
  1879. var params = {}
  1880. params.accountId = localStorage.getItem('campaignAccountId')
  1881. params.type = this.convertType
  1882. getAction('/kuaishou/batch/getConvertList', params).then((res) => {
  1883. if (res.success) {
  1884. this.convertList = res.result.map((item) => {
  1885. return {
  1886. ...item,
  1887. convert_id: item.convert_id + '',
  1888. }
  1889. })
  1890. }
  1891. })
  1892. },
  1893. getCheck(e) {
  1894. this.checkedTrue = e.target.checked
  1895. },
  1896. addGroup() {
  1897. this.allForm.group.push({
  1898. bidType: 10,
  1899. // bid: '',
  1900. // cpaBid: '',
  1901. showTipCheck: false,
  1902. deepConversionBidCheck: false,
  1903. // unitName: '',
  1904. unitNameCheck: false,
  1905. deepConversionType: '',
  1906. deepConversionBid: '',
  1907. ocpxActionType: this.campaignType == '2' && this.allForm.groupTypeData.isActivate == '1' ? 180 : 2,
  1908. })
  1909. },
  1910. resData(index) {
  1911. // this.allForm.group[index].bid = ''
  1912. // this.allForm.group[index].cpaBid = ''
  1913. this.allForm.group[index].showTipCheck = false
  1914. this.allForm.group[index].deepConversionBidCheck = false
  1915. this.allForm.group[index].deepConversionType = ''
  1916. this.allForm.group[index].deepConversionBid = ''
  1917. this.form.setFieldsValue({
  1918. bid: undefined,
  1919. })
  1920. this.form.setFieldsValue({
  1921. cpaBid: undefined,
  1922. })
  1923. },
  1924. removeGroup(index) {
  1925. this.allForm.group.splice(index, 1)
  1926. },
  1927. deep_conversion_bidTip(index) {
  1928. if (
  1929. this.allForm.group[index].deepConversionBid < this.getData('cpaBid') ||
  1930. this.allForm.group[index].deepConversionBid > 3000
  1931. ) {
  1932. this.allForm.group[index].deepConversionBidCheck = true
  1933. } else {
  1934. this.allForm.group[index].deepConversionBidCheck = false
  1935. }
  1936. },
  1937. checkGroup(e, index) {
  1938. if (e.target.value != '') {
  1939. getAction('/kuaishou/batch/checkUnitName', {
  1940. campaignId: localStorage.getItem('campaignList'),
  1941. unitName: e.target.value,
  1942. }).then((res) => {
  1943. if (res.success) {
  1944. this.allForm.group[index].unitNameCheck = !res.result
  1945. } else {
  1946. this.allForm.group[index].unitNameCheck = false
  1947. }
  1948. })
  1949. }
  1950. },
  1951. showTip(index) {
  1952. if (this.allForm.group[index].bidType == 1) {
  1953. if (this.getData('bid') < 0.2 || this.getData('bid') > this.maxBid) {
  1954. this.allForm.group[index].showTipCheck = true
  1955. } else {
  1956. this.allForm.group[index].showTipCheck = false
  1957. }
  1958. } else {
  1959. if (this.getData('cpaBid') < 1 || this.getData('cpaBid') > this.maxBid) {
  1960. this.allForm.group[index].showTipCheck = true
  1961. } else {
  1962. this.allForm.group[index].showTipCheck = false
  1963. }
  1964. }
  1965. },
  1966. getScheduleTime(item) {
  1967. this.allForm.scheduleTimeData = item
  1968. },
  1969. setTime(e) {
  1970. if (e.target.value == '2') {
  1971. this.timeRange[0] = moment().startOf('day')
  1972. this.timeRange[1] = moment().add(1, 'months')
  1973. }
  1974. },
  1975. setTimeAll(e) {
  1976. if (e.target.value == '2') {
  1977. this.$nextTick(() => {
  1978. this.$refs.selectCheck.init()
  1979. })
  1980. } else {
  1981. }
  1982. },
  1983. getData(className) {
  1984. return this.form.getFieldValue(className)
  1985. },
  1986. bidCheck(rule, value, callback) {
  1987. if (value < 0.2 || value > this.maxBid) {
  1988. callback('不得低于0.2元,不得高于项目最高出价' + this.maxBid + '元')
  1989. } else {
  1990. callback()
  1991. }
  1992. },
  1993. cpaBidCheck(rule, value, callback) {
  1994. if (value < 1 || value > this.maxBid) {
  1995. callback('不得低于1元,不得高于项目最高出价' + this.maxBid + '元')
  1996. } else {
  1997. callback()
  1998. }
  1999. },
  2000. handleConfirmValue(rule, value, callback) {
  2001. if (value != '' && value != undefined) {
  2002. getAction('/kuaishou/batch/checkUnitName', {
  2003. campaignId: localStorage.getItem('campaignList'),
  2004. unitName: value + '_0',
  2005. }).then((res) => {
  2006. if (res.success) {
  2007. if (!res.result) {
  2008. callback('广告组名称重复')
  2009. } else {
  2010. callback()
  2011. }
  2012. } else {
  2013. callback()
  2014. }
  2015. })
  2016. } else {
  2017. callback()
  2018. }
  2019. },
  2020. budgetValue(rule, value, callback) {
  2021. if (value < 100 || value > 100000000) {
  2022. callback('不小于100,不超过100000000,仅支持输入自然数')
  2023. }
  2024. callback()
  2025. },
  2026. handleConfirmBid(rule, value, callback) {
  2027. if (this.bid == 0 || this.bid <= 0.2 || this.bid >= 100) {
  2028. callback('不得低于0.2元,不得高于100元')
  2029. }
  2030. callback()
  2031. },
  2032. handleConfirmCpaBid(rule, value, callback) {
  2033. if (this.ocpxActionType == '2' && (this.cpaBid == 0 || this.cpaBid <= 1 || this.cpaBid >= 3000)) {
  2034. callback('金额不得低于1元,不得高于3000元')
  2035. }
  2036. if (this.ocpxActionType == '180' && (this.cpaBid == 0 || this.cpaBid <= 5 || this.cpaBid >= 3000)) {
  2037. callback('金额不得低于5元,不得高于3000元')
  2038. }
  2039. callback()
  2040. },
  2041. onSelectChange(selectedRowKeys, selectionRows) {
  2042. this.selectedRowKeys = selectedRowKeys
  2043. this.selectedRowKeysValue = selectionRows.map((item) => {
  2044. return {
  2045. orientationId: item.orientationId,
  2046. orientationName: item.orientationName,
  2047. }
  2048. })
  2049. },
  2050. getCheckboxProps(record) {
  2051. return {
  2052. props: {
  2053. disabled: this.selectedRowKeysValueNo.some((item) => item.orientationId === record.orientationId),
  2054. },
  2055. }
  2056. },
  2057. onSelectChangeNo(selectedRowKeys, selectionRows) {
  2058. this.selectedRowKeysNo = selectedRowKeys
  2059. this.selectedRowKeysValueNo = selectionRows.map((item) => {
  2060. return {
  2061. orientationId: item.orientationId,
  2062. orientationName: item.orientationName,
  2063. }
  2064. })
  2065. },
  2066. getCheckboxPropsNo(record) {
  2067. return {
  2068. props: {
  2069. disabled: this.selectedRowKeysValue.some((item) => item.orientationId === record.orientationId),
  2070. },
  2071. }
  2072. },
  2073. okSelect() {
  2074. this.keyValue = ''
  2075. this.topMiddle = false
  2076. for (let i = 0; i < this.selectedRowKeysValue.length; i++) {
  2077. this.keyValue += this.selectedRowKeysValue[i].orientationName + ' '
  2078. }
  2079. },
  2080. okSelectNo() {
  2081. this.keyValueNo = ''
  2082. this.topMiddleNo = false
  2083. for (let i = 0; i < this.selectedRowKeysValueNo.length; i++) {
  2084. this.keyValueNo += this.selectedRowKeysValueNo[i].orientationName + ' '
  2085. }
  2086. },
  2087. radioChange() {
  2088. this.selectedRowKeys = []
  2089. this.selectedRowKeysValue = []
  2090. this.selectedRowKeysNo = []
  2091. this.selectedRowKeysValueNo = []
  2092. this.keyValue = ''
  2093. this.keyValueNo = ''
  2094. },
  2095. addApplication() {
  2096. this.tongbuLoading = true
  2097. // this.$refs.application.showApplication()
  2098. getAction('/kuaishou/batch/syncAppList', {
  2099. accountId: localStorage.getItem('campaignAccountId'),
  2100. }).then((res) => {
  2101. if (res.success) {
  2102. this.tongbuLoading = false
  2103. this.$message.success(res.message)
  2104. this.getAppList()
  2105. } else {
  2106. this.tongbuLoading = false
  2107. this.$message.error(res.message)
  2108. }
  2109. })
  2110. },
  2111. handleOk() {
  2112. var that = this
  2113. this.$bus.$emit('remove', '/creat/creatUnit')
  2114. this.$router.replace({
  2115. path: '/batchCreation/campaignList',
  2116. })
  2117. },
  2118. handleCancel(e) {
  2119. this.visible = false
  2120. },
  2121. handleSubmit(e) {
  2122. e.preventDefault()
  2123. if (
  2124. this.checkVideo.length <
  2125. (this.getData('createType') == '0' ? this.getData('createCount') : this.getData('createCount') * 15)
  2126. ) {
  2127. // this.$message.error('选择的素材不能小于创建条数')
  2128. this.getData('createType') == '0'
  2129. ? this.$message.error('选择的素材不能小于创建条数')
  2130. : this.$message.error('选择的素材不能小于创建条数*15')
  2131. } else {
  2132. this.form.validateFieldsAndScroll((err, values) => {
  2133. if (!err) {
  2134. this.loading = true
  2135. var groupArr = this.allForm.group.map((item) => {
  2136. return {
  2137. ...item,
  2138. deepConversionBid: item.deepConversionBid != '' ? item.deepConversionBid * 1000 : '',
  2139. ocpxActionType: item.ocpxActionType,
  2140. bidType: item.bidType == 1 ? 2 : 10,
  2141. }
  2142. })
  2143. var json = {
  2144. ...values,
  2145. cpaBid: values.cpaBid && values.cpaBid != '' ? values.cpaBid * 1000 : null,
  2146. bid: values.bid && values.bid != '' ? values.bid * 1000 : null,
  2147. convertId: this.convertId ? this.convertId.key : null,
  2148. dayBudget: values.dayBudget * 1000,
  2149. photoArr: this.checkVideo,
  2150. creativeCategory: values.creativeCategory
  2151. ? values.creativeCategory[values.creativeCategory.length - 1]
  2152. : null,
  2153. unitType: '4',
  2154. }
  2155. var params = {
  2156. userId: this.userInfo().id,
  2157. ...json,
  2158. ...groupArr[0],
  2159. accountId: localStorage.getItem('campaignAccountId'),
  2160. campaignId: localStorage.getItem('campaignList'),
  2161. beginTime: moment(this.timeRange[0]).format('YYYY-MM-DD'),
  2162. endTime: this.allForm.time == '2' ? moment(this.timeRange[1]).format('YYYY-MM-DD') : '',
  2163. appStore: values.useAppMarket == true ? this.allForm.appStore : null,
  2164. useAppMarket: values.useAppMarket ? 1 : 0,
  2165. sceneId: this.allForm.allianceAccount == '1' ? this.allForm.sceneId : [5],
  2166. scheduleTime:
  2167. this.allForm.scheduleTime == '2'
  2168. ? this.allForm.scheduleTimeData
  2169. : '000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000',
  2170. }
  2171. postAction('/batch/kuaiShouGroupTemplate/submitUnitTask', params).then((res) => {
  2172. this.loading = false
  2173. if (res.success) {
  2174. this.visible = true
  2175. this.allForm.fail = res.result.code
  2176. this.allForm.success = res.result.size
  2177. } else {
  2178. this.$message.error(res.message)
  2179. }
  2180. })
  2181. }
  2182. })
  2183. }
  2184. },
  2185. onChange(value) {
  2186. // console.log(value)
  2187. },
  2188. handleChange(value) {
  2189. // this.$refs.population.getAppList(value)
  2190. this.getSiteList(value)
  2191. },
  2192. handleChangeMould(value) {
  2193. if (value) {
  2194. this.populationData = JSON.parse(
  2195. this.dataList.filter((item) => {
  2196. return item.id == value
  2197. })[0].templateContent
  2198. )
  2199. } else {
  2200. this.populationData = {}
  2201. }
  2202. },
  2203. getPlatForm(appId) {
  2204. if (appId) {
  2205. var data = this.appList.filter((item) => {
  2206. return item.appId == appId
  2207. })
  2208. return data[0].platform
  2209. }
  2210. },
  2211. handleBlur() {
  2212. // console.log('blur')
  2213. },
  2214. handleFocus() {
  2215. // console.log('focus')
  2216. },
  2217. getPageSize(data) {
  2218. if (data.target.value == '0') {
  2219. this.ipagination.pageSize = 5
  2220. } else if (data.target.value == '1') {
  2221. this.ipagination.pageSize = 15
  2222. }
  2223. this.videoList = []
  2224. this.checkVideo = []
  2225. this.checkVideoAll = []
  2226. this.checkVideoWai = []
  2227. this.sumContent = 0
  2228. },
  2229. filterOption(input, option) {
  2230. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  2231. },
  2232. prevStep() {
  2233. this.$emit('prevStep', this.campaignId ? this.campaignId : localStorage.getItem('campaignList'))
  2234. },
  2235. getMould() {
  2236. let params = {}
  2237. params.accountId = localStorage.getItem('campaignAccountId')
  2238. getAction('/kuaishou/batch/getDirectionalTemplate', params).then((res) => {
  2239. // console.log(res)
  2240. if (res.success) {
  2241. this.dataList = res.result.map((item, index) => {
  2242. return {
  2243. ...item,
  2244. key: index,
  2245. }
  2246. })
  2247. }
  2248. })
  2249. },
  2250. getAppList() {
  2251. let params = {}
  2252. params.accountId = localStorage.getItem('campaignAccountId')
  2253. getAction('/kuaishou/batch/getAppList', params).then((res) => {
  2254. if (res.success) {
  2255. this.appList = res.result.map((item, index) => {
  2256. return {
  2257. ...item,
  2258. key: index,
  2259. }
  2260. })
  2261. }
  2262. })
  2263. },
  2264. getCampaignList() {
  2265. var params = {}
  2266. params.accountId = localStorage.getItem('campaignAccountId')
  2267. params.campaignId = this.campaignId ? this.campaignId : localStorage.getItem('campaignList')
  2268. getAction('/kuaishou/batch/getCampaignList', params).then((res) => {
  2269. if (res.success) {
  2270. this.campaignType = res.result.records[0].campaignType
  2271. // console.log(this.campaignType)
  2272. }
  2273. })
  2274. },
  2275. getData(className) {
  2276. return this.form.getFieldValue(className)
  2277. },
  2278. showVideoList(url, params) {
  2279. this.dataSource = []
  2280. this.loadingVideoList = true
  2281. getAction(url, params).then((res) => {
  2282. // console.log(res)
  2283. if (res.success) {
  2284. this.dataSource = res.result.list
  2285. this.ipagination.total = res.result.total
  2286. this.loadingVideoList = false
  2287. } else {
  2288. this.loadingVideoList = false
  2289. }
  2290. })
  2291. },
  2292. getSiteList(appId) {
  2293. getAction('/kuaishou/batch/getPageList', {
  2294. accountId: localStorage.getItem('campaignAccountId'),
  2295. appId: appId,
  2296. viewComp: 7,
  2297. }).then((res) => {
  2298. if (res.success) {
  2299. this.siteList = res.result
  2300. if (this.siteList.length > 0) {
  2301. this.showSite = true
  2302. }
  2303. } else {
  2304. this.showSite = false
  2305. }
  2306. })
  2307. },
  2308. },
  2309. watch: {
  2310. timeSeries(val) {
  2311. // console.log(val)
  2312. },
  2313. checkVideo(n, o) {},
  2314. checkVideoAll(n, o) {
  2315. // this.checkVideoAll = [...new Set(n)]
  2316. // console.log(n,o)
  2317. // this.checkVideo = [...new Set(n)]
  2318. },
  2319. time(n, o) {
  2320. if (n.length > 0) {
  2321. var params = {}
  2322. params.accountId = localStorage.getItem('campaignAccountId')
  2323. params.materialType = this.creativeMaterialType
  2324. params.pageSize = this.ipagination.pageSize
  2325. params.pageNo = 1
  2326. params.status = 0
  2327. params.channelType = this.channelType
  2328. params.startDate = moment(n[0]).format('YYYY-MM-DD') + ' 00:00:00'
  2329. params.endDate = moment(n[1]).format('YYYY-MM-DD') + ' 23:59:59'
  2330. params.orderBy = this.orderBy
  2331. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  2332. } else {
  2333. var params = {}
  2334. params.accountId = localStorage.getItem('campaignAccountId')
  2335. params.materialType = this.creativeMaterialType
  2336. params.pageSize = this.ipagination.pageSize
  2337. params.pageNo = 1
  2338. params.status = 0
  2339. params.channelType = this.channelType
  2340. params.orderBy = this.orderBy
  2341. this.ipagination.current = 1
  2342. this.showVideoList('/kuaishou/kuaiShouVideoGet/getVideoList', params)
  2343. }
  2344. },
  2345. },
  2346. mounted: function () {
  2347. this.step = localStorage.getItem('step')
  2348. this.getTemplate(localStorage.getItem('campaignAccountId'))
  2349. this.getAppList()
  2350. // this.getCampaignList()
  2351. this.campaignType = localStorage.getItem('campaignType')
  2352. this.getMould()
  2353. getAction('/kuaishou/batch/getIsActivate', {
  2354. accountId: localStorage.getItem('campaignAccountId'),
  2355. }).then((res) => {
  2356. if (res.success) {
  2357. this.allForm.groupTypeData = res.result
  2358. this.addGroup()
  2359. }
  2360. })
  2361. getAction('/kuaishou/batch/getWhiteList', {
  2362. accountId: localStorage.getItem('campaignAccountId'),
  2363. }).then((res) => {
  2364. if (res.success) {
  2365. // console.log(res)
  2366. if (res.result) {
  2367. this.creativeCategorySwitch = res.result.creative_category_switch == 1 ? true : false
  2368. this.allianceAccount = res.result.alliance_account == 1 ? true : false
  2369. this.actionbarClickUrlSwitch = res.result.actionbar_click_url_switch == 1 ? true : false
  2370. // if (res.result.alliance_account == 1) {
  2371. // this.allianceAccount = true
  2372. // } else {
  2373. // this.allianceAccount = false
  2374. // }
  2375. } else {
  2376. this.allianceAccount = false
  2377. this.creativeCategorySwitch = false
  2378. this.actionbarClickUrlSwitch = false
  2379. }
  2380. }
  2381. })
  2382. getAction('/kuaishou/batch/getProjectMaxBid', {
  2383. accountId: localStorage.getItem('campaignAccountId'),
  2384. }).then((res) => {
  2385. if (res.success) {
  2386. this.maxBid = res.result / 1000
  2387. }
  2388. })
  2389. getAction('/kuaishou/batch/getActionBarTextByType', {
  2390. type: localStorage.getItem('campaignType'),
  2391. }).then((res) => {
  2392. if (res.success) {
  2393. this.actionBarTextList = res.result
  2394. }
  2395. })
  2396. getAction('/kuaishou/batch/getCreativeCategory', {
  2397. accountId: localStorage.getItem('campaignAccountId'),
  2398. }).then((res) => {
  2399. if (res.success) {
  2400. // console.log(res)
  2401. this.createOptions = res.result
  2402. }
  2403. })
  2404. getAction('/batch/kuaiShouGroupTemplate/getApiCreateCount', {
  2405. accountId: localStorage.getItem('campaignAccountId'),
  2406. }).then((res) => {
  2407. this.createCount = res.result
  2408. })
  2409. },
  2410. }
  2411. </script>
  2412. <style type="text/css" scoped lang="scss">
  2413. .width-video {
  2414. width: calc(20% - 10px);
  2415. margin-right: 10px;
  2416. margin-bottom: 10px;
  2417. }
  2418. .chouzhen {
  2419. border-style: solid;
  2420. border-width: 1px;
  2421. border-color: #e4e4e4;
  2422. width: calc(20% - 10px);
  2423. padding: 10px;
  2424. margin-right: 10px;
  2425. margin-bottom: 10px;
  2426. display: flex;
  2427. align-items: center;
  2428. background: #fff;
  2429. position: relative;
  2430. z-index: 99;
  2431. float: left;
  2432. }
  2433. li.chouzhen.first:before {
  2434. font-size: 12px;
  2435. content: '首帧';
  2436. position: absolute;
  2437. top: 7px;
  2438. left: 5px;
  2439. width: 36px;
  2440. height: 20px;
  2441. color: rgb(255, 255, 255);
  2442. line-height: 20px;
  2443. text-align: center;
  2444. background: rgba(0, 0, 0, 0.5);
  2445. border-radius: 2px;
  2446. z-index: 1000;
  2447. }
  2448. .actor-photo-list {
  2449. display: flex;
  2450. padding-left: 0;
  2451. li {
  2452. width: 25%;
  2453. margin: 10px;
  2454. position: relative;
  2455. height: 250px;
  2456. border: 1px solid #f2f2f2;
  2457. list-style: none;
  2458. img,
  2459. video {
  2460. width: 100%;
  2461. margin-top: auto;
  2462. margin-bottom: auto;
  2463. top: 0;
  2464. bottom: 0;
  2465. position: absolute;
  2466. max-height: 250px;
  2467. }
  2468. }
  2469. }
  2470. .plug-timer-grid {
  2471. width: 100%;
  2472. }
  2473. .plug-timer-grid td,
  2474. .plug-timer-grid th {
  2475. border: 1px solid #97b4d1;
  2476. text-align: center;
  2477. /*cursor:pointer;*/
  2478. font-size: 10px;
  2479. line-height: 10px;
  2480. }
  2481. .Selected {
  2482. background-color: rgb(102, 162, 243);
  2483. opacity: 0.5;
  2484. }
  2485. .plug-timer-grid {
  2486. border-collapse: collapse;
  2487. z-index: 4;
  2488. }
  2489. .plug-timer-grid thead tr {
  2490. display: table-row;
  2491. vertical-align: inherit;
  2492. border-color: inherit;
  2493. }
  2494. .group-creat table td {
  2495. height: 20px;
  2496. max-width: 5px;
  2497. font-size: 12px;
  2498. text-align: center;
  2499. vertical-align: middle;
  2500. overflow: hidden;
  2501. transition: background 0.5s;
  2502. -webkit-transition: background 0.5s;
  2503. }
  2504. .plug-timer-grid tbody th {
  2505. width: 4%;
  2506. }
  2507. .plug-timer-grid tbody tr td {
  2508. width: 2%;
  2509. }
  2510. /*.clear{*/
  2511. /* margin:20px 0px 20px 0px;*/
  2512. /*}*/
  2513. </style>