creatUnit.vue 91 KB

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