123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280 |
- <template>
- <a-card :body-style="{ padding: '24px 32px' }" :bordered="false">
- <a-form @submit="handleSubmit" :form="form">
- <a-form-item
- label="推广目的"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group @change="typeChange" v-model="type" 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 } }"
- >
- <a-input v-model="campaignName"></a-input>
- </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-group>
- </a-form-item>
- <a-form-item
- label="预算金额"
- v-if="showBudgetDaily"
- :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
- v-if="showApp"
- label="目标应用"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-select
- v-model="appId"
- showSearch
- allowClear
- placeholder="选择应用目标"
- optionFilterProp="children"
- style="width: 600px"
- @focus="handleFocus"
- @blur="handleBlur"
- @change="handleChange"
- :filterOption="filterOption"
- >
- <a-select-option v-for="appModel in appList" :key="appModel.id" :value="appModel.id"
- >{{ appModel.appName }}   {{ appModel.appType }}  
- {{ appModel.appVersion }}</a-select-option
- >
- </a-select>
- </a-form-item>
- <a-form-item
- v-if="showUrlType"
- label="转化类型"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group v-model="urlType">
- <a-radio-button value="1">淘宝商品短链</a-radio-button>
- <a-radio-button value="2">淘宝商品</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- v-if="showChannelType"
- label="转化类型"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-radio-group v-model="channelType">
- <a-radio-button value="1">填写链接</a-radio-button>
- <a-radio-button value="2" disabled="disabled">落地页工具</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- v-if="showRedirect"
- label="链接地址"
- :labelCol="{ lg: { span: 7 }, sm: { span: 7 } }"
- :wrapperCol="{ lg: { span: 10 }, sm: { span: 17 } }"
- >
- <a-input v-model="redirectUrl"></a-input>
- </a-form-item> -->
- <a-form-item :wrapperCol="{ span: 24 }" style="text-align: center">
- <a-button htmlType="submit" type="primary">下一步</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'
- export default {
- name: 'BaseForm',
- data() {
- return {
- promotionName: '',
- type: '2',
- typeList: {},
- appList: {},
- showBudgetDaily: false,
- campaignName: '提升应用安装_' + moment(new Date()),
- campaignBudget: 'UNLIMITED',
- dayBudget: 0,
- appId: '0', //应用目标
- showApp: true,
- redirectUrl: '', // 链接地址
- showRedirect: false,
- urlType: '1',
- showUrlType: false,
- channelType: '1',
- showChannelType: false,
- form: this.$form.createForm(this),
- url: {
- dictListUrl: 'toutiao/dictitem/list',
- appListUrl: '/kuaishou/kuaiShouCreateAppTemplate/list',
- insertTemplateUrl: '/kuaishou/batch/campaignCreate'
- }
- }
- },
- methods: {
- ...mapGetters(['nickname', 'avatar', 'userInfo']),
- 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) {
- console.log('Received values of form: ', values)
- let params = {}
- params.type = this.type
- // params.campaignBudget = this.campaignBudget
- params.dayBudget = this.campaignBudget == 'UNLIMITED' ? 0 : values.dayBudget
- params.campaignName = this.campaignName
- params.accountId = localStorage.getItem('accountId')
- console.log(params)
- postAction(this.url.insertTemplateUrl, params).then(res => {
- console.log(res)
- if (res.success) {
- this.$message.success('创建成功')
- this.nextStep(res.result)
- } else {
- this.$message.error(res.message)
- }
- })
- }
- })
- },
- 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')
- }
- },
- activated: function() {
- // //出价方式
- // let params = {}
- // params.dictId = '181afbae847dd3bc7e27795d8958956'
- // params.pageSize = '1000'
- // getAction(this.url.dictListUrl, params).then(res => {
- // if (res.success) {
- // this.typeList = res.result.records
- // }
- // })
- // // 应用列表
- // //出价方式
- // let params2 = {}
- // params2.loginId = this.userInfo().id
- // params2.pageSize = '1000'
- // getAction(this.url.appListUrl, params).then(res => {
- // if (res.success) {
- // this.appList = res.result.records
- // console.log(this.appList)
- // }
- // })
- }
- }
- </script>
|