123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461 |
- <style>
- .create-campaign .ant-form-item-control {
- line-height: inherit;
- }
- </style>
- <template>
- <a-card :body-style="{ padding: '24px 32px' }" :bordered="false" class="create-campaign">
- <a-form @submit="handleSubmit" :form="form">
- <a-form-item
- label="选择账户"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <Treeselect :appId.sync="accountIds" request="2,4" ref="treeSelect" style="width: 100%" />
- </a-form-item>
- <a-form-item
- label="推广目的"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group v-decorator="['type', { initialValue: 2 }]" buttonStyle="solid">
- <!-- <a-radio-button
- v-for="purpose in typeList"
- :key="purpose.itemText"
- :value="purpose.itemValue"
- >{{purpose.itemText}}</a-radio-button> -->
- <a-radio-button :value="2">提升应用安装</a-radio-button>
- <a-radio-button :value="3">获取电商下单</a-radio-button>
- <a-radio-button :value="4">推广品牌活动</a-radio-button>
- <a-radio-button :value="5">收集销售线索</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="创建数量"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <!-- {{ createTotal }} -->
- <a-input-number
- v-decorator="['createTotal', { initialValue: 1 }]"
- :min="1"
- :max="10"
- @change="changeCreateTotal"
- />
- </a-form-item>
- <a-form-item
- label="命名方式"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group v-decorator="['nameType', { initialValue: 0 }]" buttonStyle="solid" @change="nameTypeChange">
- <a-radio-button :value="0">统一命名</a-radio-button>
- <a-radio-button :value="1">分别命名</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="计划名称"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- v-if="getData('nameType') == 0"
- >
- <!-- campaignName -->
- <a-input
- class="rending"
- placeholder="请输入计划名称"
- v-model="campaignName"
- style="margin-bottom: 20px"
- ></a-input>
- <br />
- <a-tag color="#2db7f5" @click="getChange('项目名称', 0)">项目名称</a-tag>
- <a-tag color="#2db7f5" @click="getChange('计划类型', 0)">计划类型</a-tag>
- <a-tag color="#2db7f5" @click="getChange('日期', 0)">日期</a-tag>
- <a-tag color="#2db7f5" @click="getChange('数值', 0)">数值</a-tag>
- </a-form-item>
- <a-form-item
- label="计划名称"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- v-if="getData('nameType') == 1"
- >
- <!-- campaignName -->
- <!-- @change="callback" -->
- <!-- {{ tabs }} -->
- <a-tabs v-model="active" type="card">
- <a-tab-pane :key="item.accountId" :tab="item.authName" v-for="(item, index) of tabs">
- <div v-for="(items, indexBest) of item.campaignNames" :key="indexBest" style="margin-bottom: 10px">
- <a-input
- class="rending"
- placeholder="请输入计划名称"
- v-model="items.campaignName"
- style="margin-bottom: 10px"
- ></a-input>
- <br />
- <a-tag color="#2db7f5" @click="getChangeAll('项目名称', indexBest, index, items)">项目名称</a-tag>
- <a-tag color="#2db7f5" @click="getChangeAll('计划类型', indexBest, index, items)">计划类型</a-tag>
- <a-tag color="#2db7f5" @click="getChangeAll('日期', indexBest, index, items)">日期</a-tag>
- <a-tag color="#2db7f5" @click="getChangeAll('数值', indexBest, index, items)">数值</a-tag>
- </div>
- </a-tab-pane>
- </a-tabs>
- <!-- <a-input
- class="rending"
- placeholder="请输入计划名称"
- v-model="campaignName"
- style="margin-bottom: 20px"
- ></a-input>
- <br />
- <a-tag color="#2db7f5" @click="getChange('项目名称')">项目名称</a-tag>
- <a-tag color="#2db7f5" @click="getChange('计划类型')">计划类型</a-tag>
- <a-tag color="#2db7f5" @click="getChange('日期')">日期</a-tag>
- <a-tag color="#2db7f5" @click="getChange('数值')">数值</a-tag> -->
- </a-form-item>
- <a-form-item
- label="单日预算"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group @change="showBudgetStatusChange" v-model="campaignBudget">
- <a-radio-button value="UNLIMITED">不限</a-radio-button>
- <a-radio-button value="AS_BUDGET">统一预算</a-radio-button>
- <a-radio-button value="DAY_BUDGET">分日预算</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="预算金额"
- v-if="campaignBudget == 'AS_BUDGET'"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-input
- v-decorator="[
- 'dayBudget',
- { rules: [{ required: true, message: 'error:' }, { validator: handleConfirmValue }] },
- ]"
- placeholder="不小于500,不超过100000000,仅支持输入自然数"
- type="number"
- style="width: 70%"
- ></a-input
- >元
- </a-form-item>
- <a-form-item
- label="分日预算"
- v-if="campaignBudget == 'DAY_BUDGET'"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
- >
- <!-- <a-input
- v-decorator="[
- 'dayBudget',
- { rules: [{ required: true, message: 'error:' }, { validator: handleConfirmValue }] },
- ]"
- placeholder="不小于500,不超过100000000,仅支持输入自然数"
- type="number"
- style="width: 70%"
- ></a-input
- >元 -->
- <a-row>
- <a-col :span="3" v-for="(item, index) of dayBudgetSchedule" :key="index">
- <a-card :title="'周' + numberReturn(index)">
- <a-input-number :min="500" :max="100000000" v-model="item.one" :precision="1" />
- </a-card>
- </a-col>
- </a-row>
- </a-form-item>
- <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
- <a-button htmlType="submit" type="primary" :loading="loading">下一步</a-button>
- <!-- <a-button style="margin-left: 8px">保存</a-button> -->
- </a-form-item>
- </a-form>
- </a-card>
- </template>
- <script>
- import { deleteAction, postAction, getAction } from '@/api/manage'
- import moment from 'moment'
- import { mapActions, mapGetters } from 'vuex'
- import Treeselect from '@/views/modules/Statistics/components/Treeselect.vue'
- export default {
- name: 'create-campaign',
- components: {
- Treeselect,
- },
- data() {
- return {
- accountIds: [],
- active: null,
- promotionName: '',
- tabs: [],
- dayBudgetSchedule: [{ one: '' }, { one: '' }, { one: '' }, { one: '' }, { one: '' }, { one: '' }, { one: '' }],
- type: '2',
- typeList: {},
- appList: {},
- showBudgetDaily: false,
- campaignName: '',
- campaignBudget: 'UNLIMITED',
- dayBudget: 0,
- appId: '0', //应用目标
- showApp: true,
- redirectUrl: '', // 链接地址
- showRedirect: false,
- urlType: '1',
- showUrlType: false,
- channelType: '1',
- showChannelType: false,
- loading: false,
- form: this.$form.createForm(this),
- url: {
- dictListUrl: 'toutiao/dictitem/list',
- appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
- insertTemplateUrl: '/kuaishou/batch/campaignCreate',
- },
- createTotal: [],
- }
- },
- methods: {
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- numberReturn(num) {
- var arr = ['一', '二', '三', '四', '五', '六', '天']
- return arr[num]
- },
- getCampaignId(campaignId) {
- alert(1)
- },
- changeCreateTotal() {
- this.$nextTick(() => {
- this.createTotal = []
- for (let i = 0; i < this.getData('createTotal'); i++) {
- this.createTotal.push({ campaignName: '' })
- }
- })
- },
- nameTypeChange(e) {
- console.log(e.target.value)
- if (e.target.value == 1) {
- if (this.accountIds.length > 0) {
- postAction('/kuaishou/crossAccount/getAuthName', { accountArr: this.accountIds }).then((res) => {
- if (res.success) {
- this.tabs = res.result.map((item) => {
- return {
- ...item,
- campaignNames: JSON.parse(JSON.stringify(this.createTotal)),
- }
- })
- this.active = res.result[0].accountId
- } else {
- this.tabs = []
- }
- })
- }
- } else {
- }
- },
- getChangeAll(name, indexBest, index, items) {
- var node = document.getElementsByClassName('rending')[indexBest]
- var v = '{{' + name + '}}-'
- if (document.selection) {
- //IE
- node.focus()
- var sel = document.selection.createRange()
- sel.text = v
- sel.select()
- items.campaignName = v
- } else if (node.selectionStart || node.selectionStart == '0') {
- //MOZILLA/GOOGLE
- var startPos = node.selectionStart
- var endPos = node.selectionEnd
- var restoreTop = node.scrollTop
- node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
- if (restoreTop > 0) {
- node.scrollTop = restoreTop
- }
- items.campaignName = node.value
- node.focus()
- node.selectionStart = startPos + v.length
- node.selectionEnd = startPos + v.length
- // this.campaignName = node.value
- } else {
- //OTHER
- node.value += v
- items.campaignName = node.value
- node.focus()
- // this.campaignName = node.value
- }
- },
- getChange(name, index) {
- console.log(index, document.getElementsByClassName('rending'))
- var node = document.getElementsByClassName('rending')[index]
- var v = '{{' + name + '}}-'
- if (document.selection) {
- //IE
- node.focus()
- var sel = document.selection.createRange()
- sel.text = v
- sel.select()
- this.campaignName = v
- } else if (node.selectionStart || node.selectionStart == '0') {
- //MOZILLA/GOOGLE
- var startPos = node.selectionStart
- var endPos = node.selectionEnd
- var restoreTop = node.scrollTop
- node.value = node.value.substring(0, startPos) + v + node.value.substring(endPos, node.value.length)
- if (restoreTop > 0) {
- node.scrollTop = restoreTop
- }
- this.campaignName = node.value
- node.focus()
- node.selectionStart = startPos + v.length
- node.selectionEnd = startPos + v.length
- // this.campaignName = node.value
- } else {
- //OTHER
- node.value += v
- this.campaignName = node.value
- node.focus()
- // this.campaignName = node.value
- }
- },
- handleConfirmValue(rule, value, callback) {
- if (value == '' || value < 500 || value >= 100000000) {
- callback('请输入正确预算金额')
- }
- callback()
- },
- handleConfirmAppId(rule, value, callback) {
- if (this.type == 2 && (this.appId == '0' || this.appId == '')) {
- callback('请选择目标应用')
- }
- callback()
- },
- handleSubmit(e) {
- e.preventDefault()
- this.form.validateFields((err, values) => {
- if (!err) {
- this.loading = true
- let params = {}
- params.type = values.type
- // params.campaignBudget = this.campaignBudget
- if (this.campaignBudget == 'UNLIMITED') {
- params.dayBudget = 0
- } else if (this.campaignBudget == 'AS_BUDGET') {
- params.dayBudget = values.dayBudget * 1000
- } else {
- params.dayBudgetSchedule = this.dayBudgetSchedule.map((item) => {
- if (item.one == '') {
- return 0
- } else {
- return item.one * 1000
- }
- })
- }
- if (this.getData('nameType') == 0) {
- var dataArr = this.campaignName.split('-')
- if (dataArr[dataArr.length - 1] == '') {
- dataArr.pop()
- }
- params.campaignName = dataArr.join('-')
- } else {
- params.nameArr = this.tabs.map((item) => {
- return {
- accountId: item.accountId,
- campaignNames: item.campaignNames.map((i) => {
- return i.campaignName
- }),
- }
- })
- }
- params.accountArr = this.accountIds
- params.nameType = values.nameType
- params.createTotal = values.createTotal
- console.log(params)
- postAction('/kuaishou/crossAccount/batchCampaignCreate', params).then((res) => {
- console.log(res)
- if (res.success) {
- this.$message.success('创建成功')
- localStorage.setItem('campaignId', res.result)
- this.loading = false
- this.nextStep(res.result)
- } else {
- this.$message.error(res.message)
- this.loading = false
- }
- })
- }
- })
- },
- onChange(value) {
- console.log(value)
- },
- showBudgetStatusChange() {
- if (this.campaignBudget == 'UNLIMITED') {
- this.showBudgetDaily = false
- this.dayBudget = 0
- } else {
- this.showBudgetDaily = true
- this.dayBudget = ''
- }
- },
- typeChange() {
- if (this.type == 2) {
- this.promotionName = '提升应用安装'
- this.showApp = true
- this.showRedirect = false
- this.showUrlType = false
- this.showChannelType = false
- }
- if (this.type == 3) {
- this.promotionName = '获取电商下单'
- this.showApp = false
- this.showRedirect = true
- this.showUrlType = true
- this.showChannelType = false
- }
- if (this.type == 4) {
- this.promotionName = '推广品牌活动'
- this.showApp = false
- this.showRedirect = true
- this.showUrlType = false
- this.showChannelType = false
- }
- if (this.type == 5) {
- this.promotionName = '收集销售线索'
- this.showApp = false
- this.showRedirect = true
- this.showUrlType = false
- this.showChannelType = true
- }
- this.campaignName = this.promotionName + '_' + moment(new Date())
- },
- handleChange(value) {
- console.log(`selected ${value}`)
- },
- handleBlur() {
- console.log('blur')
- },
- handleFocus() {
- console.log('focus')
- },
- filterOption(input, option) {
- return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
- },
- nextStep() {
- this.$emit('nextStep')
- },
- getData(className) {
- return this.form.getFieldValue(className)
- },
- },
- mounted: function () {
- this.$nextTick(() => {
- this.changeCreateTotal()
- })
- },
- }
- </script>
|