Step3.vue 53 KB

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