|
@@ -0,0 +1,955 @@
|
|
|
+<style scoped lang="scss">
|
|
|
+.chouzhen {
|
|
|
+ border-style: solid;
|
|
|
+ border-width: 1px;
|
|
|
+ border-color: #e4e4e4;
|
|
|
+ width: calc(20% - 10px);
|
|
|
+ padding: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #fff;
|
|
|
+ position: relative;
|
|
|
+ z-index: 99;
|
|
|
+ float: left;
|
|
|
+}
|
|
|
+
|
|
|
+li.chouzhen.first:before {
|
|
|
+ font-size: 12px;
|
|
|
+ content: '首帧';
|
|
|
+ position: absolute;
|
|
|
+ top: 7px;
|
|
|
+ left: 5px;
|
|
|
+ width: 36px;
|
|
|
+ height: 20px;
|
|
|
+ color: rgb(255, 255, 255);
|
|
|
+ line-height: 20px;
|
|
|
+ text-align: center;
|
|
|
+ background: rgba(0, 0, 0, 0.5);
|
|
|
+ border-radius: 2px;
|
|
|
+ z-index: 1000;
|
|
|
+}
|
|
|
+.display-none-selset {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+.logo {
|
|
|
+ padding-left: 24px;
|
|
|
+ img {
|
|
|
+ height: 32px !important;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #CED2D9;
|
|
|
+ // line-height: 22px;
|
|
|
+ margin-left: 20px;
|
|
|
+ padding-left: 21px;
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+ .name::before {
|
|
|
+ content: '';
|
|
|
+ width: 1px;
|
|
|
+ height: 18px;
|
|
|
+ background: rgba(255, 255, 255, 0.31);
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ margin-top: -9px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.chartBox {
|
|
|
+ margin-top: 80px;
|
|
|
+ .chartBody {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ }
|
|
|
+ .search-box {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.hide-checkbox .ant-table-thead .ant-table-selection {
|
|
|
+ display: none;
|
|
|
+}
|
|
|
+.look-preview .ant-card-head-title {
|
|
|
+ font-weight: 700;
|
|
|
+}
|
|
|
+// .look-preview textarea {
|
|
|
+// resize: none;
|
|
|
+// border: none;
|
|
|
+// outline: 0;
|
|
|
+// box-shadow: none;
|
|
|
+// }
|
|
|
+.create-info .ant-form-item {
|
|
|
+ margin-bottom: 0 !important;
|
|
|
+}
|
|
|
+.fengmian .ant-checkbox-wrapper:first-child {
|
|
|
+ margin-left: 8px;
|
|
|
+}
|
|
|
+@media screen and (max-width: 1200px) {
|
|
|
+ // 这里写对应要修改的样式如:
|
|
|
+ .look-preview .el-step__title {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+}
|
|
|
+.line-height-one .ant-form-item-control {
|
|
|
+ line-height: inherit;
|
|
|
+}
|
|
|
+.creat-all-info .ant-form-item-control {
|
|
|
+ width: 60%;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+.display-none-selset {
|
|
|
+ display: none !important;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<template>
|
|
|
+ <div ref="questionnaireBox" class="look-preview">
|
|
|
+ <a-layout-header
|
|
|
+ class="ant-header-fixedHeader ant-header-side-opened"
|
|
|
+ :style="{ padding: '0' }"
|
|
|
+ style="background: #0b2040 !important; position: fixed; top: 0; z-index: 100; width: 100%"
|
|
|
+ >
|
|
|
+ <div :class="['top-nav-header-index', theme]">
|
|
|
+ <div class="header-index-wide">
|
|
|
+ <div class="header-index-left" :style="topMenuStyle.headerIndexLeft">
|
|
|
+ <div class="logo">
|
|
|
+ <img src="~@/assets/logoNew1.png" alt="logo" />
|
|
|
+ <span class="name">有腾投放管家</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </a-layout-header>
|
|
|
+ <div style="width: 100%; padding: 0 20px" class="chartBox">
|
|
|
+ <a-card title="预览区">
|
|
|
+ <div slot="extra">
|
|
|
+ 预估生成<span style="color: #409EFF">{{ groupCount }}</span
|
|
|
+ >个广告组 <a-button type="primary" style="margin: 0 15px"> 全部提交审核 </a-button>
|
|
|
+ </div>
|
|
|
+ <div v-if="campaignList">
|
|
|
+ <h2 style="display: flex; justify-content: space-between">
|
|
|
+ <span>账户id:{{ accountId }}</span
|
|
|
+ ><span style="font-size: 14px; font-weight: 500"
|
|
|
+ >广告计划数量:{{ campaignList.length }} 广告组数量:{{ groupCount }}</span
|
|
|
+ >
|
|
|
+ <div>
|
|
|
+ <a-dropdown>
|
|
|
+ <a-menu slot="overlay" @click="handleMenuClick">
|
|
|
+ <a-menu-item key="1" :disabled="groupCheck.length == 0">批量修改预算与出价 </a-menu-item>
|
|
|
+ <a-menu-item key="2" :disabled="groupCheck.length == 0"> 批量修改监测链接 </a-menu-item>
|
|
|
+ </a-menu>
|
|
|
+ <a-button style="margin: 0 15px"> 批量修改 <a-icon type="down" /> </a-button>
|
|
|
+ </a-dropdown>
|
|
|
+ <a-popconfirm :title="`确定要删除这 ${groupCheck.length} 项吗?`" @confirm="handleConfirmDelete">
|
|
|
+ <a-button style="margin: 0 15px" :disabled="groupCheck.length == 0" @click="">
|
|
|
+ 批量删除广告组
|
|
|
+ </a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+
|
|
|
+ <a-button type="primary" style="margin: 0 15px"> 全部提交审核 </a-button>
|
|
|
+ </div>
|
|
|
+ </h2>
|
|
|
+ <!-- <div v-for="(item, index) in campaignList" :key="index"></div> -->
|
|
|
+ <el-collapse v-model="activeName" accordion>
|
|
|
+ <el-collapse-item v-for="(item, index) in campaignList" :key="index" :name="item.id">
|
|
|
+ <template slot="title">
|
|
|
+ <h3 style="display: flex; justify-content: space-between; width: 80%">
|
|
|
+ <span style="width: 50%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
|
|
|
+ >广告计划:{{ item.campaignName }}</span
|
|
|
+ >
|
|
|
+ <span style="width: 20%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
|
|
|
+ >营销目标:{{ item.campaignType == 2 ? '提升应用安装' : '收集销售线索' }}</span
|
|
|
+ >
|
|
|
+ <span style="width: 10%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap"
|
|
|
+ >预算:{{ item.dayBudget ? item.dayBudget / 1000 + '元' : '不限' }}</span
|
|
|
+ >
|
|
|
+ <a-checkbox style="width: 10%" v-model="item.checkAll" @click.stop> 全选 </a-checkbox>
|
|
|
+ </h3>
|
|
|
+ </template>
|
|
|
+ <a-table
|
|
|
+ :columns="columns"
|
|
|
+ :data-source="item.kuaishouBatchGroupPreviews"
|
|
|
+ class="components-table-demo-nested"
|
|
|
+ :pagination="false"
|
|
|
+ :scroll="{ x: 2100 }"
|
|
|
+ bordered
|
|
|
+ tableLayout="fixed"
|
|
|
+ :row-selection="{ selectedRowKeys: groupCheck, onChange: onSelectChange }"
|
|
|
+ rowKey="id"
|
|
|
+ >
|
|
|
+ <span slot="unitName" slot-scope="text, records">
|
|
|
+ <p style="text-align: left">
|
|
|
+ {{ text }}
|
|
|
+ </p>
|
|
|
+ <a-icon
|
|
|
+ type="edit"
|
|
|
+ style="float: left; color: #409EFF; margin-top: 5px"
|
|
|
+ class="count"
|
|
|
+ @click.stop="editUnitName(records)"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <span slot="bidType" slot-scope="text, records">
|
|
|
+ {{ text | bidType }}
|
|
|
+ </span>
|
|
|
+ <span slot="sceneId" slot-scope="text, records">
|
|
|
+ <p v-for="(item, index) in JSON.parse(text)" :key="index" style="text-align: left">
|
|
|
+ {{ item | kuaishouSceneId }}{{ index == JSON.parse(text).length - 1 ? '' : ',' }}
|
|
|
+ </p>
|
|
|
+ </span>
|
|
|
+ <span slot="materialArr" slot-scope="text, records">
|
|
|
+ <p style="color: #409EFF; cursor: pointer" @click="lookVideo(text)">
|
|
|
+ 已选{{ text ? text.length : 0 }}个视频素材
|
|
|
+ </p>
|
|
|
+ </span>
|
|
|
+ <span slot="dayBudget" slot-scope="text, records">
|
|
|
+ <p style="text-align: left">
|
|
|
+ 预算:{{ records.dayBudget || records.dayBudget == 0 ? records.dayBudget / 1000 + '元' : '不限' }}
|
|
|
+ </p>
|
|
|
+ <p style="text-align: left">
|
|
|
+ 出价:{{ records.bid ? records.bid / 1000 : records.cpaBid ? records.cpaBid / 1000 : '' }}元
|
|
|
+ </p>
|
|
|
+ <p style="text-align: left">
|
|
|
+ 深度转化出价:{{ records.deepConversionBid ? records.deepConversionBid / 1000 : '无' }}
|
|
|
+ </p>
|
|
|
+ <a-icon
|
|
|
+ type="edit"
|
|
|
+ style="float: left; color: #409EFF"
|
|
|
+ class="count"
|
|
|
+ @click.stop="editBid(records, records.bid ? 'bid' : 'cpaBid')"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <span slot="appId" slot-scope="text, records">
|
|
|
+ <p style="text-align: left">
|
|
|
+ {{ setAppName(text) }}
|
|
|
+ </p>
|
|
|
+ <a-icon
|
|
|
+ type="edit"
|
|
|
+ style="float: left; color: #409EFF; margin-top: 5px"
|
|
|
+ class="count"
|
|
|
+ @click="editAppAndSite(records)"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <span slot="action" slot-scope="text, record">
|
|
|
+ <a-popconfirm :title="`确定要删除这项吗?`" @confirm="removeGroup(record.id)">
|
|
|
+ <a>删除</a>
|
|
|
+ <span class="gap"></span>
|
|
|
+ </a-popconfirm>
|
|
|
+
|
|
|
+ <!-- <a-divider type="vertical" />
|
|
|
+ <a>Delete</a> -->
|
|
|
+ </span>
|
|
|
+ <span slot="descriptionArr" slot-scope="text, records">
|
|
|
+ <p
|
|
|
+ v-for="(item, index) in new Set(text)"
|
|
|
+ :key="index"
|
|
|
+ style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left"
|
|
|
+ :title="item"
|
|
|
+ >
|
|
|
+ {{ item }}
|
|
|
+ </p>
|
|
|
+ </span>
|
|
|
+
|
|
|
+ <span slot="clickTrackUrl" slot-scope="text, records">
|
|
|
+ <p style="text-align: left">{{ text }}</p>
|
|
|
+
|
|
|
+ <a-icon
|
|
|
+ type="edit"
|
|
|
+ style="float: left; color: #409EFF"
|
|
|
+ class="count"
|
|
|
+ @click.stop="editClickTrackUrl(records)"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <span slot="isSuccess" slot-scope="text, records">{{ text ? '待提交' : '提交成功' }}</span>
|
|
|
+ <span slot="siteId" slot-scope="text, records">
|
|
|
+ {{ text ? setSiteName(records.appId, text) : '无' }}
|
|
|
+ </span>
|
|
|
+ </a-table>
|
|
|
+ </el-collapse-item>
|
|
|
+ </el-collapse>
|
|
|
+ </div>
|
|
|
+ </a-card>
|
|
|
+ <a-modal
|
|
|
+ title="修改广告组名称"
|
|
|
+ v-model="unitNameEditVisible"
|
|
|
+ :width="500"
|
|
|
+ @ok="okUnitName"
|
|
|
+ @cancel="unitNameEditVisible = false"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ >
|
|
|
+ <!-- <a-form-model
|
|
|
+ ref="materialForm"
|
|
|
+ :hideRequiredMark="true"
|
|
|
+ >
|
|
|
+ <a-row :gutter="16"> -->
|
|
|
+ <div style="display: flex; width: 100%">
|
|
|
+ <span>广告组名称:</span>
|
|
|
+ <a-input
|
|
|
+ v-model="unitName"
|
|
|
+ style="width: 70%; margin-left: 10px; position: relative; top: -4px"
|
|
|
+ placeholder="请输入广告组名称"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- </a-row>
|
|
|
+ </a-form-model> -->
|
|
|
+ </a-modal>
|
|
|
+ <a-modal
|
|
|
+ title="修改出价预算"
|
|
|
+ v-model="bidEditVisible"
|
|
|
+ :width="500"
|
|
|
+ @ok="okUnitBid"
|
|
|
+ @cancel="bidEditVisible = false"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ >
|
|
|
+ <a-form :form="ruleConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
|
|
|
+ <a-form-item label="预算">
|
|
|
+ <a-input-number
|
|
|
+ v-decorator="['dayBudget']"
|
|
|
+ style="width: 100%"
|
|
|
+ placeholder="不小于500,不超过100000000,仅支持输入自然数,如填0,则为不限"
|
|
|
+ />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="出价">
|
|
|
+ <a-input-number v-decorator="['bid']" style="width: 100%" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="深度转化出价">
|
|
|
+ <a-input-number v-decorator="['deepConversionBid']" style="width: 100%" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ <a-modal
|
|
|
+ title="修改应用"
|
|
|
+ v-model="appIdEditVisible"
|
|
|
+ :width="700"
|
|
|
+ @ok="okAppId"
|
|
|
+ @cancel="appIdEditVisible = false"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ >
|
|
|
+ <a-form :form="appIdConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
|
|
|
+ <a-form-item label="应用">
|
|
|
+ <a-select v-decorator="['appId']" style="width: 100%" allowClear @change="setSiteId">
|
|
|
+ <a-select-option v-for="appModel in appListArr" :key="appModel.appId" :value="appModel.appId">
|
|
|
+ {{ appModel.appName }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="应用下载详情页">
|
|
|
+ <a-select
|
|
|
+ v-decorator="['siteId']"
|
|
|
+ style="width: 100%"
|
|
|
+ allowClear
|
|
|
+ :disabled="
|
|
|
+ getData('appId', 'appIdConfigForm') == undefined ||
|
|
|
+ getData('appId', 'appIdConfigForm') == null ||
|
|
|
+ getData('appId', 'appIdConfigForm') == ''
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <a-select-option v-for="appModel in siteList" :key="appModel.siteId" :value="appModel.siteId">
|
|
|
+ {{ appModel.name }}
|
|
|
+ </a-select-option>
|
|
|
+ </a-select>
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ <a-modal
|
|
|
+ title="修改监测链接"
|
|
|
+ v-model="clickTrackUrlEditVisible"
|
|
|
+ :width="700"
|
|
|
+ @ok="okClickTrackUrl"
|
|
|
+ @cancel="clickTrackUrlEditVisible = false"
|
|
|
+ :destroyOnClose="true"
|
|
|
+ >
|
|
|
+ <h4 style="text-align: center">不填则保持原样</h4>
|
|
|
+ <a-form :form="clickTrackUrlConfigForm" layout="horizontal" hide-required-mark v-bind="formItemLayout">
|
|
|
+ <a-form-item label="监测链接">
|
|
|
+ <a-input v-decorator="['clickTrackUrl']" placeholder="请输入监测链接" />
|
|
|
+ </a-form-item>
|
|
|
+ <a-form-item label="点击监测链接">
|
|
|
+ <a-input v-decorator="['actionbarClickUrl']" placeholder="请输入点击监测链接" />
|
|
|
+ </a-form-item>
|
|
|
+ </a-form>
|
|
|
+ </a-modal>
|
|
|
+
|
|
|
+ <a-modal title="素材预览" v-model="coverPreviewVisible" :width="1000" :footer="null">
|
|
|
+ <a-carousel arrows class="cover_carousel_con" v-if="videoData.length > 0">
|
|
|
+ <div v-for="(item, index) in videoData" :key="index" class="content">
|
|
|
+ <div style="display: flex !important; justify-content: space-around">
|
|
|
+ <img :src="item.videoUrl.coverUrl" :width="300" />
|
|
|
+ <img :src="item.imageUrl" :width="300" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <a-icon
|
|
|
+ type="left-circle"
|
|
|
+ slot="prevArrow"
|
|
|
+ slot-scope
|
|
|
+ style="left: 10px; zindex: 9; font-size: 30px; color: black"
|
|
|
+ />
|
|
|
+ <a-icon
|
|
|
+ type="right-circle"
|
|
|
+ slot="nextArrow"
|
|
|
+ slot-scope
|
|
|
+ style="right: 10px; zindex: 9; font-size: 30px; color: black"
|
|
|
+ />
|
|
|
+ </a-carousel>
|
|
|
+ </a-modal>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+// import UserMenu from '../tools/UserMenu'
|
|
|
+// import SMenu from '../menu/'
|
|
|
+import Logo from '@/components/tools/Logo.vue'
|
|
|
+import pick from 'lodash.pick'
|
|
|
+import { mixin } from '@/utils/mixin.js'
|
|
|
+import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
|
|
|
+import moment from 'moment'
|
|
|
+import selectCheckAll from '@/components/formComponents/toutiaoTime'
|
|
|
+import checkBoxGroup from '@/components/formComponents/checkBoxGroup'
|
|
|
+function tqFun(qcArr1) {
|
|
|
+ var tempArr = []
|
|
|
+ function bbFun(qcArr) {
|
|
|
+ for (var i = 0; i < qcArr.length; i++) {
|
|
|
+ if (qcArr[i] instanceof Array) {
|
|
|
+ bbFun(qcArr[i])
|
|
|
+ } else {
|
|
|
+ tempArr.push(qcArr[i])
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return tempArr
|
|
|
+ }
|
|
|
+ return bbFun(qcArr1)
|
|
|
+}
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: 'GlobalHeader',
|
|
|
+ components: {
|
|
|
+ // UserMenu,
|
|
|
+ // SMenu,
|
|
|
+ Logo,
|
|
|
+ Treeselect,
|
|
|
+ selectCheckAll,
|
|
|
+ checkBoxGroup,
|
|
|
+ },
|
|
|
+ mixins: [mixin],
|
|
|
+ props: {
|
|
|
+ mode: {
|
|
|
+ type: String,
|
|
|
+ // sidemenu, topmenu
|
|
|
+ default: 'sidemenu',
|
|
|
+ },
|
|
|
+ theme: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: 'dark',
|
|
|
+ },
|
|
|
+ collapsed: {
|
|
|
+ type: Boolean,
|
|
|
+ required: false,
|
|
|
+ default: false,
|
|
|
+ },
|
|
|
+ device: {
|
|
|
+ type: String,
|
|
|
+ required: false,
|
|
|
+ default: 'desktop',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ videoData: [],
|
|
|
+ coverPreviewVisible: false,
|
|
|
+ clickTrackUrlEditVisible: false,
|
|
|
+
|
|
|
+ appIdEditVisible: false,
|
|
|
+ ruleConfigForm: this.$form.createForm(this),
|
|
|
+ appIdConfigForm: this.$form.createForm(this),
|
|
|
+ clickTrackUrlConfigForm: this.$form.createForm(this),
|
|
|
+ formItemLayout: {
|
|
|
+ labelCol: { span: 5 },
|
|
|
+ wrapperCol: { span: 19 },
|
|
|
+ },
|
|
|
+ unitNameEditVisible: false, //广告组模态框
|
|
|
+ bidEditVisible: false,
|
|
|
+
|
|
|
+ topMenuStyle: {
|
|
|
+ headerIndexLeft: {},
|
|
|
+ topNavHeader: {},
|
|
|
+ headerIndexRight: {},
|
|
|
+ topSmenuStyle: {},
|
|
|
+ },
|
|
|
+ accountId: '',
|
|
|
+ batchId: null,
|
|
|
+ campaignList: null,
|
|
|
+ activeName: null,
|
|
|
+ columns: [
|
|
|
+ {
|
|
|
+ title: '广告组名称',
|
|
|
+ dataIndex: 'unitName',
|
|
|
+ key: 'unitName',
|
|
|
+ width: 200,
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'unitName' },
|
|
|
+ fixed: 'left',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '优化目标',
|
|
|
+ dataIndex: 'bidType',
|
|
|
+ key: 'bidType',
|
|
|
+ width: 100,
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'bidType' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '预算与出价',
|
|
|
+ dataIndex: 'dayBudget',
|
|
|
+ key: 'dayBudget',
|
|
|
+ scopedSlots: { customRender: 'dayBudget' },
|
|
|
+ width: 150,
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告位',
|
|
|
+ dataIndex: 'sceneId',
|
|
|
+ key: 'sceneId',
|
|
|
+ width: 140,
|
|
|
+ scopedSlots: { customRender: 'sceneId' },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '快手应用/落地页',
|
|
|
+ dataIndex: 'appId',
|
|
|
+ key: 'appId',
|
|
|
+ width: 150,
|
|
|
+ scopedSlots: { customRender: 'appId' },
|
|
|
+ align: 'center',
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '定向包',
|
|
|
+ dataIndex: 'templateName',
|
|
|
+ key: 'templateName',
|
|
|
+ width: 150,
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'templateName' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '广告语',
|
|
|
+ dataIndex: 'descriptionArr',
|
|
|
+ key: 'descriptionArr',
|
|
|
+ width: 350,
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'descriptionArr' },
|
|
|
+ ellipsis: true,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创意素材',
|
|
|
+ dataIndex: 'materialArr',
|
|
|
+ key: 'materialArr',
|
|
|
+ width: 150,
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'materialArr' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '监测链接',
|
|
|
+ dataIndex: 'clickTrackUrl',
|
|
|
+ key: 'clickTrackUrl',
|
|
|
+ width: 350,
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'clickTrackUrl' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '应用下载详情页',
|
|
|
+ dataIndex: 'siteId',
|
|
|
+ key: 'siteId',
|
|
|
+ width: 150,
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'siteId' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '状态',
|
|
|
+ dataIndex: 'isSuccess',
|
|
|
+ key: 'isSuccess',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'right',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'isSuccess' },
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ key: 'action',
|
|
|
+ width: 100,
|
|
|
+ fixed: 'right',
|
|
|
+ align: 'center',
|
|
|
+ scopedSlots: { customRender: 'action' },
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ appListArr: [],
|
|
|
+ groupCheck: [],
|
|
|
+ groupCheckRow: [],
|
|
|
+ unitId: '',
|
|
|
+ unitName: '',
|
|
|
+ bidType: 'cpaBid',
|
|
|
+ bid: null,
|
|
|
+ dayBudget: null,
|
|
|
+ deepConversionBid: null,
|
|
|
+ siteList: [],
|
|
|
+ allData: null,
|
|
|
+ editAll: false,
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ groupCount() {
|
|
|
+ var count = 0
|
|
|
+ if (this.campaignList) {
|
|
|
+ for (let i = 0; i < this.campaignList.length; i++) {
|
|
|
+ count += this.campaignList[i].kuaishouBatchGroupPreviews.length
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return count
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ mounted() {
|
|
|
+ this.accountId = this.$route.query.accountId
|
|
|
+ this.batchId = this.$route.query.batchId
|
|
|
+ this.getPreviewList()
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ let params = {}
|
|
|
+ params.accountId = this.accountId
|
|
|
+ this.getAction('/kuaishou/batch/getAppList', params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.appListArr = res.result.map((item, index) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ key: item.appId + '',
|
|
|
+ title: item.appName,
|
|
|
+ siteId: null,
|
|
|
+ siteList: [],
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleConfirmDelete() {
|
|
|
+ this.getAction('/kuaishouBatch/campaignPreview/deleteBatch', {
|
|
|
+ ids: this.groupCheck,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.groupCheck = []
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.getPreviewList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ handleMenuClick(e) {
|
|
|
+ if (e.key == '1') {
|
|
|
+ this.bidEditVisible = true
|
|
|
+ } else {
|
|
|
+ this.clickTrackUrlEditVisible = true
|
|
|
+ }
|
|
|
+
|
|
|
+ this.editAll = true
|
|
|
+ },
|
|
|
+ setSiteId(e) {
|
|
|
+ this.getSiteList(e)
|
|
|
+ },
|
|
|
+ getData(className, formName) {
|
|
|
+ return this[formName].getFieldValue(className)
|
|
|
+ },
|
|
|
+ getSiteList(item) {
|
|
|
+ this.getAction('/kuaishou/batch/getPageList', {
|
|
|
+ accountId: this.accountId,
|
|
|
+ appId: item,
|
|
|
+ viewComp: 7,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ console.log(item)
|
|
|
+ this.siteList = res.result
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //rules
|
|
|
+ handleConfirmValue(rule, value, callback) {
|
|
|
+ if (value == 0) {
|
|
|
+ callback()
|
|
|
+ } else if (value == '' || (value > 0 && value < 500) || value >= 100000000) {
|
|
|
+ callback('不小于500, 不超过100000000,仅支持输入自然数')
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+ },
|
|
|
+
|
|
|
+ getPreviewList() {
|
|
|
+ this.getAction('/kuaishouBatch/campaignPreview/queryByBatchId', {
|
|
|
+ accountId: this.accountId,
|
|
|
+ batchId: this.batchId,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.campaignList = res.result.campaignList.map((item) => {
|
|
|
+ return {
|
|
|
+ ...item,
|
|
|
+ checkAll: false,
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ // this.activeName = this.campaignList[0].id
|
|
|
+ } else {
|
|
|
+ this.$message.error('网络开小差了,请刷新后重试')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ onSelectChange(selectedRowKeys, selectionRows) {
|
|
|
+ this.groupCheck = selectedRowKeys
|
|
|
+ this.groupCheckRow = selectionRows
|
|
|
+ console.log(this.groupCheck, this.groupCheckRow)
|
|
|
+ },
|
|
|
+ setAppName(appId) {
|
|
|
+ // this.$nextTick(() => {
|
|
|
+ var data = this.appListArr.filter((item) => {
|
|
|
+ return item.appId == appId
|
|
|
+ })
|
|
|
+ if (data.length > 0) {
|
|
|
+ return data[0].appName
|
|
|
+ }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ setSiteName(appId, siteId) {
|
|
|
+ var data = null
|
|
|
+ this.getAction('/kuaishou/batch/getPageList', {
|
|
|
+ accountId: this.accountId,
|
|
|
+ appId: appId,
|
|
|
+ viewComp: 7,
|
|
|
+ }).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ data = res.result.filter((item) => {
|
|
|
+ return item.siteId == siteId
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ if (data.length > 0) {
|
|
|
+ return data[0].name
|
|
|
+ }
|
|
|
+ },
|
|
|
+ editUnitName(item) {
|
|
|
+ this.unitNameEditVisible = true
|
|
|
+ this.unitName = item.unitName
|
|
|
+ this.unitId = item.id
|
|
|
+ },
|
|
|
+ okUnitName() {
|
|
|
+ this.postDataAction('/kuaishouBatch/groupPreview/edit', { id: this.unitId, unitName: this.unitName }).then(
|
|
|
+ (res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.getPreviewList()
|
|
|
+ this.unitNameEditVisible = false
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+ },
|
|
|
+ editBid(item, type) {
|
|
|
+ console.log(type)
|
|
|
+ this.editAll = false
|
|
|
+ this.unitId = item.id
|
|
|
+ this.bidEditVisible = true
|
|
|
+ this.bidType = type
|
|
|
+ this.bid = item[type] / 1000
|
|
|
+ this.dayBudget = item.dayBudget / 1000
|
|
|
+ this.deepConversionBid = item.deepConversionBid ? item.deepConversionBid / 1000 : null
|
|
|
+ },
|
|
|
+ okUnitBid() {
|
|
|
+ this.ruleConfigForm.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ var params = {}
|
|
|
+ if (this.bidType == 'cpaBid') {
|
|
|
+ params.cpaBid = values.bid == undefined ? null : values.bid * 1000
|
|
|
+ } else {
|
|
|
+ params.bid = values.bid == undefined ? null : values.bid * 1000
|
|
|
+ }
|
|
|
+ params.dayBudget = values.dayBudget == undefined ? null : values.dayBudget * 1000
|
|
|
+ params.deepConversionBid = values.deepConversionBid == undefined ? null : values.deepConversionBid * 1000
|
|
|
+ if (!this.editAll) {
|
|
|
+ params.id = this.unitId
|
|
|
+
|
|
|
+ this.postDataAction('/kuaishouBatch/groupPreview/edit', params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.getPreviewList()
|
|
|
+ this.bidEditVisible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (this.editAll) {
|
|
|
+ params.groupIds = this.groupCheck
|
|
|
+ this.postDataAction('/kuaishouBatch/groupPreview/batchEdit', params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.groupCheck = []
|
|
|
+ this.getPreviewList()
|
|
|
+ this.bidEditVisible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ editAppAndSite(item) {
|
|
|
+ // /\{{([^}]+)\}}/g;
|
|
|
+ this.unitId = item.id
|
|
|
+ this.appIdEditVisible = true
|
|
|
+ this.allData = item
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.appIdConfigForm.setFieldsValue({ appId: item.appId, siteId: item.siteId })
|
|
|
+ this.getSiteList(item.appId)
|
|
|
+ })
|
|
|
+
|
|
|
+ // var pattern = /\{{应用名称}}/g
|
|
|
+ // console.log(item.unitNameFormat.replace(pattern, '*'))
|
|
|
+ },
|
|
|
+ okAppId() {
|
|
|
+ this.appIdConfigForm.validateFields((err, values) => {
|
|
|
+ if (!err) {
|
|
|
+ var appPattern = /\{{应用名称}}/g
|
|
|
+ var templatePattern = /\{{定向包}}/g
|
|
|
+ var timePattern = /\{{日期}}/g
|
|
|
+ var versionPattern = /\{{渠道号}}/g
|
|
|
+ var typePattern = /\{{创意制作方式}}/g
|
|
|
+ var positionPattern = /\{{广告位置}}/g
|
|
|
+
|
|
|
+ var data = []
|
|
|
+ if (values.appId != undefined) {
|
|
|
+ data = this.appListArr.filter((item) => {
|
|
|
+ return item.appId == values.appId
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ data = this.appListArr.filter((item) => {
|
|
|
+ return item.appId == this.allData.appId
|
|
|
+ })
|
|
|
+ }
|
|
|
+ var params = {}
|
|
|
+ params.appId = values.appId == undefined ? null : values.appId
|
|
|
+ params.siteId = values.siteId == undefined ? null : values.siteId
|
|
|
+ // params.unitName = this.allData.unitNameFormat.replace(pattern, '*')
|
|
|
+ if (appPattern.test(this.allData.unitNameFormat)) {
|
|
|
+ this.allData.unitNameFormat = this.allData.unitNameFormat.replace(appPattern, data[0].appName)
|
|
|
+ }
|
|
|
+ if (templatePattern.test(this.allData.unitNameFormat)) {
|
|
|
+ this.allData.unitNameFormat = this.allData.unitNameFormat.replace(
|
|
|
+ templatePattern,
|
|
|
+ this.allData.templateName
|
|
|
+ )
|
|
|
+ }
|
|
|
+ if (timePattern.test(this.allData.unitNameFormat)) {
|
|
|
+ this.allData.unitNameFormat = this.allData.unitNameFormat.replace(timePattern, this.allData.beginTime)
|
|
|
+ }
|
|
|
+ if (versionPattern.test(this.allData.unitNameFormat)) {
|
|
|
+ this.allData.unitNameFormat = this.allData.unitNameFormat.replace(versionPattern, data[0].appVersion)
|
|
|
+ }
|
|
|
+ if (typePattern.test(this.allData.unitNameFormat)) {
|
|
|
+ this.allData.unitNameFormat = this.allData.unitNameFormat.replace(typePattern, '自定义')
|
|
|
+ }
|
|
|
+ if (positionPattern.test(this.allData.unitNameFormat)) {
|
|
|
+ this.allData.unitNameFormat = this.allData.unitNameFormat.replace(
|
|
|
+ positionPattern,
|
|
|
+ JSON.parse(this.allData.sceneId)[0] == 1
|
|
|
+ ? '优选'
|
|
|
+ : JSON.parse(this.allData.sceneId)[0] == 5
|
|
|
+ ? '联盟'
|
|
|
+ : '按场景'
|
|
|
+ )
|
|
|
+ }
|
|
|
+ params.unitName = this.allData.unitNameFormat
|
|
|
+ params.id = this.unitId
|
|
|
+
|
|
|
+ this.postDataAction('/kuaishouBatch/groupPreview/edit', params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.getPreviewList()
|
|
|
+ this.appIdEditVisible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ editClickTrackUrl(item) {
|
|
|
+ this.editAll = false
|
|
|
+ this.clickTrackUrlEditVisible = true
|
|
|
+ this.unitId = item.id
|
|
|
+ },
|
|
|
+ okClickTrackUrl() {
|
|
|
+ this.clickTrackUrlConfigForm.validateFields((err, values) => {
|
|
|
+ var params = {}
|
|
|
+ params.clickTrackUrl =
|
|
|
+ values.clickTrackUrl == null || values.clickTrackUrl == undefined ? null : values.clickTrackUrl
|
|
|
+ params.actionbarClickUrl =
|
|
|
+ values.actionbarClickUrl == null || values.actionbarClickUrl == undefined ? null : values.actionbarClickUrl
|
|
|
+
|
|
|
+ if (!this.editAll) {
|
|
|
+ params.id = this.unitId
|
|
|
+ this.postDataAction('/kuaishouBatch/groupPreview/edit', params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.getPreviewList()
|
|
|
+ this.clickTrackUrlEditVisible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else if (this.editAll) {
|
|
|
+ params.groupIds = this.groupCheck
|
|
|
+ this.postDataAction('/kuaishouBatch/groupPreview/batchEdit', params).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.groupCheck = []
|
|
|
+ this.getPreviewList()
|
|
|
+ this.clickTrackUrlEditVisible = false
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ lookVideo(item) {
|
|
|
+ this.videoData = []
|
|
|
+ for (let i = 0; i < item.length; i++) {
|
|
|
+ this.setVideUrl(item[i].photoId).then((res) => {
|
|
|
+ item[i].videoUrl = res
|
|
|
+ this.videoData.push(item[i])
|
|
|
+ if (this.videoData.length == item.length) {
|
|
|
+ this.coverPreviewVisible = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ setVideUrl(photoId) {
|
|
|
+ this.videoList = []
|
|
|
+ return new Promise((resolve, reject) => {
|
|
|
+ this.getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ resolve({ ...res.result, photoId: photoId })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ // this.getAction('/batch/kuaiShouGroupTemplate/getUrlByPhotoId', { photoId: photoId }).then((res) => {
|
|
|
+ // if (res.success) {
|
|
|
+ // this.videoList.push({ url: res.result.url, photoId: photoId, coverUrl: res.result.coverUrl })
|
|
|
+ // return res.result.url
|
|
|
+ // } else {
|
|
|
+ // }
|
|
|
+ // })
|
|
|
+ },
|
|
|
+ removeGroup(id) {
|
|
|
+ this.getAction('/kuaishouBatch/groupPreview/delete', { id: id }).then((res) => {
|
|
|
+ if (res.success) {
|
|
|
+ this.$message.success('删除成功')
|
|
|
+ this.getPreviewList()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+</style>
|