Step3.vue 52 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074107510761077107810791080108110821083108410851086108710881089109010911092109310941095109610971098109911001101110211031104110511061107110811091110111111121113111411151116111711181119112011211122112311241125112611271128112911301131113211331134113511361137113811391140114111421143114411451146114711481149115011511152115311541155115611571158115911601161116211631164116511661167116811691170117111721173117411751176117711781179118011811182118311841185118611871188118911901191119211931194119511961197119811991200120112021203120412051206120712081209121012111212121312141215121612171218121912201221122212231224122512261227122812291230123112321233123412351236123712381239124012411242124312441245124612471248124912501251125212531254125512561257125812591260126112621263126412651266126712681269127012711272127312741275127612771278127912801281128212831284128512861287128812891290129112921293129412951296129712981299130013011302130313041305130613071308130913101311131213131314131513161317131813191320132113221323132413251326132713281329133013311332133313341335133613371338133913401341134213431344134513461347134813491350135113521353135413551356135713581359136013611362136313641365136613671368136913701371137213731374137513761377137813791380138113821383138413851386138713881389139013911392139313941395139613971398139914001401140214031404140514061407140814091410141114121413141414151416141714181419142014211422142314241425142614271428142914301431143214331434143514361437143814391440144114421443144414451446144714481449145014511452145314541455145614571458145914601461146214631464146514661467146814691470147114721473147414751476147714781479148014811482148314841485148614871488148914901491149214931494149514961497149814991500150115021503150415051506150715081509151015111512151315141515151615171518151915201521152215231524152515261527152815291530153115321533153415351536153715381539154015411542154315441545154615471548154915501551155215531554155515561557155815591560156115621563156415651566156715681569157015711572157315741575157615771578157915801581
  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="下载详情" :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.id" :value="appModel.actionBarText">
  170. {{ appModel.actionBarText }}
  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. titleVisible: false,
  380. options: [],
  381. data: [],
  382. value: '',
  383. dataOne: [],
  384. title: [],
  385. tags: [],
  386. visibleMatemal: false,
  387. visibleVideo: false,
  388. videoUrlShow: "",
  389. time: [],
  390. channelType: 0,
  391. checkVideo: [],
  392. dataSource: [],
  393. tab: [{
  394. value: 0,
  395. label: "内部"
  396. }, {
  397. value: 1,
  398. label: "外部"
  399. }],
  400. active: 0,
  401. ipagination: {
  402. current: 1,
  403. pageSize: 5,
  404. // pageSizeOptions: ['10', '20', '30'],
  405. showTotal: (total, range) => {
  406. return range[0] + '-' + range[1] + ' 共' + total + '条'
  407. },
  408. showQuickJumper: true,
  409. // showSizeChanger: true,
  410. total: 0,
  411. onChange: current => {
  412. // 切换分页时的回调,
  413. // 当在页面定义change事件时,切记要把此处的事件清除,因为这两个事件重叠了,可能到时候会导致一些莫名的bug
  414. this.ipagination.current = current
  415. }
  416. },
  417. chouzhen: false,
  418. chouzhenList: [],
  419. checkList: [],
  420. indeterminate: true,
  421. checkAll: false,
  422. pans: [],
  423. pansKey: '',
  424. addImageVisible: false,
  425. addVideoVisible: false,
  426. loadingVideo: false,
  427. loadingImage: false,
  428. allForm: {
  429. videoList: '',
  430. imageList: [],
  431. fail: [],
  432. success: [],
  433. },
  434. form: this.$form.createForm(this),
  435. list: [],
  436. vertical: 'vertical',
  437. appList: [],
  438. siteList: [],
  439. labelCol: {
  440. lg: {
  441. span: 4
  442. },
  443. sm: {
  444. span: 6
  445. },
  446. xs: {
  447. span: 4
  448. },
  449. md: {
  450. span: 4
  451. }
  452. },
  453. wrapperCol: {
  454. lg: {
  455. span: 18
  456. },
  457. sm: {
  458. span: 18
  459. },
  460. xs: {
  461. span: 14
  462. },
  463. md: {
  464. span: 14
  465. }
  466. },
  467. visible: false,
  468. loading: false,
  469. imageUrlList: [],
  470. checkAllImage: false,
  471. checkArrImage: [],
  472. content: 0,
  473. urlListImage: {
  474. url: [],
  475. md5: []
  476. },
  477. urlList: {
  478. url: '',
  479. md5: "",
  480. photoId: ""
  481. },
  482. imageArrList: [],
  483. material: [],
  484. creativeCopywriter: '',
  485. customDomain: '',
  486. region: 'oss-cn-beijing',
  487. bucket: 'ctop-media',
  488. acceptVideo: 'video/mpeg,video/mp4',
  489. acceptImage: 'image/jpeg,image/jpg',
  490. accessKeyId: 'LTAIbNbqWzSOklQV',
  491. accessKeySecret: '1rkPz7JNoXk8sJevPaeYHWqfkQXBGh',
  492. messageTip: null
  493. }
  494. },
  495. methods: {
  496. showTitle(index, bestIndex) {
  497. nowIndex = index
  498. bestIndex = bestIndex
  499. this.titleVisible = true;
  500. this.getHangye()
  501. },
  502. okTitle(item) {
  503. this.pans[bestIndex].list[nowIndex].description = item
  504. this.titleVisible = false;
  505. this.dataOne = []
  506. this.value = ""
  507. this.title = []
  508. },
  509. searchQuery() {
  510. // /ctop/creativeTitle/titleSuggestion
  511. console.log(this.value)
  512. getAction('/ctop/creativeTitle/titleSearch', {
  513. firstCategory: this.dataOne[0],
  514. secondCategory: this.dataOne[1],
  515. keywords: this.value
  516. }).then(res => {
  517. console.log(res)
  518. this.title = res.result ? res.result : []
  519. })
  520. // firstCategory,secondCategory,keywords
  521. },
  522. getHangye() {
  523. getAction('/ctop/creativeTitle/getTitleLabel', '').then(res => {
  524. console.log(res)
  525. if (res.success) {
  526. this.options = res.result.map(item => {
  527. return {
  528. label: item.label,
  529. value: item.value,
  530. children: item.children.length > 0 ? [{
  531. label: '不限',
  532. value: 0
  533. }].concat(item.children) : [{
  534. label: '不限',
  535. value: 0
  536. }]
  537. }
  538. })
  539. this.options = [{
  540. label: '不限',
  541. value: 0
  542. }].concat(this.options)
  543. if (this.dataOne.length > 0) {
  544. return
  545. } else {
  546. this.dataOne = [0]
  547. }
  548. }
  549. })
  550. },
  551. onChangeTitle(value, selectedOptions) {
  552. console.log(value, selectedOptions)
  553. this.dataOne = value
  554. this.value = ''
  555. this.title = []
  556. },
  557. filter(inputValue, path) {
  558. return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
  559. },
  560. handleSearch(value) {
  561. if (this.dataOne.length > 0) {
  562. const str = {
  563. firstCategory: this.dataOne[0],
  564. secondCategory: this.dataOne[1],
  565. keyword: value
  566. }
  567. getAction('/ctop/creativeTitle/titleSuggestion', str).then(d => {
  568. const result = d.result ? d.result : []
  569. this.data = result.map(item => {
  570. return {
  571. value: item,
  572. text: item
  573. }
  574. })
  575. })
  576. } else {
  577. this.data = []
  578. return
  579. }
  580. },
  581. matemalVideo(item) {
  582. this.visibleVideo = true
  583. this.videoUrlShow = item.url
  584. },
  585. onChange(checkedList) {
  586. this.indeterminate = !!checkedList.length && checkedList.length < this.chouzhenList.length;
  587. this.checkAll = checkedList.length === this.chouzhenList.length;
  588. },
  589. onCheckAllChange(e) {
  590. if (this.checkAll) {
  591. this.checkList = []
  592. } else {
  593. this.checkList = this.chouzhenList.map(item => {
  594. return item.signature
  595. })
  596. }
  597. this.checkAll = !this.checkAll
  598. },
  599. onCheckAllImageChange(index, item) {
  600. if (this.pans[index].list[item.key].checkAllImage) {
  601. this.pans[index].list[item.key].checkArrImage = []
  602. } else {
  603. this.pans[index].list[item.key].checkArrImage = this.pans[index].list[item.key].imageUrlList.map(item => {
  604. return item.code
  605. })
  606. }
  607. this.pans[index].list[item.key].checkAllImage = !this.pans[index].list[item.key].checkAllImage
  608. },
  609. onChangeCheckImage(checkedList) {
  610. },
  611. handleConfirmValue(rule, value, callback) {
  612. if (/(http|https):\/\/([\w.]+\/?)\S*/.test(value) && value.length < 10000) {
  613. callback()
  614. } else {
  615. callback('链接不能为空且开头为http://或https://,并且长度小于10000')
  616. }
  617. },
  618. showData(item, type) {
  619. var index = this.pans.findIndex(item => item.key === this.pansKey)
  620. // this.pans[index].list[item.key].imageList = []
  621. if (type == 'video') {
  622. this.pans[index].list[item.key].videoList = item.video
  623. getAction('/kuaishou/batch/getCreativeCopywriter', {
  624. code: item.video.signature,
  625. accountId: localStorage.getItem('accountId')
  626. }).then(res => {
  627. if (res.success) {
  628. this.pans[index].list[item.key].description =
  629. res.result ? res.result.creativeCopywriter : ''
  630. }
  631. })
  632. getAction('/ctop/MaterialImageInfo/list', {
  633. videoId: item.video.signature
  634. }).then(res => {
  635. // console.log(res)
  636. if (res.success) {
  637. this.pans[index].list[item.key].imageUrlList = res.result
  638. this.pans[index].list[item.key].checkArrImage = res.result.map(item => {
  639. return item.code
  640. })
  641. }
  642. })
  643. var params = {
  644. videoSignature: item.video.signature,
  645. pageSize: 20,
  646. pageNo: 1
  647. }
  648. getAction('/cutFrame/material/list', params).then(res => {
  649. console.log(res)
  650. if (res.success) {
  651. if (res.result.records.length > 0) {
  652. this.pans[index].list[item.key].chouzhenShow = true
  653. } else {
  654. this.pans[index].list[item.key].chouzhenShow = false
  655. }
  656. }
  657. })
  658. } else {
  659. // this.pans[index].list[item.key].imageList.push(...item.image)
  660. if (item.image.length + this.contentAll > 15) {
  661. this.$message.error('当前选择封面' + item.image.length + '张,最多可选择' + (15 - this.contentAll) + '张')
  662. return
  663. } else {
  664. this.pans[index].list[item.key].imageList.push(...item.image)
  665. this.chouzhen = false
  666. this.chouzhenList = []
  667. this.checkList = []
  668. this.checkAll = false
  669. }
  670. }
  671. },
  672. getData(className) {
  673. return this.form.getFieldValue(className)
  674. },
  675. onChangeVideo() {
  676. if (this.checkVideo.length > 1) {
  677. this.checkVideo.shift()
  678. }
  679. },
  680. callback(key) {
  681. this.channelType = key
  682. this.checkVideo = []
  683. this.ipagination.current = 1
  684. this.time = []
  685. // var params = {}
  686. // params.channelType = key
  687. // params.accountId = localStorage.getItem('accountId')
  688. // params.materialType = this.getData('creativeMaterialType')
  689. // params.pageSize = this.ipagination.pageSize
  690. // params.pageNo = this.ipagination.current
  691. // this.showVideoList('/kuaishou/batch/getVideoList', params)
  692. },
  693. getDataSource(page, pageSize) {
  694. this.ipagination.current = page
  695. var params = {}
  696. params.accountId = localStorage.getItem('accountId')
  697. params.materialType = this.getData('creativeMaterialType')
  698. params.pageSize = this.ipagination.pageSize
  699. params.pageNo = page
  700. params.channelType = this.channelType
  701. if (this.time.length > 0) {
  702. params.startDate = moment(this.time[0]).format('YYYY-MM-DD')
  703. params.endDate = moment(this.time[1]).format('YYYY-MM-DD')
  704. }
  705. this.showVideoList('/kuaishou/batch/getVideoList', params)
  706. },
  707. showVideoList(url, params) {
  708. this.dataSource = []
  709. getAction(url, params).then(res => {
  710. if (res.success) {
  711. this.dataSource = res.result.records
  712. this.ipagination.total = res.result.total
  713. }
  714. })
  715. },
  716. getVideoList(type, index, item, bestIndex) {
  717. if (type == 'video') {
  718. nowIndex = index
  719. bestIndex = bestIndex
  720. this.visibleMatemal = true
  721. this.checkVideo = []
  722. this.active = 0
  723. this.time = []
  724. this.channelType = 0
  725. // var params = {}
  726. // params.accountId = localStorage.getItem('accountId')
  727. // params.materialType = this.getData('creativeMaterialType')
  728. // params.pageSize = this.ipagination.pageSize
  729. // params.pageNo = this.ipagination.current
  730. // params.params.channelType = 0 = 0
  731. // this.showVideoList('/kuaishou/batch/getVideoList', params)
  732. } else {
  733. this.$refs.check.showCheck(
  734. this.getData('creativeMaterialType'),
  735. '/kuaishou/batch/getImageList',
  736. item.imageList,
  737. type,
  738. index
  739. )
  740. }
  741. },
  742. remove(targetKey) {
  743. let activeKey = this.pansKey
  744. let lastIndex
  745. this.pans.forEach((pane, i) => {
  746. if (pane.key === targetKey) {
  747. lastIndex = i - 1
  748. }
  749. })
  750. const panes = this.pans.filter(pane => pane.key !== targetKey)
  751. if (panes.length && activeKey === targetKey) {
  752. if (lastIndex >= 0) {
  753. activeKey = panes[lastIndex].key
  754. } else {
  755. activeKey = panes[0].key
  756. }
  757. }
  758. this.pans = panes
  759. this.pansKey = activeKey
  760. this.form.resetFields()
  761. if (this.pans.length == 0) {
  762. this.$bus.$emit('remove', '/account/stepForm')
  763. } else {
  764. this.addCreative(0)
  765. }
  766. },
  767. handleOk() {
  768. if (this.allForm.fail.length == 0) {
  769. this.remove(this.pansKey)
  770. if (localStorage.getItem('originality')) {
  771. this.$router.replace({
  772. path: '/account/originality'
  773. })
  774. } else {
  775. this.$router.replace({
  776. path: '/account/accountIndex'
  777. })
  778. }
  779. this.visible = false
  780. } else {
  781. this.visible = false
  782. }
  783. },
  784. handleCancel(e) {
  785. this.visible = false
  786. },
  787. handleSubmit(e) {
  788. e.preventDefault()
  789. var index = this.pans.findIndex(item => item.key === this.pansKey)
  790. var data = this.pans[index].list.map(item => {
  791. return item.imageList.length + item.imageUrlList.length
  792. })
  793. if (this.contentAll > 15) {
  794. this.$message.error('封面最多15张')
  795. return
  796. }
  797. this.form.validateFields((err, values) => {
  798. if (!err) {
  799. this.loading = true
  800. var dataJson = this.pans[index].list.map(item => {
  801. return {
  802. description: item.description,
  803. imageArr: item.imageList.map((ele, index) => {
  804. return {
  805. signature: ele.signature,
  806. name: index + 1 + '-' + item.name
  807. }
  808. }),
  809. imageArrTwo: item.checkArrImage.map((ele, index) => {
  810. return {
  811. signature: ele,
  812. name: (item.imageList.length + index + 1) + '-' + item.name
  813. }
  814. }),
  815. photoId: item.videoList.photoId,
  816. name: item.name
  817. }
  818. })
  819. var allJson = dataJson.map(item => {
  820. return {
  821. description: item.description,
  822. imageArr: item.imageArr.concat(item.imageArrTwo).length > 0 ? item.imageArr.concat(item
  823. .imageArrTwo) : [{
  824. name: item.name
  825. }],
  826. photoId: item.photoId
  827. }
  828. })
  829. var params = {
  830. dataJson: allJson,
  831. ...values,
  832. unitId: this.pansKey,
  833. accountId: localStorage.getItem('accountId')
  834. }
  835. postAction('/kuaishou/batch/createCreative', params).then(res => {
  836. if (res.success) {
  837. this.visible = true
  838. this.allForm.fail = res.result.fail
  839. this.allForm.success = res.result.success
  840. this.loading = false
  841. } else {
  842. this.loading = false
  843. this.$message.error(res.message)
  844. }
  845. })
  846. }
  847. })
  848. },
  849. nextStep() {
  850. var that = this
  851. setTimeout(function () {
  852. that.$emit('nextStep')
  853. }, 1500)
  854. },
  855. prevStep() {
  856. this.$emit('prevStep')
  857. },
  858. addCreative(index) {
  859. this.pans[index].list.push({
  860. videoList: '',
  861. imageList: [],
  862. name: this.getData('creativeMaterialType') == '1' ?
  863. '自定义创意_竖版视频_' +
  864. Math.random()
  865. .toString(36)
  866. .substr(2, 4) : '自定义创意_横版视频_' +
  867. Math.random()
  868. .toString(36)
  869. .substr(2, 4),
  870. description: '',
  871. creativeMaterialType: '1',
  872. actionBarText: '',
  873. imageUrlList: [],
  874. checkArrImage: [],
  875. checkAllImage: false,
  876. chouzhenShow: false
  877. })
  878. },
  879. deleteCreative(bestIndex, index) {
  880. this.pans[bestIndex].list.splice(index, 1)
  881. },
  882. filterOption(input, option) {
  883. return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  884. },
  885. uploadVideo(index, bestIndex) {
  886. console.log(index, bestIndex)
  887. nowIndex = index
  888. bestIndex = bestIndex
  889. this.addVideoVisible = true
  890. },
  891. handleOkChouzhen(e) {
  892. var arr = []
  893. for (let i = 0; i < this.chouzhenList.length; i++) {
  894. for (let j = 0; j < this.checkList.length; j++) {
  895. if (this.chouzhenList[i].signature == this.checkList[j]) {
  896. arr.push(this.chouzhenList[i])
  897. }
  898. }
  899. }
  900. if (arr.length + this.contentAll > 15) {
  901. this.$message.error('当前选择封面' + arr.length + '张,最多可选择' + (15 - this.contentAll) + '张')
  902. return
  903. } else {
  904. this.pans[bestIndex].list[nowIndex].imageList.push(...arr)
  905. this.chouzhen = false
  906. this.chouzhenList = []
  907. this.checkList = []
  908. this.checkAll = false
  909. }
  910. },
  911. showImages(index, bestIndex) {
  912. this.chouzhen = true
  913. this.chouzhenList = []
  914. nowIndex = index
  915. bestIndex = bestIndex
  916. var params = {
  917. videoSignature: this.pans[bestIndex].list[index].videoList.signature,
  918. pageSize: 20,
  919. pageNo: 1
  920. }
  921. getAction('/cutFrame/material/list', params).then(res => {
  922. console.log(res)
  923. if (res.success) {
  924. this.chouzhenList.push(...res.result.records)
  925. }
  926. })
  927. },
  928. uploadImages(index, bestIndex) {
  929. nowIndex = index
  930. bestIndex = bestIndex
  931. this.addImageVisible = true
  932. this.loadingImage = false
  933. },
  934. closeImage() {
  935. this.addImageVisible = false
  936. this.urlListImage = {
  937. url: [],
  938. md5: [],
  939. }
  940. this.imageArrList = []
  941. nowIndex = 0
  942. bestIndex = 0
  943. this.loadingImage = false
  944. },
  945. closeVideo() {
  946. this.addVideoVisible = false
  947. this.urlList = {
  948. url: "",
  949. md5: "",
  950. photoId: ""
  951. }
  952. nowIndex = 0
  953. bestIndex = 0
  954. this.messageTip = null
  955. },
  956. handleOkImage(e) {
  957. this.loadingImage = true
  958. var params = {
  959. accountId: localStorage.getItem('accountId'),
  960. uploadImageArr: this.imageArrList
  961. }
  962. postAction("/kusiShouUpload/image", params).then(res => {
  963. if (res.success) {
  964. if (res.result.length + this.contentAll > 15) {
  965. this.$message.error('当前上传封面' + res.result.length + '张,最多可上传' + (15 - this.contentAll) + '张')
  966. this.loadingImage = false
  967. return
  968. } else {
  969. this.pans[bestIndex].list[nowIndex].imageList.push(...res.result)
  970. this.closeImage()
  971. this.loadingImage = false
  972. }
  973. } else {
  974. this.$message.error('封面上传失败')
  975. this.loadingImage = false
  976. }
  977. })
  978. },
  979. deleteImage(url) {
  980. console.log(url, this.urlListImage.url)
  981. var index = this.imageArrList.findIndex(v => v.url === url)
  982. this.imageArrList.splice(index, 1)
  983. console.log(index)
  984. },
  985. overUploadImage(urlAll) {
  986. var that = this
  987. that.material = []
  988. that.imageArrList = []
  989. var img
  990. if (urlAll.length > 0) {
  991. for (var i = 0; i < this.urlListImage.url.length; i++) {
  992. that.imageArrList.push({
  993. signature: this.urlListImage.md5[i],
  994. url: this.urlListImage.url[i],
  995. })
  996. img = new Image()
  997. img.src = this.urlListImage.url[i]
  998. if (img.complete) {
  999. // 打印
  1000. if (img.width == 720) {
  1001. if (img.height == 1280) {
  1002. that.material.push(true)
  1003. } else {
  1004. that.material.push(false)
  1005. }
  1006. } else if (img.width == 1080) {
  1007. if (img.height == 1920) {
  1008. that.material.push(true)
  1009. } else {
  1010. that.material.push(false)
  1011. }
  1012. } else if (img.width == 1280) {
  1013. if (img.height == 720) {
  1014. that.material.push(true)
  1015. } else {
  1016. that.material.push(false)
  1017. }
  1018. } else if (img.width == 1920) {
  1019. if (img.height == 1080) {
  1020. that.material.push(true)
  1021. } else {
  1022. that.material.push(false)
  1023. }
  1024. } else {
  1025. that.material.push(false)
  1026. }
  1027. } else {
  1028. img.onload = () => {
  1029. if (img.width == 720) {
  1030. if (img.height == 1280) {
  1031. that.material.push(true)
  1032. } else {
  1033. that.material.push(false)
  1034. }
  1035. } else if (img.width == 1080) {
  1036. if (img.height == 1920) {
  1037. that.material.push(true)
  1038. } else {
  1039. that.material.push(false)
  1040. }
  1041. } else if (img.width == 1280) {
  1042. if (img.height == 720) {
  1043. that.material.push(true)
  1044. } else {
  1045. that.material.push(false)
  1046. }
  1047. } else if (img.width == 1920) {
  1048. if (img.height == 1080) {
  1049. that.material.push(true)
  1050. } else {
  1051. that.material.push(false)
  1052. }
  1053. } else {
  1054. that.material.push(false)
  1055. }
  1056. }
  1057. }
  1058. }
  1059. }
  1060. },
  1061. fileWater(file) {
  1062. var bmf = new BMF()
  1063. var that = this
  1064. // this.urlListImage = {
  1065. // url: [],
  1066. // md5: []
  1067. // }
  1068. return new Promise(function (resolve, reject) {
  1069. for (let i = 0; i < file.length; i++) {
  1070. bmf.md5(file[i], (err, md5) => {
  1071. // that.urlListImage.name.push(file[i].name)
  1072. that.urlListImage.md5.push(md5)
  1073. resolve()
  1074. })
  1075. }
  1076. })
  1077. },
  1078. overUpload(urlAll) {
  1079. console.log(this.urlList)
  1080. },
  1081. file(file) {
  1082. var bmf = new BMF()
  1083. var that = this
  1084. return new Promise(function (resolve, reject) {
  1085. bmf.md5(file[0], (err, md5) => {
  1086. getAction('/kusiShouUpload/checkVideo', {
  1087. signature: md5,
  1088. accountId: localStorage.getItem('accountId')
  1089. }).then(res => {
  1090. if (res.code == 0) {
  1091. if (res.result.isExistence) {
  1092. showRemove = res.result.isExistence
  1093. that.urlList.md5 = res.result.signature
  1094. that.urlList.url = res.result.videoUrl
  1095. that.urlList.photoId = res.result.photoId
  1096. reject()
  1097. } else {
  1098. showRemove = res.result.isExistence
  1099. that.urlList.md5 = md5
  1100. resolve()
  1101. }
  1102. } else {
  1103. reject()
  1104. }
  1105. })
  1106. })
  1107. })
  1108. },
  1109. handleOkVideo(e) {
  1110. this.loadingVideo = true
  1111. if (showRemove) {
  1112. this.pans[bestIndex].list[nowIndex].videoList = {
  1113. photoId: this.urlList.photoId,
  1114. url: this.urlList.url
  1115. }
  1116. this.loadingVideo = false
  1117. var params = {
  1118. videoSignature: this.urlList.md5,
  1119. pageSize: 20,
  1120. pageNo: 1
  1121. }
  1122. getAction('/cutFrame/material/list', params).then(res => {
  1123. console.log(res)
  1124. if (res.success) {
  1125. if (res.result.records.length > 0) {
  1126. this.pans[bestIndex].list[nowIndex].chouzhenShow = true
  1127. } else {
  1128. this.pans[bestIndex].list[nowIndex].chouzhenShow = false
  1129. }
  1130. }
  1131. })
  1132. this.closeVideo()
  1133. } else {
  1134. var params = {
  1135. url: this.urlList.url,
  1136. type: this.getData('creativeMaterialType'),
  1137. signature: this.urlList.md5,
  1138. accountId: localStorage.getItem('accountId')
  1139. }
  1140. postAction("/kusiShouUpload/video", params).then(res => {
  1141. console.log(res)
  1142. if (res.success) {
  1143. this.pans[bestIndex].list[nowIndex].videoList = {
  1144. photoId: res.result.photoId,
  1145. url: this.urlList.url
  1146. }
  1147. this.loadingVideo = false
  1148. this.closeVideo()
  1149. } else {
  1150. this.messageTip = res.message
  1151. this.loadingVideo = false
  1152. this.urlList = {
  1153. url: "",
  1154. md5: "",
  1155. photoId: ""
  1156. }
  1157. nowIndex = 0
  1158. bestIndex = 0
  1159. }
  1160. })
  1161. }
  1162. },
  1163. deleteData(index, bestIndex, deleteIndex) {
  1164. this.pans[index].list[bestIndex].imageList.splice(deleteIndex, 1)
  1165. },
  1166. handleOkShow(e) {
  1167. //
  1168. this.pans[bestIndex].list[nowIndex].imageList = []
  1169. getAction('/kuaishou/batch/getCreativeCopywriter', {
  1170. code: this.checkVideo[0].signature,
  1171. accountId: localStorage.getItem('accountId')
  1172. }).then(res => {
  1173. if (res.success) {
  1174. this.pans[bestIndex].list[nowIndex].description =
  1175. res.result ? res.result.creativeCopywriter : ''
  1176. }
  1177. })
  1178. getAction('/ctop/MaterialImageInfo/list', {
  1179. videoId: this.checkVideo[0].signature
  1180. }).then(res => {
  1181. // console.log(res)
  1182. if (res.success) {
  1183. this.pans[bestIndex].list[nowIndex].imageUrlList = res.result
  1184. this.pans[bestIndex].list[nowIndex].checkArrImage = res.result.map(item => {
  1185. return item.code
  1186. })
  1187. }
  1188. })
  1189. this.pans[bestIndex].list[nowIndex].videoList = this.checkVideo[0]
  1190. this.visibleMatemal = false
  1191. this.ipagination.current = 1
  1192. var params = {
  1193. videoSignature: this.checkVideo[0].signature,
  1194. pageSize: 20,
  1195. pageNo: 1
  1196. }
  1197. getAction('/cutFrame/material/list', params).then(res => {
  1198. console.log(res)
  1199. if (res.success) {
  1200. if (res.result.records.length > 0) {
  1201. this.pans[bestIndex].list[nowIndex].chouzhenShow = true
  1202. } else {
  1203. this.pans[bestIndex].list[nowIndex].chouzhenShow = false
  1204. }
  1205. }
  1206. })
  1207. },
  1208. judge(item) {
  1209. var re = /[(.*?)]/g
  1210. var array = []
  1211. var temp
  1212. while ((temp = re.exec(item.text))) {
  1213. array.push(temp[1])
  1214. }
  1215. console.log(array)
  1216. item.countTag = array.length
  1217. },
  1218. getChange(item, tag, index) {
  1219. console.log(item)
  1220. this.judge(item)
  1221. var node = document.getElementsByClassName('rending')[index]
  1222. var v = '[' + tag.name + ']'
  1223. if (document.selection) {
  1224. //IE
  1225. node.focus()
  1226. var sel = document.selection.createRange()
  1227. sel.text = v
  1228. sel.select()
  1229. item.description = v
  1230. } else if (node.selectionStart || node.selectionStart == '0') {
  1231. //MOZILLA/GOOGLE
  1232. var startPos = node.selectionStart
  1233. var endPos = node.selectionEnd
  1234. var restoreTop = node.scrollTop
  1235. node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
  1236. if (restoreTop > 0) {
  1237. node.scrollTop = restoreTop
  1238. }
  1239. item.text = node.value
  1240. node.focus()
  1241. node.selectionStart = startPos + v.length
  1242. node.selectionEnd = startPos + v.length
  1243. item.description = node.value
  1244. } else {
  1245. //OTHER
  1246. node.value += v
  1247. item.text = node.value
  1248. node.focus()
  1249. item.description = node.value
  1250. }
  1251. },
  1252. },
  1253. computed: {
  1254. dirImg() {
  1255. let date = new Date()
  1256. let y = date.getFullYear()
  1257. let MM = date.getMonth() + 1
  1258. MM = MM < 10 ? '0' + MM : MM
  1259. let d = date.getDate()
  1260. d = d < 10 ? '0' + d : d
  1261. return 'image/' + y + '-' + MM + '-' + d + '/'
  1262. },
  1263. dirVideo() {
  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 'video/' + y + '-' + MM + '-' + d + '/'
  1271. },
  1272. contentAll() {
  1273. var count, arr = []
  1274. if (this.pans[0].list.length > 0) {
  1275. for (let i = 0; i < this.pans[0].list.length; i++) {
  1276. arr.push(...this.pans[0].list[i].checkArrImage, ...this.pans[0].list[i].imageList)
  1277. }
  1278. return arr.length + this.content
  1279. } else {
  1280. return 0
  1281. }
  1282. },
  1283. listCheck() {
  1284. if (this.pans[0].list.length > 0) {
  1285. if (this.pans[0].list[this.pans[0].list.length - 1].imageUrlList.length == 0 && this.pans[0].list[this.pans[0]
  1286. .list.length - 1]
  1287. .imageList.length == 0) {
  1288. return true
  1289. } else {
  1290. return false
  1291. }
  1292. } else {
  1293. return false
  1294. }
  1295. }
  1296. },
  1297. watch: {
  1298. time(n, o) {
  1299. console.log(n)
  1300. if (n.length > 0) {
  1301. var params = {}
  1302. params.accountId = localStorage.getItem('accountId')
  1303. params.materialType = this.getData('creativeMaterialType')
  1304. params.pageSize = this.ipagination.pageSize
  1305. params.pageNo = 1
  1306. params.channelType = this.channelType
  1307. params.startDate = moment(n[0]).format('YYYY-MM-DD')
  1308. params.endDate = moment(n[1]).format('YYYY-MM-DD')
  1309. this.showVideoList('/kuaishou/batch/getVideoList', params)
  1310. } else {
  1311. var params = {}
  1312. params.accountId = localStorage.getItem('accountId')
  1313. params.materialType = this.getData('creativeMaterialType')
  1314. params.pageSize = this.ipagination.pageSize
  1315. params.pageNo = 1
  1316. params.channelType = this.channelType
  1317. this.ipagination.current = 1
  1318. this.showVideoList('/kuaishou/batch/getVideoList', params)
  1319. }
  1320. },
  1321. visibleVideo(n, o) {
  1322. if (!n) {
  1323. closeAllVideoFun()
  1324. }
  1325. }
  1326. },
  1327. mounted: function () {
  1328. if (localStorage.getItem('pans')) {
  1329. this.pans = JSON.parse(localStorage.getItem('pans')).map(item => {
  1330. return {
  1331. ...item,
  1332. list: []
  1333. }
  1334. })
  1335. this.pansKey = this.pans[0].key
  1336. this.$nextTick(() => {
  1337. this.addCreative(0)
  1338. })
  1339. getAction('/kuaishou/batch/checkCreativeCount', {
  1340. unitId: this.pansKey,
  1341. accountId: localStorage.getItem('accountId')
  1342. }).then(res => {
  1343. console.log(res)
  1344. this.content = res.result
  1345. })
  1346. getAction('/kuaishou/batch/getActionBarText', {
  1347. campaignId: localStorage.getItem('campaignId') ? localStorage.getItem('campaignId') : localStorage
  1348. .getItem('advertisingGroupKey')
  1349. }).then(res => {
  1350. if (res.success) {
  1351. this.appList = res.result
  1352. }
  1353. })
  1354. getAction('/kuaishou/batch/getPageList', {
  1355. accountId: localStorage.getItem('accountId'),
  1356. appId: localStorage.getItem('appId'),
  1357. viewComp: 7
  1358. }).then(res => {
  1359. if (res.success) {
  1360. console.log(res)
  1361. this.siteList = res.result
  1362. }
  1363. })
  1364. }
  1365. getAction('/kuaishou/batch/creativeWord', {
  1366. accountId: localStorage.getItem('accountId')
  1367. }).then(res => {
  1368. if (res.success) {
  1369. this.tags = res.result
  1370. }
  1371. })
  1372. }
  1373. }
  1374. </script>
  1375. <style lang="scss">
  1376. .select_all {
  1377. margin-bottom: 10px;
  1378. }
  1379. .ant_modal_body_container {
  1380. .ant-modal-body {
  1381. max-height: 650px;
  1382. overflow-y: scroll;
  1383. .image_item_container {
  1384. margin: 0 -10px;
  1385. width: 100%;
  1386. .image_item {
  1387. display: inline-block;
  1388. width: 20%;
  1389. padding: 0 10px;
  1390. box-sizing: border-box;
  1391. margin-bottom: 20px;
  1392. .label_item {
  1393. display: block;
  1394. cursor: pointer;
  1395. }
  1396. .item_img {
  1397. width: 100%;
  1398. margin-bottom: 10px;
  1399. }
  1400. .item_text {
  1401. height: 42px;
  1402. overflow: hidden;
  1403. margin-bottom: 0;
  1404. }
  1405. .item_checkbox {
  1406. margin-bottom: 0;
  1407. }
  1408. .video {
  1409. width: 100%;
  1410. }
  1411. }
  1412. }
  1413. }
  1414. .video_item_container {
  1415. .video {
  1416. width: 100%;
  1417. }
  1418. }
  1419. }
  1420. // 多选框
  1421. .checkbox_item_container {
  1422. .item_ul {
  1423. margin: 0 -10px;
  1424. .item_li {
  1425. width: 20%;
  1426. float: left;
  1427. padding: 0 10px;
  1428. box-sizing: border-box;
  1429. .item:hover i {
  1430. display: block;
  1431. cursor: pointer;
  1432. }
  1433. .item {
  1434. position: relative;
  1435. i {
  1436. display: none;
  1437. }
  1438. video {
  1439. width: 100%;
  1440. min-height: 255px;
  1441. }
  1442. .checkbox_item {
  1443. display: block;
  1444. .ant-checkbox {
  1445. display: inline-block;
  1446. }
  1447. span {
  1448. display: block;
  1449. padding: 0;
  1450. .item_txt {
  1451. text-align: left;
  1452. height: 42px;
  1453. overflow: hidden;
  1454. }
  1455. }
  1456. }
  1457. }
  1458. }
  1459. }
  1460. }
  1461. // @media (min-width: 1024px){
  1462. // .checkbox_item_container {
  1463. // width:70%
  1464. // }
  1465. // } /*>=1024的设备*/
  1466. // @media (min-width: 1100px) {
  1467. // .checkbox_item_container {
  1468. // width:70%
  1469. // }
  1470. // } /*>=1100的设备*/
  1471. @media (min-width: 1280px) {
  1472. .checkbox_item_container_size {
  1473. width: 70%;
  1474. }
  1475. }
  1476. /*>=1280的设备*/
  1477. // @media (min-width: 1366px) {
  1478. // }
  1479. // @media (min-width: 1440px) {
  1480. // }
  1481. // @media (min-width: 1680px) {
  1482. // }
  1483. @media (min-width: 1920px) {
  1484. .checkbox_item_container_size {
  1485. width: 50%;
  1486. }
  1487. }
  1488. </style>