Step3.vue 52 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423142414251426142714281429143014311432143314341435143614371438143914401441144214431444144514461447144814491450145114521453145414551456145714581459146014611462146314641465146614671468146914701471147214731474147514761477147814791480148114821483148414851486148714881489149014911492149314941495149614971498149915001501150215031504150515061507150815091510
  1. <style lang="scss">
  2. .chouzhen span {
  3. display: inline-block;
  4. }
  5. .check-video .ant-tabs-nav-container {
  6. text-align: center;
  7. font-size: 20px;
  8. }
  9. .step3-image {
  10. span {
  11. padding: 0
  12. }
  13. .ant-checkbox {
  14. position: absolute;
  15. top: 0;
  16. left: 0;
  17. z-index: 100;
  18. }
  19. }
  20. .step3-modal {
  21. .ant-checkbox {
  22. position: absolute;
  23. top: 0;
  24. right: 0;
  25. z-index: 100;
  26. }
  27. }
  28. </style>
  29. <style scoped lang="scss">
  30. .actor-photo-list {
  31. display: flex;
  32. padding-left: 0;
  33. li {
  34. width: 20%;
  35. margin: 10px;
  36. position: relative;
  37. height: 380px;
  38. border: 1px solid #f2f2f2;
  39. list-style: none;
  40. img,
  41. video {
  42. width: 100%;
  43. }
  44. }
  45. }
  46. .chouzhen {
  47. border-style: solid;
  48. border-width: 1px;
  49. border-color: #e4e4e4;
  50. width: calc(20% - 10px);
  51. padding: 10px;
  52. margin-right: 10px;
  53. margin-bottom: 10px;
  54. display: flex;
  55. align-items: center;
  56. background: #fff;
  57. position: relative;
  58. z-index: 99;
  59. float: left
  60. }
  61. li.chouzhen.first:before {
  62. font-size: 12px;
  63. content: "首帧";
  64. position: absolute;
  65. top: 7px;
  66. left: 5px;
  67. width: 36px;
  68. height: 20px;
  69. color: rgb(255, 255, 255);
  70. line-height: 20px;
  71. text-align: center;
  72. background: rgba(0, 0, 0, 0.5);
  73. border-radius: 2px;
  74. z-index: 1000;
  75. }
  76. .actor-photo-list {
  77. display: flex;
  78. padding-left: 0;
  79. li {
  80. width: 25%;
  81. margin: 10px;
  82. position: relative;
  83. height: 250px;
  84. border: 1px solid #f2f2f2;
  85. list-style: none;
  86. img,
  87. video {
  88. width: 100%;
  89. margin-top: auto;
  90. margin-bottom: auto;
  91. top: 0;
  92. bottom: 0;
  93. position: absolute;
  94. max-height: 250px;
  95. }
  96. }
  97. }
  98. </style>
  99. <template>
  100. <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="only-step3">
  101. <a-tabs style="width:50%;margin:0 auto" type="editable-card" hideAdd @edit="remove">
  102. <a-tab-pane v-for="(pane, bestIndex) in pans" :tab="pane.tab" :key="pane.key" v-model="pansKey" disabled
  103. :closable="pane.closable" class="shishishis">
  104. <a-form @submit="handleSubmit" :form="form" style="margin-top:20px" :hideRequiredMark="true">
  105. <a-form-item label="广告组名称" :labelCol="labelCol" :wrapperCol="wrapperCol">
  106. <a-input v-model="pane.tab" readonly></a-input>
  107. </a-form-item>
  108. <a-form-item label="素材类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
  109. <a-radio-group buttonStyle="solid" v-decorator="['creativeMaterialType', { initialValue: '1' }]">
  110. <a-radio-button value="1">竖版视频</a-radio-button>
  111. <a-radio-button value="2">横版视频</a-radio-button>
  112. </a-radio-group>
  113. </a-form-item>
  114. <a-form-item label="创意内容" :labelCol="labelCol">
  115. <a-layout>
  116. <a-layout-content style="padding:10px;">
  117. <a-row>
  118. <a-col :span="24" v-for="(item, index) of pane.list" :key="index">
  119. <a-card title :ref="item">
  120. <a-icon type="close" style="float:right;cursor: pointer;"
  121. @click="deleteCreative(bestIndex, index)" />
  122. <div style="clear:both"></div>
  123. <div class="dynamically_add_form_item">
  124. <a-form-item label="">
  125. <a @click="getVideoList('video', index, item, bestIndex)">选择视频</a>
  126. <a @click="uploadVideo(index,bestIndex)" style="margin-left:10px">上传视频</a>
  127. <br />
  128. <video :src="item.videoList.url" controls="controls" style="width:25%"
  129. v-if="item.videoList"></video>
  130. </a-form-item>
  131. <div class="downLoad" style="overflow:auto">
  132. <ul class="actor-photo-list step3-image"
  133. :style="{ width: item.imageUrlList.length>4?25 * item.imageUrlList.length + '%':'100%' }"
  134. v-if="item.imageUrlList.length > 0">
  135. <a-checkbox-group v-model="item.checkArrImage"
  136. style="width:100%; display: flex;padding-left: 0;" @change="onChangeCheckImage">
  137. <li v-for="(item, index) of item.imageUrlList" :key="index">
  138. <a-checkbox :value="item.code" style="height:100%;width:100%">
  139. <img class="video" :src="item.url" />
  140. </a-checkbox>
  141. </li>
  142. </a-checkbox-group>
  143. </ul>
  144. </div>
  145. <a-form-item label="">
  146. <a @click="getVideoList('image', index, item, bestIndex)">选择封面</a>
  147. <a @click="uploadImages(index,bestIndex)" style="margin-left:10px">上传封面</a>
  148. <a @click="showImages(index,bestIndex)" v-if="item.chouzhenShow"
  149. style="margin-left:10px">推荐封面</a>
  150. <br />
  151. <span v-for="(item,deleteIndex) of item.imageList" style="position:relative;">
  152. <img :src="item.url" style="width:18%;margin:1%;" :key="item.url" />
  153. <a-icon type="close-circle" @click="deleteData(index,bestIndex,deleteIndex)"
  154. style="position: absolute;right: 0px;" />
  155. </span>
  156. </a-form-item>
  157. <a-form-item label="广告语">
  158. <a @click="showTitle(index,bestIndex)">推荐广告语</a>
  159. <a-textarea class="rending" placeholder="请输入广告语" v-model.trim="item.description"
  160. :autosize="{ minRows: 2, maxRows: 6 }"></a-textarea>
  161. <a-tag v-for="(itemTag,indexTag) of tags" :key="indexTag"
  162. @click="getChange(item, itemTag, index)">{{itemTag.name}}</a-tag>
  163. </a-form-item>
  164. <a-form-item label="创意标题">
  165. <a-input v-model="item.name"></a-input>
  166. </a-form-item>
  167. </div>
  168. </a-card>
  169. </a-col>
  170. </a-row>
  171. <div :style="{ marginBottom: '16px' }">
  172. <a-button @click="addCreative(bestIndex)" :disabled="contentAll>=15||listCheck">
  173. 添加创意</a-button>
  174. </div>
  175. </a-layout-content>
  176. </a-layout>
  177. </a-form-item>
  178. <a-form-item label="行动号召" :labelCol="labelCol" :wrapperCol="wrapperCol">
  179. <a-select v-decorator="['actionBarText', { rules: [{ required: true, message: '行动号召按钮文案' }] }]" showSearch
  180. allowClear placeholder="选择行动号召按钮文案" optionFilterProp="children" :filterOption="filterOption">
  181. <a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.actionBarText">
  182. {{ appModel.actionBarText }}
  183. </a-select-option>
  184. </a-select>
  185. </a-form-item>
  186. <a-form-item label="下载详情" v-if="showSite" :labelCol="labelCol" :wrapperCol="wrapperCol">
  187. <a-select v-decorator="['siteId' ]" showSearch allowClear placeholder="选择应用下载详情页"
  188. optionFilterProp="children" :filterOption="filterOption">
  189. <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
  190. {{ appModel.name }}
  191. </a-select-option>
  192. </a-select>
  193. </a-form-item>
  194. <a-form-item label="监测链接" :labelCol="labelCol" :wrapperCol="wrapperCol">
  195. <a-input v-if="pane.bid_type == 6" v-decorator="[
  196. 'clickTrackUrl',
  197. {
  198. rules: [
  199. { message: '请输入第三方检测链接' },
  200. { validator: handleConfirmValue }
  201. ]
  202. }
  203. ]" placeholder="请输入第三方检测链接">
  204. </a-input>
  205. <a-input v-else v-decorator="[
  206. 'clickTrackUrl',
  207. {
  208. rules: [
  209. { message: '请输入第三方检测链接' }
  210. ]
  211. }
  212. ]" placeholder="请输入第三方检测链接">
  213. </a-input>
  214. </a-form-item>
  215. </a-form>
  216. </a-tab-pane>
  217. </a-tabs>
  218. <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
  219. <a-button type="primary" @click="handleSubmit" :loading="loading">提交</a-button>
  220. </a-form-item>
  221. <checkMatemal ref="check" @showVideo="showData"></checkMatemal>
  222. <a-modal :maskClosable="false" v-model="visible" title="广告创意创建情况">
  223. <div>
  224. 创建成功:{{ allForm.success.length }}条
  225. <div style="margin-top:20px">
  226. <p v-for="(item, index) of allForm.success" :key="index">
  227. <span>名称:{{ item.creativeName }}</span>
  228. </p>
  229. </div>
  230. <br />
  231. 创建失败:{{ allForm.fail.length }}条
  232. <div style="margin-top:20px">
  233. <p v-for="(item, index) of allForm.fail" :key="index">
  234. <span>名称:{{ item.creativeName }}</span><br />
  235. <span>错误信息:{{ item.failMessage }}</span>
  236. </p>
  237. </div>
  238. </div>
  239. <template slot="footer">
  240. <a-button key="back" @click="handleCancel">关闭</a-button>
  241. <a-button key="submit" type="primary" @click="handleOk">
  242. 返回列表
  243. </a-button>
  244. </template>
  245. </a-modal>
  246. <a-modal :maskClosable="false" title="封面上传" @cancel="closeImage" @afterClose="closeImage" v-model="addImageVisible">
  247. <template slot="footer">
  248. <a-button key="back" @click="closeImage">取消</a-button>
  249. <a-button key="submit" type="primary" @click="handleOkImage" :loading="loadingImage">
  250. 确定
  251. </a-button>
  252. </template>
  253. <a-form-item label="" class="add-image-material">
  254. <upload-to-ali style="width:100%" v-model="urlListImage.url" :customDomain="customDomain" :multiple="true"
  255. preview :region="region" :bucket="bucket" :accept="acceptImage" :max="15" :size="2048"
  256. :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret" :before-upload="fileWater" :dir="dirImg"
  257. @delete='deleteImage' @loaded="overUploadImage"></upload-to-ali>
  258. <span v-if="material.filter(item => item == false).length > 0 && urlListImage.url.length > 0"
  259. style="color:red">上传素材的尺寸不符,请修改(<span v-for="(item, index) of material" :key="index"
  260. v-show="!item">第{{ index + 1 }}张</span>出错)</span>
  261. <span v-else-if="urlListImage.url.length > 0 && material.filter(item => item == false).length == 0"
  262. style="color:green">上传成功</span>
  263. </a-form-item>
  264. </a-modal>
  265. <a-modal :maskClosable="false" title="视频上传" @cancel="closeVideo" @afterClose="closeVideo" v-model="addVideoVisible">
  266. <template slot="footer">
  267. <a-button key="back" @click="closeVideo">取消</a-button>
  268. <a-button key="submit" type="primary" @click="handleOkVideo" :loading="loadingVideo">
  269. 确定
  270. </a-button>
  271. </template>
  272. <a-form-item label="" class="add-image-material">
  273. <upload-to-ali v-model="urlList.url" :customDomain="customDomain" preview :region="region" :bucket="bucket"
  274. :accept="acceptVideo" :max="10" :size="1024000" :accessKeyId="accessKeyId" :accessKeySecret="accessKeySecret"
  275. :before-upload="file" :dir="dirVideo" @loaded="overUpload">
  276. </upload-to-ali>
  277. <span v-if="messageTip" style="color:red">{{messageTip}}</span>
  278. </a-form-item>
  279. </a-modal>
  280. <a-modal :maskClosable="false" title="抽帧展示" v-model="chouzhen" width="60%">
  281. <template slot="footer">
  282. <a-button key="back" @click="chouzhen=false">关闭</a-button>
  283. <a-button key="submit" type="primary" @click="handleOkChouzhen">
  284. 确定
  285. </a-button>
  286. </template>
  287. <a-button type="primary" @click="onCheckAllChange">
  288. 全选
  289. </a-button>
  290. <!-- </a-checkbox> -->
  291. <ul v-if="chouzhenList.length>0" style="height:600px;overflow:auto;padding-left:0" class="step3-modal">
  292. <a-checkbox-group v-model="checkList" @change="onChange" style="width:100%;">
  293. <li v-for="(item,index) of chouzhenList" :key="index" class="chouzhen" style="height:355px"
  294. :class="{'first':index == 0}">
  295. <a-checkbox :value="item.signature"
  296. style="position:absolute;z-index: 100;width:100%;height:100%;right:0;top:0;float:right">
  297. <img :src="item.url" alt="" style="width:100%">
  298. </a-checkbox>
  299. </li>
  300. </a-checkbox-group>
  301. </ul>
  302. </a-modal>
  303. <a-modal :maskClosable="false" title="选择素材" v-model="visibleMatemal" @ok="handleOkShow" :width="1000">
  304. <a-tabs type="card" @change="callback" v-model="active" class="check-video">
  305. <a-tab-pane :tab="item.label" v-for="item of tab" :key="item.value">
  306. <a-range-picker name="buildTime" style="width: 400px;margin:10px 0" v-model="time" />
  307. <ul v-if="dataSource.length>0" style="overflow:auto;padding-left:0">
  308. <a-checkbox-group v-model="checkVideo" @change="onChangeVideo" style="width:100%">
  309. <li v-for="(item,index) of dataSource" :key="index" class="chouzhen" style="height:350px;">
  310. <!-- <video class="video" :src="item.url" controls="controls" style="width:100%">
  311. 您的浏览器不支持 video 标签。
  312. </video> -->
  313. <a-checkbox :value="item" style="width:100%;position:absolute;z-index: 100;right:0;top:0;">
  314. <img :src="item.coverUrl" alt="" style="width:100%;margin-bottom:10px">
  315. </a-checkbox>
  316. <a @click="matemalVideo(item,index)"
  317. style="position:absolute;z-index: 100;right:56px;bottom: 5px;">查看视频</a>
  318. </li>
  319. </a-checkbox-group>
  320. </ul>
  321. </a-tab-pane>
  322. </a-tabs>
  323. <!-- <ul class="actor-photo-list">
  324. <a-checkbox-group v-model="checkArr" style="width:100%; display: flex;padding-left: 0;"
  325. @change="onChangeCheck">
  326. <li v-for="(item, index) of dataSource" :key="index">
  327. <a-checkbox :value="item" style="position:absolute;z-index:100;padding-right:30px">
  328. </a-checkbox>
  329. </li>
  330. </a-checkbox-group>
  331. </ul> -->
  332. <div style="text-align:right">
  333. <a-pagination size="small" :showTotal="ipagination.showTotal" style="float:right" v-if="dataSource.length > 0"
  334. showQuickJumper :pageSize.sync="ipagination.pageSize" :total="ipagination.total" v-model="ipagination.current"
  335. @change="getDataSource" />
  336. </div>
  337. </a-modal>
  338. <a-modal title="查看视频" v-model="visibleVideo" :width="300" :footer="null">
  339. <video class="video" :src="videoUrlShow" controls="controls" style="width:100%">
  340. 您的浏览器不支持 video 标签。
  341. </video>
  342. </a-modal>
  343. <a-modal title="推荐标题" v-model="titleVisible" :width="1000" :footer="null">
  344. <a-row :gutter="10">
  345. <a-col :sm="10" style="margin-bottom: 20px;z-index: 10">
  346. <a-card class="search-box" style="min-height:500px">
  347. <div style="margin-bottom:30px">
  348. <span style="display:inline-block;width:80px">行业</span>
  349. <a-cascader style="margin-top: 1rem;width:300px" v-model="dataOne" :options="options"
  350. :showSearch="{ filter }" expandTrigger="hover" @change="onChangeTitle" placeholder="请选择行业">
  351. <a-icon type="smile" slot="suffixIcon" class="test" />
  352. </a-cascader>
  353. </div>
  354. <div style="margin-bottom:30px">
  355. <span style="display:inline-block;width:80px">关键词</span>
  356. <a-input placeholder="请输入关键词" v-model="value" style="width: 300px" />
  357. </div>
  358. <span style="display:inline-block;width:80px;float:left"></span>
  359. <a-button type="primary" @click="searchQuery" :disabled="value == ''">生成</a-button>
  360. </a-card>
  361. </a-col>
  362. <a-col :sm="14" style="margin-bottom: 20px;z-index: 10">
  363. <a-card class="search-box" style="over-flow:auto">
  364. <a-list size="large" bordered :dataSource="title">
  365. <a-list-item slot="renderItem" slot-scope="item">
  366. <a slot="actions" @click="okTitle(item)">选择</a>
  367. {{ item }}</a-list-item>
  368. </a-list>
  369. </a-card>
  370. </a-col>
  371. </a-row>
  372. </a-modal>
  373. </a-card>
  374. </template>
  375. <script>
  376. import {
  377. getAction,
  378. postAction
  379. } from '@/api/manage'
  380. import {
  381. mapGetters
  382. } from 'vuex'
  383. import UploadToAli from '@femessage/upload-to-ali'
  384. import moment from 'moment'
  385. import VuePreview from 'vue-preview'
  386. import jq from 'jquery'
  387. import {
  388. stopOtherVideo,
  389. closeAllVideoFun
  390. } from '@/utils/videoControl' // 停止除当前外的其他视频播放,及停止所有视频播放的方法
  391. import checkMatemal from './stepModule/checkMatemal'
  392. import BMF from 'browser-md5-file'
  393. let nowIndex = 0
  394. let bestIndex = 0
  395. let showRemove = false
  396. export default {
  397. name: 'BaseForm',
  398. components: {
  399. UploadToAli,
  400. VuePreview,
  401. checkMatemal
  402. },
  403. data() {
  404. return {
  405. showSite: true,
  406. titleVisible: false,
  407. options: [],
  408. data: [],
  409. value: '',
  410. dataOne: [],
  411. title: [],
  412. tags: [],
  413. visibleMatemal: false,
  414. visibleVideo: false,
  415. videoUrlShow: "",
  416. time: [],
  417. channelType: 0,
  418. checkVideo: [],
  419. dataSource: [],
  420. tab: [{
  421. value: 0,
  422. label: "内部"
  423. }, {
  424. value: 1,
  425. label: "外部"
  426. }],
  427. active: 0,
  428. ipagination: {
  429. current: 1,
  430. pageSize: 5,
  431. // pageSizeOptions: ['10', '20', '30'],
  432. showTotal: (total, range) => {
  433. return range[0] + '-' + range[1] + ' 共' + total + '条'
  434. },
  435. showQuickJumper: true,
  436. // showSizeChanger: true,
  437. total: 0,
  438. onChange: current => {
  439. // 切换分页时的回调,
  440. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  441. this.ipagination.current = current
  442. }
  443. },
  444. chouzhen: false,
  445. chouzhenList: [],
  446. checkList: [],
  447. indeterminate: true,
  448. checkAll: false,
  449. pans: [],
  450. pansKey: '',
  451. addImageVisible: false,
  452. addVideoVisible: false,
  453. loadingVideo: false,
  454. loadingImage: false,
  455. allForm: {
  456. videoList: '',
  457. imageList: [],
  458. fail: [],
  459. success: [],
  460. },
  461. form: this.$form.createForm(this),
  462. list: [],
  463. vertical: 'vertical',
  464. appList: [],
  465. siteList: [],
  466. labelCol: {
  467. lg: {
  468. span: 4
  469. },
  470. sm: {
  471. span: 6
  472. },
  473. xs: {
  474. span: 4
  475. },
  476. md: {
  477. span: 4
  478. }
  479. },
  480. wrapperCol: {
  481. lg: {
  482. span: 18
  483. },
  484. sm: {
  485. span: 18
  486. },
  487. xs: {
  488. span: 14
  489. },
  490. md: {
  491. span: 14
  492. }
  493. },
  494. visible: false,
  495. loading: false,
  496. imageUrlList: [],
  497. checkAllImage: false,
  498. checkArrImage: [],
  499. content: 0,
  500. urlListImage: {
  501. url: [],
  502. md5: []
  503. },
  504. urlList: {
  505. url: '',
  506. md5: "",
  507. photoId: ""
  508. },
  509. imageArrList: [],
  510. material: [],
  511. creativeCopywriter: '',
  512. customDomain: '',
  513. region: 'oss-cn-beijing',
  514. bucket: 'ctop-media',
  515. acceptVideo: 'video/mpeg,video/mp4',
  516. acceptImage: 'image/jpeg,image/jpg',
  517. accessKeyId: 'LTAIbNbqWzSOklQV',
  518. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  519. messageTip: null
  520. }
  521. },
  522. methods: {
  523. showTitle(index, bestIndex) {
  524. nowIndex = index
  525. bestIndex = bestIndex
  526. this.titleVisible = true;
  527. this.getHangye()
  528. },
  529. okTitle(item) {
  530. this.pans[bestIndex].list[nowIndex].description = item
  531. this.titleVisible = false;
  532. this.dataOne = []
  533. this.value = ""
  534. this.title = []
  535. },
  536. searchQuery() {
  537. // /ctop/creativeTitle/titleSuggestion
  538. console.log(this.value)
  539. getAction('/ctop/creativeTitle/titleSearch', {
  540. firstCategory: this.dataOne[0],
  541. secondCategory: this.dataOne[1],
  542. keywords: this.value
  543. }).then(res => {
  544. console.log(res)
  545. this.title = res.result ? res.result : []
  546. })
  547. // firstCategory,secondCategory,keywords
  548. },
  549. getHangye() {
  550. getAction('/ctop/creativeTitle/getTitleLabel', '').then(res => {
  551. console.log(res)
  552. if (res.success) {
  553. this.options = res.result.map(item => {
  554. return {
  555. label: item.label,
  556. value: item.value,
  557. children: item.children.length > 0 ? [{
  558. label: '不限',
  559. value: 0
  560. }].concat(item.children) : [{
  561. label: '不限',
  562. value: 0
  563. }]
  564. }
  565. })
  566. this.options = [{
  567. label: '不限',
  568. value: 0
  569. }].concat(this.options)
  570. if (this.dataOne.length > 0) {
  571. return
  572. } else {
  573. this.dataOne = [0]
  574. }
  575. }
  576. })
  577. },
  578. onChangeTitle(value, selectedOptions) {
  579. console.log(value, selectedOptions)
  580. this.dataOne = value
  581. this.value = ''
  582. this.title = []
  583. },
  584. filter(inputValue, path) {
  585. return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
  586. },
  587. handleSearch(value) {
  588. if (this.dataOne.length > 0) {
  589. const str = {
  590. firstCategory: this.dataOne[0],
  591. secondCategory: this.dataOne[1],
  592. keyword: value
  593. }
  594. getAction('/ctop/creativeTitle/titleSuggestion', str).then(d => {
  595. const result = d.result ? d.result : []
  596. this.data = result.map(item => {
  597. return {
  598. value: item,
  599. text: item
  600. }
  601. })
  602. })
  603. } else {
  604. this.data = []
  605. return
  606. }
  607. },
  608. matemalVideo(item) {
  609. this.visibleVideo = true
  610. this.videoUrlShow = item.url
  611. },
  612. onChange(checkedList) {
  613. this.indeterminate = !!checkedList.length && checkedList.length < this.chouzhenList.length;
  614. this.checkAll = checkedList.length === this.chouzhenList.length;
  615. },
  616. onCheckAllChange(e) {
  617. if (this.checkAll) {
  618. this.checkList = []
  619. } else {
  620. this.checkList = this.chouzhenList.map(item => {
  621. return item.signature
  622. })
  623. }
  624. this.checkAll = !this.checkAll
  625. },
  626. onCheckAllImageChange(index, item) {
  627. if (this.pans[index].list[item.key].checkAllImage) {
  628. this.pans[index].list[item.key].checkArrImage = []
  629. } else {
  630. this.pans[index].list[item.key].checkArrImage = this.pans[index].list[item.key].imageUrlList.map(item => {
  631. return item.code
  632. })
  633. }
  634. this.pans[index].list[item.key].checkAllImage = !this.pans[index].list[item.key].checkAllImage
  635. },
  636. onChangeCheckImage(checkedList) {
  637. },
  638. handleConfirmValue(rule, value, callback) {
  639. if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
  640. callback()
  641. } else {
  642. callback('链接不能为空且开头为http://或https://,并且长度小于10000')
  643. }
  644. },
  645. showData(item, type) {
  646. var index = this.pans.findIndex(item => item.key === this.pansKey)
  647. // this.pans[index].list[item.key].imageList = []
  648. if (type == 'video') {
  649. this.pans[index].list[item.key].videoList = item.video
  650. getAction('/kuaishou/batch/getCreativeCopywriter', {
  651. code: item.video.signature,
  652. accountId: localStorage.getItem('accountId')
  653. }).then(res => {
  654. if (res.success) {
  655. this.pans[index].list[item.key].description =
  656. res.result ? res.result.creativeCopywriter : ''
  657. }
  658. })
  659. getAction('/ctop/MaterialImageInfo/list', {
  660. videoId: item.video.signature
  661. }).then(res => {
  662. // console.log(res)
  663. if (res.success) {
  664. this.pans[index].list[item.key].imageUrlList = res.result
  665. this.pans[index].list[item.key].checkArrImage = res.result.map(item => {
  666. return item.code
  667. })
  668. }
  669. })
  670. var params = {
  671. videoSignature: item.video.signature,
  672. pageSize: 20,
  673. pageNo: 1
  674. }
  675. getAction('/cutFrame/material/list', params).then(res => {
  676. console.log(res)
  677. if (res.success) {
  678. if (res.result.records.length > 0) {
  679. this.pans[index].list[item.key].chouzhenShow = true
  680. } else {
  681. this.pans[index].list[item.key].chouzhenShow = false
  682. }
  683. }
  684. })
  685. } else {
  686. // this.pans[index].list[item.key].imageList.push(...item.image)
  687. if (item.image.length + this.contentAll > 15) {
  688. this.$message.error('当前选择封面' + item.image.length + '张,最多可选择' + (15 - this.contentAll) + '张')
  689. return
  690. } else {
  691. this.pans[index].list[item.key].imageList.push(...item.image)
  692. this.chouzhen = false
  693. this.chouzhenList = []
  694. this.checkList = []
  695. this.checkAll = false
  696. }
  697. }
  698. },
  699. getData(className) {
  700. return this.form.getFieldValue(className)
  701. },
  702. onChangeVideo() {
  703. if (this.checkVideo.length > 1) {
  704. this.checkVideo.shift()
  705. }
  706. },
  707. callback(key) {
  708. this.channelType = key
  709. this.checkVideo = []
  710. this.ipagination.current = 1
  711. this.time = []
  712. // var params = {}
  713. // params.channelType = key
  714. // params.accountId = localStorage.getItem('accountId')
  715. // params.materialType = this.getData('creativeMaterialType')
  716. // params.pageSize = this.ipagination.pageSize
  717. // params.pageNo = this.ipagination.current
  718. // this.showVideoList('/kuaishou/batch/getVideoList', params)
  719. },
  720. getDataSource(page, pageSize) {
  721. this.ipagination.current = page
  722. var params = {}
  723. params.accountId = localStorage.getItem('accountId')
  724. params.materialType = this.getData('creativeMaterialType')
  725. params.pageSize = this.ipagination.pageSize
  726. params.pageNo = page
  727. params.channelType = this.channelType
  728. params.status = 0
  729. if (this.time.length > 0) {
  730. params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
  731. params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  732. }
  733. this.showVideoList('/kuaishou/batch/getVideoList', params)
  734. },
  735. showVideoList(url, params) {
  736. this.dataSource = []
  737. getAction(url, params).then(res => {
  738. if (res.success) {
  739. this.dataSource = res.result.records
  740. this.ipagination.total = res.result.total
  741. }
  742. })
  743. },
  744. getVideoList(type, index, item, bestIndex) {
  745. if (type == 'video') {
  746. nowIndex = index
  747. bestIndex = bestIndex
  748. this.visibleMatemal = true
  749. this.checkVideo = []
  750. this.active = 0
  751. this.time = []
  752. this.channelType = 0
  753. // var params = {}
  754. // params.accountId = localStorage.getItem('accountId')
  755. // params.materialType = this.getData('creativeMaterialType')
  756. // params.pageSize = this.ipagination.pageSize
  757. // params.pageNo = this.ipagination.current
  758. // params.params.channelType = 0 = 0
  759. // this.showVideoList('/kuaishou/batch/getVideoList', params)
  760. } else {
  761. this.$refs.check.showCheck(
  762. this.getData('creativeMaterialType'),
  763. '/kuaishou/batch/getImageList',
  764. item.imageList,
  765. type,
  766. index
  767. )
  768. }
  769. },
  770. remove(targetKey) {
  771. let activeKey = this.pansKey
  772. let lastIndex
  773. this.pans.forEach((pane, i) => {
  774. if (pane.key === targetKey) {
  775. lastIndex = i - 1
  776. }
  777. })
  778. const panes = this.pans.filter(pane => pane.key !== targetKey)
  779. if (panes.length && activeKey === targetKey) {
  780. if (lastIndex >= 0) {
  781. activeKey = panes[lastIndex].key
  782. } else {
  783. activeKey = panes[0].key
  784. }
  785. }
  786. this.pans = panes
  787. this.pansKey = activeKey
  788. this.form.resetFields()
  789. if (this.pans.length == 0) {
  790. this.$bus.$emit('remove', '/account/stepForm')
  791. } else {
  792. this.addCreative(0)
  793. getAction('/kuaishou/batch/checkCreativeCount', {
  794. unitId: this.pansKey,
  795. accountId: localStorage.getItem('accountId')
  796. }).then(res => {
  797. console.log(res)
  798. this.content = res.result
  799. })
  800. }
  801. },
  802. handleOk() {
  803. if (this.allForm.fail.length == 0) {
  804. this.remove(this.pansKey)
  805. if (localStorage.getItem('originality')) {
  806. this.$router.replace({
  807. path: '/account/originality'
  808. })
  809. } else {
  810. this.$router.replace({
  811. path: '/account/accountIndex'
  812. })
  813. }
  814. this.visible = false
  815. } else {
  816. this.visible = false
  817. }
  818. },
  819. handleCancel(e) {
  820. this.visible = false
  821. this.remove(this.pansKey)
  822. },
  823. handleSubmit(e) {
  824. e.preventDefault()
  825. var index = this.pans.findIndex(item => item.key === this.pansKey)
  826. var data = this.pans[index].list.map(item => {
  827. return item.imageList.length + item.imageUrlList.length
  828. })
  829. if (this.contentAll > 15) {
  830. this.$message.error('封面最多15张')
  831. return
  832. }
  833. this.form.validateFields((err, values) => {
  834. if (!err) {
  835. this.loading = true
  836. var dataJson = this.pans[index].list.map(item => {
  837. return {
  838. description: item.description,
  839. imageArr: item.imageList.map((ele, index) => {
  840. return {
  841. signature: ele.signature,
  842. name: item.name
  843. }
  844. }),
  845. imageArrTwo: item.checkArrImage.map((ele, index) => {
  846. return {
  847. signature: ele,
  848. name: item.name
  849. }
  850. }),
  851. photoId: item.videoList.photoId,
  852. name: item.name
  853. }
  854. })
  855. var allJson = dataJson.map(item => {
  856. return {
  857. description: item.description,
  858. imageArr: item.imageArr.concat(item.imageArrTwo).length > 0 ? item.imageArr.concat(item
  859. .imageArrTwo) : [{
  860. name: item.name
  861. }],
  862. photoId: item.photoId
  863. }
  864. })
  865. var params = {
  866. dataJson: allJson,
  867. ...values,
  868. unitId: this.pansKey,
  869. accountId: localStorage.getItem('accountId'),
  870. content: this.content
  871. }
  872. postAction('/kuaishou/batch/createCreative', params).then(res => {
  873. if (res.success) {
  874. this.visible = true
  875. this.allForm.fail = res.result.fail
  876. this.allForm.success = res.result.success
  877. this.loading = false
  878. } else {
  879. this.loading = false
  880. this.$message.error(res.message)
  881. }
  882. })
  883. }
  884. })
  885. },
  886. nextStep() {
  887. var that = this
  888. setTimeout(function () {
  889. that.$emit('nextStep')
  890. }, 1500)
  891. },
  892. prevStep() {
  893. this.$emit('prevStep')
  894. },
  895. addCreative(index) {
  896. this.pans[index].list.push({
  897. videoList: '',
  898. imageList: [],
  899. name: this.getData('creativeMaterialType') == '1' ?
  900. '自定义创意_竖版视频_' : '自定义创意_横版视频_',
  901. description: '',
  902. creativeMaterialType: '1',
  903. actionBarText: '',
  904. imageUrlList: [],
  905. checkArrImage: [],
  906. checkAllImage: false,
  907. chouzhenShow: false
  908. })
  909. },
  910. deleteCreative(bestIndex, index) {
  911. this.pans[bestIndex].list.splice(index, 1)
  912. },
  913. filterOption(input, option) {
  914. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  915. },
  916. uploadVideo(index, bestIndex) {
  917. console.log(index, bestIndex)
  918. nowIndex = index
  919. bestIndex = bestIndex
  920. this.addVideoVisible = true
  921. },
  922. handleOkChouzhen(e) {
  923. var arr = []
  924. for (let i = 0; i < this.chouzhenList.length; i++) {
  925. for (let j = 0; j < this.checkList.length; j++) {
  926. if (this.chouzhenList[i].signature == this.checkList[j]) {
  927. arr.push(this.chouzhenList[i])
  928. }
  929. }
  930. }
  931. if (arr.length + this.contentAll > 15) {
  932. this.$message.error('当前选择封面' + arr.length + '张,最多可选择' + (15 - this.contentAll) + '张')
  933. return
  934. } else {
  935. this.pans[bestIndex].list[nowIndex].imageList.push(...arr)
  936. this.chouzhen = false
  937. this.chouzhenList = []
  938. this.checkList = []
  939. this.checkAll = false
  940. }
  941. },
  942. showImages(index, bestIndex) {
  943. this.chouzhen = true
  944. this.chouzhenList = []
  945. nowIndex = index
  946. bestIndex = bestIndex
  947. var params = {
  948. videoSignature: this.pans[bestIndex].list[index].videoList.signature,
  949. pageSize: 20,
  950. pageNo: 1
  951. }
  952. getAction('/cutFrame/material/list', params).then(res => {
  953. console.log(res)
  954. if (res.success) {
  955. this.chouzhenList.push(...res.result.records)
  956. }
  957. })
  958. },
  959. uploadImages(index, bestIndex) {
  960. nowIndex = index
  961. bestIndex = bestIndex
  962. this.addImageVisible = true
  963. this.loadingImage = false
  964. },
  965. closeImage() {
  966. this.addImageVisible = false
  967. this.urlListImage = {
  968. url: [],
  969. md5: [],
  970. }
  971. this.imageArrList = []
  972. nowIndex = 0
  973. bestIndex = 0
  974. this.loadingImage = false
  975. },
  976. closeVideo() {
  977. this.addVideoVisible = false
  978. this.urlList = {
  979. url: "",
  980. md5: "",
  981. photoId: ""
  982. }
  983. nowIndex = 0
  984. bestIndex = 0
  985. this.messageTip = null
  986. },
  987. handleOkImage(e) {
  988. this.loadingImage = true
  989. var params = {
  990. accountId: localStorage.getItem('accountId'),
  991. uploadImageArr: this.imageArrList
  992. }
  993. postAction("/kusiShouUpload/image", params).then(res => {
  994. if (res.success) {
  995. if (res.result.length + this.contentAll > 15) {
  996. this.$message.error('当前上传封面' + res.result.length + '张,最多可上传' + (15 - this.contentAll) + '张')
  997. this.loadingImage = false
  998. return
  999. } else {
  1000. this.pans[bestIndex].list[nowIndex].imageList.push(...res.result)
  1001. this.closeImage()
  1002. this.loadingImage = false
  1003. }
  1004. } else {
  1005. this.$message.error('封面上传失败')
  1006. this.loadingImage = false
  1007. }
  1008. })
  1009. },
  1010. deleteImage(url) {
  1011. console.log(url, this.urlListImage.url)
  1012. var index = this.imageArrList.findIndex(v => v.url === url)
  1013. this.imageArrList.splice(index, 1)
  1014. console.log(index)
  1015. },
  1016. overUploadImage(urlAll) {
  1017. var that = this
  1018. that.material = []
  1019. that.imageArrList = []
  1020. var img
  1021. if (urlAll.length > 0) {
  1022. for (var i = 0; i < this.urlListImage.url.length; i++) {
  1023. that.imageArrList.push({
  1024. signature: this.urlListImage.md5[i],
  1025. url: this.urlListImage.url[i],
  1026. })
  1027. img = new Image()
  1028. img.src = this.urlListImage.url[i]
  1029. if (img.complete) {
  1030. // 打印
  1031. if (img.width == 720) {
  1032. if (img.height == 1280) {
  1033. that.material.push(true)
  1034. } else {
  1035. that.material.push(false)
  1036. }
  1037. } else if (img.width == 1080) {
  1038. if (img.height == 1920) {
  1039. that.material.push(true)
  1040. } else {
  1041. that.material.push(false)
  1042. }
  1043. } else if (img.width == 1280) {
  1044. if (img.height == 720) {
  1045. that.material.push(true)
  1046. } else {
  1047. that.material.push(false)
  1048. }
  1049. } else if (img.width == 1920) {
  1050. if (img.height == 1080) {
  1051. that.material.push(true)
  1052. } else {
  1053. that.material.push(false)
  1054. }
  1055. } else {
  1056. that.material.push(false)
  1057. }
  1058. } else {
  1059. img.onload = () => {
  1060. if (img.width == 720) {
  1061. if (img.height == 1280) {
  1062. that.material.push(true)
  1063. } else {
  1064. that.material.push(false)
  1065. }
  1066. } else if (img.width == 1080) {
  1067. if (img.height == 1920) {
  1068. that.material.push(true)
  1069. } else {
  1070. that.material.push(false)
  1071. }
  1072. } else if (img.width == 1280) {
  1073. if (img.height == 720) {
  1074. that.material.push(true)
  1075. } else {
  1076. that.material.push(false)
  1077. }
  1078. } else if (img.width == 1920) {
  1079. if (img.height == 1080) {
  1080. that.material.push(true)
  1081. } else {
  1082. that.material.push(false)
  1083. }
  1084. } else {
  1085. that.material.push(false)
  1086. }
  1087. }
  1088. }
  1089. }
  1090. }
  1091. },
  1092. fileWater(file) {
  1093. var bmf = new BMF()
  1094. var that = this
  1095. // this.urlListImage = {
  1096. // url: [],
  1097. // md5: []
  1098. // }
  1099. return new Promise(function (resolve, reject) {
  1100. for (let i = 0; i < file.length; i++) {
  1101. bmf.md5(file[i], (err, md5) => {
  1102. // that.urlListImage.name.push(file[i].name)
  1103. that.urlListImage.md5.push(md5)
  1104. resolve()
  1105. })
  1106. }
  1107. })
  1108. },
  1109. overUpload(urlAll) {
  1110. console.log(this.urlList)
  1111. },
  1112. file(file) {
  1113. var bmf = new BMF()
  1114. var that = this
  1115. return new Promise(function (resolve, reject) {
  1116. bmf.md5(file[0], (err, md5) => {
  1117. getAction('/kusiShouUpload/checkVideo', {
  1118. signature: md5,
  1119. accountId: localStorage.getItem('accountId')
  1120. }).then(res => {
  1121. if (res.code == 0) {
  1122. if (res.result.isExistence) {
  1123. showRemove = res.result.isExistence
  1124. that.urlList.md5 = res.result.signature
  1125. that.urlList.url = res.result.videoUrl
  1126. that.urlList.photoId = res.result.photoId
  1127. reject()
  1128. } else {
  1129. showRemove = res.result.isExistence
  1130. that.urlList.md5 = md5
  1131. resolve()
  1132. }
  1133. } else {
  1134. reject()
  1135. }
  1136. })
  1137. })
  1138. })
  1139. },
  1140. handleOkVideo(e) {
  1141. this.loadingVideo = true
  1142. if (showRemove) {
  1143. this.pans[bestIndex].list[nowIndex].videoList = {
  1144. photoId: this.urlList.photoId,
  1145. url: this.urlList.url
  1146. }
  1147. this.loadingVideo = false
  1148. var params = {
  1149. videoSignature: this.urlList.md5,
  1150. pageSize: 20,
  1151. pageNo: 1
  1152. }
  1153. getAction('/cutFrame/material/list', params).then(res => {
  1154. console.log(res)
  1155. if (res.success) {
  1156. if (res.result.records.length > 0) {
  1157. this.pans[bestIndex].list[nowIndex].chouzhenShow = true
  1158. } else {
  1159. this.pans[bestIndex].list[nowIndex].chouzhenShow = false
  1160. }
  1161. }
  1162. })
  1163. this.closeVideo()
  1164. } else {
  1165. var params = {
  1166. url: this.urlList.url,
  1167. type: this.getData('creativeMaterialType'),
  1168. signature: this.urlList.md5,
  1169. accountId: localStorage.getItem('accountId')
  1170. }
  1171. postAction("/kusiShouUpload/video", params).then(res => {
  1172. console.log(res)
  1173. if (res.success) {
  1174. this.pans[bestIndex].list[nowIndex].videoList = {
  1175. photoId: res.result.photoId,
  1176. url: this.urlList.url
  1177. }
  1178. this.loadingVideo = false
  1179. this.closeVideo()
  1180. } else {
  1181. this.messageTip = res.message
  1182. this.loadingVideo = false
  1183. this.urlList = {
  1184. url: "",
  1185. md5: "",
  1186. photoId: ""
  1187. }
  1188. nowIndex = 0
  1189. bestIndex = 0
  1190. }
  1191. })
  1192. }
  1193. },
  1194. deleteData(index, bestIndex, deleteIndex) {
  1195. this.pans[index].list[bestIndex].imageList.splice(deleteIndex, 1)
  1196. },
  1197. handleOkShow(e) {
  1198. //
  1199. this.pans[bestIndex].list[nowIndex].imageList = []
  1200. getAction('/kuaishou/batch/getCreativeCopywriter', {
  1201. code: this.checkVideo[0].signature,
  1202. accountId: localStorage.getItem('accountId')
  1203. }).then(res => {
  1204. if (res.success) {
  1205. this.pans[bestIndex].list[nowIndex].description =
  1206. res.result ? res.result.creativeCopywriter : ''
  1207. }
  1208. })
  1209. getAction('/ctop/MaterialImageInfo/list', {
  1210. videoId: this.checkVideo[0].signature
  1211. }).then(res => {
  1212. // console.log(res)
  1213. if (res.success) {
  1214. this.pans[bestIndex].list[nowIndex].imageUrlList = res.result
  1215. this.pans[bestIndex].list[nowIndex].checkArrImage = res.result.map(item => {
  1216. return item.code
  1217. })
  1218. }
  1219. })
  1220. this.pans[bestIndex].list[nowIndex].videoList = this.checkVideo[0]
  1221. this.visibleMatemal = false
  1222. this.ipagination.current = 1
  1223. var params = {
  1224. videoSignature: this.checkVideo[0].signature,
  1225. pageSize: 20,
  1226. pageNo: 1
  1227. }
  1228. getAction('/cutFrame/material/list', params).then(res => {
  1229. console.log(res)
  1230. if (res.success) {
  1231. if (res.result.records.length > 0) {
  1232. this.pans[bestIndex].list[nowIndex].chouzhenShow = true
  1233. } else {
  1234. this.pans[bestIndex].list[nowIndex].chouzhenShow = false
  1235. }
  1236. }
  1237. })
  1238. },
  1239. judge(item) {
  1240. var re = /[(.*?)]/g
  1241. var array = []
  1242. var temp
  1243. while ((temp = re.exec(item.text))) {
  1244. array.push(temp[1])
  1245. }
  1246. console.log(array)
  1247. item.countTag = array.length
  1248. },
  1249. getChange(item, tag, index) {
  1250. console.log(item)
  1251. this.judge(item)
  1252. var node = document.getElementsByClassName('rending')[index]
  1253. var v = '[' + tag.name + ']'
  1254. if (document.selection) {
  1255. //IE
  1256. node.focus()
  1257. var sel = document.selection.createRange()
  1258. sel.text = v
  1259. sel.select()
  1260. item.description = v
  1261. } else if (node.selectionStart || node.selectionStart == '0') {
  1262. //MOZILLA/GOOGLE
  1263. var startPos = node.selectionStart
  1264. var endPos = node.selectionEnd
  1265. var restoreTop = node.scrollTop
  1266. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  1267. if (restoreTop > 0) {
  1268. node.scrollTop = restoreTop
  1269. }
  1270. item.text = node.value
  1271. node.focus()
  1272. node.selectionStart = startPos + v.length
  1273. node.selectionEnd = startPos + v.length
  1274. item.description = node.value
  1275. } else {
  1276. //OTHER
  1277. node.value += v
  1278. item.text = node.value
  1279. node.focus()
  1280. item.description = node.value
  1281. }
  1282. },
  1283. getAppList(appId) {
  1284. getAction('/kuaishou/batch/getPageList', {
  1285. accountId: localStorage.getItem('accountId'),
  1286. appId: appId,
  1287. viewComp: 7
  1288. }).then(res => {
  1289. if (res.success) {
  1290. console.log(res)
  1291. this.siteList = res.result
  1292. }
  1293. })
  1294. }
  1295. },
  1296. computed: {
  1297. dirImg() {
  1298. let date = new Date()
  1299. let y = date.getFullYear()
  1300. let MM = date.getMonth() + 1
  1301. MM = MM < 10 ? '0' + MM : MM
  1302. let d = date.getDate()
  1303. d = d < 10 ? '0' + d : d
  1304. return 'image/' + y + '-' + MM + '-' + d + '/'
  1305. },
  1306. dirVideo() {
  1307. let date = new Date()
  1308. let y = date.getFullYear()
  1309. let MM = date.getMonth() + 1
  1310. MM = MM < 10 ? '0' + MM : MM
  1311. let d = date.getDate()
  1312. d = d < 10 ? '0' + d : d
  1313. return 'video/' + y + '-' + MM + '-' + d + '/'
  1314. },
  1315. contentAll() {
  1316. var count, arr = []
  1317. if (this.pans[0].list.length > 0) {
  1318. for (let i = 0; i < this.pans[0].list.length; i++) {
  1319. arr.push(...this.pans[0].list[i].checkArrImage, ...this.pans[0].list[i].imageList)
  1320. }
  1321. return arr.length + this.content
  1322. } else {
  1323. return 0
  1324. }
  1325. },
  1326. listCheck() {
  1327. if (this.pans[0].list.length > 0) {
  1328. if (this.pans[0].list[this.pans[0].list.length - 1].imageUrlList.length == 0 && this.pans[0].list[this.pans[0]
  1329. .list.length - 1]
  1330. .imageList.length == 0) {
  1331. return true
  1332. } else {
  1333. return false
  1334. }
  1335. } else {
  1336. return false
  1337. }
  1338. }
  1339. },
  1340. watch: {
  1341. time(n, o) {
  1342. console.log(n)
  1343. if (n.length > 0) {
  1344. var params = {}
  1345. params.accountId = localStorage.getItem('accountId')
  1346. params.materialType = this.getData('creativeMaterialType')
  1347. params.pageSize = this.ipagination.pageSize
  1348. params.pageNo = 1
  1349. params.status = 0
  1350. params.channelType = this.channelType
  1351. params.startDate = moment(n[0]).format('YYYY-MM-DD')
  1352. params.endDate = moment(n[1]).format('YYYY-MM-DD')
  1353. this.showVideoList('/kuaishou/batch/getVideoList', params)
  1354. } else {
  1355. var params = {}
  1356. params.accountId = localStorage.getItem('accountId')
  1357. params.materialType = this.getData('creativeMaterialType')
  1358. params.pageSize = this.ipagination.pageSize
  1359. params.pageNo = 1
  1360. params.status = 0
  1361. params.channelType = this.channelType
  1362. this.ipagination.current = 1
  1363. this.showVideoList('/kuaishou/batch/getVideoList', params)
  1364. }
  1365. },
  1366. visibleVideo(n, o) {
  1367. if (!n) {
  1368. closeAllVideoFun()
  1369. }
  1370. }
  1371. },
  1372. mounted: function () {
  1373. this.$nextTick(() => {
  1374. if (localStorage.getItem('pans')) {
  1375. this.pans = JSON.parse(localStorage.getItem('pans')).map(item => {
  1376. return {
  1377. ...item,
  1378. list: []
  1379. }
  1380. })
  1381. this.pansKey = this.pans[0].key
  1382. this.addCreative(0)
  1383. getAction('/kuaishou/batch/checkCreativeCount', {
  1384. unitId: this.pansKey,
  1385. accountId: localStorage.getItem('accountId')
  1386. }).then(res => {
  1387. console.log(res)
  1388. this.content = res.result
  1389. })
  1390. getAction('/kuaishou/batch/getActionBarText', {
  1391. campaignId: localStorage.getItem('campaignId') ? localStorage.getItem('campaignId') : localStorage
  1392. .getItem('advertisingGroupKey')
  1393. }).then(res => {
  1394. if (res.success) {
  1395. this.appList = res.result
  1396. }
  1397. })
  1398. if (localStorage.getItem('appId')) {
  1399. this.showSite = true
  1400. this.getAppList(localStorage.getItem('appId'))
  1401. } else {
  1402. getAction('/kuaishou/batch/getAppId', {
  1403. accountId: localStorage.getItem('accountId'),
  1404. unitId: this.pansKey
  1405. }).then(res => {
  1406. if (res.success) {
  1407. if (res.result) {
  1408. this.showSite = true
  1409. this.getAppList(res.result)
  1410. } else {
  1411. this.showSite = false
  1412. }
  1413. }
  1414. })
  1415. }
  1416. }
  1417. getAction('/kuaishou/batch/creativeWord', {
  1418. accountId: localStorage.getItem('accountId')
  1419. }).then(res => {
  1420. if (res.success) {
  1421. this.tags = res.result
  1422. }
  1423. })
  1424. })
  1425. }
  1426. }
  1427. </script>
  1428. <style lang="scss">
  1429. </style>