123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237 |
- <template>
- <a-modal
- :title="title"
- :width="800"
- :visible="visible"
- :confirmLoading="confirmLoading"
- @ok="handleSubmit"
- @cancel="handleCancel"
- cancelText="关闭">
-
- <a-spin :spinning="confirmLoading">
- <a-form :form="form">
- <a-form-item
- label="投放目标"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-radio-group @change="onChangeDeliveryTarget" v-model="deliveryTarget">
- <a-radio-button value="a">转化量</a-radio-button>
- <a-radio-button value="b">点击量</a-radio-button>
- <a-radio-button value="c">展示量</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="下载方式"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-radio-group @change="onChangeDownloadType" v-model="downloadType">
- <a-radio-button value="DOWNLOAD_URL">下载链接</a-radio-button>
- <a-radio-button value="EXTERNAL_URL">落地页</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="下载链接"
- v-if="showDownloadUrl"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-input placeholder="请输入网址或从之前网站选择" v-model="downloadUrl"/>
- </a-form-item>
- <a-form-item
- v-if="showExternalUrl"
- label="链接地址"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-input placeholder="请输入网址或从之前网站选择" v-model="externalUrl"/>
- </a-form-item>
- <a-form-item
- v-if="showConvertTarget"
- label="转化目标"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-input placeholder="请输入网址或从之前网站选择" v-model="convertTarget"/>
- </a-form-item>
- <a-form-item
- label="应用包名"
- v-if="showPackageName"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-input v-model="packageName"></a-input>
- </a-form-item>
- <a-form-item
- label="直达链接"
- v-if="showOpenUrlStatus"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-radio-group @change="onChangeOpenUrlStatus" v-model="openUrlStatus">
- <a-radio-button value="disabled">不启用</a-radio-button>
- <a-radio-button value="enabled">启用</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="直达链接生成方式"
- v-if="showOpenUrlCreateMode&&showOpenUrlStatus"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-radio-group v-model="openUrlCreateMode">
- <a-radio-button value="auto_create" disabled>自动生成</a-radio-button>
- <a-radio-button value="hand_create">手动生成</a-radio-button>
- </a-radio-group>
- </a-form-item>
- <a-form-item
- label="跳转app链接"
- v-if="showToAppUrl&&showOpenUrlStatus"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-input v-model="redirectUrl"></a-input>
- </a-form-item>
- <a-form-item
- label="模板名称"
- :labelCol="labelCol"
- :wrapperCol="wrapperCol">
- <a-input v-model="templateName"></a-input>
- </a-form-item>
- </a-form>
- </a-spin>
- </a-modal>
- </template>
- <script>
- import {deleteAction, postAction, getAction} from '@/api/manage'
- import $ from 'jquery'
- import moment from 'moment';
- export default {
- name: 'BytedanceDeliveryTargetTemplateModal',
- data() {
- return {
- title:"操作",
- visible: false,
- model: {},
- labelCol: {
- xs: { span: 24 },
- sm: { span: 5 },
- },
- wrapperCol: {
- xs: { span: 24 },
- sm: { span: 16 },
- },
- templateName:'',
- confirmLoading: false,
- form: this.$form.createForm(this),
- deliveryTarget:'a',
- packageName:'',
- downloadType:'DOWNLOAD_URL',
- downloadUrl:'',
- externalUrl:'',
- convertTarget:'',
- showDownloadUrl:true,
- showExternalUrl:false,
- showConvertTarget:true,
- showPackageName:true,
- showOpenUrlStatus:false,
- openUrlStatus:'disabled',
- redirectUrl:'',
- showToAppUrl:false,
- showOpenUrlCreateMode:false,
- openUrlCreateMode:'hand_create',
- url: {
- dictListUrl: 'toutiao/dictitem/list',
- insertUrl:'template/deliverytarget/insert'
- }
- }
- },
- methods: {
- // handler
- handleCancel () {
- this.close()
- },
- add () {
- this.edit({});
- },
- edit (record) {
- this.form.resetFields();
- this.model = Object.assign({}, record);
- this.visible = true;
- this.$nextTick(() => {
- this.form.setFieldsValue(pick(this.model,'accountId','advertiserId','deliveryTarget','downloadType','downloadUrl','externalUrl','convertTarget','packageName','openUrlStatus','openUrlCreateMode','redirectUrl','status'))
- //时间格式化
- });
- },
- close () {
- this.$emit('close');
- this.visible = false;
- },
- handleSubmit(e) {
- e.preventDefault()
- this.form.validateFields((err, values) => {
- if (!err) {
- console.log('Received values of form: ', values);
- let params = {};
- params.deliveryTarget = this.deliveryTarget;
- params.downloadType = this.downloadType;
- params.downloadUrl = this.downloadUrl;
- params.externalUrl = this.externalUrl;
- params.convertTarget = this.convertTarget;
- params.packageName = this.packageName;
- params.openUrlStatus = this.openUrlStatus;
- params.openUrlCreateMode = this.openUrlCreateMode;
- params.redirectUrl = this.redirectUrl;
- console.log(params)
- postAction(this.url.insertUrl,params).then((res)=>{
- console.log(res)
- if(res.success){
- alert("投放目标-模板创建成功");
- }
- });
- }
- })
- },
- onChange(value) {
- console.log(value);
- },
- onChangeDownloadType(value){
- console.log(value);
- if(this.downloadType == 'DOWNLOAD_URL'){
- this.showDownloadUrl = true;
- this.showExternalUrl = false;
- this.showPackageName=true;
- this.showOpenUrlStatus=false;
- }else{
- this.showDownloadUrl = false;
- this.showExternalUrl = true;
- this.showPackageName=false;
- this.showOpenUrlStatus=true;
- }
- },
- onChangeDeliveryTarget(value){
- console.log(value);
- if(this.deliveryTarget == 'a'){
- this.showConvertTarget = true;
- }else {
- this.showConvertTarget = false;
- }
- },
- onChangeOpenUrlStatus(){
- if(this.openUrlStatus=='disabled'){
- this.showOpenUrlCreateMode = false;
- this.showToAppUrl = false;
- }else{
- this.showOpenUrlCreateMode = true;
- this.showToAppUrl = true;
- }
- }
- }
- }
- </script>
- <style lang="less" scoped>
- </style>
|